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资源：

无背景的圆圈

<?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
        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()
    }

结果：

普通视图

触摸视图时

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

1 个答案: