android - 如何在 Android 中添加加减按钮

Question

我想在 Android 中为我的布局添加一个加/减按钮（使用 Java），就像你可以在这里看到的那样https://ux.stackexchange.com/questions/99253/plus-minus-button-position-for -选择乘客人数。Android中是否有使用它的本机元素？我搜索了它，但找不到一个让我感到惊讶的元素，因为我认为这是应用程序中经常使用的元素（至少比你可以在 Android Studio 的布局编辑器中看到的几个项目更常用）。

是否有使用本机组件的简单解决方案？我会为每条评论感到高兴。

标签： androiduser-interfacebutton

Answer 1

这件事可以通过中间的 2 个按钮和一个 EditText 轻松实现。我在酒店菜单应用程序中使用了此代码。

整体使用此布局。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp">
    <Button
        android:id="@+id/removeBtn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:background="@drawable/custom_btn_remove"
        android:backgroundTint="@color/grey"/>
    <EditText
        android:id="@+id/itemQuanEt"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:inputType="number"
        android:minEms="1"
        android:text="1"
        android:textAllCaps="false"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:textSize="20sp"
        android:fontFamily="@font/hanken_light"/>
    <Button
        android:id="@+id/addBtn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:background="@drawable/custom_btn_add"
        android:backgroundTint="@color/grey"/>
</RelativeLayout>

//这些是可绘制的

custom_btn_add.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@drawable/ic_add_circle_outline" />
    <item android:state_pressed="true" android:drawable="@drawable/ic_add_circle_full" />
</selector>

custom_btn_remove.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@drawable/ic_remove_circle_outline" />
    <item android:state_pressed="true" android:drawable="@drawable/ic_remove_circle_full" />
</selector>

ic_add_circle_full.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM17,13h-4v4h-2v-4L7,13v-2h4L11,7h2v4h4v2z"/>
</vector>

ic_add_circle_outline.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M13,7h-2v4L7,11v2h4v4h2v-4h4v-2h-4L13,7zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
</vector>

ic_remove_circle_full.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM17,13L7,13v-2h10v2z"/>
</vector>

ic_remove_circle_outline.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M7,11v2h10v-2L7,11zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
</vector>

编辑dimens如果您想经常使用它们， 这是您定义的唯一边距。您可以将其替换为“16dp”等静态值。您也可以根据需要更改此布局。要点是使用带有 EditText 的 2 个可绘制按钮。我更改了代码以简化您的操作。

编辑 2

我不是约束布局的大师。我试图向您展示如何使用它的示例。我仍然建议您更多地了解如何在代码中使用约束，而不仅仅是拖放。

MainActivity.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/sampleBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="sample button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.077"
        tools:layout_editor_absoluteX="16dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="@+id/sampleBtn"
        app:layout_constraintVertical_bias="0.12"
        tools:layout_editor_absoluteX="16dp">

        <Button
            android:id="@+id/removeBtn"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:background="@drawable/custom_btn_remove"
            android:backgroundTint="#C5BCBC" />

        <EditText
            android:id="@+id/itemQuanEt"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:inputType="number"
            android:minEms="1"
            android:text="1"
            android:textAlignment="center"
            android:textAllCaps="false"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

        <Button
            android:id="@+id/addBtn"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:background="@drawable/custom_btn_add"
            android:backgroundTint="#C5BCBC" />
    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

这是一个如何拖动它的示例。