【问题标题】:Android Tab Layout tabs with round corners带有圆角的 Android 选项卡布局选项卡
【发布时间】:2016-02-11 11:11:55
【问题描述】:

这种类型的问题之前已经被问过,但没有得到任何合适的、有效的解决方案,所以我再次发布这个问题。抱歉再次询问并浪费您的时间。 请提供一些可行的解决方案。或者让我知道我是否做错了什么。 提前致谢。

预期标签:

但即将到来:

即将推出的标签

页面加载选项卡类似于“预期选项卡”图像,但选择后类似于“即将出现的选项卡”图像。 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" />

@style/MyCustomTabLayout

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

@drawable/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>

@drawable/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) {

            }
        });

【问题讨论】:

    标签: android android-layout android-tablayout


    【解决方案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>
    

    输出

    【讨论】:

      【解决方案2】:

      以下代码的结果:

      使用 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" />
      

      在您的 Activity/Fragment 中:

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

      【讨论】:

        【解决方案3】:

        如果有人在寻找这种类型的外观(如下图所示)标签布局

        在 Xml 选项卡布局中

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

        【讨论】:

          【解决方案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>
          

          更多详情请访问此处。 Rounded corners for TABS in android

          【讨论】:

          • 在选择第二个标签后,它就像我上面的问题中提到的“即将到来的标签”一样。
          【解决方案5】:

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

          【讨论】:

            【解决方案6】:

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

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

            【讨论】:

              【解决方案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/

              【讨论】:

                【解决方案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>
                

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 2021-10-18
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多