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

此代码在 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 补丁图像可以解决您问题的另一种解决方案。

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

Answer 2

Use this xml and A/c to you change the radius .It is use for set corner as rounded shape

<?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>

Answer 3

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

您是否尝试过制作所有直角的深蓝色矩形，只是让米色角与矩形重叠，这样它的直角就不会可见？这应该使它按你想要的方式工作。

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

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

您可能还想查看此网站以查找图书馆：

https://android-arsenal.com/

Answer 6

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

设置简单，设置选中和非选中状态也很容易。

Answer 7

在可绘制文件夹的 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" />

就是这样

Android 带圆角的 SlidingTabs 样式标签

Android SlidingTabs style tabs with round corners

android

android-layout

android-tabs

android-selector

pagerslidingtabstrip