ListView 实现点击侧边A-Z快速查找[中英文混排]

ListView 实现点击侧边A-Z快速查找[中英文混排]

相信大家一定见过这样的一个效果吧，也相信大家也在网上找到了许多的例子，但是大多的都是残缺不全的，没能真正的实现大家的一个效果吧，那么今天我就和大家分享我的这个完全的源代码，希望能对大家有所帮助吧，需要的人可以直接拿过去用，至于技术点嘛，其实没什么的，对于获取拼音的用到了一个pinyin4j-2.5.0.jar 这个jar 包，可以帮助我们实现效果。

还是直接上效果图，之后再上源码吧。

先看旁边的那个26 个字母控件的实现：

自己画了出26 个字母。

public  class  MySideBar extends  View {

        OnTouchingLetterChangedListener onTouchingLetterChangedListener;
        // 26个字母
        public  static  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();

        public  MySideBar(Context context, AttributeSet attrs, int  defStyle) {
                super (context, attrs, defStyle);
        }

        public  MySideBar(Context context, AttributeSet attrs) {
                super (context, attrs);
        }

        public  MySideBar(Context context) {
                super (context);
        }

        /**
         * 重写这个方法
         */
        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.BLACK);
                        // paint.setColor(Color.WHITE);
                        paint.setTypeface(Typeface.DEFAULT_BOLD);
                        paint.setAntiAlias( true );
                        paint.setTextSize( 20 );
                        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();
                }

        }

        private  boolean  showBkg = false ;

        @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);
        }

        /**
         * 向外公开的方法
         *
         * @param onTouchingLetterChangedListener
         */
        public  void  setOnTouchingLetterChangedListener(
                        OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
                this .onTouchingLetterChangedListener = onTouchingLetterChangedListener;
        }

        /**
         * 接口
         *
         * @author coder
         *
         */
        public  interface  OnTouchingLetterChangedListener {
                public  void  onTouchingLetterChanged(String s);
        }

}

　　再看布局文件的实现，这里用到FrameLayout来实现

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

    <FrameLayout
        android:id= "@+id/llParent"
        android:layout_width= "fill_parent"
        android:layout_height= "fill_parent"
        android:orientation= "vertical"  >

        <ListView
            android:id= "@+id/lvShow"
            android:layout_width= "fill_parent"
            android:layout_height= "fill_parent"  />

        <TextView
            android:id= "@+id/tvLetter"
            android:layout_width= "wrap_content"
            android:layout_height= "wrap_content"
            android:layout_gravity= "center"
            android:background= "@drawable/show_head_toast_bg"
            android:gravity= "center"
            android:maxWidth= "70dip"
            android:minWidth= "70dip"
            android:padding= "10dip"
            android:textColor= "#99FFFFFF"
            android:textSize= "50sp"  >
        </TextView>

        <com.jiahui.view.MySideBar
            android:id= "@+id/myView"
            android:layout_width= "30dip"
            android:layout_height= "fill_parent"
            android:layout_gravity= "right"  >
        </com.jiahui.view.MySideBar>
    </FrameLayout>

</LinearLayout>

　　接下来再看Activity里的实现了，详细的请直接看代码吧

