模仿微信通讯录侧边栏快速索引


先看下效果图:


还是通过自定义view去实现这个快速索引功能,可以自己定义侧边栏的内容,不仅仅是A—Z  


view也是比较简单的,而且注释较详细

public class SlideView extends View {

    private static final String TAG = "SlideView";

    private String[] mark;//索引内容

    private OnTouchListener listener;//回调接口

    private Paint mPaint;//画笔

    private TextView promptBox;//屏幕中间的提示内容

    private boolean isTouch = false;


    public SlideView(Context context) {
        super(context);
        init();
    }

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

    public SlideView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        initPromptBox();//这个是实现按下索引之后屏幕中间显示的内容
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.GRAY);
        mPaint.setTextSize(40);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mark = new String[]{"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", "#"};
    }

    public void setOnTouchListener(OnTouchListener onTouchListener) {
        this.listener = onTouchListener;
    }

    private void initPromptBox() {
        promptBox = (TextView) LayoutInflater.from(getContext()).inflate(R.layout.index_box_layout, null);
        promptBox.setTextSize(50);
        promptBox.setTextColor(Color.WHITE);
        promptBox.setGravity(Gravity.CENTER);
        WindowManager.LayoutParams layoutParams =
                new WindowManager.LayoutParams(200, 200,
                        WindowManager.LayoutParams.TYPE_APPLICATION,
                        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE |
                                WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE,
                        PixelFormat.TRANSLUCENT);
        WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        windowManager.addView(promptBox, layoutParams);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int textHeight = getHeight() / mark.length;

        //依次画出索引的内容
        for (int i = 0; i < mark.length; i++) {
            canvas.drawText(mark[i], getWidth() / 2, textHeight + (i * textHeight), mPaint);
        }

        //按下时候颜色的显示
        if (isTouch) {
            canvas.drawColor(getContext().getResources().getColor(R.color.colorBackgound));
        }

        Log.i(TAG, "onDraw  -->");
    }


    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {

        float y = event.getY();
        int letter = (int) (y / getHeight() * mark.length);

        //这里检测如果手指划出屏幕return false ,不要继续往下执行,否则会角标越界
        if (letter < 0 || letter > mark.length - 1) {
            isTouch = false;
            invalidate();
            promptBox.setVisibility(GONE);
            return false;
        }

        switch (event.getAction()) {

            case MotionEvent.ACTION_MOVE:

                isTouch = true;
                touchIndex(letter);

                Log.i(TAG, "dispatchTouchEvent -- >  ACTION_MOVE    ===    " + mark[letter]);

                break;

            case MotionEvent.ACTION_DOWN:

                isTouch = true;
                touchIndex(letter);

                Log.i(TAG, "dispatchTouchEvent -- >  ACTION_DOWN    ===    " + mark[letter]);

                break;

            case MotionEvent.ACTION_UP:

                isTouch = false;
                promptBox.setVisibility(GONE);

                break;
        }

        invalidate();
        return true;
    }

    private void touchIndex(int letter) {

        if (letter >= 0 && letter < mark.length) {

            listener.onTouch(mark[letter]);
            promptBox.setVisibility(VISIBLE);
            promptBox.setText(mark[letter]);

        }

    }


    public String[] getMark() {
        return mark;
    }

    public void setMark(String[] mark) {
        this.mark = mark;
    }

    public interface OnTouchListener {

        void onTouch(String letter);

    }
}

Demo用的是recyclerView结合使用的

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.y.slideview.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.example.y.slideview.view.SlideView
        android:id="@+id/slide"
        android:layout_width="30dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        tools:ignore="RtlHardcoded" />
</RelativeLayout>

实现slidview里面的onTouchListener接口,里面的letter就是每次按下的内容

    @Override
    public void onTouch(String letter) {
        //letter 就是按下的那个索引的内容
        for (int i = 0; i < data.size(); i++) {
            if (letter.equals(data.get(i))) {
                moveToPosition(i);
//                smoothMoveToPosition(i);
            }
        }
    }


检测数据是否相同 然后使其滑动到顶部

 //不带动画
    @SuppressWarnings("unused")
    private void moveToPosition(int index) {

        int firstItem = linearLayoutManager.findFirstVisibleItemPosition();
        int lastItem = linearLayoutManager.findLastVisibleItemPosition();
        if (index <= firstItem) {
            recyclerView.scrollToPosition(index);
        } else if (index <= lastItem) {
            int top = recyclerView.getChildAt(index - firstItem).getTop();
            recyclerView.scrollBy(0, top);
        } else {
            recyclerView.scrollToPosition(index);
        }

    }


    //带动画
    @SuppressWarnings("unused")
    private void smoothMoveToPosition(int index) {

        int firstItem = linearLayoutManager.findFirstVisibleItemPosition();
        int lastItem = linearLayoutManager.findLastVisibleItemPosition();
        if (index <= firstItem) {
            recyclerView.smoothScrollToPosition(index);
        } else if (index <= lastItem) {
            int top = recyclerView.getChildAt(index - firstItem).getTop();
            recyclerView.smoothScrollBy(0, top);
        } else {
            recyclerView.smoothScrollToPosition(index);
        }

    }

下载链接:github csdn

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值