Android自定义View实现联系人列表

自定义的view

  • LetterIndex.java extends View
  • ContactsListView.java extends RecyclerView

分析

  • 联系人列表有两个要点
    • 字母导航栏
      通过自定义View画出26个字母,设置滑动监听事件,根据上下滑动的距离判断当前选中的字母,并相应更新界面。
    • 列表中的字母标题
      针对item中的联系人姓名首字母对应的tag作比较,若与前一个相同则不显示title,否则显示。
  • 事件联动
    • 当滑动字母导航栏时,除了处理本身的变化外,还要留出接口,以便其他控件获取当前选中的字母。
    • 联系人列表滑动时,除了处理本身变化外,同样要留出接口以便获取当前置顶的item对应的字母
    • 字母导航栏要留出方法,以便其他控件指定选中的字母,并更新界面

具体代码

ContactsListView.java
重写该类主要是为了实现ItemDecoration根据不同的item变化,同时可以从xml布局文件中获取ItemDecoration的自定义属性。
主要代码:

    public ContactsListView(Context context) {
        this(context, null, 0);
    }

    public ContactsListView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ContactsListView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mTypeArray = context.obtainStyledAttributes(attrs, R.styleable.MyRecyclerDecoration);
        mContext = context;
    }

故而在其内部自定义了一个继承自ItemDecoratio得静态内部类Decorationn类:

public Decoration(List data){
//获取要显示的联系人数据对应的英文tag集合
//初始化各种自定义属性
//例如颜色:mColorLetterText = mTypeArray.getColor(R.styleable.MyRecyclerDecoration_color_letter_text, 0xff152648);

}

@Override
        public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state){
//画出各个导航title
}


@Override
        public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
//画出置顶的导航title
}

 @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State
                state) {
//判断是否画出导航title
 super.getItemOffsets(outRect, view, parent, state);
            int position = ((RecyclerView.LayoutParams) (view.getLayoutParams())).getViewAdapterPosition();

            if (position != -1) {
                String text = mDatas.get(position).substring(0, 1).toUpperCase();
                if (position == 0) {
                    outRect.set(0, mTitleHeight, 0, 0);
                } else if (text != null && !text.equals(mDatas.get(position - 1).substring(0, 1).toUpperCase())) {
                    outRect.set(0, mTitleHeight, 0, 0);
                } else {
                    outRect.set(0, 0, 0, 0);
                }
            }
}

private void drawText(Canvas canvas, float left, float right, View child, String text) {
//画出文字
}

LetterIndex.java
该类用来画出字母导航栏,并且提供方法获取/设置当前选中的字母

 public interface onIndexClickListener {
        void onIndexClick(int chooseId);
        void onActionUp();
    }

    public void setOnIndexClickListener(onIndexClickListener listener) {
        this.mClickListener = listener;
    }

    public void setChooseId(int chooseId) {
        if (chooseId >= 0 && chooseId < mIndexTexts.length) {
            mChooseId = chooseId;
            invalidate();
        }
    }

然后重写onTouchEvent(MotionEvent event)方法,在ACTION_DOWN、ACTION_MOVE、ACTION_UP时调用对应的方法即可。

重写onDraw()方法,画出对应的界面

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int height = getHeight() - getPaddingTop() - getPaddingBottom();
        float width = getWidth();
        //childHeight 是每一个字母所在单元的高度
        float childHeight = (float) height / mIndexTexts.length;

        //如果被点击了,就画出背景
        if (isClick) {
            mPaint.setColor(mColorIndexBg);
            canvas.drawRect(0, 0, width, height, mPaint);
        }

        Rect bounds = new Rect();
        mPaint.setTextSize(mSizeText);
        mPaint.setTextAlign(Paint.Align.CENTER);
        for (int i = 0; i < mIndexTexts.length; i++) {
            String text = mIndexTexts[i];
            mPaint.setColor(mColorText);
            //在被选中的字后面画一个圆,并改变字的颜色
            if (i == mChooseId) {
                mPaint.setColor(mColorChooseTextBg);
                canvas.drawCircle(width / 2, childHeight / 2 + i * childHeight,
                        mSizeText / 2 + 2, mPaint);
                mPaint.setColor(mColorChooseText);
            }
            mPaint.getTextBounds(text, 0, text.length(), bounds);
            //bounds里面保存着要画的字的一些属性,如x,y,centerX,centerY等,
            //要注意 canvas.drawText(text,x,y,mpaint)中y并不是text的最低端,而是baseline。
            float x = width / 2;
            float y = -bounds.centerY() + childHeight / 2 + i * childHeight;
            canvas.drawText(text, x, y, mPaint);
        }
    }

源码

源代码在我的Github,点这里可以找到。

预览如下

预览.gif

你可能感兴趣的:(Android自定义View实现联系人列表)