带有圆角的 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

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

这是我尝试过的按钮点击