preface

When I was writing a project, I used to have at least 20 or 30 Drawable files, different gradients, different rounded corners. Every time you want to change this style, you have to go to this XML, this control, and then click on this Drawable, and sometimes you have to change everything else. So, think about writing a utility class to simplify this step.

Initialize the

We usually write rounded corners and gradients under the
tag, so GradientDrawable is our hero today

Fill color

/** * fillColor * @param fillColor fillColor */ funsetFillColor(fillColor: Any): Builder { gradientDrawable? .setColor(DisplayUtil.colorConvert(App.Context, fillColor))return this
        }
Copy the code

Stroke color

/** * strokeColor * @param strokeColor strokeColor * @param strokeWidth stroke size */ funsetStrokeColor(strokeColor: Any, strokeWidth: Int): Builder { gradientDrawable? .setStroke( DisplayUtil.dp2px(strokeWidth), DisplayUtil.colorConvert(App.Context, strokeColor), 0f, 0f )return this
        }
Copy the code

Unified the rounded

/** * round corners */ funsetRadius(radius: Int): Builder { gradientDrawable? .cornerRadius = DisplayUtil.dp2px(radius).toFloat()return this
        }
Copy the code

Set rounded corners separately

/** * Set rounded corners separately */ funsetAroundRadius( 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
        }
Copy the code

Dotted line

/** * dashed line * @param strokeWidth Line width * @param dashColor Dashed line color * @param dashWidth Dash length * @param dashGap dash interval * @param ShapeType Dashed line type * GradientDrawable# LINE LINE
         *                   GradientDrawable# OVAL elliptical
         *                   GradientDrawable# a RECTANGLE 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
        }
Copy the code

The dotted line here is just a horizontal line, but if it’s a vertical line I’ll do it in XML. A vertical chord is one that rotates the horizontal line by 90 degrees

<? 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>
Copy the code

gradient

Here’s a GradientDrawable for the object we’re manipulating. The orientation attribute API provides eight directions, namely

  • Top to bottom
  • Bottom to top
  • Left to right
  • Right to left
  • Top left to bottom right
  • Bottom right to bottom left
  • Top right to bottom left
  • Bottom left to top right
// Gradient funsetShadow( orientation: GradientDrawable.Orientation, startColor: Any, endColor: Any ): Builder {// gradientDrawable = gradientDrawable (orientation, intArrayOf( DisplayUtil.colorConvert(App.Context, startColor), DisplayUtil.colorConvert(App.Context, endColor) ) )return this
        }
Copy the code

So far, we’ve solved two of the UI’s three magic bullets: shadows, gradients, and rounded corners. For shadows, our UI is pretty cute, we don’t have a lot of shadows, so if we do, we either use layer-list or we just slice.

Complete source code

class ViewShapeUtil { class Builder { private var gradientDrawable: GradientDrawable? = null private var viewShapeUtil: ViewShapeUtil? = null init {gradientDrawable = gradientDrawable () viewShapeUtil = viewShapeUtil ()  */ funsetFillColor(fillColor: Any): Builder { gradientDrawable? .setColor(DisplayUtil.colorConvert(App.Context, fillColor))returnThis} /** * strokeColor * @param strokeColor strokeColor * @param strokeWidth stroke size */ funsetStrokeColor(strokeColor: Any, strokeWidth: Int): Builder { gradientDrawable? .setStroke( DisplayUtil.dp2px(strokeWidth), DisplayUtil.colorConvert(App.Context, strokeColor), 0f, 0f )returnThis} /** * rounded */ funsetRadius(radius: Int): Builder { gradientDrawable? .cornerRadius = DisplayUtil.dp2px(radius).toFloat()returnThis} /** * sets rounded corners separately */ funsetAroundRadius( 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()
            )
            returnThis} /** * dash * @param strokeWidth line width * @param dashColor dashColor * @param dashWidth dash length * @param dashGap dash interval * @param ShapeType Dashed line type * 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
            }
            returnThis} // Gradient funsetShadow (orientation: GradientDrawable. Orientation, startColor: Any, endColor: Any) : Builder {/ / because this is new, so. GradientDrawable = gradientDrawable (orientation, intArrayOf(DisplayUtil. ColorConvert (app.context, startColor), DisplayUtil.colorConvert(App.Context, endColor) ) )return this
        }

        fun show(tagView: View): ViewShapeUtil {
            tagView.background = gradientDrawable
            returnviewShapeUtil!! }}}Copy the code

Color conversion

/** * color conversion ** @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
    }
Copy the code

This article is about setting the background style of a View through code. If there are mistakes in the article, but also hope to correct, thank you. Welcome to discuss