具有圆角的Android滑动选项卡样式

Question

我正在使用SlidingTabs创建两个选项卡。选项卡的用户界面应该像这样：

当选择第一个选项卡时

当选择第二个选项卡时

（请注意蓝色矩形的直角）

我正在使用以下选择器来创建上述UI。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  Active tab -->
    <item android:state_selected="true" android:state_focused="false"
        android:state_pressed="false" android:drawable="@drawable/round_corner_rectangle" />
    <!--  Inactive tab -->
    <item android:state_selected="false" android:state_focused="false"
        android:state_pressed="false" android:drawable="@android:color/transparent" />
    <!--  Pressed tab -->
    <item android:state_pressed="true" android:state_selected="true" android:drawable="@drawable/round_corner_rectangle" />

    <item android:state_pressed="true" android:state_selected="false" android:drawable="@color/transparent" />
    <!--  Selected tab (using d-pad) -->
    <item android:state_focused="true" android:state_selected="true"
        android:state_pressed="false" android:drawable="@android:color/transparent" />
</selector>

round_corner_rectangle的代码如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp"/>
    <solid android:color="@color/login_background" />
</shape>

login_background 是深蓝色。使用上述代码，我得到了以下内容 -

当然，我可以从 round_corner_rectangle 中删除 corner 来使深蓝色背景变直而不是圆的。但如果我在另一个选项卡被选择时让蓝色矩形的右侧变直，那么矩形的角就会在错误的一侧变成圆形。

我该怎么做才能得到第一张图片所示的 UI？

更新： 由于您可以从我的代码中看出来，我没有创建圆角的问题，问题在于选定选项卡后需要将角变成直线。如果我只是简单地添加圆角，当第二个选项卡被选中时，角就会在错误的一侧变成圆形。

- Rohan Kandwal

---

请查看我的答案，希望能对您有所帮助。 - Moinkhan

@PRB 是的，请检查所选答案。 - Rohan Kandwal

@Rohan Kandwal，我尝试了但没有成功:( 你能否请发布你的答案。我不知道我做错了什么。 - ShutterSoul

@RohanKandwal 我所做的是 https://dev59.com/SlsW5IYBdhLWcg3wI0b7 - ShutterSoul

@PRB你的问题和我的完全相同，只是一些样式上的变化。你尝试过选择的解决方案吗？ - Rohan Kandwal

Answer 1

首先创建这个简单的矩形可绘制xml。不用担心圆角，我们将动态创建它。

tabbackground.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="your_color" />
    <size android:height="40dp" />
</shape>

现在当你切换标签时，你需要使用监听器来获取所选标签的位置，并将其存储在selectedTabPosition变量中。我不会写出完整的代码，只是给你一个框架。

if (selectedTabPosition == 0) { // that means first tab

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground);
    drawable.setCornerRadii(new float[]{30,30,0,0,0,0,30,30}); // this will create the corner radious to left side

} else if (selectedTabPosition == your_total_tabcount) { // that menas it's a last tab

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground);
    drawable.setCornerRadii(new float[]{0,0,30,30,30,30,0,0}); // this will create the corner radious to right side

} else { // you don't have to worry about it. it is only used if you have more then 2 tab. means for all middle tabs

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground); 
    drawable.setCornerRadii(new float[]{0,0,0,0,0,0,0,0}); // this will remove all corner radious

}
// and at last don't forget to set this drawable.

这是我在按钮点击时尝试的内容：

- Moinkhan

---

看起来不错，我现在无法尝试，但会在24小时内告诉你。谢谢。 - Rohan Kandwal

出现以下异常。 java.lang.ClassCastException: android.graphics.drawable.StateListDrawable 无法转换为 android.graphics.drawable.GradientDrawable - ShutterSoul

你的XML文件应该是一个形状可绘制文件，就像我上面提到的那样。不是一个选择器文件。 - Moinkhan

@PRB能否发布你的XML文件？ - Moinkhan

@ULHAS PATIL 如果您更改上述条件中的tabBackgroundColor和textColor，它将按照您的要求工作。 - Moinkhan

Answer 2

