2. 程式人生 > >自定義view之----自定義button

自定義view之----自定義button

阿新 • • 發佈：2019-02-10

前言：

唉，學習自定義view已經很長時間了，很早就想寫自定義view這類的部落格，這樣一來不僅能夠對知識的梳理與鞏固還能幫助他人。計劃再好不如即時行動更為有效，所以趁著週末趕緊把這個月的計劃完成先。

ok，廢話少說（貌似好像前面的都是廢話~ 額’），切入正題。

正題：

一般應用中按鈕（Button）都會結合自己應用的主題風格來自定義，如：qq，微博，支付寶的登陸按鈕，這裡就不貼圖了，它們登陸按鈕的共同特點都是圓角，不同的是背景顏色不同而已。如果要實現類似的效果，我想說的是 so easy！那麼，如果你看到了這裡，不管你會還是不會，這bi我還是要裝一下的。haha~

實現方式有兩種：

方法一：

只需要自定義背景屬性就能實現

首先看下效果圖，有邊框的，由於是靜態圖所以無法看到點選的效果

這裡寫圖片描述

好了，開始貼程式碼了

xml檔案佈局程式碼：
style=”?android:attr/borderlessButtonStyle”//這一行程式碼是5.0以上版本去掉Button自帶陰影效果的方法 

<Button
                style="?android:attr/borderlessButtonStyle"
                android:layout_marginTop="50dp"
                android:layout_width
 
="200dp"
                android:layout_height="wrap_content"
                android:background="@drawable/button_click_enabled"
                android:layout_gravity="center"
                android:text="只設置上面兩個角為圓角"/>
            <Button
                android:layout_margin="20dp"
                android:layout_width
 
="200dp"
                style="?android:attr/borderlessButtonStyle"
                android:layout_height="wrap_content"
                android:background="@drawable/button_click_enabled_5"
                android:layout_gravity="center"
                android:textColor="#fff"
                android:textSize="15dp"
                android:text="圓角"/>

button_click_enabled.xml 檔案：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_click_unchecked" android:state_pressed="false"></item>
    <item android:drawable="@drawable/button_click_checked" android:state_pressed="true"></item>
</selector>

selector選擇器的意思，顧名思義就算你沒學過你也已經知道它是幹什麼的了吧。預設顯示背景@drawable/button_click_unchecked，當只有按住按鈕（android:state_pressed=”true”時）才會顯示 背景@drawable/button_click_checked

button_click_unchecked.xml檔案：
（複製程式碼後刪掉註釋）

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"//控制元件顏色
    />
    <corners
        android:bottomLeftRadius="0dp"//左下角設定圓角半徑為0
        android:bottomRightRadius="0dp"//右下角設定圓角半徑為0
        android:topLeftRadius="20dp"//左上角設定圓角半徑為20
        android:topRightRadius="20dp" //右上角設定圓角半徑為20
        />
    <stroke
        android:width="2px"//邊框寬
        android:color="#2443D0"//邊框顏色
         />
</shape>

button_click_checked.xml檔案：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#fe3"></solid>

    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
    <stroke
        android:width="2px"
        android:color="#2443D0" />
</shape>

ok，
就這麼簡單。
偷偷告訴你不只是button，其他控制元件也可以這麼幹，自己去發掘吧！

方法二：

下面我要講的才算是自定義view，這種實現方式就比較高大上了，首先你需要對自定義view的知識有一定的瞭解，不瞭解也沒關係，有看不懂的地方請自行百度。如果方法一能實現需求，但你覺得太low了，那麼不要走開（裝逼模式已開啟~）。

同樣，放張效果圖：
這裡寫圖片描述

實現思路：
系統Button是繼承Textview的，所以自定義的view也繼承Textview。
按照步驟：
1.建立類cButton繼承Textview

2.設定自定義屬性（在res/values/styles.xml中）：

 <declare-styleable name="cButton">
        <attr name="internalcolor" format="color" />//內部填充顏色
        <attr name="clickedColor" format="color" />//點選後顏色
        <attr name="bordercolor" format="color" />//邊框顏色
        <attr name="textcolor" format="color" />//文字顏色
        <attr name="textsize" format="dimension" />//文字大小
        <attr name="textstr" format="string" />//文字
        <attr name="enablerd" format="boolean" />//是否可點選
        <attr name="angletype" format="integer">//圓角型別
            <enum name="anglecirarc" value="1" />//圓弧形
            <enum name="anglecir" value="2" />//小圓角
        </attr>
    </declare-styleable>

