使用TabLayout实现不规则Tab

What

TabLayout是一种展示Tab的横向布局

Why

能够更方便快捷的实现Tab切换功能。

How

本文案例实现效果:

效果说明

选中的tab与未选中状态有明显区分，选中时文字居中，Tab高度与Tablayout匹配

实现思路

将TextView放入RelativeLayout中，未选中时marginTop = 10dp，选中时marginTop=0dp;

实现步骤

1. activity对应的XML文件(activity_different_height.xml)

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       >
   
       <android.support.design.widget.TabLayout
           android:id="@+id/tabLayout"
           style="@style/CustomTabLayout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:tabIndicatorHeight="0dp"
           />
   
       <android.support.v4.view.ViewPager
           android:id="@+id/viewPager"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           />
   </LinearLayout>

2. 每一项对应的布局custom_tab_difheight.xml

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       >
       <TextView
           android:layout_marginTop="10dp"
           android:id="@+id/tabTitle"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:singleLine="true"
           android:textColor="@color/tab_text_color_selector"
           android:background="@drawable/tab_bg_selector"
           android:textSize="16sp"
           android:gravity="center"
           />
   
   </RelativeLayout>

3. 自定义的TabLayoutstyle

   <style name="CustomTabLayout" parent="Base.Widget.Design.TabLayout">
       <item name="tabMaxWidth">100dp</item>
       <item name="tabIndicatorColor">?attr/colorAccent</item>
       <item name="tabIndicatorHeight">2dp</item>
       <item name="tabPaddingStart">0dp</item>
       <item name="tabPaddingEnd">0dp</item>
       <item name="tabBackground">?attr/selectableItemBackground</item>
       <item name="tabTextAppearance">@style/CustomTabTextApperance</item>
       <item name="tabSelectedTextColor">?android:textColorPrimary</item>
   </style>
   
   <style name="CustomTabTextApperance" parent="TextAppearance.Design.Tab">
       <item name="android:textSize">14sp</item>
       <item name="android:textColor">?android:textColorSecondary</item>
       <item name="textAllCaps">true</item>
   </style>

4. Activity.java文件(DifferentHeightActivity.java)

   import android.content.Context;
   import android.support.design.widget.AppBarLayout;
   import android.support.design.widget.TabLayout;
   import android.support.v4.app.Fragment;
   import android.support.v4.app.FragmentManager;
   import android.support.v4.app.FragmentPagerAdapter;
   import android.support.v4.view.ViewPager;
   import android.support.v7.app.AppCompatActivity;
   import android.os.Bundle;
   import android.view.LayoutInflater;
   import android.view.View;
   import android.view.ViewGroup;
   import android.widget.ImageView;
   import android.widget.LinearLayout;
   import android.widget.RelativeLayout;
   import android.widget.TextView;
   
   import java.util.ArrayList;
   import java.util.Arrays;
   import java.util.List;
   
   public class DifferentHeightActivity extends AppCompatActivity {
   
       TabLayout tabLayout;
       ViewPager viewPager;
       Context mContext;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_different_height);
   
           mContext = this;
   
           tabLayout = (TabLayout) findViewById(R.id.tabLayout);
   
           viewPager = (ViewPager) findViewById(R.id.viewPager);
           SectionsPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(), ContentFragment.newInstance(0)
                   , ContentFragment.newInstance(1)
                   , ContentFragment.newInstance(2)
                   , ContentFragment.newInstance(3));
           viewPager.setAdapter(mSectionsPagerAdapter);
   
           tabLayout.setupWithViewPager(viewPager);
           for (int i = 0; i < tabLayout.getTabCount(); i++) {
               TabLayout.Tab tab = tabLayout.getTabAt(i);
               if (tab == null) {
                   continue;
               }
               View view = mSectionsPagerAdapter.getTabView(this, i);
               tab.setCustomView(view);
           }
   
   
   
           tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
               @Override
               public void onTabSelected(TabLayout.Tab tab) {
                   RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                   layoutParams.setMargins(Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0));
                   TextView viewById = (TextView) tab.getCustomView().findViewById(R.id.tabTitle);
                   viewById.setLayoutParams(layoutParams);
               }
   
               @Override
               public void onTabUnselected(TabLayout.Tab tab) {
                   RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                   layoutParams.setMargins(Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 10), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0));
                   TextView viewById = (TextView) tab.getCustomView().findViewById(R.id.tabTitle);
                   viewById.setLayoutParams(layoutParams);
               }
   
               @Override
               public void onTabReselected(TabLayout.Tab tab) {
                   RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                   layoutParams.setMargins(Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 10), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0));
                   TextView viewById = (TextView) tab.getCustomView().findViewById(R.id.tabTitle);
                   viewById.setLayoutParams(layoutParams);
               }
           });
   
           tabLayout.getTabAt(1).select();
       }
   
   
       public class SectionsPagerAdapter extends FragmentPagerAdapter {
           private List<Fragment> mFragments = new ArrayList<>();
   
           private int[] titleResId = {
                   R.string.bottom_button_index,
                   R.string.bottom_button_study,
                   R.string.bottom_button_activity,
                   R.string.bottom_button_my
           };//标题资源
   
           public SectionsPagerAdapter(FragmentManager fm, Fragment... fragments) {
               super(fm);
               mFragments.addAll(Arrays.asList(fragments));
           }
   
           @Override
           public Fragment getItem(int position) {
               return mFragments.get(position);
           }
   
           @Override
           public int getCount() {
               // Show 3 total pages.
               return 4;
           }
   
           //加载自定义布局
           View getTabView(Context context, int position) {
               View view = LayoutInflater.from(context).inflate(R.layout.custom_tab_difheight, null);
               TextView tv = (TextView) view.findViewById(R.id.tabTitle);
               tv.setText(context.getResources().getString(titleResId[position]));
               return view;
           }
       }
   }

5. strings.xml资源

   <string name="bottom_button_index">首页</string>
   <string name="bottom_button_study">学习</string>
   <string name="bottom_button_activity">活动</string>
   <string name="bottom_button_my">我的</string>

6. text背景文件

   • 选择器(tab_bg_selector.xml)

     <?xml version="1.0" encoding="utf-8"?>
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/tab_rect_stroke" android:state_selected="false"/>
     <item android:drawable="@drawable/tab_rect_solid" android:state_selected="true"/>
     </selector>

   • 选中背景(tab_rect_solid.xml)

     <?xml version="1.0" encoding="utf-8"?>
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/tab_rect_stroke" android:state_selected="false"/>
     <item android:drawable="@drawable/tab_rect_solid" android:state_selected="true"/>
     </selector>

   • 未选中背景(tab_rect_stroke.xml)

     <?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle"
     >
     <stroke
         android:width="1dp"
         android:color="#A4A4A4"
         />
     </shape>

7. 文字颜色选择器(tab_text_color_selector.xml)

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:color="@android:color/white" android:state_selected="true"/>
       <item android:color="#A4A4A4" android:state_selected="false"/>
   </selector>