android中带索引的列表-----索引的高级使用

在Android中索引无处不在 比如通讯录 方便检索信息的展示页等

下面来介绍一个带索引检索的简约实用的list,首先来看效果图:

由于csdn 上传gif限制 图片略失真;

在这个demo中主要实现了如下功能:
1.在listView快速滑动时 检索索引在右侧出现,当滑动结束 ,不触摸索引条,3s后 索引渐变消失
2.listView随着索引的滑动点击 滑动到相应位置 如果是拼音 建议导入拼音包来检索
3.在索引条上滑动时候,屏幕中间 会有灰色来显示检索的关键字

1 初始化数据

接下来看代码 详解代码逻辑:
首先看MainActivity,这是比较简单的代码,只展示:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        initView();

        initData();

        initEvent();

    }

    private void initData() {
        mItems = new ArrayList<String>();
        mItems.add("A 想念这过去的朋友 我们的爱变成期待");
        mItems.add("Steve Jobs");
        mItems.add("Inheritance (The Inheritance Cycle)");
        mItems.add("17/08/15 Good Moment");
        mItems.add("Title Is Mine");
        mItems.add("Book For My Firend");
        mItems.add("E 北京的夏晚  独自走在安河桥北");
        mItems.add("C 人潮人落 加班撸代码到深夜程序员的痛");
        mItems.add("Every Body I M Super Soul");
        mItems.add("Death Comes to Pemberley");
        mItems.add("B OK 笨鸟当先飞 亦当迟回");
        mItems.add("Steve Jobs");
        mItems.add("Inheritance (The Inheritance Cycle)");
        mItems.add("11/22/63: A Novel");
        mItems.add("The Hunger Games");
        mItems.add("TC 加油 希望未来会感谢现在的自己");
        mItems.add("Explosive Eighteen: A Stephanie Plum Novel");
        mItems.add("Catching Fire (The Second Book of the Hunger Games)");
        mItems.add("Elder Scrolls V: Skyrim: Prima Official Game Guide");
        mItems.add("Death Comes to Pemberley");

        //对集合进行排序
        Collections.sort(mItems);

    }

    private void initEvent() {
        SectionAdapter adapter = new SectionAdapter(this, android.R.layout.simple_list_item_1,mItems);
        mList.setAdapter(adapter);
        mList.setFastScrollEnabled(true);
    }

    private void initView() {

        mList = (ListView) findViewById(R.id.listView);

    }

2 初始化Adapter 实现 SectionIndexer

下面来看 Adaper 这里impletement SectionIndexer ,完成索引条数据的初始化和索引和listViewItem的匹配逻辑

public class SectionAdapter extends ArrayAdapter<String> implements SectionIndexer{


        private String mSection = "#ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        public SectionAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List<String> objects) {
            super(context, resource, objects);
        }


        //获取全部索引
        @Override
        public Object[] getSections() {
            String[] section = new String[mSection.length()];
            for (int i = 0; i < mSection.length(); i++) {
                section[i] = String.valueOf(mSection.charAt(i));
            }
            return section;
        }

        @Override
        public int getPositionForSection(int section) {

            for (int i = section; i >= 0; i--) {

                for (int j = 0; j < getCount(); j++) {

                    if (i == 0){

                        for (int k = 0; k < 9; k++) {
                            if (StringMatcher.match(String.valueOf(getItem(j).charAt(0)),String.valueOf(k)))
                                return j;
                        }

                    }else {
                        if (StringMatcher.match(String.valueOf(getItem(j).charAt(0)),
                                String.valueOf(mSection.charAt(i))))
                            return j;

                    }

                }
            }


            return 0;
        }

        @Override
        public int getSectionForPosition(int pos) {
            return 0;
        }
    }
}

在这里主要看两个方法:getSections()和getPositionForSection(int section);在getSection中完成索引集合的填充和返回(详细看上一块代码);
在这里我们主要看下getPositionForSection(int section):

 @Override
        public int getPositionForSection(int section) {
            for (int i = section; i >= 0; i--) {
                for (int j = 0; j < getCount(); j++) {
                    if (i == 0){
                        for (int k = 0; k < 9; k++) {
                            if (StringMatcher.match(String.valueOf(getItem(j).charAt(0)),String.valueOf(k)))
                                return j;
                        }
                    }else {
                        if (StringMatcher.match(String.valueOf(getItem(j).charAt(0)),
                                String.valueOf(mSection.charAt(i))))
                            return j;
                    }
                }
            }
            return 0;
        }

