Drawable代碼化，減小你的XML

時間 2019-12-08

標籤 drawable 代碼減小 xml 欄目 XML 简体版

原文原文鏈接

前言

以前在寫項目的時候，少說都要有二三十個Drawable文件，不一樣的漸變，不一樣的圓角。每次要修改這個樣式的時候，就須要找到這個XML，這個這個控件，而後再點到這個Drawable，有時候，還可能牽一髮而動全身，別的地方也改動了。因此，就想着寫一個工具類，來簡化這一步驟。html

初始化

咱們一般寫圓角、漸變都是在 <gradient/> 標籤下加的屬性，因此咱們今天的主角就是GradientDrawableandroid

填充顏色

/**
         * 填充顏色
         * @param fillColor 填充顏色
         */
        fun setFillColor(fillColor: Any): Builder {
            gradientDrawable?.setColor(DisplayUtil.colorConvert(App.Context, fillColor))
            return this
        }
複製代碼

描邊顏色

/**
         * 描邊顏色
         * @param strokeColor 描邊顏色
         * @param strokeWidth 描邊粗細
         */
        fun setStrokeColor(strokeColor: Any, strokeWidth: Int): Builder {
            gradientDrawable?.setStroke(
                DisplayUtil.dp2px(strokeWidth),
                DisplayUtil.colorConvert(App.Context, strokeColor),
                0f,
                0f
            )
            return this
        }
複製代碼

統一圓角

/**
         * 圓角
         */
        fun setRadius(radius: Int): Builder {
            gradientDrawable?.cornerRadius = DisplayUtil.dp2px(radius).toFloat()
            return this
        }
複製代碼

分別設置圓角

/**
         * 單獨設置圓角
         */
        fun setAroundRadius(
            topLeftRadius: Int,
            topRightRadius: Int,
            bottomRightRidus: Int,
            bottomLeftRidus: Int
        ): Builder {
            gradientDrawable?.cornerRadii = floatArrayOf(
                DisplayUtil.dp2px(topLeftRadius).toFloat(),
                DisplayUtil.dp2px(topLeftRadius).toFloat(),
                DisplayUtil.dp2px(topRightRadius).toFloat(),
                DisplayUtil.dp2px(topRightRadius).toFloat(),
                DisplayUtil.dp2px(bottomRightRidus).toFloat(),
                DisplayUtil.dp2px(bottomRightRidus).toFloat(),
                DisplayUtil.dp2px(bottomLeftRidus).toFloat(),
                DisplayUtil.dp2px(bottomLeftRidus).toFloat()
            )
            return this
        }
複製代碼

虛線

/**
         * 虛線
         * @param strokeWidth 線寬度
         * @param dashColor   虛線顏色
         * @param dashWidth   虛線長度
         * @param dashGap     虛線間隔
         * @param shapeType   虛線類型
         *                   GradientDrawable#LINE 線
         *                   GradientDrawable#OVAL 橢圓
         *                   GradientDrawable#RECTANGLE 矩形
         *
         */
        fun setDash(
            strokeWidth: Int,
            dashColor: Any,
            dashWidth: Int,
            dashGap: Int,
            shapeType: Int = GradientDrawable.LINE
        ): Builder {
            gradientDrawable?.apply {
                setStroke(
                    DisplayUtil.dp2px(strokeWidth),
                    DisplayUtil.colorConvert(App.Context, dashColor),
                    DisplayUtil.dp2px(dashWidth).toFloat(),
                    DisplayUtil.dp2px(dashGap).toFloat()
                )
                shape = shapeType
            }
            return this
        }
複製代碼

這裏的虛線只是橫線，若是是豎線我仍是經過XML來實現的。豎線的和絃就是經過旋轉，把橫線旋轉90°bash

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-100dp"
        android:right="-100dp">
        <rotate
            android:fromDegrees="90"
            android:visible="true">
            <shape android:shape="line">
                <stroke
                    android:width="1dp"
                    android:color="@color/red"
                    android:dashWidth="6dp"
                    android:dashGap="4dp" />
            </shape>
        </rotate>
    </item>
</layer-list>
複製代碼

漸變色

這裏的漸變色，咱們操做的對象時GradientDrawable。 orientation 這個屬性API提供了8種方向，分別是app

上到下

下到上

左到右

右到左

左上到右下

右下到左下

右上到左下

左下到右上

//漸變色
        fun setShadow(
            orientation: GradientDrawable.Orientation,
            startColor: Any,
            endColor: Any
        ): Builder {
            //若是須要漸變色須要在第一個調用
            gradientDrawable = GradientDrawable(
                orientation, intArrayOf(
                    DisplayUtil.colorConvert(App.Context, startColor),
                    DisplayUtil.colorConvert(App.Context, endColor)
                )
            )
            return this
        }
