我們開發Android的時候經常會碰到給按鈕或者文字設定背景，圓角，填充顏色，描邊，按壓狀態這些樣式，首先想到的就是用shape，selector生成一個xml檔案然後通過drawable引用，但是隨著專案維護迭代的時間越長，你會發現shape,selector檔案的數量會瘋狂增加，可能有時候幾個人同事開發也會建立一樣的樣式，很難進行管理，今天我們就通過自定義View來減少shape這歌檔案的數量，只要通過設定屬性就可以實現想要的效果。

通用shape樣式按鈕CommonShapeButton:

package com.blue.view

import android.app.Activity
import android.content.Context
import android.content.ContextWrapper
import android.content.res.ColorStateList
import android.graphics.Canvas
import android.graphics.drawable.Drawable
import android.graphics.drawable.GradientDrawable
import android.graphics.drawable.RippleDrawable
import android.graphics.drawable.StateListDrawable
import android.os.Build
import android.support.v7.widget.AppCompatButton
import android.util.AttributeSet
import android.view.Gravity
import com.blue.R

/**
 * 通用shape樣式按鈕
 */
class CommonShapeButton @JvmOverloads constructor(
        context: Context,
        attrs: AttributeSet? = null,
        defStyleAttr: Int = 0
) : AppCompatButton(context, attrs, defStyleAttr) {

    private companion object {
        val TOP_LEFT = 1
        val TOP_RIGHT = 2
        val BOTTOM_RIGHT = 4
        val BOTTOM_LEFT = 8
    }

    /**
     * shape模式
     * 矩形（rectangle）、橢圓形(oval)、線形(line)、環形(ring)
     */
    private var mShapeMode = 0

    /**
     * 填充顏色
     */
    private var mFillColor = 0

    /**
     * 按壓顏色
     */
    private var mPressedColor = 0

    /**
     * 描邊顏色
     */
    private var mStrokeColor = 0

    /**
     * 描邊寬度
     */
    private var mStrokeWidth = 0

    /**
     * 圓角半徑
     */
    private var mCornerRadius = 0
    /**
     * 圓角位置
     */
    private var mCornerPosition = 0

    /**
     * 點選動效
     */
    private var mActiveEnable = false

    /**
     * 起始顏色
     */
    private var mStartColor = 0

    /**
     * 結束顏色
     */
    private var mEndColor = 0

    /**
     * 漸變方向
     * 0-GradientDrawable.Orientation.TOP_BOTTOM
     * 1-GradientDrawable.Orientation.LEFT_RIGHT
     */
    private var mOrientation = 0

    /**
     * drawable位置
     * -1-null、0-left、1-top、2-right、3-bottom
     */
    private var mDrawablePosition = -1

    /**
     * 普通shape樣式
     */
    private val normalGradientDrawable: GradientDrawable by lazy { GradientDrawable() }
    /**
     * 按壓shape樣式
     */
    private val pressedGradientDrawable: GradientDrawable by lazy { GradientDrawable() }
    /**
     * shape樣式集合
     */
    private val stateListDrawable: StateListDrawable by lazy { StateListDrawable() }
    // button內容總寬度
    private var contentWidth = 0f
    // button內容總高度
    private var contentHeight = 0f

    init {
        context.obtainStyledAttributes(attrs, R.styleable.CommonShapeButton).apply {
            mShapeMode = getInt(R.styleable.CommonShapeButton_csb_shapeMode, 0)
            mFillColor = getColor(R.styleable.CommonShapeButton_csb_fillColor, 0xFFFFFFFF.toInt())
            mPressedColor = getColor(R.styleable.CommonShapeButton_csb_pressedColor, 0xFF666666.toInt())
            mStrokeColor = getColor(R.styleable.CommonShapeButton_csb_strokeColor, 0)
            mStrokeWidth = getDimensionPixelSize(R.styleable.CommonShapeButton_csb_strokeWidth, 0)
            mCornerRadius = getDimensionPixelSize(R.styleable.CommonShapeButton_csb_cornerRadius, 0)
            mCornerPosition = getInt(R.styleable.CommonShapeButton_csb_cornerPosition, -1)
            mActiveEnable = getBoolean(R.styleable.CommonShapeButton_csb_activeEnable, false)
            mDrawablePosition = getInt(R.styleable.CommonShapeButton_csb_drawablePosition, -1)
            mStartColor = getColor(R.styleable.CommonShapeButton_csb_startColor, 0xFFFFFFFF.toInt())
            mEndColor = getColor(R.styleable.CommonShapeButton_csb_endColor, 0xFFFFFFFF.toInt())
            mOrientation = getColor(R.styleable.CommonShapeButton_csb_orientation, 0)
            recycle()
        }
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        // 初始化normal狀態
        with(normalGradientDrawable) {
            // 漸變色
            if (mStartColor != 0xFFFFFFFF.toInt() && mEndColor != 0xFFFFFFFF.toInt()) {
                colors = intArrayOf(mStartColor, mEndColor)
                when (mOrientation) {
                    0 -> orientation = GradientDrawable.Orientation.TOP_BOTTOM
                    1 -> orientation = GradientDrawable.Orientation.LEFT_RIGHT
                }
            }
            // 填充色
            else {
                setColor(mFillColor)
            }
            when (mShapeMode) {
                0 -> shape = GradientDrawable.RECTANGLE
                1 -> shape = GradientDrawable.OVAL
                2 -> shape = GradientDrawable.LINE
                3 -> shape = GradientDrawable.RING
            }
            // 統一設定圓角半徑
            if (mCornerPosition == -1) {
                cornerRadius = mCornerRadius.toFloat()
            }
            // 根據圓角位置設定圓角半徑
            else {
                cornerRadii = getCornerRadiusByPosition()
            }
            // 預設的透明邊框不繪製,否則會導致沒有陰影
            if (mStrokeColor != 0) {
                setStroke(mStrokeWidth, mStrokeColor)
            }
        }

        // 是否開啟點選動效
        background = if (mActiveEnable) {
            // 5.0以上水波紋效果
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                RippleDrawable(ColorStateList.valueOf(mPressedColor), normalGradientDrawable, null)
            }
            // 5.0以下變色效果
            else {
                // 初始化pressed狀態
                with(pressedGradientDrawable) {
                    setColor(mPressedColor)
                    when (mShapeMode) {
                        0 -> shape = GradientDrawable.RECTANGLE
                        1 -> shape = GradientDrawable.OVAL
                        2 -> shape = GradientDrawable.LINE
                        3 -> shape = GradientDrawable.RING
                    }
                    cornerRadius = mCornerRadius.toFloat()
                    setStroke(mStrokeWidth, mStrokeColor)
                }

                // 注意此處的add順序，normal必須在最後一個，否則其他狀態無效
                // 設定pressed狀態
                stateListDrawable.apply {
                    addState(intArrayOf(android.R.attr.state_pressed), pressedGradientDrawable)
                    // 設定normal狀態
                    addState(intArrayOf(), normalGradientDrawable)
                }
            }
        } else {
            normalGradientDrawable
        }
    }

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        // 如果xml中配置了drawable則設定padding讓文字移動到邊緣與drawable靠在一起
        // button中配置的drawable預設貼著邊緣
        if (mDrawablePosition > -1) {
            compoundDrawables?.let {
                val drawable: Drawable? = compoundDrawables[mDrawablePosition]
                drawable?.let {
                    // 圖片間距
                    val drawablePadding = compoundDrawablePadding
                    when (mDrawablePosition) {
                    // 左右drawable
                        0, 2 -> {
                            // 圖片寬度
                            val drawableWidth = it.intrinsicWidth
                            // 獲取文字寬度
                            val textWidth = paint.measureText(text.toString())
                            // 內容總寬度
                            contentWidth = textWidth + drawableWidth + drawablePadding
                            val rightPadding = (width - contentWidth).toInt()
                            // 圖片和文字全部靠在左側
                            setPadding(0, 0, rightPadding, 0)
                        }
                    // 上下drawable
                        1, 3 -> {
                            // 圖片高度
                            val drawableHeight = it.intrinsicHeight
                            // 獲取文字高度
                            val fm = paint.fontMetrics
                            // 單行高度
                            val singeLineHeight = Math.ceil(fm.descent.toDouble() - fm.ascent.toDouble()).toFloat()
                            // 總的行間距
                            val totalLineSpaceHeight = (lineCount - 1) * lineSpacingExtra
                            val textHeight = singeLineHeight * lineCount + totalLineSpaceHeight
                            // 內容總高度
                            contentHeight = textHeight + drawableHeight + drawablePadding
                            // 圖片和文字全部靠在上側
                            val bottomPadding = (height - contentHeight).toInt()
                            setPadding(0, 0, 0, bottomPadding)
                        }
                    }
                }

            }
        }
        // 內容居中
        gravity = Gravity.CENTER
        // 可點選
        isClickable = true
        changeTintContextWrapperToActivity()
    }

    override fun onDraw(canvas: Canvas) {
        // 讓圖片和文字居中
        when {
            contentWidth > 0 && (mDrawablePosition == 0 || mDrawablePosition == 2) -> canvas.translate((width - contentWidth) / 2, 0f)
            contentHeight > 0 && (mDrawablePosition == 1 || mDrawablePosition == 3) -> canvas.translate(0f, (height - contentHeight) / 2)
        }
        super.onDraw(canvas)
    }

    /**
     * 從support23.3.0開始View中的getContext方法返回的是TintContextWrapper而不再是Activity
     * 如果使用xml註冊onClick屬性，就會通過反射到Activity中去找對應的方法
     * 5.0以下系統會反射到TintContextWrapper中去找對應的方法，程式直接crash
     * 所以這裡需要針對5.0以下系統單獨處理View中的getContext返回值
     */
    private fun changeTintContextWrapperToActivity() {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            getActivity()?.let {
                var clazz: Class<*>? = this::class.java
                while (clazz != null) {
                    try {
                        val field = clazz.getDeclaredField("mContext")
                        field.isAccessible = true
                        field.set(this, it)
                        break
                    } catch (e: Exception) {
                        e.printStackTrace()
                    }
                    clazz = clazz.superclass
                }
            }
        }
    }

    /**
     * 從context中得到真正的activity
     */
    private fun getActivity(): Activity? {
        var context = context
        while (context is ContextWrapper) {
            if (context is Activity) {
                return context
            }
            context = context.baseContext
        }
        return null
    }

    /**
     * 根據圓角位置獲取圓角半徑
     */
    private fun getCornerRadiusByPosition(): FloatArray {
        val result = floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
        val cornerRadius = mCornerRadius.toFloat()
        if (containsFlag(mCornerPosition, TOP_LEFT)) {
            result[0] = cornerRadius
            result[1] = cornerRadius
        }
        if (containsFlag(mCornerPosition, TOP_RIGHT)) {
            result[2] = cornerRadius
            result[3] = cornerRadius
        }
        if (containsFlag(mCornerPosition, BOTTOM_RIGHT)) {
            result[4] = cornerRadius
            result[5] = cornerRadius
        }
        if (containsFlag(mCornerPosition, BOTTOM_LEFT)) {
            result[6] = cornerRadius
            result[7] = cornerRadius
        }
        return result
    }

    /**
     * 是否包含對應flag
     */
    private fun containsFlag(flagSet: Int, flag: Int): Boolean {
        return flagSet or flag == flagSet
    }
}
 

