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

結果如下：

小_爽

發佈了134 篇原創文章 · 獲贊 134 · 訪問量 38萬+

私信關注

Android 自定義View——自定義點擊事件

通訊錄列表查找控件界面繪製

通訊錄列表查找控件點擊實現

通訊錄列表查找控件添加點擊事件

通訊錄列表查找控件的使用

DAPPER 事務 TRANSACTION

Android PorterDuff.Mode圖形混合處理

Android 動畫——屬性動畫Property Animation

Uniapp框架使用說明

朋友圈日期時間算法實現

Android 動畫——Layout Animations佈局動畫

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結