複製代碼

至此，UI的三大法寶：陰影、漸變和圓角，咱們已經搞定了兩個。陰影的話，咱們的UI比較可愛，沒有太多陰影，有的話，要麼使用layer-list要麼就是切圖。工具

完整源碼

class ViewShapeUtil {

    class Builder {
        private var gradientDrawable: GradientDrawable? = null
        private var viewShapeUtil: ViewShapeUtil? = null

        init {
            gradientDrawable = GradientDrawable()
            viewShapeUtil = ViewShapeUtil()
        }

        /**
         * 填充顏色
         * @param fillColor 填充顏色
         */
        fun setFillColor(fillColor: Any): Builder {
            gradientDrawable?.setColor(DisplayUtil.colorConvert(App.Context, fillColor))
            return this
        }

        /**
         * 描邊顏色
         * @param strokeColor 描邊顏色
         * @param strokeWidth 描邊粗細
         */
        fun setStrokeColor(strokeColor: Any, strokeWidth: Int): Builder {
            gradientDrawable?.setStroke(
                DisplayUtil.dp2px(strokeWidth),
                DisplayUtil.colorConvert(App.Context, strokeColor),
                0f,
                0f
            )
            return this
        }

        /**
         * 圓角
         */
        fun setRadius(radius: Int): Builder {
            gradientDrawable?.cornerRadius = DisplayUtil.dp2px(radius).toFloat()
            return this
        }

        /**
         * 單獨設置圓角
         */
        fun setAroundRadius(
            topLeftRadius: Int,
            topRightRadius: Int,
            bottomRightRidus: Int,
            bottomLeftRidus: Int
        ): Builder {
            gradientDrawable?.cornerRadii = floatArrayOf(
                DisplayUtil.dp2px(topLeftRadius).toFloat(),
                DisplayUtil.dp2px(topLeftRadius).toFloat(),
                DisplayUtil.dp2px(topRightRadius).toFloat(),
                DisplayUtil.dp2px(topRightRadius).toFloat(),
                DisplayUtil.dp2px(bottomRightRidus).toFloat(),
                DisplayUtil.dp2px(bottomRightRidus).toFloat(),
                DisplayUtil.dp2px(bottomLeftRidus).toFloat(),
                DisplayUtil.dp2px(bottomLeftRidus).toFloat()
            )
            return this
        }

        /**
         * 虛線
         * @param strokeWidth 線寬度
         * @param dashColor   虛線顏色
         * @param dashWidth   虛線長度
         * @param dashGap     虛線間隔
         * @param shapeType   虛線類型
         *                   GradientDrawable#LINE
         *                   GradientDrawable#OVAL
         *                   GradientDrawable#RECTANGLE
         *                   GradientDrawable#RING
         *
         */
        fun setDash(
            strokeWidth: Int,
            dashColor: Any,
            dashWidth: Int,
            dashGap: Int,
            shapeType: Int = GradientDrawable.LINE
        ): Builder {
            gradientDrawable?.apply {
                setStroke(
                    DisplayUtil.dp2px(strokeWidth),
                    DisplayUtil.colorConvert(App.Context, dashColor),
                    DisplayUtil.dp2px(dashWidth).toFloat(),
                    DisplayUtil.dp2px(dashGap).toFloat()
                )
                shape = shapeType
            }
            return this
        }

        //漸變色
        fun setShadow(
            orientation: GradientDrawable.Orientation,
            startColor: Any,
            endColor: Any
        ): Builder {
            //由於這個是new 出來的,因此.這個調用須要在第一個
            gradientDrawable = GradientDrawable(
                orientation, intArrayOf(
                    DisplayUtil.colorConvert(App.Context, startColor),
                    DisplayUtil.colorConvert(App.Context, endColor)
                )
            )
            return this
        }

        fun show(tagView: View): ViewShapeUtil {
            tagView.background = gradientDrawable
            return viewShapeUtil!!
        }
    }
}
複製代碼

顏色轉換

/**
     * 顏色轉換
     *
     * @param color
     * @return
     */
    fun colorConvert(context: Context?, color: Any): Int {
        if (color is String) {
            return Color.parseColor(color.toString())
        }
        return if (color is Int) {
            ContextCompat.getColor(context!!, color)
        } else R.color.colorAccent
    }
複製代碼

本文，主要是介紹經過代碼設置View的背景樣式。如文中有錯誤，還望指正，感謝。歡迎討論ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。