Android自定義控制元件系列(二)—icon+文字的多種效果實現

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

今天給大家帶來一個很簡單但是很常用的控制元件ButtonExtendM，在開發中我們經常會用到圖片加文字的組合控制元件，像這樣：

這裡寫圖片描述

以上圖片都是從微信上擷取的。（暫時沒有找到icon在下，文字在上的例子）

下面我們通過一個控制元件來實現上下左右全部的樣式，只需改動一個屬性值即可改變icon的位置，是不是很方便，先看下demo效果圖：

這裡寫圖片描述

沒錯上圖的三種不同的樣式都是通過同一個控制元件實現的，下面我們看下程式碼

第一步自定義屬性
在res/values/目錄下新建attrs.xml檔案，
新增如下屬性

    <attr name="backColor" format 
="color" />
    <attr name="backColorPress" format="color" />
    <attr name="textColor" format="color" />
    <attr name="textColorPress" format="color" />

    <declare-styleable name="ButtonExtendM">
        <attr name="backColor"/>
        <attr name="backColorPress" 
/>
        <attr name="textColor"/>
        <attr name="textColorPress"/>
        <attr name="iconDrawable" format="reference" />
        <attr name="iconDrawablePress" format="reference" />
        <attr name="text" format="string" />
        <attr name="textSize" format 
="float" />
        <attr name="spacing" format="dimension" />
        <attr name="style">
            <enum name="iconLeft" value="0" />
            <enum name="iconRight" value="1" />
            <enum name="iconUp" value="2" />
            <enum name="iconBottom" value="3" />
        </attr>
    </declare-styleable>

第二步新建佈局檔案view_button_extend_m.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:text="@string/button_extend_m_default_text"/>

</RelativeLayout>

第三步新建ButtonExtendM.java繼承RelativeLayout

package com.landptf.view;

import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.landptf.R;
import com.landptf.util.ConvertM;

/**
 * Created by landptf on 2016/10/31.
 * 擴充套件Button，支援文字和icon分上下左右四種方式顯示
 * 預設為左右結構，圖片在左，文字在右
 */
public class ButtonExtendM extends RelativeLayout {
    /**
     * 左右結構，圖片在左，文字在右
     */
    public static final int STYLE_ICON_LEFT = 0;
    /**
     * 左右結構，圖片在右，文字在左
     */
    public static final int STYLE_ICON_RIGHT = 1;
    /**
     * 上下結構，圖片在上，文字在下
     */
    public static final int STYLE_ICON_UP = 2;
    /**
     * 上下結構，圖片在下，文字在上
     */
    public static final int STYLE_ICON_DOWN = 3;

    /**
     * 定義控制元件
     */
    private ImageView ivIcon;
    private TextView tvContent;
    /**
     * 上下文
     */
    private Context mContext;
    /**
     * View的背景色
     */
    private int backColor = 0;
    /**
     * View被按下時的背景色
     */
    private int backColorPress = 0;
    /**
     * icon的背景圖片
     */
    private Drawable iconDrawable = null;
    /**
     * icon被按下時顯示的背景圖片
     */
    private Drawable iconDrawablePress = null;
    /**
     * View文字的顏色
     */
    private ColorStateList textColor = null;
    /**
     * View被按下時文字的顏色
     */
    private ColorStateList textColorPress = null;
    /**
     * 兩個控制元件之間的間距，預設為8dp
     */
    private int spacing = 8;
    /**
     * 兩個控制元件的位置結構
     */
    private int mStyle = STYLE_ICON_LEFT;
    /**
     * 標示onTouch方法的返回值，用來解決onClick和onTouch衝突問題
     */
    private boolean isCost = true;

    private OnClickListener onClickListener = null;

    public interface OnClickListener {
        void onClick(View v);
    }

    /**
     * 設定View的Click事件
     *
     * @param l
     */
    public void setOnClickListener(OnClickListener l) {
        this.onClickListener = l;
        isCost = false;
    }

    public ButtonExtendM(Context context) {
        super(context);
        mContext = context;
    }

