Question

我希望为我在应用程序中构建的选项卡实现圆角。到目前为止，我能够提出这个 enter image description here

我希望我的圆角看起来如此。（我用这样的方式对它进行编码，只显示左右角，但当状态改变时，它看起来像上图） enter image description here

以下是我到目前为止编写的代码。如何通过代码实现正确的圆角？

SELECTED TAB.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners
    android:topRightRadius="10dp"
    android:bottomLeftRadius="10dp"/>

<gradient
    android:startColor="#000" 
    android:endColor="#000"
    android:gradientRadius="400"
    android:angle="-270"/>

</shape>

UNSELECTED TAB.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient 
android:angle="90" 
android:startColor="#880f0f10" 
android:centerColor="#8858585a" 
android:endColor="#88a9a9a9"/>

 <corners
    android:topLeftRadius="10dp"
    android:bottomRightRadius="10dp"/>

</shape>

感谢您的回复!! ：）

Answer 1

我认为你应该使用4种形状：

未选择左键
选择了左键
未选择右键
选择了右键

然后编写选择器以用于button背景，请参阅左侧按钮的示例（右侧只是类似的）：

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true">
<shape android:shape="rectangle">
  <corners
    android:topLeftRadius="10dp"
    android:bottomLeftRadius="10dp"/>
  <gradient
    android:startColor="#000"
    android:endColor="#000"
    android:gradientRadius="400"
    android:angle="-270"/>
</shape>
</item>

<item>
    <shape android:shape="rectangle">
      <gradient
        android:angle="90"
        android:startColor="#880f0f10"
        android:centerColor="#8858585a"
        android:endColor="#88a9a9a9"/>
   <corners
      android:topLeftRadius="10dp"
      android:bottomLeftRadius="10dp"/>
</shape>
</item></selector>

Answer 2

在java文件中，放置

 tabs.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.roundedcorners);

<强> roundedcorners.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:bottomLeftRadius="0dp"
       android:bottomRightRadius="0dp" 
       android:topLeftRadius="5dp"
       android:topRightRadius="5dp" />
 </shape>

Answer 3

创建替代形状以解决问题

注意：这些xml文件是上述两个文件的补充。

SELECTED TAB ALTERNATE.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle"
>
<corners
 android:topLeftRadius="10dp"
 android:bottomRightRadius="10dp"/>

<gradient
  android:startColor="#000" 
  android:endColor="#000"
  android:gradientRadius="400"
  android:angle="-270"/>

</shape>

UNSELECTED TAB ALTERNATE.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient 
 android:angle="90" 
 android:startColor="#880f0f10" 
 android:centerColor="#8858585a" 
 android:endColor="#88a9a9a9"/>

 <corners
    android:topRightRadius="10dp"
    android:bottomLeftRadius="10dp"/>

</shape>

然后，在标签选择监听器中添加它。

    @Override
    public void onTabSelected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            int selectedTabPosition = tab.getPosition();


            View firstTab = ((ViewGroup)    tabLayout.getChildAt(0)).getChildAt(0);
            View secondTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1);


            if (selectedTabPosition == 0)
            { // that means first tab
                firstTab.setBackground(getDrawable(R.drawable.selected_tab));
                secondTab.setBackground(getDrawable(R.drawable.unselected_tab));


            } else if (selectedTabPosition == 1)
            { // that means it's a last tab

                firstTab.setBackground(getDrawable(R.drawable.selected_tab_alternate));
                secondTab.setBackground(getDrawable(R.drawable.unselected_tab_alternate));


            }
        }

Answer 4

对于那些仍在寻找解决方案的人。这就是我所做的。将tabLayout放在MaterialCardView内，

 <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            app:cardCornerRadius="12dp"`enter code here`
            app:strokeColor="?attr/colorAccent"
            app:strokeWidth="1dp">
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="27dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="?attr/colorAccent"
                app:tabIndicatorGravity="stretch"
                app:tabMaxWidth="0dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@android:color/white"
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                app:tabTextColor="?attr/colorPrimary">
            </com.google.android.material.tabs.TabLayout> 
     </com.google.android.material.card.MaterialCardView>

tabselector_backgroud.xml：

<?xml version="1.0" encoding="utf-8"?>

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/gradient_tab_selected" 
 android:state_selected="true" />
<item android:drawable="@drawable/gradient_tab_unselected" 
  android:state_selected="false" />
