Android：使用类似标签式切换按钮选择器而非下拉菜单来切换选项

Question

我有一个安卓应用程序，在一个活动中我需要一个类似选项卡的选择器，用户可以选择其中一个选项。这三个选项是蓝色、绿色和红色。用户需要选择其中之一。我可以使用下拉菜单来实现这个功能。但我想使用类似圆角选项卡的特性，它可以切换，所选项目将显示为高亮，其他项目将变灰，如下图所示。 我只希望用户能够切换其中一个按钮。用户可以通过点击或切换来选择选项，视图应该看起来像一个带有圆角边缘的条形图。如何在安卓中实现上述视图？请帮助我。

- KJEjava48

---

您可以使用自定义背景的RadioButton来实现此功能。 - Abhishek Patel

是的，您可以使用自定义单选按钮来实现这一点。 - Abhishek Patel

@AbhishekPatel 怎么做？ - KJEjava48

在谷歌上搜索自定义单选按钮，有许多链接可以实现这一点。 - Abhishek Patel

@AbhishekPatel 那么我该如何实现上述布局，同时具备点击和滑动效果呢？ - KJEjava48

Answer 1

试试这样做

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:azeoo="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<RadioGroup
    android:id="@+id/rgTask"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/round_border"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/rbBlue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_blue"
        android:button="@android:color/transparent"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:singleLine="true"
        android:text="Blue"
        android:textSize="22sp" />

    <View
        android:id="@+id/vSep1"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#0000FF"
        android:visibility="visible" />

    <RadioButton
        android:id="@+id/rbGreen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_green"
        android:button="@android:color/transparent"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:singleLine="true"
        android:text="Green"
        android:textSize="22sp" />

    <View
        android:id="@+id/vSep2"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#0000FF"
        android:visibility="visible" />

    <RadioButton
        android:id="@+id/rbRed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_red"
        android:button="@android:color/transparent"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:singleLine="true"
        android:text="Red"
        android:textSize="22sp" />
</RadioGroup>

将下面的文件全部放入您的drawable文件夹中 bg_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true"><shape android:shape="rectangle">
        <solid android:color="#0000FF" />

        <corners android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" />
    </shape></item>
<item><shape android:shape="rectangle">
        <solid android:color="#00000000" />
    </shape></item>

</selector>

bg_green.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true"><shape android:shape="rectangle">
        <solid android:color="#00FF00" />
    </shape></item>
<item><shape android:shape="rectangle">
        <solid android:color="#00000000" />
    </shape></item>

</selector>

bg_red.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true"><shape android:shape="rectangle">
        <solid android:color="#FF0000" />

        <corners android:bottomRightRadius="10dp" android:topRightRadius="10dp" />
    </shape></item>
<item><shape android:shape="rectangle">
        <solid android:color="#00000000" />
    </shape></item>

</selector>

round_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<!-- view background color -->
<solid android:color="#00000000" >
</solid>

<!-- view border color and width -->
<stroke
    android:width="1dp"
    android:color="#0000FF" >
</stroke>

<!-- If you want to add some padding -->


<!-- Here is the corner radius -->
<corners android:radius="10dp" >
</corners>

</shape>

并且输出如下：

- Abhishek Patel

---

有很多实现viewpager的例子，你可以使用它们，使用谷歌。 - Abhishek Patel

通常我会使用ViewPager和Fragments。但在这种情况下，我只需要选项卡标题。如何实现？ - KJEjava48

让我们在聊天中继续这个讨论。 - Abhishek Patel

将以下行添加到您的round_border.xml文件中：<padding android:top="2dp" android:bottom="2dp" android:left="2dp" android:right="2dp"/> - Abhishek Patel

是的，您可以将 txt_color.xml 添加到您的 drawable 文件夹中<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/white"/> <item android:color="@color/noti_gray"/></selector> 并在您的 xml RadioButton 属性中使用它android:textColor="@drawable/txt_color" - Abhishek Patel