    public ButtonExtendM(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ButtonExtendM(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
        init(context, attrs, defStyle);

    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        //載入佈局
        LayoutInflater.from(context).inflate(R.layout.view_button_extend_m, this, true);
        //初始化控制元件
        ivIcon = (ImageView) findViewById(R.id.iv_icon);
        tvContent = (TextView) findViewById(R.id.tv_content);
        setGravity(Gravity.CENTER);
        TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.ButtonExtendM, defStyle, 0);
        if (a != null) {
            //設定背景色
            ColorStateList colorList = a.getColorStateList(R.styleable.ButtonExtendM_backColor);
            if (colorList != null) {
                backColor = colorList.getColorForState(getDrawableState(), 0);
                if (backColor != 0) {
                    setBackgroundColor(backColor);
                }
            }
            //記錄View被按下時的背景色
            ColorStateList colorListPress = a.getColorStateList(R.styleable.ButtonExtendM_backColorPress);
            if (colorListPress != null) {
                backColorPress = colorListPress.getColorForState(getDrawableState(), 0);
            }
            //設定icon
            iconDrawable = a.getDrawable(R.styleable.ButtonExtendM_iconDrawable);
            if (iconDrawable != null) {
                ivIcon.setImageDrawable(iconDrawable);
            }
            //記錄View被按下時的icon的圖片
            iconDrawablePress = a.getDrawable(R.styleable.ButtonExtendM_iconDrawablePress);
            //設定文字的顏色
            textColor = a.getColorStateList(R.styleable.ButtonExtendM_textColor);
            if (textColor != null) {
                tvContent.setTextColor(textColor);
            }
            //記錄View被按下時文字的顏色
            textColorPress = a.getColorStateList(R.styleable.ButtonExtendM_textColorPress);
            //設定顯示的文字內容
            String text = a.getString(R.styleable.ButtonExtendM_text);
            if (text != null) {
                //預設為隱藏的，設定文字後顯示出來
                tvContent.setVisibility(VISIBLE);
                tvContent.setText(text);
            }
            //設定文字字型大小
            float textSize = a.getFloat(R.styleable.ButtonExtendM_textSize, 0);
            if (textSize != 0) {
                tvContent.setTextSize(textSize);
            }
            //設定兩個控制元件之間的間距
            spacing = a.getDimensionPixelSize(R.styleable.ButtonExtendM_spacing, ConvertM.dp2px(context, 8));
            //設定兩個控制元件的位置結構
            mStyle = a.getInt(R.styleable.ButtonExtendM_style, 0);
            setIconStyle(mStyle);
            a.recycle();
        }

        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0, MotionEvent event) {
                //根據touch事件設定按下擡起的樣式
                return setTouchStyle(event.getAction());
            }
        });

        setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (onClickListener != null) {
                    onClickListener.onClick(v);
                }
            }
        });
    }

    /**
     * 根據按下或者擡起來改變背景和文字樣式
     *
     * @param state
     * @return isCost
     */
    private boolean setTouchStyle(int state) {
        if (state == MotionEvent.ACTION_DOWN) {
            if (backColorPress != 0) {
                setBackgroundColor(backColorPress);
            }
            if (iconDrawablePress != null) {
                ivIcon.setImageDrawable(iconDrawablePress);
            }
            if (textColorPress != null) {
                tvContent.setTextColor(textColorPress);
            }
        }
        if (state == MotionEvent.ACTION_UP) {
            if (backColor != 0) {
                setBackgroundColor(backColor);
            }
            if (iconDrawable != null) {
                ivIcon.setImageDrawable(iconDrawable);
            }
            if (textColor != null) {
                tvContent.setTextColor(textColor);
            }
        }
        return isCost;
    }

    /**
     * 設定圖示位置
     * 通過重置LayoutParams來設定兩個控制元件的擺放位置
     * @param style
     */
    public void setIconStyle(int style) {
        mStyle = style;
        RelativeLayout.LayoutParams lp;
        switch (style) {
            case STYLE_ICON_LEFT:
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_VERTICAL);
                ivIcon.setLayoutParams(lp);
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_VERTICAL);
                lp.addRule(RelativeLayout.RIGHT_OF, ivIcon.getId());
                lp.leftMargin = spacing;
                tvContent.setLayoutParams(lp);
                break;
            case STYLE_ICON_RIGHT:
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_VERTICAL);
                tvContent.setLayoutParams(lp);
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_VERTICAL);
                lp.addRule(RelativeLayout.RIGHT_OF, tvContent.getId());
                lp.leftMargin = spacing;
                ivIcon.setLayoutParams(lp);
                break;
            case STYLE_ICON_UP:
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_HORIZONTAL);
                ivIcon.setLayoutParams(lp);
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_HORIZONTAL);
                lp.addRule(RelativeLayout.BELOW, ivIcon.getId());
                lp.leftMargin = spacing;
                tvContent.setLayoutParams(lp);
                break;
            case STYLE_ICON_DOWN:
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_HORIZONTAL);
                tvContent.setLayoutParams(lp);
                lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                lp.addRule(RelativeLayout.CENTER_HORIZONTAL);
                lp.addRule(RelativeLayout.BELOW, tvContent.getId());
                lp.leftMargin = spacing;
                ivIcon.setLayoutParams(lp);
                break;
            default:
                break;
        }
    }

    /**
     * 設定View的背景色
     *
     * @param backColor
     */
    public void setBackColor(int backColor) {
        this.backColor = backColor;
        setBackgroundColor(backColor);
    }

    /**
     * 設定View被按下時的背景色
     *
     * @param backColorPress
     */
    public void setBackColorPress(int backColorPress) {
        this.backColorPress = backColorPress;
    }

    /**
     * 設定icon的圖片
     *
     * @param iconDrawable
     */
    public void setIconDrawable(Drawable iconDrawable) {
        this.iconDrawable = iconDrawable;
        ivIcon.setImageDrawable(iconDrawable);
    }

    /**
     * 設定View被按下時的icon的圖片
     *
     * @param iconDrawablePress
     */
    public void setIconDrawablePress(Drawable iconDrawablePress) {
        this.iconDrawablePress = iconDrawablePress;
    }

    /**
     * 設定文字的顏色
     *
     * @param textColor
     */
    public void setTextColor(int textColor) {
        if (textColor == 0) return;
        this.textColor = ColorStateList.valueOf(textColor);
        tvContent.setTextColor(this.textColor);
    }

    /**
     * 設定View被按下時文字的顏色
     *
     * @param textColorPress
     */
    public void setTextColorPress(int textColorPress) {
        if (textColorPress == 0) return;
        this.textColorPress = ColorStateList.valueOf(textColorPress);
    }

    /**
     * 設定顯示的文字內容
     *
     * @param text
     */
    public void setText(CharSequence text) {
        //預設為隱藏的，設定文字後顯示出來
        tvContent.setVisibility(VISIBLE);
        tvContent.setText(text);
    }

    /**
     * 獲取顯示的文字
     *
     * @return
     */
    public String getText() {
        return tvContent.getText().toString();
    }

    /**
     * 設定文字字型大小
     *
     * @param size
     */
    public void setTextSize(float size) {
        tvContent.setTextSize(size);
    }

    /**
     * 設定兩個控制元件之間的間距
     *
     * @param spacing
     */
    public void setSpacing(int spacing) {
        this.spacing = ConvertM.dp2px(mContext, spacing);
        //設定完成後重新整理一下兩個控制元件的結構，避免先執行了setIconStyle後，setSpacing不生效
        setIconStyle(mStyle);
    }

}

