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);            }        });    }}

结果如下：

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

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

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

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

更多相关文章

随机推荐