带有圆角的 Android SlidingTabs 样式标签

Question

我正在使用SlidingTabs 创建两个选项卡。选项卡的 UI 应该是这样的 -

当第一个标签被选中时

选择第二个选项卡时。

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

我正在使用以下选择器来创建上面显示的 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 项目，以使深蓝色背景笔直而不是圆形。 If I make right side of blue rectangle straight, when the other tab is selected, the rectangle is rounded on wrong side.

我应该怎么做才能获得第一张图片中显示的 UI？

更新：- 正如您从我的代码中看到的那样，我在创建圆角方面没有问题，问题是所选选项卡上有直角。 If I simply add round corners, when a second tab is selected, the corners are rounded on the wrong side.

Answer 1

在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" />

就是这样

Answer 2

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

很容易设置，也很容易设置选中和未选中状态。

Answer 3

您是否尝试将所有直角都设为深蓝色矩形，然后将米色角与矩形重叠，这样就不会看到直角？这应该可以让它按你的意愿工作。

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

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

您可能还想查看此网站以查找库：

https://android-arsenal.com/

Answer 4

您在 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 选择器中使用它。

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 Image 可以解决您的问题的另一种解决方案。

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

Answer 6

好的，首先创建这个简单的矩形可绘制 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.

这是我尝试过的按钮点击

Answer 7

使用此 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>