程式碼註釋基本可以看懂具體的實現，接下來主要看下如何使用

在layout裡直接引用ButtonExtendM即可，注意要新增

    xmlns:landptf="http://schemas.android.com/apk/res-auto"

    <com.landptf.view.ButtonExtendM
            android:id="@+id/bem_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp"
            landptf:iconDrawable="@drawable/title_back"
            landptf:iconDrawablePress="@drawable/title_back_selected"
            landptf:textColor="@android:color/white"
            landptf:spacing="4dp"
            landptf:text="返回"
            />

這個是實現的選單欄的返回按鈕，左右結構，icon在左為預設樣式，注意一下*Press的屬性，主要是用來設定控制元件被按下後的效果的。

再來看一個上下結構的

    <com.landptf.view.ButtonExtendM
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            landptf:iconDrawable="@drawable/icon_home_page"
            landptf:text="首頁"
            landptf:style="iconUp"
            />

只需要設定landptf:style即可，同時也可以通過java程式碼實現

    setIconStyle(ButtonExtendM.STYLE_ICON_UP)

Android自定義控制元件系列(二)—icon+文字的多種效果實現

今天給大家帶來一個很簡單但是很常用的控制元件ButtonExtendM，在開發中我們經常會用到圖片加文字的組合控制元件，像這樣：以上圖片都是從微信上擷取的。（暫時沒有找到icon在下，文字在上的例子）下面我們通過一個控制元件來實現上下左右全部