3.在cButton類中對自定義屬性進行解析，解析時設定預設值

 public cButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.cButton);
        enabler = ta.getBoolean(R.styleable.cButton_enablerd, true);//是否可點選
        AngleType = ta.getInt(R.styleable.cButton_angletype, 1);//圓角型別
        clicked_color = ta.getColor(R.styleable.cButton_clickedColor, Color.parseColor("#6F4A4C58"));//點選後的顏色
        border_color = ta.getColor(R.styleable.cButton_bordercolor, Color.parseColor("#40000000"));//邊框顏色
        interna_Color = ta.getColor(R.styleable.cButton_internalcolor, Color.parseColor("#FF4A4C58"));//背景顏色
        text_Color = ta.getColor(R.styleable.cButton_textcolor, Color.BLACK);//文字顏色
        text_Size = ta.getDimension(R.styleable.cButton_textsize, 40);//文字大小
        text = ta.getString(R.styleable.cButton_textstr);//文字
    }

4.邏輯處理繪製圖形：

重點說一下，文字居中繪製：看這裡http://blog.csdn.net/u014702653/article/details/51985821
寬=控制元件寬度/2 - 文字寬度/2；
高=控制元件高度/2 + 文字高度/2；
tPaint.measureText(text);//文字寬度
Paint.FontMetricsInt fm = tPaint.getFontMetricsInt();
fm.bottom - fm.top//文字高度
canvas.drawText(“字串文字”, 寬, 高, tPaint);// 繪製文字

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//此處省略n條程式碼
canvas.drawText(text, startX, startY, tPaint);//繪製文字       
canvas.drawRoundRect(rectF, rx, ry, Paint);//繪製圓角矩形
}

5.（能夠繪製正常影象之後）定義點選回撥介面，和觸發點選的方法

public boolean onTouchEvent(MotionEvent event) {
  //cListener.click(cButton.this);//觸發點選事件
   //此處省略n條程式碼
   return true;
}
 /**
     * 定義介面
     */
    public interface OncButtonListener {

        void click(View v);
    }
    /**
     * 監聽回撥方法
     */
    public void setcButtonListener(OncButtonListener listener) {

        cListener = listener;
    }

6.定義設定屬性方法：
每個方法中都必須有invalidate()方法，不然設定無效

    /**
     * 設定是否可點選
     */
    public void setEnabler(boolean enabler) {

        this.enabler = enabler;
        if (enabler) {
            set_Color = interna_Color;
        } else {//
            set_Color = clicked_color;
        }
         invalidate();//重新繪製
    }

    /**
     * 設定文字
     */
    public void setText(String text) {
        this.text = text;
        invalidate();//重繪
    }

   //省略

完成。

下面貼具體程式碼：

cButton類：

/**
 * Created by xxf on 2017/8/19.
 */

public class cButton extends TextView {
    /* 畫筆 */
    private Paint mPaint;//   填充
    private Paint bPaint;//   邊框
    private Paint tPaint;//繪製文字

    private int mWith, mHeight;//寬、高
    private Rect oRect;//
    private String text;//文字
    private int clicked_color;//點選後的顏色
    private int interna_Color;//填充顏色
    private int set_Color;//設定顏色
    private int text_Color;//文字顏色
    private float text_Size;//字型大小
    private OncButtonListener cListener;//點選監聽
    private Context mContext;
    private int border_color;
    private boolean enabler;//設定是否可點選
    private int AngleType;//圓角樣式

    public cButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.cButton);
        enabler = ta.getBoolean(R.styleable.cButton_enablerd, true);//是否可點選
        AngleType = ta.getInt(R.styleable.cButton_angletype, 1);//圓角型別
        clicked_color = ta.getColor(R.styleable.cButton_clickedColor, Color.parseColor("#6F4A4C58"));//點選後的顏色
        border_color = ta.getColor(R.styleable.cButton_bordercolor, Color.parseColor("#40000000"));//邊框顏色
        interna_Color = ta.getColor(R.styleable.cButton_internalcolor, Color.parseColor("#FF4A4C58"));//背景顏色
        if (enabler) {
            set_Color = interna_Color;
        } else {//
            set_Color = clicked_color;
        }

        text_Color = ta.getColor(R.styleable.cButton_textcolor, Color.BLACK);//文字顏色
        text_Size = ta.getDimension(R.styleable.cButton_textsize, 40);//文字大小
        text = ta.getString(R.styleable.cButton_textstr);//文字
    }

    /*用於測量檢視的大小的*/
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWith = MeasureSpec.getSize(widthMeasureSpec);    //取出寬度的確切數值
        mHeight = MeasureSpec.getSize(heightMeasureSpec);    //取出高度的確切數值

    }

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        init();
        //  Log.e(TAG, "onTouchEvent: " + interna_Color);