这里双重循环,索引条中”#”和”A~Z”分别匹配ListView首字母为数字和A~Z的字母,在这个demo中略有局限,有需求 可以单独导入拼音包;殊途同归,下面 看匹配算法StringMatcher.match:就是一个java的API:

public static boolean match(String text,String keyword){
        return text.contains(keyword) ;
    }

有兴趣的可以自己手写实现,不同我觉得没必要 , 毕竟都是有经验的程序员;

3

        接着我们看自定义的listView:

 @Override
    public boolean isFastScrollEnabled() {
        return mIsFast;
    }


    //设置快速滑动
    @Override
    public void setFastScrollEnabled(boolean enabled) {
        //super.setFastScrollEnabled(enabled);
        mIsFast = enabled;
        //Log.i("==onDraw",enabled + "");

        if (mIsFast){
            if (mScroll == null){
                mScroll = new IndexScroll(getContext(),this);
            }
        }else{
            if (mScroll != null)
            {
                mScroll.hide();
                mScroll = null;
            }
        }

    }

    @Override
    public void setAdapter(ListAdapter adapter) {
        super.setAdapter(adapter);
        if (mScroll != null){
            Log.i("===","setAdapter");
            mScroll.setAdapter(adapter);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mScroll != null){
            //Log.i("===","onDraw");
            mScroll.onDraw(canvas);
            //Log.i("==onDraw","draw");
        }

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mScroll != null){
            mScroll.onSizeChanged(w,h,oldw,oldh);
        }
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {


        if (mScroll != null && mScroll.onTouchEvent(ev)){
            return true;
        }

        //监听手势控制索引条的显隐
        if (mGes == null){
            mGes = new GestureDetector(getContext(),
                    new GestureDetector.SimpleOnGestureListener() {

                        @Override
                        public boolean onFling(MotionEvent e1, MotionEvent e2,
                                               float velocityX, float velocityY) {
                            // If fling happens, index bar shows
                            if (mScroll != null)
                                mScroll.show();
                            //Log.i("==GestureDetector","showing");
                            return super.onFling(e1, e2, velocityX, velocityY);
                        }

                    });
        }
        mGes.onTouchEvent(ev);
        return super.onTouchEvent(ev);
    }


    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {

        //if (mScroll != null){
            if (mScroll.containXY(ev.getX(),ev.getY())){
                return true;
            }
        return super.onInterceptTouchEvent(ev);

    }

在这些代码中大部分是重写listView的绘制方法和生命周期.当然这些是核心,但是我们一会要单独放在一个类中写,下面会详细讲;所以暂时搁浅,来看自定义ListView中一个关键的逻辑:通过监听手势,listView快速滑动时候控制索引条的显隐(当然不要忘了在MainActivity中初始化ListView时候讲快速滑动设置为true,开篇就又代码,不清楚的可以自己稍微瞅一下):

 //是否快速滑动
    @Override
    public boolean isFastScrollEnabled() {
        return mIsFast;
    }


    //设置快速滑动
    @Override
    public void setFastScrollEnabled(boolean enabled) {
        //super.setFastScrollEnabled(enabled);
        mIsFast = enabled;
        //Log.i("==onDraw",enabled + "");

        if (mIsFast){
            if (mScroll == null){
                mScroll = new IndexScroll(getContext(),this);
            }
        }else{
            if (mScroll != null)
            {
                mScroll.hide();
                mScroll = null;
            }
        }

    }

        @Override
    public boolean onTouchEvent(MotionEvent ev) {


        if (mScroll != null && mScroll.onTouchEvent(ev)){
            return true;
        }

        //监听手势控制索引条的显隐
        if (mGes == null){
            mGes = new GestureDetector(getContext(),
                    new GestureDetector.SimpleOnGestureListener() {

                        @Override
                        public boolean onFling(MotionEvent e1, MotionEvent e2,
                                               float velocityX, float velocityY) {
                            // If fling happens, index bar shows
                            if (mScroll != null)
                                mScroll.show();
                            //Log.i("==GestureDetector","showing");
                            return super.onFling(e1, e2, velocityX, velocityY);
                        }

                    });
        }
        mGes.onTouchEvent(ev);
        return super.onTouchEvent(ev);
    }

