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