</selector>

gradient_tab_selected.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" >
<gradient
    android:angle="90"
    android:centerColor="@color/lime"
    android:endColor="@color/lime"
    android:startColor="@color/lime"
    android:type="linear" />
 </shape>

gradient_tab_unselected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"`enter code here`
        android:centerColor="@color/white"
        android:endColor="@color/white"
        android:startColor="@color/white"
        android:type="linear" />
</shape>

Answer 5

另一种完全不同的方法可能是使用Appcelerator Titanium或PhoneGap这样的库。

这两个库都允许你在HTML5 / CSS / Javascript中“编程”你的android。 “圆形标签”比比皆是。

只是一个想法...

Answer 6

此代码适用于tablayout中的2个标签：

选择一个，两个是未选择模式

Drawable xml：

选择左标签时：

tabselectionleft：

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"/>

    <solid android:color="@android:color/white"/>

</shape>

notabselectionleft：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >

        <shape android:shape="rectangle"
            xmlns:android="http://schemas.android.com/apk/res/android">
            <gradient android:startColor="@color/colorAccent1" android:endColor="@color/colorAccent3"/>

            <corners android:topRightRadius="5dp"
                android:bottomRightRadius="5dp" />
        </shape>
    </item>


</layer-list>

选择正确的标签时：

tabselectionright：

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:bottomRightRadius="5dp"
        android:topRightRadius="5dp"/>
    <solid android:color="@android:color/white"/>

</shape>

notabselectionright：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle"
            android:useLevel="true">


            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp" />
            <gradient
                android:endColor="@color/colorAccent3"
                android:startColor="@color/colorAccent1" />


        </shape>


    </item>

在主布局tablayout decelartion

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    app:tabMode="fixed"
    app:tabGravity="fill"
    android:fitsSystemWindows="true"
    android:clickable="true"
    app:tabIndicatorColor="@color/colorAccent2"
    app:tabIndicatorHeight="3dp"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    app:tabPaddingStart="10dp"
    app:tabPaddingEnd="10dp"
    android:clipToPadding="true"
    android:clipChildren="true"
    />

调用此drawable应该以编程方式进行，如下所示：

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple_tabs);
 viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        firstTab = ((ViewGroup)    tabLayout.getChildAt(0)).getChildAt(0);
        secondTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1);
        tabLayout.setOnTabSelectedListener(this);

        firstTab.setBackground(getDrawable(R.drawable.tabselectionleft));

        secondTab.setBackground(getDrawable(R.drawable.notabselectionleft));



    }
public void onTabSelected(TabLayout.Tab tab) {

        viewPager.setCurrentItem(tab.getPosition());

        int selectedTabPosition = tab.getPosition();

        if (selectedTabPosition == 0)
        { // that means first tab
            firstTab.setBackground(getDrawable(R.drawable.tabselectionleft));
                  secondTab.setBackground(getDrawable(R.drawable.notabselectionleft));


        } else if (selectedTabPosition == 1)
        { // that means it's a last tab

            firstTab.setBackground(getDrawable(R.drawable.notabselectionright));
            secondTab.setBackground(getDrawable(R.drawable.tabselectionright));


        }

Answer 7

我认为这可以通过一个可绘制的一个视图来完成。 2个标签只需2个drawable。这也适用于带有边框颜色的标签。

左侧标签：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:state_selected="false">
    <layer-list >

      <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>
  </item>

  <item android:state_selected="true">
    <layer-list >

      <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>

  </item>

</selector>

左标签背景预览：

对于右边标签：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="false">
    <layer-list >
        <item>
         <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
         </shape>

        </item>

        <item  android:left="-10dp">
         <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
         </shape>
        </item>

    </layer-list>

</item>
<item android:state_selected="true">
    <layer-list >
      <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:left="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>

</item>


</selector>

右标签背景预览：

如果有超过2个标签那么这个用于中间标签：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:state_selected="false">

  <layer-list >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
        </shape>

    </item>

    <item  android:left="-10dp" android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
        </shape>
    </item>

  </layer-list>

 </item>
 <item android:state_selected="true">

   <layer-list >

    <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

    </item>

    <item  android:left="-10dp" android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
    </item>

   </layer-list>

 </item>

</selector>

中间标签背景预览：

Drawables具有选定状态和未选择状态

Android中TABS的圆角

7 个答案: