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

Question

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

预期标签:

但是来了:

即将到来的标签

在页面上加载选项卡将像"预期选项卡"图像一样,但在选择后会出现像"即将到来的选项卡"图像. 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

您可以使用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 2

如果有人寻找这种类型（如下图所示），请查看选项卡布局

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

在可绘制中

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 3

以下代码的结果：

使用4种形状（无需选择器），例如：

1. 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>
   </layer-list>
   

2. tab_left_unselect.xml

   • 和上面一样，只是改变颜色。

3. tab_right_select.xml

   • 与上述相同，只是将半径方向更改为右。

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

我认为你应该使用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>

欲了解更多详情，请访问此处。Android 中 TABS 的圆角