Solve the problem of rapid index bar extrusion

 Some time ago, I encountered the problem that the quick index bar was squeezed , I made one demo To study .
 First describe the problem , In the interface of a contact , List in layout , A presentation contact , A quick index of letters .
 The problem now is ,
 When typing in the search box , Because the soft keyboard pops up , Cause the overall layout to move up , Thus, the quick index bar is squeezed , Cause the letters to overlap , The interface is messy .
 Here's the picture ：

 The layout file looks like this ：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ll_find">

<TextView
android:id="@+id/tv_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Search for ："/>
<EditText
android:id="@+id/et_find_contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint=" Please enter the contact "
android:layout_toRightOf="@id/tv_find"
/>
</LinearLayout>

<LinearLayout
android:id="@+id/city_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/ll_find"
android:orientation="horizontal" >

<ListView android:id="@+id/list_view"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:scrollbars="vertical"
android:cacheColorHint="#00000000" />
<com.droid.MyLetterListView
android:id="@+id/MyLetterListView01"
android:background="#40000000"
android:layout_width="30dip"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />

</LinearLayout>

</LinearLayout>

MyLetterListView It's a custom View, It was done by an online elder .
 The implementation code is as follows ：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.text.style.TypefaceSpan;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class MyLetterListView extends View {
OnTouchingLetterChangedListener onTouchingLetterChangedListener;
String[] b = {"#","A","B","C","D","E","F","G","H","I","J","K","L"
,"M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"};
int choose = -1;
Paint paint = new Paint();
boolean showBkg = false;
public MyLetterListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyLetterListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyLetterListView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(showBkg){
   canvas.drawColor(Color.parseColor("#40000000"));
}
   int height = getHeight();
   int width = getWidth();
   int singleHeight = height / b.length;
   for(int i=0;i<b.length;i++){
      paint.setColor(Color.WHITE);
      paint.setTypeface(Typeface.DEFAULT_BOLD);
      paint.setAntiAlias(true);
      if(i == choose){
      paint.setColor(Color.parseColor("#3399ff"));
      paint.setFakeBoldText(true);
      }
      float xPos = width/2  - paint.measureText(b[i])/2;
      float yPos = singleHeight * i + singleHeight;
      canvas.drawText(b[i], xPos, yPos, paint);
      paint.reset();
   }   
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
final int action = event.getAction();
   final float y = event.getY();
   final int oldChoose = choose;
   final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
   final int c = (int) (y/getHeight()*b.length);
   
switch (action) {
case MotionEvent.ACTION_DOWN:
showBkg = true;
if(oldChoose != c && listener != null){
if(c > 0 && c< b.length){
listener.onTouchingLetterChanged(b[c]);
choose = c;
invalidate();
}
}
break;
case MotionEvent.ACTION_MOVE:
if(oldChoose != c && listener != null){
if(c > 0 && c< b.length){
listener.onTouchingLetterChanged(b[c]);
choose = c;
invalidate();
}
}
break;
case MotionEvent.ACTION_UP:
showBkg = false;
choose = -1;
invalidate();
break;
}
return true;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return super.onTouchEvent(event);
}
public void setOnTouchingLetterChangedListener(
OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
}
public interface OnTouchingLetterChangedListener{
public void onTouchingLetterChanged(String s);
}
}

 The first method I came up with , Is to maintain a minimum height , In order to avoid the letters superimposed on each other, which makes it impossible to see .
 But it can be directly set in the layout file minHeigth, No effect .
 Then it should be that this value is not customized View Use in .
 terms of settlement , Is in the  onDraw()  Method inside , To get in xml The minimum height value set in the layout ：