attr.xml中的程式碼：

<resources>
    <declare-styleable name="CommonShapeButton">
        <!--shape模式-->
        <attr name="csb_shapeMode" format="enum">
            <enum name="rectangle" value="0" />
            <enum name="oval" value="1" />
            <enum name="line" value="2" />
            <enum name="ring" value="3" />
        </attr>
        <!--填充顏色-->
        <attr name="csb_fillColor" format="color" />
        <!--按壓顏色-->
        <attr name="csb_pressedColor" format="color" />
        <!--描邊顏色-->
        <attr name="csb_strokeColor" format="color" />
        <!--描邊寬度-->
        <attr name="csb_strokeWidth" format="dimension" />
        <!--圓角大小-->
        <attr name="csb_cornerRadius" format="dimension" />
        <!--圓角位置-->
        <attr name="csb_cornerPosition">
            <flag name="topLeft" value="1" />
            <flag name="topRight" value="2" />
            <flag name="bottomRight" value="4" />
            <flag name="bottomLeft" value="8" />
        </attr>
        <!--是否開啟動效-->
        <attr name="csb_activeEnable" format="boolean" />
        <!--drawable位置-->
        <attr name="csb_drawablePosition" format="enum">
            <enum name="left" value="0" />
            <enum name="top" value="1" />
            <enum name="right" value="2" />
            <enum name="bottom" value="3" />
        </attr>
        <!--漸變開始顏色-->
        <attr name="csb_startColor" format="color" />
        <!--漸變結束顏色-->
        <attr name="csb_endColor" format="color" />
        <!--漸變方向-->
        <attr name="csb_orientation" format="enum">
            <enum name="TOP_BOTTOM" value="0" />
            <enum name="LEFT_RIGHT" value="1" />
        </attr>
    </declare-styleable>
