Android 自定义View——自定义点击事件

  在前几篇博客中我们列举了如何自定义控件,接下来我们来学习下如何自定义点击事件。
  每个人手机上都有通讯录,这是毫无疑问的,我们通讯录上有一个控件,在通讯录的最左边有一列从”#”到”Z”的字母,我们通过滑动或点击指定的字母来确定联系人的位置,进而找到联系人。我们这一节就通过开发这个控件,来学如何自定义控件的点击事件。

通讯录列表查找控件界面绘制

  首先我们需要先将控件的基本布局绘制出来,这里我们不在做详细的解释,在《Android 自定义View——自定义View控件 》博客中,我们已经详细讲解了如何绘制自定义控件的布局。通讯录列表查找控件的布局绘制将只提供思路,不在详细的说明。先上代码:

public class MySlider extends View {
    private int width;//设置高
    private int height;//设置高

    //字母的宽度和高度
    private float textWidth;
    private float textHeight;
    private Paint  mPaintText;//绘制字母的画笔
    //设置字母数组
    private String[] array={"#", "A", "B", "C", "D", "E",
            "F", "G", "H", "I", "G",
            "K", "L", "M", "N", "O",
            "P", "Q", "R", "S", "T",
            "U", "V", "W", "X", "Y", "Z"};

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

    public MySlider(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化画笔,并设置相关参数。
        mPaintText = new Paint();
        mPaintText.setColor(Color.GRAY);//画笔颜色
        mPaintText.setAntiAlias(true);//去锯齿
        mPaintText.setTextAlign(Paint.Align.CENTER);//设置字体居中显示     
    }
    /*
    重写onMesure()方法
    */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);// 获得控件的宽度
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);//获得控件的高度
        setMeasuredDimension(width, height);//设置宽和高
        //设置字母的高度,字母高度应该是控件的高度除27,然后再减去一个数。
        textHeight = height/27f-2;
        //设置字母的高度
        mPaintText.setTextSize(textHeight);
    }
    /*
    重写onDraw()方法
    */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //求出"M"字母的宽度,因为我们需要将字母设置在控件的最左边,所以我们需要求出字母的宽度,然后设置。这里我们会求宽度最大的字母的宽度。
        textWidth =mPaintText.measureText("M");
        //通过循环,将字母绘制在控件上。
        for(int i=0; i<27;i++ ){
            //绘制文字从数组中获得, 绘制的位置时控件宽度减去字母宽度width-textWidth,高度是height/27*(i+1)
              canvas.drawText(""+array[i], width-textWidth, height/27*(i+1), mPaintText);
        }
    }
}

  View界面的绘制思路是:在界面上显示27个字母,字母竖直排列且显示在左侧,因此需要将绘制的字母的位置的横坐标设置为width-textWidth,代表控件宽度减去一个字母“M”的宽度,然后然字母居中显示;字母位置的高度是将空间高度27等分后的数乘以字母的位置。
  这样控件的基本布局绘制完毕,我们要控件添加点击了。

通讯录列表查找控件点击实现

  实现控件中的点击,需要在自定义View的类中重写方法onTouchEvent(),这里需要说一下这个onTouchEvent,它包含多个点击类型:MotionEvent.ACTION_MOVE,MotionEvent.ACTION_DOWN, MotionEvent.ACTION_UP等,看单词含义便能够理解这几种类型,这里不再赘述。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
                //获取屏幕上点击的坐标
                float x=event.getX();
                float y = event.getY();
                //如果坐标在我们的文字区域内,则将点击的文字改颜色
                if(x>width-2*textWidth){
                    //点击后,获取坐标代表的单词的含义
                    index = (int) (y/(height/27));                
                    invalidate();//更新视图
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                //点击抬起后,回复初始位置。
                index=-1;
                invalidate();//更新视图
                return true;
        }
        //这句话不要修改
        return super.onTouchEvent(event);
    }

  这时需要在onDraw()方法中修改如下:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        textWidth =mPaintText.measureText("M");
        //添加修改如下,通过index来绘制文本,试问本变颜色。
        for(int i=0; i<26;i++ ){
            if(index==i){
            //将点击的位置修改颜色
                canvas.drawText(""+array[i], width-textWidth, height/27*(i+1), mPaintRed);
            }else {
                canvas.drawText(""+array[i], width-textWidth, height/27*(i+1), mPaintText);
            }
        }
    }

 
  在控件中添加了点击还不够,如果我们想要在Activity中使用,必须添加点击事件!

