如何在 Android 中添加加减号按钮 [关闭]答案

【问题标题】：How to add a Plus Minus botton in Android [closed]如何在 Android 中添加加减号按钮 [关闭]
【发布时间】：2021-01-25 05:11:06
【问题描述】：

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

对于本机组件，有没有简单的解决方案？我会很高兴收到每条评论。

【问题讨论】：

标签： android user-interface button

【解决方案1】：

这件事可以通过2个Buttons和一个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>

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

【讨论】：

感谢 Zankrut 提供您的答案和代码。考虑到我只想要一个简单的元素来计数，这对我来说看起来很复杂。
我尝试在我的约束布局中使用您的代码（通过复制和粘贴），但我遇到了很多错误（在与 @ 符号一致的行中，例如“无法解析符号 '@dimen/activity_horizontal_margin' ") 并且元素不在正确的位置。
你能在约束布局中使用你的代码吗，因为当我把它放在约束布局中时它似乎会导致问题。我赞成您的回答，但我仍然想知道是否有更简单的解决方案，因为您的解决方案对于初学者来说很难使用。我会很感激进一步的反馈。感谢您的帮助。
我更改了代码以使其变得简单，如果您想将其作为整体使用，则将整个相对布局用作约束布局中的一个元素。您也可以用约束替换。但是你可能需要做更多的工作。对于这样的小视图，我主要使用线性或相对布局。
感谢您的回答和努力 Zankrut。如何在约束布局中使用它们？当我只是复制并通过您的代码时，元素就在顶部。通常我只是将约束布局中的约束放在父母身上，这样我就可以拖放单个元素。但是对于您的解决方案，这不起作用，因为元素本身位于 RelativeLayout 中。