Android开发

自定义Button 圆角可设置+点击变暗效果

2020-11-17  本文已影响0人  博丽冥夢

1.核心代码

自定义属性

  <!-- 自定义控件的属性-->
    <declare-styleable name="BaseButton">
        <attr name="bg_color" format="color" />
        <attr name="bg_corner" format="dimension" />
    </declare-styleable>

自定义圆角类

/**
 * 自定义圆角类按钮
 */
class BaseButton : AppCompatButton {
    constructor(context: Context) : super(context) {
        initView(context, null)
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        initView(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        initView(context, attrs)

    }

    private fun initView(context: Context, attrs: AttributeSet?) {
        //获取默认的颜色值 如果按钮没有设置颜色值 默认为这个颜色
        val default = ContextCompat.getColor(context, R.color.theme_color)
        //获取自定义的属性值
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.BaseButton)
        //获取设置的背景色
        val bgColor = typedArray.getColor(R.styleable.BaseButton_bg_color, default)
        //获取设置的圆角大小
        val buttonCorner = typedArray.getDimensionPixelSize(R.styleable.BaseButton_bg_corner, 0)

        //生成圆角图片
        val bgcDrawable = GradientDrawable()
        //设置图片颜色
        bgcDrawable.setColor(bgColor)
        //设置圆角大小
        bgcDrawable.cornerRadius = buttonCorner.toFloat()

        //生成一张半透明的灰色图片 #31000000为遮罩颜色 可自定义
        val bgcDrawable1 = GradientDrawable()
        bgcDrawable1.setColor(Color.parseColor("#31000000"))
        bgcDrawable1.cornerRadius = buttonCorner.toFloat()

        //生成一个图层叠加的图片 上面用灰色盖住 模拟变暗效果
        val arr = arrayOf(bgcDrawable, bgcDrawable1)
        val layerDrawable = LayerDrawable(arr)

        //设置点击后 变暗效果
        val stateListDrawable = StateListDrawable()
        stateListDrawable.addState(intArrayOf(android.R.attr.state_pressed), layerDrawable)
        stateListDrawable.addState(intArrayOf(), bgcDrawable)

        background = stateListDrawable
        typedArray.recycle()
    }

}

2.使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity"
    android:orientation="vertical"
    >
    <com.cc.android.custom.BaseButton
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="登录"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:bg_color="#008BFF"
        app:bg_corner="10dp" />


    <com.cc.android.custom.BaseButton
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="登录"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:bg_color="#025BFF"
        app:bg_corner="5dp" />

    <com.cc.android.custom.BaseButton
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="登录"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:bg_color="#915BFF"
        app:bg_corner="7dp" />

</LinearLayout>

3.效果

圆角按钮.gif

如有错误,欢迎指出!

上一篇下一篇

猜你喜欢

热点阅读