Android自定義控制元件系列二：自定義開關按鈕（一）

這一次我們將會實現一個完整純粹的自定義控制元件，而不是像之前的組合控制元件一樣，拿系統的控制元件來實現；計劃分為三部分：自定義控制元件的基本部分，和自定義控制元件的自定義屬性；下面就開始第一部分的編寫，本次以一個定義的開關按鈕為例，下面就開始吧：先看看效果，一個點選開

Android自定義控制元件系列八：詳解onMeasure()(二)--利用onMeasure測量來實現圖片拉伸永不變形，解決螢幕適配問題

上一篇文章詳細講解了一下onMeasure/measure方法在Android自定義控制元件時的原理和作用，參看博文：Android自定義控制元件系列七：詳解onMeasure()方法中如何測量一個控制元件尺寸(一)，今天就來真正實踐一下，讓這兩個方法大顯神威來幫我們搞定圖片的螢幕適配問題。

Android自定義控制元件系列(三)—底部選單(上)

今天我們封裝一個底部的選單欄，這個大多數的應用都會用到，因此我們來自定義，方便以後專案的使用。該控制元件的實現將分上下篇來介紹，先來看一個選單欄的子控制元件–MenuItemM，這個控制元件有什麼用呢？我們來看下一些主流app上的一些控制元件，如：

Android自定義控制元件（二）-給自定義控制元件新增事件

在這篇部落格中主要講解給Android自定義控制元件新增點選事件，實現可以按住百分比圓圈在螢幕上進行拖動圓圈的功能。分兩部分講，第一部分是獲取自定義控制元件的座標，第二部分是重新繪製控制元件。第一部分：獲取自定義控制元件座標首先看一張圖，這是自定義控制元件中獲

Android自定義控制元件系列：詳解onMeasure()方法中如何測量一個控制元件尺寸(一)

轉載請註明出處：http://blog.csdn.net/cyp331203/article/details/45027641 今天的任務就是詳細研究一下protected void onMeasure(int widthMeasureSpec, int he

Android自定義控制元件系列七：詳解onMeasure()方法中如何測量一個控制元件尺寸(一)

