带有圆角的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是深蓝色.使用上面的代码,我得到以下 -

我可以当然从中删除corner项目round_corner_rectangle以获得深蓝色背景而不是圆形.如果我将蓝色矩形的右侧笔直,当选择另一个选项卡时,矩形会在错误的一侧倒圆.

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

更新: - 从我的代码中可以看出,我在创建圆角方面没有问题,问题是在所选选项卡上有直角.如果我只是添加圆角,当选择第二个标签时,角落会在错误的一侧倒圆.

Answer 1

好的,首先只需创建这个简单的矩形drawable 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.

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