//        RectF rectF = new RectF(0 + 10, 0 + 10, mWith - 10, mHeight - 10);
        if (AngleType == 1) {
            // Log.e(TAG, "onDraw: " + 1);
            RectF rectF = new RectF(0 + 10, 0 + 10, mWith - 10, mHeight - 10);
            canvas.drawRoundRect(rectF, mHeight / 2, mHeight / 2 + 30, mPaint);
            canvas.drawRoundRect(rectF,mHeight / 2, mHeight / 2 + 30, bPaint);//邊框
        } else if (AngleType == 2) {
            // Log.e(TAG, "onDraw: " + 2);
            RectF rectF = new RectF(0 + 20, 10, mWith - 20, mHeight - 10);
            canvas.drawRoundRect(rectF, mHeight / 9, mHeight / 9, mPaint);
            canvas.drawRoundRect(rectF, mHeight / 9, mHeight / 9, bPaint);
//        canvas.drawRoundRect(rectF, mHeight / 4, mHeight / 4, bPaint);//邊框
        }


        // canvas.drawText("123",mWith/2,mHeight/2,tPaint);
        /*
         * 控制元件寬度/2 - 文字寬度/2
         */
        float  v=  tPaint.measureText(text);//文字寬度
        float startX = getWidth() / 2 - v / 2;

        /*
         * 控制元件高度/2 + 文字高度/2,繪製文字從文字左下角開始,因此"+"
         */
       // float startY = getHeight() / 2 + oRect.height() / 2;
        Paint.FontMetricsInt fm = tPaint.getFontMetricsInt();
        //fm.bottom - fm.top//文字高度
        int startY = getHeight() / 2 - fm.descent + (fm.bottom - fm.top) / 2;
        // 繪製文字
        canvas.drawText(text, startX, startY, tPaint);
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(set_Color);
        mPaint.setStrokeWidth(3);
        bPaint = new Paint();
        bPaint.setStyle(Paint.Style.STROKE);
        bPaint.setAntiAlias(true);
        bPaint.setColor(border_color);
        bPaint.setStrokeWidth(2);
        oRect = new Rect();
        tPaint = new Paint();
        tPaint.setAntiAlias(true);
        tPaint.setStyle(Paint.Style.FILL);
        tPaint.setTextSize(text_Size);
        tPaint.setColor(text_Color);
        tPaint.setAntiAlias(true);
        tPaint.getTextBounds(text, 0, text.length(), oRect);
        tPaint.setStrokeWidth(2);
    }

    /**
     * 呼叫 getParent().requestDisallowInterceptTouchEvent(true);
     * 方法。一旦底層View收到touch的action後呼叫這個方法
     * 那麼父層View就不會再呼叫onInterceptTouchEvent了
     *
     * @param ev
     * @return
     */
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (enabler) {
        getParent().requestDisallowInterceptTouchEvent(true);
    }
        return super.dispatchTouchEvent(ev);
    }

    public boolean onTouchEvent(MotionEvent event) {
        if (enabler) {
            // 手指按下：
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    set_Color = clicked_color;//設定按下顏色

                    invalidate();//重新繪製
                    break;

                //手指擡起：
                case MotionEvent.ACTION_UP:
                    if (cListener != null) {
                        if (event.getY() >= mHeight || event.getY() < 0 || event.getX() >= mWith || event.getX() < 0) {
                        } else {
                            cListener.click(cButton.this);
                        }
                    }

                    Log.e(TAG, "onTouchEvent:  ------------" + event.getY());


                    if (enabler) {
                        set_Color = interna_Color;//設定擡起顏色復原
                    } else {
                        set_Color = clicked_color;
                    }

                    invalidate();
                    break;

                // 手指正在移動：
                case MotionEvent.ACTION_MOVE:
                    Log.e(TAG, "onTouchEvent: event.getX()===" + event.getX() + "   mWith========" + mWith);

                    if (event.getY() >= mHeight || event.getY() < 0 || event.getX() >= mWith || event.getX() < 0) {
                        set_Color = interna_Color;

                    } else {
                        set_Color = clicked_color;//設定按下顏色
                    }
                    invalidate();//重新繪製
                    break;
            }
        }
        return true;
    }



    /**
     * 定義介面
     */
    public interface OncButtonListener {

        void click(View v);
    }
    /**
     * 監聽回撥方法
     */
    public void setcButtonListener(OncButtonListener listener) {

        cListener = listener;
    }

    /**
     * 設定是否可點選
     */
    public void setEnabler(boolean enabler) {

        this.enabler = enabler;
        if (enabler) {
            set_Color = interna_Color;
        } else {//
            set_Color = clicked_color;
        }
        setInvalidate();
    }

    /**
     * 設定文字
     */
    public void setText(String text) {
        this.text = text;

        setInvalidate();
    }

    /**
     * 重繪
     */
    public void setInvalidate() {
        invalidate();
    }
}