</resources>
 

style.xml中的程式碼：

<resources>
    <!-- 自定義按鈕樣式 -->
    <style name="CommonShapeButtonStyle" parent="@style/Widget.AppCompat.Button">
        <item name="android:minWidth">0dp</item>
        <item name="android:minHeight">0dp</item>
        <item name="android:padding">0dp</item>
    </style>
</resources>
 

在使用的時候只需要像使用自定義View一樣在佈局檔案中設定相應的屬性即可實現shape樣式。

例如下面的例子：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:orientation="vertical">

            <com.blue.view.CommonShapeButton
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                android:text="文字樣式+填充顏色+圓角"
                android:textColor="#fff"
                app:csb_cornerRadius="50dp"
                app:csb_fillColor="#00bc71" />

            <com.blue.view.CommonShapeButton
                style="@style/CommonShapeButtonStyle"
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                android:text="按鈕樣式+填充顏色+圓角"
                android:textColor="#fff"
                app:csb_cornerRadius="50dp"
                app:csb_fillColor="#00bc71" />

            <com.blue.view.CommonShapeButton
                style="@style/CommonShapeButtonStyle"
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                android:text="按鈕樣式+水波紋+填充顏色+圓角"
                android:textColor="#fff"
                app:csb_activeEnable="true"
                app:csb_cornerRadius="50dp"
                app:csb_fillColor="#00bc71" />

            <com.blue.view.CommonShapeButton
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                android:text="文字樣式+填充顏色+描邊"
                android:textColor="#fff"
                app:csb_activeEnable="true"
                app:csb_fillColor="#00bc71"
                app:csb_strokeColor="#000"
                app:csb_strokeWidth="1dp" />

            <com.blue.view.CommonShapeButton
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                android:text="文字樣式+水波紋+左右漸變"
                android:textColor="#fff"
                app:csb_activeEnable="true"
                app:csb_endColor="#00bc71"
                app:csb_orientation="LEFT_RIGHT"
                app:csb_startColor="#8800bc71" />

            <com.blue.view.CommonShapeButton
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                android:text="橢圓"
                android:textColor="#fff"
                app:csb_fillColor="#00bc71"
                app:csb_shapeMode="oval"
                app:csb_strokeColor="#000"
                app:csb_strokeWidth="1dp" />

            <Button
                android:layout_width="180dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:drawableLeft="@drawable/ic_changebtn_change"
                android:text="預設按鈕圖示無法居中"
                android:textColor="#808080"
                android:textSize="11dp" />

            <com.blue.view.CommonShapeButton
                android:layout_width="150dp"
                android:layout_height="30dp"
                android:layout_margin="10dp"
                android:drawableLeft="@drawable/ic_changebtn_change"
                android:text="帶圖示樣式居中"
                android:textColor="#808080"
                android:textSize="11dp"
                app:csb_cornerRadius="50dp"
                app:csb_drawablePosition="left"
                app:csb_strokeColor="#e6e6e6"
                app:csb_strokeWidth="0.5dp" />

            <com.blue.view.CommonShapeButton
                android:layout_width="150dp"
                android:layout_height="30dp"
                android:layout_margin="10dp"
                android:drawableRight="@drawable/ic_changebtn_change"
                android:text="帶圖示樣式居中"
                android:textColor="#808080"
                android:textSize="11dp"
                app:csb_cornerRadius="50dp"
                app:csb_drawablePosition="right"
                app:csb_strokeColor="#e6e6e6"
                app:csb_strokeWidth="0.5dp" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.blue.view.CommonShapeButton
                    android:id="@+id/btn"
                    android:layout_width="50dp"
                    android:layout_height="130dp"
                    android:layout_margin="10dp"
                    android:drawableTop="@drawable/ic_changebtn_change"
                    android:text="帶圖示樣式居中"
                    android:textColor="#808080"
                    android:textSize="11dp"
                    app:csb_cornerRadius="50dp"
                    app:csb_drawablePosition="top"
                    app:csb_strokeColor="#e6e6e6"
                    app:csb_strokeWidth="0.5dp" />

                <com.blue.view.CommonShapeButton
                    android:id="@+id/btn2"
                    android:layout_width="50dp"
                    android:layout_height="130dp"
                    android:layout_margin="10dp"
                    android:layout_toRightOf="@+id/btn"
                    android:drawableBottom="@drawable/ic_changebtn_change"
                    android:text="帶圖示樣式居中"
                    android:textColor="#808080"
                    android:textSize="11dp"
                    app:csb_cornerRadius="50dp"
                    app:csb_drawablePosition="bottom"
                    app:csb_strokeColor="#e6e6e6"
                    app:csb_strokeWidth="0.5dp" />

                <com.blue.view.CommonShapeButton
                    android:id="@+id/btn3"
                    android:layout_width="130dp"
                    android:layout_height="50dp"
                    android:layout_margin="10dp"
                    android:layout_toRightOf="@+id/btn2"
                    android:drawableTop="@drawable/ic_changebtn_change"
                    android:text="帶圖示樣式居中"
                    android:textColor="#808080"
                    android:textSize="11dp"
                    app:csb_cornerRadius="50dp"
                    app:csb_drawablePosition="top"
                    app:csb_strokeColor="#e6e6e6"
                    app:csb_strokeWidth="0.5dp" />

                <com.blue.view.CommonShapeButton
                    android:id="@+id/btn4"
                    android:layout_width="130dp"
                    android:layout_height="50dp"
                    android:layout_below="@+id/btn3"
                    android:layout_margin="10dp"
                    android:layout_toRightOf="@+id/btn2"
                    android:drawableBottom="@drawable/ic_changebtn_change"
                    android:text="帶圖示樣式居中"
                    android:textColor="#808080"
                    android:textSize="11dp"
                    app:csb_cornerRadius="50dp"
                    app:csb_drawablePosition="bottom"
                    app:csb_strokeColor="#e6e6e6"
                    app:csb_strokeWidth="0.5dp" />
            </RelativeLayout>

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</layout>

感興趣的同學可以在自己的專案中試一試！

build.gradle檔案中的設定如下(可根據自己的需要進行設定)：

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'kotlin-kapt'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.blue"
        minSdkVersion 16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    dataBinding {
        enabled = true
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'

    // databinding
    kapt "com.android.databinding:compiler:3.0.0"
}