Android自定义View之用观察者模式写自定义监听事件以及常用竖直型字母索引栏的写法

本文链接：https://blog.youkuaiyun.com/NiZhuanXingHeIT/article/details/48528973

本文介绍了一个自定义的竖直索引栏View组件，通过观察者模式实现点击事件，适用于Android应用中快速定位字母索引的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：

目前，竖直索引栏还是很流行的，微信、美团、手机通讯录等各种常用软件都要用到它。

Demo

写一个自定义View，利用观察者模式，自定义其中的点击事件。

public class MySlider extends View {
    private int width;
    private int height;

    private float x;
    private float y;
    private float letterSize;
    private int index = -1;

    private char[] letters = {'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','#'};

    private Paint mPaintText;
    private Paint mPaintTextSel;
    public MySlider(Context context) {
        super(context);
    }

    //定义一个接口，作为观察者
    public interface OnItemListener{
        public void onItemSelected(int index,String content);
    }
    //观察者进行通讯的对象
    private OnItemListener listener;

    public void setOnItemListener(OnItemListener listener){
        this.listener = listener;
    }

    public MySlider(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintText = new Paint();
        mPaintText.setColor(Color.BLACK);
        //让字母居中排列
        mPaintText.setTextAlign(Paint.Align.CENTER);

        mPaintTextSel = new Paint();
        mPaintTextSel.setColor(Color.RED);
        mPaintTextSel.setTextAlign(Paint.Align.CENTER);
    }

    public int getIndex() {
        return index;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
        //setPaintText务必在此写，因为运行了onMeasure()后才得到height值
        mPaintText.setTextSize(height / 27-20);
        mPaintTextSel.setTextSize(height / 27-20);
    }

    /**
     *自定义点击事件
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_MOVE:
                //此处故意不加break，只要滑动屏幕上字母就会促发点击事件
            case MotionEvent.ACTION_DOWN:
                //得到触碰点的x，y坐标
                x = event.getX();
                y = event.getY();

                //根据坐标得到点击的字母
                if(x>width-mPaintText.measureText("A")*2){
                    index = (int)(y/(height/27));
                    //index可能会大于等于27，会造成letters数组下标越界的错误，所以此处先作判断，防止其大于26
                    if(index>=27){
                        index = 26;
                    }
                    Log.d("letter", letters[index] + "");
                    //调用listener对象的onItemSelected（）函数，传入index
                    if(listener!=null) {
                        listener.onItemSelected(index,letters[index]+"");
                    }
                    //让主线程重绘
                    invalidate();
                    return true;
                }
                break;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        letterSize = mPaintText.measureText("A");
        for(int i=0;i<27;i++){
            //根据index值判断字母是否被点击到，被点击的字母是红色，否则是黑色
            if(index==i) {
                //将字母依次向下绘出
                canvas.drawText(letters[i] + "", width - letterSize, height / 27 * (i + 1), mPaintTextSel);
            }else{
                canvas.drawText(letters[i] + "", width - letterSize, height / 27 * (i + 1), mPaintText);
            }
        }
    }
}

主活动的写法：

public class TimerActivity extends Activity {
    private TextView mTextViewLetter;
    private MySlider mySlider;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_timer);

        mTextViewLetter = (TextView) findViewById(R.id.textView_letter);
        mySlider = (MySlider) findViewById(R.id.my_slider);

        mySlider.setOnItemListener(new MySlider.OnItemListener() {
            @Override
            public void onItemSelected(int index, String content) {
                //如果点击到字母，就打印该字母
                mTextViewLetter.setText(content);
            }
        });

    }
}

activity_timer布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <com.example.administrator.selfdefinedview.widget.MySlider
        android:id="@+id/my_slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:id="@+id/textView_letter"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textSize="150dp"
        android:text="A"/>
</RelativeLayout>