int minHeight = getSuggestedMinimumHeight();
 In the calculation View Altitude time , Add this limitation , Ensure that no matter how you switch , Keep the height value greater than or equal to the minimum height , Then we can avoid overlapping problems .
 This minimum value , Through twoorthree times of operation and debugging , It can be roughly determined , It can ensure that each letter can be displayed completely .
 however , The measured found , Initial display height , It is inconsistent with the minimum height value set after the keyboard pops up , Thus, it is found that the alphabetic quick index column is changing , It feels a little unnatural .
 How to make the interface look natural ？ It's best not to feel the change of the alphabetic quick index column ！
 What do I do ？
 It's also very simple. , Just remember View Height value at the first presentation , You can use it later .
 The main thing is to modify  onDraw() And dispatchTouchEvent() , The modified code is as follows ：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.text.style.TypefaceSpan;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class MyLetterListView extends View {
OnTouchingLetterChangedListener onTouchingLetterChangedListener;
String[] b = {"#","A","B","C","D","E","F","G","H","I","J","K","L"
,"M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"};
int choose = -1;
Paint paint = new Paint();
boolean showBkg = false;
int listViewHeight=0;
public MyLetterListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyLetterListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyLetterListView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(showBkg){
   canvas.drawColor(Color.parseColor("#40000000"));
}
int height = getHeight();//  Get the corresponding height 
int width = getWidth();//  Get the corresponding width 
int minHeight = getSuggestedMinimumHeight();
LogUtil.logWithMethod(new Exception(),"height="+height+" minHeight="+minHeight);
if(false) {
// There will be an alphabetic index squeeze problem -- When the soft keyboard pops up 
listViewHeight = height;
} else {
// There will be no letter index squeeze problem 
// Ensure the minimum height value 
if (height < minHeight) {
height = minHeight;
} else {
// listViewHeight = height;
}
// Remember the maximum height obtained , Increase or decrease 
if (listViewHeight < height) {
listViewHeight = height;
}
}
LogUtil.logWithMethod(new Exception(),"listViewHeight="+listViewHeight);
int singleHeight = listViewHeight / b.length;//  Get the height of each letter 
// int singleHeight = getHeight() / b.length;//  Get the height of each letter 
   for(int i=0;i<b.length;i++){
      paint.setColor(Color.WHITE);
paint.setTextSize(30);
paint.setTypeface(Typeface.DEFAULT_BOLD);
paint.setAntiAlias(true);
//  The selected state 
if (i == choose) {
paint.setColor(Color.parseColor("#3399ff"));
paint.setFakeBoldText(true);
}
// x The coordinates are equal to the middle - Half the width of the string .
float xPos = width / 2 - paint.measureText(b[i]) / 2;
float yPos = singleHeight * i + singleHeight;
canvas.drawText(b[i], xPos, yPos, paint);
paint.reset();//  Reset brush 
   }   
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
final int action = event.getAction();
final float y = event.getY();//  Click on y coordinate 
final int oldChoose = choose;
final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
// final int c = (int) (y / getHeight() * b.length);//  Click on y The proportion of coordinates to the total height *b The length of the array is equal to clicking b Number of in .
final int c = (int) ( (y* b.length) / listViewHeight );//  Click on y The proportion of coordinates to the total height *b The length of the array is equal to clicking b Number of in .
LogUtil.logWithMethod(new Exception(),"y="+y+" b.length="+b.length+" listViewHeight="+listViewHeight);
switch (action) {
case MotionEvent.ACTION_DOWN:
showBkg = true;
if (oldChoose != c && listener != null) {
if (c > 0 && c < b.length) {
LogUtil.logWithMethod(new Exception(),"c="+c);
listener.onTouchingLetterChanged(b[c]);
choose = c;
invalidate();
}
}
break;
case MotionEvent.ACTION_MOVE:
if (oldChoose != c && listener != null) {
if (c > 0 && c < b.length) {
listener.onTouchingLetterChanged(b[c]);
choose = c;
invalidate();
}
}
break;
case MotionEvent.ACTION_UP:
showBkg = false;
choose = -1;
invalidate();
break;
}
return true;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return super.onTouchEvent(event);
}
public void setOnTouchingLetterChangedListener(
OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
}
public interface OnTouchingLetterChangedListener{
public void onTouchingLetterChanged(String s);
}
}

 such , It perfectly solves the problem of letter squeezing .
 however , Later, another solution was found , And it's very simple ！
 It's up there xml In layout file , Use RelativeLayout  Instead of  LinearLayout  that will do .
 The modified layout file is as follows ：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ll_find">
<TextView
android:id="@+id/tv_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Search for ："/>
<EditText
android:id="@+id/et_find_contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint=" Please enter the contact "
android:layout_toRightOf="@id/tv_find"
/>
</LinearLayout>
<RelativeLayout 
android:orientation="vertical"  
android:layout_width="fill_parent"  
android:layout_height="fill_parent" > 
 
<ListView android:id="@+id/list_view" 
android:layout_height="wrap_content" 
android:layout_width="fill_parent"
android:scrollbars="none"
android:cacheColorHint="#00000000" />
<com.droid.MyLetterListView 
android:id="@+id/MyLetterListView01" 
android:background="#40000000" 
android:layout_width="30dip" 
android:layout_height="fill_parent"
android:layout_alignParentRight="true" />
</RelativeLayout> 
</LinearLayout>

 Complete project , See the following address ：

http://download.csdn.net/download/lintax/10043708

 Reference resources ：
http://blog.csdn.net/zpp119/article/details/7976139
http://www.javaapk.com/topics/demo/5894.html
http://www.2cto.com/kf/201311/258190.html

 To sum up , Ben demo Compared with the prototype , There are several improvements ：
1, Two lists View Layout , Cannot overlap each other , So as to avoid clicking on the left contact when clicking on the quick index bar ;
2, Click on the input box , When the soft keyboard pops up , Indexes ListView Compression of , Cause characters to overlap ;
1, Use minimum height value , To protect , Avoid overlapping characters ;
2, Remember the height value before the soft keyboard pops up , Keep consistent in visual effect ;
3, Use the switch , It can switch the contacts using the mobile phone or read a fixed contact file （ Convenient for demonstration and testing ）;
4, Use the switch , It can be switched to the extrusion state .