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

圓角.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

我認為這可以通過一個視圖的一個 drawable 來完成。 對於 2 個選項卡，只需要 2 個 drawable。 這也適用於帶有邊框顏色的選項卡。

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>

左標簽背景預覽：

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

右標簽背景預覽：

3. 如果有 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

此代碼適用於 tablayout 中的 2 個選項卡：

一個被選中，兩個是未選中的模式

可繪制的 xml：

選擇左選項卡時：

左選項卡選擇：

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

不排除選擇權：

<?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 減速

<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

另一種完全不同的方法可能是使用像Appcelerator Titanium或PhoneGap這樣的庫。

這兩個庫都可以讓你在 HTML5/CSS/Javascript 中“編程”你的 android。 “圓形標簽”比比皆是。

只是一個想法 ...