这些都是一些固定的Api 相关关键逻辑我代码中有标记有注释,在这里不做解释;

4 核心类的实现

核心类的实现IndexScroll,在我当初写的时候是为了分担自定义listView的代码和逻辑压力,相当于抽取类吧;
ok~我们来一步步看代码:
4.1代码初始化

        首先来看初始化:

public void onSizeChanged(int w, int h, int oldw, int oldh) {

        //Log.i("==onSizeChanged","onSizeChanged");
        //开始初始化变量
        mDety = (int) mContext.getResources().getDisplayMetrics().density;
        mScaleDety = (int) mContext.getResources().getDisplayMetrics().scaledDensity;

        setAdapter(mList.getAdapter());
        mState = HIDEN;

        mListWidth = w;
        mListHeight = h;



        mIndexWidth = 20 * mDety;
        mIndexMagin = 5 * mDety;

        mIndexTextSIze = 12 * mScaleDety;



        mCenterPadding = 10 * mScaleDety;
        mCenterTextSize = 30 * mScaleDety;


        mIndexHeight = h - 2 * mIndexMagin;


        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        mCenterSize = 50 * mDety;








        mIndexbarRect = new RectF(w - mIndexWidth - mIndexMagin,mIndexMagin,
                w - mIndexMagin,
                mIndexMagin + mIndexHeight);


        //mCenterRect = new RectF(mListWidth - )
    }

我们把初始化逻辑放在onSizeChanged中可以防止重复调用初始化,占用资源;
接着看setAdapter 为索引条获取数据资源:

public void setAdapter(Adapter adapter) {
        this.adapter = adapter;
        mSectionAdapter = (SectionIndexer) adapter;
        mSections = (String[]) mSectionAdapter.getSections();
    }

通过传入实现SectionIndexer的adapter传入来获取索引的数据:
接下来 来看绘制:索引条和索引条数据绘制(暂时mAlph设为0来保证补触发事件不会随意显隐);以及触摸索引条,屏幕中心显示的弹出框:

public void onDraw(Canvas canvas) {
        //Log.i("==onSizeChanged","onDraw");
        if (mState == HIDEN){
            return;
        }


        //Log.i("===onDraw","draw");
        mPaint.setColor(Color.BLACK);
        //mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAlpha(65 * mAlph);
        mPaint.setAntiAlias(true);
        //开始绘制索引条
        canvas.drawRoundRect(mIndexbarRect,5 * mDety, 5 * mDety,mPaint);

        //绘制索引条的数据
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextSize(mIndexTextSIze);
        mTextPaint.setAntiAlias(true);
        //mPaint.setAlpha(255 * mAlph);

        for (int i = 0; i < mSections.length; i++) {
            mIndexCell = (mIndexHeight - 2 * mIndexMagin)/mSections.length;
            int paddingTop = (int) ((mIndexCell + (mTextPaint.ascent() - mTextPaint.descent()))/2);
            canvas.drawText(mSections[i],
                    mIndexbarRect.left + ((mIndexWidth - mTextPaint.measureText(mSections[i]))/2),
                    mIndexbarRect.top + mIndexMagin + mIndexCell * i + paddingTop - mTextPaint.ascent(),mTextPaint);
        }

        if (mSections != null && mSections.length > 0 ){
            if (mCenterPos >= 0){

                //绘制弹出框
                mPaint.setColor(Color.BLACK);
                mPaint.setAlpha(90);
                int top = (mListHeight - mCenterSize)/2;
                int left = (mListWidth - mCenterSize)/2;
                mCenterRect = new RectF(left,top,left + mCenterSize,top + mCenterSize);
                canvas.drawRoundRect(mCenterRect,5 * mDety,5 * mDety,mPaint);



                //绘制弹出框的数据
                mTextPaint.setTextSize(mCenterTextSize);
                //mCenterSize = (int) (mTextPaint.measureText(mSections[mCenterPos]) + mCenterPadding * 2);
                int l = (int) (left + ( mCenterSize - mTextPaint.measureText(mSections[mCenterPos]))/2);
                int paddingTop = (int) ((mCenterSize + (mTextPaint.ascent() - mTextPaint.descent()))/2);
                int t = (int) ((mListHeight - mCenterSize)/2 + paddingTop - mTextPaint.ascent());
                canvas.drawText(mSections[mCenterPos],l,t,mTextPaint);


            }

        }




    }

