Android - 为响应用户点击/单击的静态按钮添加效果

Question

这是我想做的。

默认按钮应该是这样的： Button default

一旦用户点击或点击这个按钮，它应该是这样的：Button selected

到目前为止，我所做的是在按钮的底部放置一条线。但是，我不能将那个小的空白圆圈放在按钮的左下角。我认为可以将圆圈作为图像并将其固定为相同的高度和宽度。但我不知道怎么把它放在按钮上。

我还想知道如果用户选择按钮，如何编码效果。选中后，按钮底部的线条应变粗，圆圈应更改为白色。

当前按钮只是静态的，如果用户点击或点击它就没有效果：Image

这里是代码。

game_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">

    <shape android:shape="rectangle" >

        <stroke
            android:width="1dp"
            android:color="@color/white" />

        <solid android:color="#00FFFFFF" />

        <padding android:left="10dp"
            android:right="10dp"
            android:top="10dp"
            android:bottom="10dp" />
    </shape>
    </item>
</layer-list>

---

这是按钮 xml。

            <Button
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="25dp"
                android:text="answer1"
                android:textColor="#fff"
                android:padding="8dp"
                android:background="@drawable/game_border"
                android:id="@+id/answer1"/>

Answer 1

希望能帮到你。

要解决这种情况，您必须创建一个自定义视图，并在此视图中使用您想要包含的元素设计您的按钮。

你需要创建两个圆形的Drawable Resource：

没有背景的圆圈：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent"/>
</shape>

带背景的圆圈：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
</shape>

创建自定义按钮布局：

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ddd"
    android:clickable="true"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="@string/button_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iv_circle"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_title"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/shape_circle_empty" />

    <LinearLayout
        android:id="@+id/ll_line"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginEnd="8dp"
        android:background="@color/colorAccent"
        android:contentDescription="@null"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@+id/iv_circle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/iv_circle"
        app:layout_constraintTop_toTopOf="@+id/iv_circle" />
</androidx.constraintlayout.widget.ConstraintLayout>

在 your_activity.xml 布局中，添加一个 Include 以显示按钮的自定义视图

<include
        android:id="@+id/btn_custom"
        layout="@layout/button_custom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

在您的活动类中，添加您要收听的事件的捕获。在我的例子中，我使用了 OnTouchListener 事件。

您的活动：

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btn = this.findViewById<View>(R.id.btn_custom)
        val circle = btn.findViewById<ImageView>(R.id.iv_circle)
        val line = btn.findViewById<LinearLayout>(R.id.ll_line)

        btn.setOnTouchListener(object : View.OnTouchListener {
            override fun onTouch(v: View?, event: MotionEvent?): Boolean {
                when (event?.action) {
                    MotionEvent.ACTION_DOWN -> {
                        circle.setBackgroundResource(R.drawable.shape_circle_solid)
                        lineSize(line, true)
                    }
                    MotionEvent.ACTION_UP -> {
                        circle.setBackgroundResource(R.drawable.shape_circle_empty)
                        lineSize(line, false)
                    }
                }

                return v?.onTouchEvent(event) ?: true
            }
        })
    }

改变线条大小的功能：

fun lineSize(view: View, isSelect: Boolean) {
        val size: Float

        if (isSelect)
            size = 2F
        else
            size = 1F

        // conver to DPI
        val height = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                size,
                getResources().getDisplayMetrics());

        view.getLayoutParams().height = height.toInt()
        view.requestLayout()
    }

结果：

普通视图

当触摸视图时