layout佈局中使用：
宣告名稱空間:xmlns:cButton=”http://schemas.android.com/apk/res-auto”

<xxf.com.buttontest.cButton
                android:id="@+id/cButton"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="center"
                android:layout_marginTop="50dp"
                cButton:enablerd="true"
                cButton:internalcolor="@color/colorPrimary"
                cButton:textcolor="#fff"
                cButton:textsize="20dp"
                cButton:textstr="圓弧邊" />

            <xxf.com.buttontest.cButton
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="center"
                cButton:angletype="anglecir"
                cButton:internalcolor="@color/colorPrimary"
                cButton:textcolor="#fff"
                cButton:textsize="15dp"
                cButton:textstr="圓角" />

結束。

謝謝觀看！

相關推薦

自定義view之----自定義button

前言： 唉，學習自定義view已經很長時間了，很早就想寫自定義view這類的部落格，這樣一來不僅能夠對知識的梳理與鞏固還能幫助他人。計劃再好不如即時行動更為有效，所以趁著週末趕緊把這個月的計劃完成先。 ok，廢話少說（貌似好像前面的都是廢話~ 額’），切

自定義View之自定屬性

在自定義的View中，很多時候我們需要對View新增自定義屬性步驟如下： 1) 編寫xml檔案，定義屬性名稱與屬性資料型別 //attrs.xml <resources> <declare-styleable name="MyV

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

Android筆記--簡單的自定義View之自繪控制元件

第一步：新建atts.xml檔案，自定義屬性，不引用系統的屬性，在構造器中使用安卓系統自帶的API的TypedArray類取出atts.xml中的自定義屬性使用（通過對映）。 第二步：新建一個類，繼承

android自定義view之自定義imageview

問題描述 需要自定義一個圓形imageview或者帶有橢圓角的imageview，這個時候我們就自定義它。 解決方案 先上圖 宣告：程式碼下載github https://github.com/pungrue26/SelectableRoundedI

自定義View之自定義標題欄

現在，幾乎在每一個APP頂部都有一個標題欄，可能會用ActionBar，也可能自己寫一個xml來新增標題欄中的控制元件。在以往自己做專案時大多使用後者來寫一個標題欄，然後使用include包含在每一個頁面佈局中。今天，試下使用自定義屬性來自定義一個標題欄。 一般的標題欄都分

自定義View之Rect的使用與理解

此篇為我的第一篇部落格,藉此平臺讓更多的人知道和掌握更多android的知識,希望能越來越優秀.高手過招,不只是會用,更多的是理解它的原理,能舉一反三,與已知知識對比學習,方便記憶與理解,下面,我們直接進入正題.我的文章會有一個很明顯的特徵,就是中學時期老師所講的"3W"原則,what(是什麼),h

自定義View之指南針（反編譯別人的程式碼實現）

一、說明        偶爾點開魅族手機內建的工具箱應用，發現其指南針做的還不錯，就想模擬做一個類似的效果，在這裡我們不準備自己從頭開始編寫程式碼，而是採用一點黑科技，首先，我們從魅族系統中匯出工具箱應用的apk，然後反編譯apk，結合

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

自定義View之onMeasure()方法

前言 一個View從建立到被繪製到螢幕上，需要完成measure（測量）、layout（佈置）、draw（繪製）三個步驟，分別對應View中的measure()、layout()、draw()三個方法。網上關於這三個方法的原始碼解析文章有很多，而且一般情況下也不會去重寫它們（measure()方

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

自定義View之仿ios分段選擇器

一：效果 1.1 可動態新增或刪除tab，更改指定tab的文字。 二：實現思路 自定義view，實現效果 動態建立textview，有幾個tab建立幾個textview 第一個tab和最後一個tab為圓角矩形，其餘的為直角矩形，通過shape檔案完成 預設選

自定義View之Region區域

Region在Android的繪製中是區域的意思，使用Region可以對圖形進行很多操作，比如區域的合併，取交集、或抑或等等。 Region的建構函式有以下四個： public Region() //無參構造 public Region(Region regi