public  class  TestActivity extends  Activity implements
                OnTouchingLetterChangedListener {

        private  ListView lvShow;
        private  List<UserInfo> userInfos;
        private  TextView overlay;
        private  MySideBar myView;
        private  MyUserInfoAdapter adapter;

        private  OverlayThread overlayThread = new  OverlayThread();

        @Override
        protected  void  onCreate(Bundle savedInstanceState) {
                // TODO Auto-generated method stub
                super .onCreate(savedInstanceState);

                setContentView(R.layout.main);
                lvShow = (ListView) findViewById(R.id.lvShow);
                myView = (MySideBar) findViewById(R.id.myView);

                overlay = (TextView) findViewById(R.id.tvLetter);

                lvShow.setTextFilterEnabled( true );
                overlay.setVisibility(View.INVISIBLE);

                getUserInfos();

                Log.i( "coder" , "userInfos.size"  + userInfos.size());
                adapter = new  MyUserInfoAdapter( this , userInfos);

                lvShow.setAdapter(adapter);

                myView.setOnTouchingLetterChangedListener( this );

        }

        private  void  getUserInfos() {

                UserInfo[] userinfoArray = new  UserInfo[] {
                                new  UserInfo( "唐僧" , "18765432345" , PinyinUtils.getAlpha( "唐僧" )),
                                new  UserInfo( "猪师弟" , "18765432345" , PinyinUtils.getAlpha( "猪师弟" )),
                                new  UserInfo( "阿呆" , "18765432345" , PinyinUtils.getAlpha( "阿呆" )),
                                new  UserInfo( "8899" , "18765432345" ,
                                                PinyinUtils.getAlpha( "8899" )),
                                new  UserInfo( "孙悟空" , "18765432345" , PinyinUtils.getAlpha( "孙悟空" )),
                                new  UserInfo( "阿三" , "18765432345" , PinyinUtils.getAlpha( "阿三" )),
                                new  UserInfo( "张三" , "18765432345" , PinyinUtils.getAlpha( "张三" )),
                                new  UserInfo( "张二B" , "18876569008" , PinyinUtils.getAlpha( "张二B" )),
                                new  UserInfo( "阿三" , "18765432345" , PinyinUtils.getAlpha( "阿三" )),
                                new  UserInfo( "张三" , "18765432345" , PinyinUtils.getAlpha( "张三" )),
                                new  UserInfo( "张二B" , "18876569008" , PinyinUtils.getAlpha( "张二B" )),
                                new  UserInfo( "阿三" , "18765432345" , PinyinUtils.getAlpha( "阿三" )),
                                new  UserInfo( "张三" , "18765432345" , PinyinUtils.getAlpha( "张三" )),
                                new  UserInfo( "张二B" , "18876569008" , PinyinUtils.getAlpha( "张二B" )),
                                new  UserInfo( "阿三" , "18765432345" , PinyinUtils.getAlpha( "阿三" )),
                                new  UserInfo( "张三" , "18765432345" , PinyinUtils.getAlpha( "张三" )),
                                new  UserInfo( "张二B" , "18876569008" , PinyinUtils.getAlpha( "张二B" )),
                                new  UserInfo( "李四" , "18909876545" , PinyinUtils.getAlpha( "李四" )),
                                new  UserInfo( "王小二" , "18909876545" , PinyinUtils.getAlpha( "王小二" )),
                                new  UserInfo( "张三丰" , "18909876545" , PinyinUtils.getAlpha( "张三丰" )),
                                new  UserInfo( "郭靖" , "18909876545" , PinyinUtils.getAlpha( "郭靖" )),
                                new  UserInfo( "张无忌" , "18909876545" , PinyinUtils.getAlpha( "张无忌" )),
                                new  UserInfo( "黄小贤" , "18909876545" , PinyinUtils.getAlpha( "黄小贤" )) };

                Arrays.sort(userinfoArray, new  PinyinComparator());

                userInfos = Arrays.asList(userinfoArray);

        }

        private  Handler handler = new  Handler() {
        };

        private  class  OverlayThread implements  Runnable {

                public  void  run() {
                        overlay.setVisibility(View.GONE);
                }

        }

        @Override
        public  void  onTouchingLetterChanged(String s) {
                Log.i( "coder" , "s:"  + s);

                overlay.setText(s);
                overlay.setVisibility(View.VISIBLE);
                handler.removeCallbacks(overlayThread);
                handler.postDelayed(overlayThread, 1000 );
                if  (alphaIndexer(s) > 0 ) {
                        int  position = alphaIndexer(s);
                        Log.i( "coder" , "position:"  + position);
                        lvShow.setSelection(position);

                }
        }

        public  int  alphaIndexer(String s) {
                int  position = 0 ;
                for  ( int  i = 0 ; i < userInfos.size(); i++) {

                        if  (userInfos.get(i).getPy().startsWith(s)) {
                                position = i;
                                break ;
                        }
                }
                Log.i( "coder" , "i"  + position + userInfos.get(position));
                return  position;
        }

}

　　好了这样的一效果就算完成了，也希望大家能分享更多的东西出来，大家一起成长一起学习！