自定義view/viewgroup要重寫的幾個方法：onMeasure()，onLayout()，onDraw()。(不熟悉的話可以檢視專欄的前幾篇文章：)。今天的任務就是詳細研究一下protected void onMeasure(int wid

Android自定義控制元件系列一：如何測量控制元件尺寸

測量控制元件尺寸(寬度、高度)是開發自定義控制元件的第一步，只有確定尺寸後才能開始畫(利用canvas在畫布上畫，我們所使用的控制元件實際上都是這樣畫上去的)。當然，這個尺寸是需要根據控制元件的各個部分計算出來的，比如：padding、文字大小，間距等。非容器控制元件的onM

Android自定義控制元件系列十：利用新增自定義佈局來搞定觸控事件的分發，解決組合介面中特定控制元件響應特定方向的事件

這個例子是比較有用的，基本上可以說，寫完這一次，以後很多情況下，直接拿過來addView一下，然後再addInterceptorView一下，就可以輕輕鬆鬆的達到組合介面中特定控制元件來響應特定方向的觸控事件了。在寫Android應用

Android自定義控制元件系列案例【四】

案例效果：模擬器上執行有些鋸齒，真機上和預期一樣好案例分析：看效果，第一直覺肯定是Android原生態控制元件中沒有這樣的控制元件實現這種效果，自然想到應該需要自定義控制元件了，沒錯，這就是通過自定義控制元件來繪製的一個圓環進度條。仔細分析發現這個效果的進度條應該

Android自定義控制元件系列一：Android如何實現老版優酷客戶端三級環形選單

轉載連結：http://blog.csdn.net/cyp331203/article/details/40423727 先來看看效果：一眼看上去好像還挺炫的，感覺比較複雜。。。實際上並不難，下面我們來看看如何實現：基本素

Android自定義控制元件系列案例【一】

Android自定義控制元件的重要性就不多說了，總之是技術進階，面試常見，高薪必備。本篇博文的目的很簡單，就是希望通過自定義控制元件來解決一個常見需求點，從而感受一下自定義控制元件的魅力與強大。案

android自定義控制元件系列教程----繼承ViewGroup實現帶阻力效果的可回彈的SrollView

package com.example.scolview; import android.content.Context; import android.util.Log; import android.view.MotionEvent; import android.view.VelocityTracke

Android自定義控制元件：進度條的四種實現方式

Progress Wheel為GitHub熱門專案，作者是：Todd-Davies，專案地址： https://github.com/Todd-Davies/ProgressWheel 前三種實現方式程式碼出自： http://stormzhang.com/ope

Android自定義控制元件開發系列（三）——仿支付寶六位支付密碼輸入頁面

在移動互聯領域，有那麼幾家龍頭一直是我等學習和追求的目標，比如支付寶、微信、餓了麼、酷狗音樂等等，大神舉不勝舉，他們設計的介面、互動方式已經培養了中國（有可能會是世界）民眾的操作習慣：舉個小例子，對話方塊“確定”按鈕的左右位置就很有學問，如果大家都是左邊取消

Android自定義控制元件開發系列(一)——第一次動手做自定義控制元件

Android系統提供的控制元件多種多樣，以至於很多初學者經常忘了還有這樣那樣的控制元件沒用過甚至沒聽過。儘管如此，但是系統控制元件大多比較死板，而且不夠美觀，很多多樣化的顯示或是互動

android-自定義控制元件

自定義控制元件兩種方式 1、繼承ViewGroup 例如：ViewGroup , LinearLayout, FrameLayout, RelativeLayout等。 2、繼承View 例如：View, TextView, ImageView, Button等。 View的測量

Android 自定義控制元件-星級評分

在學習自定義控制元件時需要一些例子來練練手，本文這個控制元件就是在這種環境下產生的（可能有BUG）；這個控制元件設計的特點： 1，可以任意修改星星數量 2，可以星星大小會隨控制元件大小而縮小，在控制元件足夠大的情況可以任意設定星星大小 3，滑動監聽，根據滑動距離選擇星級 4，可

[Android自定義控制元件] Android自定義控制元件

轉載自： http://blog.163.com/[email protected]/blog/static/103242241201382210910473/ 開發自定義控制元件的步驟: 1、瞭解View的工作原理 2、

Android 自定義控制元件釋義

由於經常在android的開發過過程中與控制元件打交道,所以有些android控制元件並不能滿足我們的需求, 進而需要自定義一些為我們所用,但是本文只是一些名詞解析,具體實現可以網路搜尋獲得答案,在此只是個人的筆錄 1:自定義控制元件方式: 1.1:繼承view,button,

Android自定義控制元件系列(二)—icon+文字的多種效果實現

相關推薦