通讯录列表查找控件添加点击事件

  可能大家一上来觉得没思路,不知道怎么写,不过没关系,我们可以通过Button点击事件来类比学习下,首先看Button的点击事件是如何使用的:

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

  Button控件的点击事件是这样的,Button对象调用其方法setOnClickListener(OnClickListener listener)来调用点击事件,该方法中传入了一个OnClickListener 的对象,这个对象时通过匿名内部类来定义的。创建完匿名内部类后,我们发现还要重写一个onClick()方法。经过查看Button源码我们了解到,原来OnClickListener 是Button中的一个内部的接口,该接口包含onClick()方法。通过分析Button的点击事件,我们掌握了我们需要在我们的自定义View中添加如下几部分:
    
1. 一个监听的内部接口,我们给它命名为 OnItemSelectListener。
2. 接口内部有一个onItemSelect的方法,Activity中使用时,通过重写该方法来实现事件的监听。
3. 在控件中定义一个OnItemSelectListener接口的对象,并设置set方法。

所以我们对自定义控件进行如下修改:

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

    private float textWidth;
    private float textHeight;
    private Paint  mPaintText;
    private Paint  mPaintRed;
    private int index=-1;

    private String[] array={"#", "A", "B", "C", "D", "E",
            "F", "G", "H", "I", "G",
            "K", "L", "M", "N", "O",
            "P", "Q", "R", "S", "T",
            "U", "V", "W", "X", "Y", "Z"};

    public MySlider(Context context) {
        super(context);
    }
    public MySlider(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintText = new Paint();
        mPaintText.setColor(Color.GRAY);
        mPaintText.setAntiAlias(true);
        mPaintText.setTextAlign(Paint.Align.CENTER);

        mPaintRed = new Paint();
        mPaintRed.setColor(Color.BLUE);
        mPaintRed.setAntiAlias(true);
        mPaintRed.setTextAlign(Paint.Align.CENTER);
    }

    //定义一个接口对象listerner
    private OnItemSelectListener listener;
    //获得接口对象的方法。
    public void setOnItemSelectListener(OnItemSelectListener listener) {
        this.listener = listener;
    }
    //定义一个接口
    public interface  OnItemSelectListener{
        public void onItemSelect(int index, String indexString);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
        textHeight = height/27f-2;
        mPaintText.setTextSize(textHeight);
        mPaintRed.setTextSize(textHeight);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        textWidth =mPaintText.measureText("M");
        for(int i=0; i<26;i++ ){
            if(index==i){
                canvas.drawText(""+array[i], width-textWidth, height/27*(i+1), mPaintRed);
            }else {
                canvas.drawText(""+array[i], width-textWidth, height/27*(i+1), mPaintText);
            }
        }
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
                float x=event.getX();
                float y = event.getY();
                if(x>width-2*textWidth){
                    index = (int) (y/(height/27));
                    //此处有增加,当屏幕被点击后,将参数传入。
                    if(listener!=null){
                        listener.onItemSelect(index, array[index]);
                    }
                    invalidate();
                    return true;
                }
                break;

            case MotionEvent.ACTION_UP:
                index=-1;
                invalidate();
                return true;
        }
        return super.onTouchEvent(event);
    }
}

  点击事件定义玩了,我们来看看如何使用……

通讯录列表查找控件的使用

1. 在布局中添加控件:

<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.administrator.mywidgetdemo.activity.BitmapActivity">

    <com.example.administrator.mywidgetdemo.event.MySlider
        android:id="@+id/mysilider"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <TextView
        android:id="@+id/textview"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:textSize="100sp"
        android:text="A"
        android:layout_centerInParent="true"
        android:gravity="center"
        />   
</RelativeLayout>

2. Activity中获取控件对象,并监听点击事件:

public class BitmapActivity extends Activity {
    private TextView mTextView;
    private MySlider mMySilder;

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

        mTextView = (TextView) findViewById(R.id.textview);
        mMySilder = (MySlider) findViewById(R.id.mysilider);
        mMySilder.setOnItemSelectListener(new MySlider.OnItemSelectListener() {
            @Override
            public void onItemSelect(int index, String indexString) {

                mTextView.setText(indexString);
            }
        });
    }
}

结果如下:

这里写图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页