android中TABS的圆角

Question

我想为我在我的应用程序中构建的选项卡实现圆角。到目前为止，我能够想出这个

我希望我的圆角看起来像这样。 （我的编码方式是只出现左右角，但是当状态改变时，它看起来像上图）

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

选定的 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>

未选择的 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 文件是上述两个文件的补充。

选择选项卡 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>

未选择的选项卡 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

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

1. 对于左标签：

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

左侧标签背景预览：

1. 对于右标签：

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

右标签背景预览：

1. 如果有超过 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 有选择和未选择状态

Answer 6

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

这两个库都可以让您在 HTML5/CSS/Javascript 中“编程”您的 android。 “圆形标签”比比皆是。

只是一个想法......

Answer 7

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

一选二未选模式

可绘制的 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>

选择右侧标签时：

选项卡选择权：

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


        }