使用此xml和A / c更改半径。它用于将角设置为圆形。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<solid
android:color="#134F4D"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>

- Prabhakar

---

这对于左侧的选项卡运作良好，但当选择右侧的选项卡时，圆角在错误的一侧。 - Rohan Kandwal

如何在运行时更改半径？您能告诉我如何单独更改特定选项卡的背景吗？ - Rohan Kandwal

你需要从Java编码中处理这个问题。现在你应该接受我的答案。 - Prabhakar

在适配器中检查哪个选项卡被选中。如果找到它，则更改背景颜色。 - Prabhakar

我理解的不是很深，你可以告诉我在“SlidingTab”中应该调用哪个代码来更改选项卡的背景吗？ - Rohan Kandwal

Answer 3

你尝试过用所有直角制作深蓝色矩形，然后让米色角落重叠矩形，这样它的直角就不会可见，从而达到你想要的效果吗？

另一个可能的解决方案是使用某种第三方库，例如：

https://github.com/hoang8f/android-segmented-control

你也可以查看这个网站以找到相关的库：

https://android-arsenal.com/

- Ivan V

Answer 4

你应该尝试使用这个库https://github.com/hoang8f/android-segmented-control。

它易于设置，可以轻松设置选中和非选中状态。

- pavle

Answer 5

这段代码在 Android 4.0 及以上版本上运行良好，将会得到你所期望的结果。请不要通过 Android Studio 的预览来评判代码。

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

<item>
    <shape>
        <solid
            android:angle="270.0"
            android:color="#5C83AF" />

        <corners android:topLeftRadius="8dp"
            android:bottomLeftRadius="8dp"/>
    </shape>
</item>

编辑1： 你的问题另一个解决方案可以使用9-patch图片来解决。

编辑2：https://github.com/hoang8f/android-segmented-control

- Vipul Asri

---

谢谢回复，我会检查一下。 - Rohan Kandwal

对于这件事，您可能需要为每个选项卡创建两个单独的选择器，并根据需要相应地应用它们。 XML 有其限制，因此我认为这是您可以做的最佳选择。否则，您也可以选择为此创建自定义视图。 - Vipul Asri

我知道我必须使用两个不同的选择器，但问题是我不知道如何为每个 Slidingtab 添加不同的选择器。 - Rohan Kandwal

尝试实现您自定义的SlidingTab.java和SlidingTabLayout.java。您还可以尝试为您的视图页面实现自定义布局，并使用其getCurrentItem方法以显示正确的单选框或复选框。 - Vipul Asri

Answer 6

你在XML中的左侧选项卡（按钮）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
    android:width="0dp"
    android:color="@color/transparent" />
<!-- you can add multiple colors -->
<gradient
    android:startColor="@color/your_start_color"
    android:endColor="@color/your_end_color" 
    />
<corners
    android:topLeftRadius="10dp"
    android:topRightRadius="0.1dp"
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="0.1dp"
    />
</shape>

要更改右侧选项卡（按钮），请按照以下方式操作：

<corners
    android:topLeftRadius="0.1dp"
    android:topRightRadius="10dp"
    android:bottomLeftRadius="0.1dp"
    android:bottomRightRadius="10dp"
    />

并在您的 XML 选择器中使用它。

- Fedor Tsyganov

Answer 7

在drawable文件夹中的rounded_corner.xml文件中使用以下代码

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="50dp" />
    <stroke android:width="5px" android:color="#1a1a1a" />
</shape>

并在activity_main.xml文件中使用以下内容

<Button
        android:id="@+id/btnCodeInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/rounded_corner"
        android:text="CodeInput" />

就是这样

- Ganpat Kaliya

---

你没有正确理解问题，我知道如何制作圆角背景或按钮，但问题是如何在选项卡更改后适当调整它们。 - Rohan Kandwal

你可以在drawable文件夹中的selector.xml中使用以下代码来选择和取消选择选项卡。<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/box_open" android:state_selected="true"/>    <item android:drawable="@drawable/box_open" android:state_activated="true"/> <item android:drawable="@drawable/box_closed"></item></selector> - Ganpat Kaliya