接着来看show()和hide()方法 这样比较r容易理解 ,毕竟上一层的自定义listView的手势监听是通过indexScroll的show和hide来实现:

 public void show() {
        if (mState == HIDEN){
            Log.i("==show","HIDEN....");
            setState(SHOWING);
        }


    }

    public void hide() {
        if (mState == SHOWN)
        setState(HIDEING);

    }

    接着看setState方法:

public void setState(int state){

        if (state < HIDEN || state > HIDEING)
            return;

        mState = state;
        switch (mState){
            case SHOWN:
                mHandler.removeMessages(0);
                //Log.i("==mHandler",SHOWN + "");
                break;
            case SHOWING:
                mAlph = 0;
                start(0);
                //Log.i("==mHandler",SHOWING + "");
                break;
            case HIDEN:
                mHandler.removeMessages(0);
                //Log.i("==mHandler",HIDEN + "");
                break;
            case HIDEING:
                mAlph = 1;
                start(3000);
                //Log.i("==mHandler",HIDEING + "");
                break;
        }

    }

当mState = SHOWING ,则会设置mAlph = 0 通过handler来线程重复调用刷新,当mAlph = 1时设置为mState = SHOWN 若索引条没有触摸,则开线程将mState == HIDEIND,然后mAlph = 1;延迟3s后开始刷新绘制 逐渐隐藏索引条,最后mAlph = 0 ,mState = HIDEN;注意当mState = SHOWN 和mState = HIDEN时要移除线程;
那么 瞄一眼线程开启的逻辑:

    private void start(int delay) {
        mHandler.removeMessages(0);
        mHandler.sendEmptyMessageAtTime(0, SystemClock.uptimeMillis() + delay);
    }

    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            switch (mState){
                case SHOWING:
                    mAlph += (1 - mAlph)*0.2;
                    //Log.i("==mHandler",mAlph + "");
                    if (mAlph > 0.9){
                        mAlph = 1;
                        setState(SHOWN);
                    }

                    mList.invalidate();
                    start(20);

                    break;
                case SHOWN:
                    setState(HIDEING);
                    break;
                case HIDEING:
                    mAlph -= mAlph * 0.2;
                    //Log.i("==HIDEING","HIDEING...");
                    if (mAlph <0.1){
                        mAlph = 0;
                        setState(HIDEN);
                    }

                    mList.invalidate();
                    start(10);
                    break;

            }

        }
    };

接着来看手指在索引条中滑动逻辑,其实就是通过x,y坐标限制来拦截listView的滑动:

 public boolean onTouchEvent(MotionEvent ev) {

        int action = ev.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:

                if (mState != HIDEN && containXY(ev.getX(),ev.getY())){
                    setState(SHOWN);
                    int pos = getPos(ev.getY());
                    //mList.setSelection(pos);
                    mCenterPos = pos;
                    int positionForSection = mSectionAdapter.getPositionForSection(pos);
                    mList.setSelection(positionForSection);
                    //mList.setSelection(.getPositionForSection(mCurrentSection));
                    return true;
                }



            case MotionEvent.ACTION_MOVE:

                if (containXY(ev.getX(),ev.getY())){
                    int pos = getPos(ev.getY());
                    int positionForSection = mSectionAdapter.getPositionForSection(pos);
                    mList.setSelection(positionForSection);
                    mCenterPos = pos;
                    return true;
                }


            case MotionEvent.ACTION_UP:

                setState(HIDEING);

                mCenterPos = -1;

                break;

        }

        return false;
    }

以上代码就是手指在索引条中滑动的触摸事件逻辑;其也是根据mState状态来控制setState来通过线程完成一部分逻辑;

ok~ 到这里 代码就详尽的解释完了 过段时间代码回上传github 有需求的朋友可以评价 谢谢 感谢支持 期待共同进步