Question

此类问题之前已经被问到，但没有得到任何正确的，有效的解决方案，所以我再次发布这个问题。再次询问并浪费你的时间。请给出一些有效的解决方案或者让我知道我做错了什么。提前谢谢。

预期标签：

但是来了：

即将到来的标签

在页面上加载标签就像＆＃34;预期的标签＆＃34;图像，但选择后，像＃34;来到标签＆＃34;图片。 MainXML代码：

 <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                style="@style/MyCustomTabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/background_img_jpeg"
                android:minHeight="10dp"
                android:padding="10dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/TRANSPARENT"
                app:tabMode="fixed"
                app:tabTextColor="@color/blue" />

@风格/ MyCustomTabLayout

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabBackground">@drawable/tab_bg</item>
    </style>

@绘制/ tab_bg

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

@绘制/ tab_bgselected

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

    <item android:bottom="0dp"  android:top="0dp"
          android:left="0dp" android:right="0dp" >
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners
                android:topLeftRadius="10dp"
                android:bottomLeftRadius="10dp">
            </corners>
        </shape>
    </item>
</layer-list>

与 @ drawable / tab_bgnotselected

类似

在代码背后我写道：

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                try {
                    mViewPager.setCurrentItem(tab.getPosition());
                    TabPosition = tab.getPosition();
                    TabCount = tabLayout.getTabCount();

                    try {
                        if (TabPosition == 0) {
                            GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.policy_tab_blue);
                            drawable.setCornerRadii(new float[]{10,10,0,0,0,0,10,10}); // this will create the corner radious to left side

                        } else {
                            GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.policy_tab_white);
                            drawable.setCornerRadii(new float[]{0,0,10,10,10,10,0,0}); // this will create the corner radious to right side

                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                    Log.i("TabPosition:--->", TabPosition + "");
                    Log.i("TabCount:--->", TabCount + "");

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                try {

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

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

            }
        });

Answer 1

以下代码的结果：

使用4个形状（不需要选择器），如：

tab_left_select.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
    <shape android:shape="rectangle">
        <solid android:color="@color/blue" />
        <corners
            android:topLeftRadius="8dp"
            android:bottomLeftRadius="8dp">
        </corners>
    </shape>
</item>

tab_left_unselect.xml
- 同上，只需改变颜色。
tab_right_select.xml
- 同上，只需将半径方向改为右边。
tab_right_unselect.xml
- 同上，只需将颜色和半径方向更改为右侧。

在您的布局中：

<android.support.design.widget.TabLayout
        android:layout_margin="@dimen/activity_vertical_margin"
        android:id="@+id/tabs"
        app:tabTextColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabIndicatorColor="#00000000"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

在您的活动/片段中

tabLayout = (TabLayout)view.findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
        setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tabLayout.getSelectedTabPosition()==0) {
                    setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
                }
                else {
                    setTabBG(R.drawable.tab_left_unselect,R.drawable.tab_right_select);
                }
            }
            ....
        });

private void setTabBG(int tab1, int tab2){
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN_MR1) {
            ViewGroup tabStrip = (ViewGroup) tabLayout.getChildAt(0);
            View tabView1 = tabStrip.getChildAt(0);
            View tabView2 = tabStrip.getChildAt(1);
            if (tabView1 != null) {
                int paddingStart = tabView1.getPaddingStart();
                int paddingTop = tabView1.getPaddingTop();
                int paddingEnd = tabView1.getPaddingEnd();
                int paddingBottom = tabView1.getPaddingBottom();
                ViewCompat.setBackground(tabView1, AppCompatResources.getDrawable(tabView1.getContext(), tab1));
                ViewCompat.setPaddingRelative(tabView1, paddingStart, paddingTop, paddingEnd, paddingBottom);
            }

            if (tabView2 != null) {
                int paddingStart = tabView2.getPaddingStart();
                int paddingTop = tabView2.getPaddingTop();
                int paddingEnd = tabView2.getPaddingEnd();
                int paddingBottom = tabView2.getPaddingBottom();
                ViewCompat.setBackground(tabView2, AppCompatResources.getDrawable(tabView2.getContext(), tab2));
                ViewCompat.setPaddingRelative(tabView2, paddingStart, paddingTop, paddingEnd, paddingBottom);
            }
        }
    }

Answer 2

您可以将 MaterialCardView 与相应的 cardCornerRadius 一起用作TabLayout的父级布局，以实现这一边的圆角背景。然后，您可以使用 tabIndicatorColor 为选项卡选定的布局着色。希望这会帮助你。谢谢

