Question

我正在使用SlidingTabs创建两个标签。选项卡的UI应如下所示 -

选择第一个标签时 SlidingTab UI

选择第二个标签时。 SlidingTab UI 2

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

我使用以下选择器来创建上面显示的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是深蓝色。使用上面的代码，我得到以下内容 -

UI 1 UI 2

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

我应该怎样做才能获得第一张图片中显示的用户界面？

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

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.

这就是我在点击按钮上试过的

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>

Answer 3

此代码在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 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

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

就是这样

带有圆角的Android SlidingTabs样式标签

7 个答案: