安卓TabLayout+ViewPager实现切页

compile 'com.android.support:design:23.3.0'

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height 6     xmlns:app="http://schemas.android.com/apk/res-auto"
 7     android:paddingBottom="0dp"
 8     android:paddingLeft 9     android:paddingRight10     android:orientation="vertical"
11     android:paddingTop12     tools:context="com.example.fafa.MainActivity">
13 
14     android.support.v4.view.ViewPager
15         android:id="@+id/viewpager"
16         android:layout_width17         android:layout_height18         android:layout_weight="1"
19         />
20 <!--
21 app:tabIndicatorColor=""   指示器颜色
22 app:tabIndicatorHeight=""  指示器高度，设置为0就是没有指示器
23 app:tabTextColor=""    Tab文本默认颜色
24 app:tabSelectedTextColor=""     Tab文本被选中后的颜色
25 app:tabTextAppearance=""      为Tab文本设置样式，一般是需要为Tab加图标时使用
26 app:tabMode=""  只有两个值：fixed、scrollable
27 其中 fixed用于标题栏少的情况，每个Tab可以平分屏幕宽度
28 其中 scrollable用于标题栏多出屏幕的情况，如果标题栏少的时候用很难看，占不满屏幕
29 app:tabGravity="center" 整体居中，不可与上共用
30 app:tabBackground=""    TabLayout背景，和android:background=""效果一样
31 app:tabGravity=""    对齐方式:  居中显示center、fill填满
32 -->
33 
34     .support.design.widget.TabLayout
35 ="@+id/tabs2"
36 37 ="wrap_content"
38         android:layout_gravity="center"
39 
40         app:tabMode="fixed"
41         app:tabIndicatorColor="@color/colorLv"
42         app:tabTextColor="@android:color/black"
43         app:tabSelectedTextColor="@color/colorred"
44 
45         46 </LinearLayout>

import android.support.design.widget.TabLayout;
public class MainActivity extends AppCompatActivity {
 3     private ViewPager viewPager;
 4      TabLayout tabLayout;
 5     @Override
 6     protected void onCreate(Bundle savedInstanceState) {
 7         super.onCreate(savedInstanceState);
 8         setContentView(R.layout.activity_main);
 9 
10 
11         tabLayout = (TabLayout) findViewById(R.id.tabs2);
12         viewPager = (ViewPager) findViewById(R.id.viewpager);
14         //设置界面文件和文字一一对应
15         final Fragment[] fragments = {new Fragment0(),new Fragment1(),1)">new Fragment2()};
16         final String[] titles = {"界面1","界面2","界面3"};
17 
18  添加tablayout中的竖线,每一项的中间分隔线
19  LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);
 linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
 linearLayout.setDividerDrawable(ContextCompat.getDrawable(this,R.mipmap.fg));
22 
23  每项只进入一次
24  viewPager.setAdapter( FragmentPagerAdapter(getSupportFragmentManager()) {
     @Override
26      public Fragment getItem(int position) {
27          return fragments[position];
     }
30       getCount() {
31           fragments.length;
34 35      public CharSequence getPageTitle(36           titles[position];
37 38  });
40  tabLayout.setupWithViewPager(viewPager);
41  tabLayout.getTabAt(1).select();设置第一个为选中
42     }
43 }

    android:id="@+id/item_view"
 6 
="match_parent" 8     ImageView
 9         android:layout_width        android:src="@mipmap/ic_launcher"
="@+id/item_img"
13 ="wrap_content" TextView
15                 android:text="xxxx"
="@+id/item_text"
19 >

 2   3   4  private Fragment[] Lfragments = {new Fragment2(),1)"> Fragment3()};
 5  private String[] Ltitles = {"界面1","界面3","界面4" 6  未选中图片
 7  private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4};
 8  选中图片
 9  int[]  Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4};
10 配置默认选中第几项
11  int ItemWhat=1;

只进入一次，初始化
 2 viewPager.setAdapter( 3  5          Lfragments[position];
 6  7  9          Lfragments.length;
11 
12 13      Ltitles[position];
15 16 });
18 绑定
19 tabLayout.setupWithViewPager(viewPager);
20 
设置默认选中页，宏定义
tabLayout.getTabAt(ItemWhat).select();
23 viewPager.setOffscreenPageLimit(3); 设置向左和向右都缓存的页面个数
初始化菜单栏显示
for (int i = 0; i < tabLayout.getTabCount(); i++) {
26     寻找到控件
27     View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items,1)">null);
28      LinearLayout mTabView = (LinearLayout) view.findViewById(R.id.item_view);
29     TextView mTabText = (TextView) view.findViewById(R.id.item_text);
30     ImageView mTabIcon = (ImageView) view.findViewById(R.id.item_img);
31 
    mTabText.setText(Ltitles[i]);
33     mTabIcon.setImageResource(Limg[i]);
设置不可点击
35     mTabView.setClickable(true);
36 
37     更改选中项样式
38     if(i==ItemWhat){
39         mTabIcon.setImageResource(Limgn[i]);
40         mTabText.setTextColor(ContextCompat.getColor(this,R.color.colorRed));
41 42 
43     设置样式
44     tabLayout.getTabAt(i).setCustomView(view);
45 }

是否选中监听
 2 tabLayout.setOnTabSelectedListener( TabLayout.OnTabSelectedListener() {
 onTabSelected(TabLayout.Tab tab) {
 5      选中时进入，改变样式
        ItemSelect(tab);
onTabselected方法里面调用了viewPager的setCurrentItem 所以要想自定义OnTabSelectedListener，也加上mViewPager.setCurrentItem(tab.getPosition())就可以了
        viewPager.setCurrentItem(tab.getPosition());
 9 11 12      onTabUnselected(TabLayout.Tab tab) {
13       未选中进入，改变样式
14         ItemNoSelect(tab);
15 
19      onTabReselected(TabLayout.Tab tab) {
20      重新选中
21 
23 });

某个项选中，改变其样式
 ItemSelect(TabLayout.Tab tab) {
 3      View customView = tab.getCustomView();
 4      TextView tabText = (TextView) customView.findViewById(R.id.item_text);
 5      ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);
 6      tabText.setTextColor(ContextCompat.getColor( 7      String stitle = tabText.getText().toString();
 8      for(int i=0;i<Ltitles.length;i++){
 9          if(Ltitles[i].equals(stitle)){
10              Toast.makeText(MainActivity.this,"xxx+"+i,Toast.LENGTH_SHORT).show();
             tabIcon.setImageResource(Limgn[i]);
         }
13  }
某个项非选中，改变其样式
16   ItemNoSelect(TabLayout.Tab tab) {
17      View customView =18      TextView tabText =19      ImageView tabIcon =20      tabText.setTextColor(ContextCompat.getColor(21      String stitle =22      23                       tabIcon.setImageResource(Limg[i]);
27  }

  1   2   3       4       5       6       7       8       9      10      11      12     13     int ItemWhat=1;
 14  15      16          17  18 
 19         找控件
 20         tabLayout = 21         viewPager = 22 
 23          24          25         26         27 
 28          29         viewPager.setAdapter( 30             @Override
 31              32                  33             }
 34  35              36                  37  38 
 39  40              41                  42  43         });
 44 
 45          46         tabLayout.setupWithViewPager(viewPager);
 47 
 48          49         tabLayout.getTabAt(ItemWhat).select();
 50         viewPager.setOffscreenPageLimit(3);  51          52          53              54             View view = LayoutInflater.from(MainActivity. 55              LinearLayout mTabView = 56             TextView mTabText = 57             ImageView mTabIcon = 58 
 59             mTabText.setText(Ltitles[i]);
 60             mTabIcon.setImageResource(Limg[i]);
 61              62             63 
 64              65              66                 mTabIcon.setImageResource(Limgn[i]);
 67                 mTabText.setTextColor(ContextCompat.getColor( 68  69 
 70              71             tabLayout.getTabAt(i).setCustomView(view);
 72         }
 73          74         tabLayout.setOnTabSelectedListener( 75  76              77               78                 ItemSelect(tab);
 79                  80                 viewPager.setCurrentItem(tab.getPosition());
 81  82  83              84                85                 ItemNoSelect(tab);
 86  87  88              89               90 
 91  92         });}
 93      94      95         View customView = 96         TextView tabText = 97         ImageView tabIcon = 98         tabText.setTextColor(ContextCompat.getColor( 99         String stitle =100         101             102                 103                 tabIcon.setImageResource(Limgn[i]);
104 105 106 107    108     109         View customView =110         TextView tabText =111         ImageView tabIcon =112         tabText.setTextColor(ContextCompat.getColor(113         String stitle =114         115             116                 tabIcon.setImageResource(Limg[i]);
117 118 119 120 
121 }

implementation 'com.android.support:design:28.0.0'

 1     <!--
 2     app:tabIndicatorColor=""   指示器颜色
 3     app:tabIndicatorHeight=  指示器高度，设置为0就是没有指示器
 4     app:tabTextColor=    Tab文本默认颜色
 5     app:tabSelectedTextColor=     Tab文本被选中后的颜色
 6     app:tabTextAppearance=      为Tab文本设置样式，一般是需要为Tab加图标时使用
 7     app:tabMode=""  只有两个值：fixed、scrollable
    其中 fixed用于标题栏少的情况，每个Tab可以平分屏幕宽度
    其中 scrollable用于标题栏多出屏幕的情况，如果标题栏少的时候用很难看，占不满屏幕
10     app:tabGravity="center" 整体居中，不可与上共用
11     app:tabBackground=""    TabLayout背景，和android:background=效果一样
12     app:tabGravity=    对齐方式:  居中显示center、fill填满
13     -->
14 
15     <com.google.android.material.tabs.TabLayout
16         android:id=@+id/tabs2"
17         android:layout_width=match_parent18         android:layout_height=wrap_content19         android:layout_gravity=20         app:tabMode=fixed21         app:tabIndicatorColor=@color/colorLv22         app:tabTextColor=@android:color/black23         app:tabSelectedTextColor=@color/colorred24         />
25 
26        <androidx.viewpager.widget.ViewPager
27         android:id=@+id/viewpager28         android:layout_width=29         android:layout_height=0dp30         android:layout_weight=131         />

import com.google.android.material.tabs.TabLayout;
import androidx.viewpager.widget.ViewPager;