代码段：

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

输出：

Answer 3

我认为你应该使用 4个形状： 1）未选择左键选中左键的 2） 3）未选择右键选择右键的 4）

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

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

<item android:state_selected="true">
<shape android:shape="rectangle">
  <corners
    android:topRightRadius="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:topRightRadius="10dp"
      android:bottomLeftRadius="10dp"/>
</shape>
</item>

有关详细信息，请访问此处。 Rounded corners for TABS in android

Answer 4

如果有人正在寻找这种类型的人（如下图所示）标签布局

在 Xml TabLayout 中

<com.google.android.material.tabs.TabLayout
        android:id="@+id/images_videos_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_20sdp"
        android:layout_marginStart="@dimen/_10sdp"
        android:layout_marginEnd="@dimen/_10sdp"
        android:layout_marginTop="@dimen/_10sdp"
        android:background="@drawable/tabview_bg"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabMode="fixed"
        app:tabIndicatorHeight="0dp"
        app:tabRippleColor="@null"
        app:tabSelectedTextColor="@android:color/white"
         />

在您的活动/片段中

<块引用>

为简洁起见仅添加自定义代码

val tabCount: Int = images_videos_tab_layout.tabCount

    for (i in 0 until tabCount) {
        val tabView: View = (images_videos_tab_layout.getChildAt(0) as ViewGroup).getChildAt(i)
        tabView.requestLayout()
        ViewCompat.setBackground(tabView,setImageButtonStateNew(requireContext()));
        ViewCompat.setPaddingRelative(tabView, tabView.paddingStart, tabView.paddingTop, tabView.paddingEnd, tabView.paddingBottom);
    }

fun setImageButtonStateNew(mContext: Context): StateListDrawable {
    val states = StateListDrawable()
    states.addState(intArrayOf(android.R.attr.state_selected), ContextCompat.getDrawable(mContext, R.drawable.tab_bg_normal_blue))
    states.addState(intArrayOf(-android.R.attr.state_selected), ContextCompat.getDrawable(mContext, R.drawable.tab_bg_normal))

    return states
}

在 Drawable 中

1.tab_bg_normal

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/transparent" />
</shape>

2.tab_bg_normal_blue

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

3.tabview_bg

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="25dp"/>
<stroke android:color="@color/baseThemeColor" android:width="1dp"/>
<solid android:color="#00000000"/>
</shape>

Answer 5

我认为你应该用于所有角落

 <?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
     <gradient 
         android:startColor="#SomeGradientBeginColor"
         android:endColor="#SomeGradientEndColor" 
         android:angle="270"/> 

    <corners 
         android:bottomRightRadius="7dp" 
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp" 
         android:topRightRadius="7dp"/> 
</shape>

检查如何在按钮或布局中使用它

http://www.techamongus.com/2017/02/android-layouts-with-round-corners.html

Answer 6

在StackOverflow上为我不记得它在哪里的创意开发人员在此形成先前的答案，只需将卡片视图作为TabLayout的父视图即可轻松完成

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include2"
        app:tabBackground="@drawable/tab_color_selector"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@color/white"
        app:tabTextAppearance="@style/AppTheme.CustomTabText"
        app:tabTextColor="@color/green">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Today’s menu" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Full Menu" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Reviews" />

    </com.google.android.material.tabs.TabLayout>

</androidx.cardview.widget.CardView>

Answer 7

使用Material-Design，我们可以简单地通过使用 MaterialButtonToggleGroup 并为选项卡添加MaterialButtons来实现。

<com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/buttonGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:checkedButton="@+id/nearest">

            <com.google.android.material.button.MaterialButton
                android:id="@+id/nearest"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Nearest" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/alphabetical"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Alphabetical"/>

        </com.google.android.material.button.MaterialButtonToggleGroup>

请参阅此链接以获取更多信息-https://material.io/develop/android/components/material-button-toggle-group/

Answer 8

我想分享一下我的答案：（就我而言，我只需要在tabLayout上方添加Cardview并设置半径角）即可。

<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/rlEmpty">

    <androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cvTab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="20dp"
        card_view:cardElevation="0dp">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/result_tabs_home"
            style="@style/customTabLayout2"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/tab_color"
            android:elevation="0dp"
            app:tabIndicatorColor="@color/tab_indicator"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/customTabLayout" />
    </androidx.cardview.widget.CardView>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpagerhome"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/cvTab" />
</RelativeLayout>

带有圆角的Android标签布局标签

8 个答案: