android 圆角边框边框渐变,支持边框、圆角、渐变色、透明度的GradientButton
最近在項目中發現好多Button背景顏色相同，但圓角大小不等的Button，這樣就得寫一大堆的shape或者selector，不便于管理及后期維護，于是乎變想能不能寫一個支持邊框、圓角、漸變色、透明度的萬用Button呢。為了能夠兼容button自帶的屬性，當然繼承自AppCompatButton是最好的，剩下的就需要考慮selector各狀態在我們自定義Button中怎么獲取與渲染了。最開始想到，自己draw？不過這樣有點low，需要我們處理一大堆的狀態，譬如：state_pressed、state_enabled...
那有沒有更好的實現方式呢？我們把這些狀態交由系統管理呢？在一頓尋找后，發現還真有呢，真是踏破鐵鞋無覓處，得來全不費工夫--------GradientDrawable，沒錯就是它，一個Drawable的子類。我們看看它的描敘：
A Drawable with a color gradient for buttons, backgrounds, etc.
并且通過查看它提供的相應方法，它不僅能替我們管理好各種state，也支持邊框繪制、圓角設置，漸變色當然更不用說了，看它的名字就知道啦。好了廢話就不多說了，下面就是GradientButton的代碼實現過程：
const val TOP_BOTTOM = 0
const val TR_BL = 1
const val RIGHT_LEFT = 2
const val BR_TL = 3
const val BOTTOM_TOP = 4
const val BL_TR = 5
const val LEFT_RIGHT = 6
const val TL_BR = 7
class GradientButton(context: Context, attrs: AttributeSet? = null) :
AppCompatButton(context, attrs, android.R.attr.borderlessButtonStyle) {
@IntDef(TOP_BOTTOM, TR_BL, RIGHT_LEFT, BR_TL, BOTTOM_TOP, BL_TR, LEFT_RIGHT, TL_BR)
@kotlin.annotation.Retention(AnnotationRetention.SOURCE)
annotation class Orientation
private val radii by lazy { FloatArray(8) }
private var mBackgroundDrawable: GradientButtonDrawable? = null
private var mPaddingLeft = 0.0f
private var mPaddingTop = 0.0f
private var mPaddingRight = 0.0f
private var mPaddingBottom = 0.0f
private var mMinWidth = 0
private var mMinHeight = 0
init {
val stateListDrawable = StateListDrawable()
attrs?.also { it ->
context.obtainStyledAttributes(it, R.styleable.GradientButton).apply {
val borderColorStateList = getColorStateList(R.styleable.GradientButton_border_color)
val borderWidth = getDimension(R.styleable.GradientButton_border_width, 0.0f)
val isRadiusAdjustBounds = getBoolean(R.styleable.GradientButton_is_radius_adjust_bounds, false)
val radius = getDimension(R.styleable.GradientButton_all_radius, 0.0f)
val topLeftRadius = getDimension(R.styleable.GradientButton_top_left_radius, 0.0f)
val topRightRadius = getDimension(R.styleable.GradientButton_top_right_radius, 0.0f)
val bottomLeftRadius = getDimension(R.styleable.GradientButton_bottom_left_radius, 0.0f)
val bottomRightRadius = getDimension(R.styleable.GradientButton_bottom_right_radius, 0.0f)
val backgroundColorStateList = getColorStateList(R.styleable.GradientButton_background_color)
val orientation = getInt(R.styleable.GradientButton_orientation, LEFT_RIGHT)
val startBackgroundColorStateList =
getColorStateList(R.styleable.GradientButton_start_background_color)
val centerBackgroundColorStateList =
getColorStateList(R.styleable.GradientButton_center_background_color)
val endBackgroundColorStateList = getColorStateList(R.styleable.GradientButton_end_background_color)
val backgroundAlpha = getFraction(R.styleable.GradientButton_background_alpha, 1, 1, 0.0f)
val padding = getDimension(R.styleable.GradientButton_padding, -1.0f)
mPaddingLeft = (if (padding != -1.0f) {
padding
} else {
getDimension(R.styleable.GradientButton_padding_left, mPaddingLeft)
})
mPaddingTop = (if (padding != -1.0f) {
padding
} else {
getDimension(R.styleable.GradientButton_padding_top, mPaddingTop)
})
mPaddingRight = (if (padding != -1.0f) {
padding
} else {
getDimension(R.styleable.GradientButton_padding_right, mPaddingRight)
})
mPaddingBottom = (if (padding != -1.0f) {
padding
} else {
getDimension(R.styleable.GradientButton_padding_bottom, mPaddingBottom)
})
mMinWidth = getDimensionPixelSize(R.styleable.GradientButton_min_width, 0)
mMinHeight = getDimensionPixelSize(R.styleable.GradientButton_min_height, 0)
mBackgroundDrawable = createBackgroundDrawable(getOrientation(orientation))
if (borderWidth > 0.0f || backgroundColorStateList != null || (startBackgroundColorStateList != null && endBackgroundColorStateList != null)) {
setTopLeftRadius(topLeftRadius)
setTopRightRadius(topRightRadius)
setBottomLeftRadius(bottomLeftRadius)
setBottomRightRadius(bottomRightRadius)
setRadius(radius)
setBorder(borderWidth, borderColorStateList)
setBackgroundColorStateList(backgroundColorStateList)
setGradientBackgroundColorStateList(
startBackgroundColorStateList,
centerBackgroundColorStateList,
endBackgroundColorStateList
)
setBackgroundAlpha(backgroundAlpha)
mBackgroundDrawable?.setRadius(isRadiusAdjustBounds, radii)
}
recycle()
}
} ?: also {
mBackgroundDrawable = createBackgroundDrawable(getOrientation(LEFT_RIGHT))
}
mBackgroundDrawable?.also {
stateListDrawable.addState(it.state, mBackgroundDrawable)
setGradientDrawable(stateListDrawable)
}
setPadding(mPaddingLeft.toInt(), mPaddingTop.toInt(), mPaddingRight.toInt(), mPaddingBottom.toInt())
minWidth = mMinWidth
minimumWidth = mMinWidth
minHeight = mMinHeight
minimumHeight = mMinHeight
}
private fun setGradientDrawable(stateListDrawable: StateListDrawable) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
background = stateListDrawable
} else {
setBackgroundDrawable(stateListDrawable)
}
}
/**
* 設置漸變色方向
*/
fun setOrientation(@Orientation orientation: Int) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
mBackgroundDrawable?.orientation = getOrientation(orientation)
}
}
fun setBackgroundAlpha(@FloatRange(from = 0.0, to = MAX_VALUE) alpha: Float) {
mBackgroundDrawable?.alpha = ((1.0f - alpha) * 255).toInt()
}
/**
* 漸變色設置
*/
fun setGradientBackgroundColorStateList(
startBackgroundColorStateList: ColorStateList?,
centerBackgroundColorStateList: ColorStateList? = null,
endBackgroundColorStateList: ColorStateList?
) {
mBackgroundDrawable?.setGradientBackgroundColorStateList(
startBackgroundColorStateList,
centerBackgroundColorStateList,
endBackgroundColorStateList
)
}
fun setBackgroundColorStateList(backgroundColorStateList: ColorStateList?) {
mBackgroundDrawable?.setBackgroundColorStateList(backgroundColorStateList)
}
fun setBackgroundColorRes(@ColorRes backgroundColor: Int) {
setBackgroundColorRes(backgroundColor, backgroundColor, backgroundColor)
}
fun setBackgroundColorRes(@ColorRes startBackgroundColor: Int, @ColorRes centerBackgroundColor: Int?, @ColorRes endBackgroundColor: Int) {
val centerBackgroundColorStateList = centerBackgroundColor?.let {
ColorStateList(arrayOf(intArrayOf(android.R.attr.state_enabled)), intArrayOf(context.resources.getColor(it)))
}
mBackgroundDrawable?.setGradientBackgroundColorStateList(ColorStateList(arrayOf(intArrayOf(android.R.attr.state_enabled)),
intArrayOf(context.resources.getColor(startBackgroundColor))),
centerBackgroundColorStateList,
ColorStateList(arrayOf(intArrayOf(android.R.attr.state_enabled)),
intArrayOf(context.resources.getColor(endBackgroundColor))))
}
private fun getOrientation(@Orientation orientation: Int): GradientDrawable.Orientation {
return when (orientation) {
TOP_BOTTOM -> GradientDrawable.Orientation.TOP_BOTTOM
TR_BL -> GradientDrawable.Orientation.TR_BL
RIGHT_LEFT -> GradientDrawable.Orientation.RIGHT_LEFT
BR_TL -> GradientDrawable.Orientation.BR_TL
BOTTOM_TOP -> GradientDrawable.Orientation.BOTTOM_TOP
BL_TR -> GradientDrawable.Orientation.BL_TR
TL_BR -> GradientDrawable.Orientation.TL_BR
else -> GradientDrawable.Orientation.LEFT_RIGHT
}
}
private fun createBackgroundDrawable(orientation: GradientDrawable.Orientation) =
GradientButtonDrawable(orientation, null)
fun setBorder(@FloatRange(from = 0.0, to = MAX_VALUE) borderWidth: Float, borderColorStateList: ColorStateList?) {
mBackgroundDrawable?.setBorder(borderWidth, borderColorStateList)
}
fun setBorder(@FloatRange(from = 0.0, to = MAX_VALUE) borderWidth: Float, @ColorRes borderColorRes: Int){
setBorder(borderWidth, ColorStateList(arrayOf(intArrayOf(android.R.attr.state_enabled)),
intArrayOf(context.resources.getColor(borderColorRes))))
}
/**
* 設置圓角自適應最小邊
*/
fun setRadiusAdjustBounds(isRadiusAdjustBounds: Boolean) {
mBackgroundDrawable?.setRadius(isRadiusAdjustBounds, null)
}
fun setRadius(@FloatRange(from = 0.0, to = MAX_VALUE) radius: Float) {
if (radius > 0.0f) {
for (index in radii.indices) {
radii[index] = radius
}
mBackgroundDrawable?.setRadius(radius = radii)
}
}
fun setTopLeftRadius(@FloatRange(from = 0.0, to = MAX_VALUE) topLeftRadius: Float) {
if (topLeftRadius > 0.0f) {
radii[0] = topLeftRadius
radii[1] = topLeftRadius
mBackgroundDrawable?.setRadius(radius = radii)
}
}
fun setTopRightRadius(@FloatRange(from = 0.0, to = MAX_VALUE) topRightRadius: Float) {
if (topRightRadius > 0.0f) {
radii[2] = topRightRadius
radii[3] = topRightRadius
mBackgroundDrawable?.setRadius(radius = radii)
}
}
fun setBottomLeftRadius(@FloatRange(from = 0.0, to = MAX_VALUE) bottomLeftRadius: Float) {
if (bottomLeftRadius > 0.0f) {
radii[6] = bottomLeftRadius
radii[7] = bottomLeftRadius
mBackgroundDrawable?.setRadius(radius = radii)
}
}
fun setBottomRightRadius(@FloatRange(from = 0.0, to = MAX_VALUE) bottomRightRadius: Float) {
if (bottomRightRadius > 0.0f) {
radii[4] = bottomRightRadius
radii[5] = bottomRightRadius
mBackgroundDrawable?.setRadius(radius = radii)
}
}
}
internal class GradientButtonDrawable(orientation: Orientation = Orientation.LEFT_RIGHT, @ColorInt colors: IntArray?) : GradientDrawable(orientation, colors) {
private var mBackgroundColorStateList: ColorStateList? = null
private var mStartBackgroundColorStateList: ColorStateList? = null
private var mCenterBackgroundColorStateList: ColorStateList? = null
private var mEndBackgroundColorStateList: ColorStateList? = null
private var mBorderColorStateList: ColorStateList? = null
private var mBorderWidth = 0.0f
private var mIsRadiusAdjustBounds = false
internal fun setBackgroundColorStateList(backgroundColorStateList: ColorStateList?) {
mBackgroundColorStateList = backgroundColorStateList
mStartBackgroundColorStateList = null
mCenterBackgroundColorStateList = null
mEndBackgroundColorStateList = null
setBackgroundColor()
}
internal fun setGradientBackgroundColorStateList(startBackgroundColorStateList: ColorStateList?, centerBackgroundColorStateList: ColorStateList?, endBackgroundColorStateList: ColorStateList?) {
mBackgroundColorStateList = null
mStartBackgroundColorStateList = startBackgroundColorStateList
mCenterBackgroundColorStateList = centerBackgroundColorStateList
mEndBackgroundColorStateList = endBackgroundColorStateList
setBackgroundColor()
}
internal fun setBorder(@FloatRange(from = 0.0, to = MAX_VALUE) borderWidth: Float = 0.0f, borderColorStateList: ColorStateList?) {
mBorderWidth = borderWidth
mBorderColorStateList = borderColorStateList
setBorderColor()
}
internal fun setRadius(radiusAdjustBounds: Boolean = false, radius: FloatArray?) {
mIsRadiusAdjustBounds = radiusAdjustBounds
if (!mIsRadiusAdjustBounds) {
cornerRadii = radius
}
}
private fun getColorForState(colorStateList: ColorStateList?): Int {
return colorStateList?.getColorForState(state, 0) ?: 0
}
private fun setBackgroundColor() {
mBackgroundColorStateList?.also {
if (hasNativeStateListAPI()) {
color = mBackgroundColorStateList
} else {
setColor(getColorForState(mBackgroundColorStateList))
}
} ?: also {
if (mStartBackgroundColorStateList != null && mEndBackgroundColorStateList != null) {
val colors = IntArray(mCenterBackgroundColorStateList?.let { 3 } ?: let { 2 })
colors[0] = getColorForState(mStartBackgroundColorStateList)
mCenterBackgroundColorStateList?.also {
colors[1] = getColorForState(mCenterBackgroundColorStateList)
colors[2] = getColorForState(mEndBackgroundColorStateList)
} ?: also {
colors[1] = getColorForState(mEndBackgroundColorStateList)
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
setColors(colors)
} else {
setColor(colors[0])
}
}
}
}
private fun setBorderColor() {
mBorderColorStateList?.also {
if (mBorderWidth > 0.0f) {
if (hasNativeStateListAPI()) {
setStroke(mBorderWidth.toInt(), mBorderColorStateList)
} else {
setStroke(mBorderWidth.toInt(), getColorForState(mBorderColorStateList))
}
}
}
}
private fun hasNativeStateListAPI() = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP
override fun onStateChange(stateSet: IntArray?): Boolean {
return super.onStateChange(stateSet).let {
if (mBorderColorStateList != null || mBackgroundColorStateList != null || mStartBackgroundColorStateList != null) {
setBorderColor()
setBackgroundColor()
true
} else {
it
}
}
}
override fun onBoundsChange(r: Rect?) {
super.onBoundsChange(r)
r?.also {
if (mIsRadiusAdjustBounds) {
cornerRadius = min(it.width() / 2.0f, it.height() / 2.0f)
}
}
}
}
就是這么簡單，我們只需要提供相應的color選擇器，或者背景色值即可完成我們平時需要使用一大堆shape或selector才能實現的效果，最后再看看效果圖吧，正所謂無圖無真相，嘿嘿
gradientbutton.png
好了，今天的收獲就是這么多O(∩_∩)O
總結
以上是生活随笔為你收集整理的android 圆角边框边框渐变,支持边框、圆角、渐变色、透明度的GradientButton的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html盒子自动居中,css盒子怎么居中
- 下一篇： 详解最短路算法模板(dijkstra+f