安卓使用TabLayout+ViewPager+Fragment 实现页面切换，可实现左右滑动切换视图界面和点击切换
可自定义菜单栏是在顶部还是在底部
一、实现效果：
二、实现过程：
2.1 一些重要的设置
添加必须依赖：
因为需要使用：import android.support.design.widget.TabLayout;，所以必须添加下列依赖
compile 'com.android.support:design:23.3.0'
主布局文件编写：
顶部或者底部显示，只要更改ViewPager和TabLayout排列顺序即可
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="/apk/res/android" 3xmlns:tools="/tools" 4android:layout_width="match_parent" 5android:layout_height="match_parent" 6xmlns:app="/apk/res-auto" 7android:paddingBottom="0dp" 8android:paddingLeft="0dp" 9android:paddingRight="0dp"10android:orientation="vertical"11android:paddingTop="0dp"12tools:context="com.example.fafa.MainActivity">13 14<android.support.v4.view.ViewPager15 android:id="@+id/viewpager"16 android:layout_width="match_parent"17 android:layout_height="0dp"18 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、scrollable27 其中 fixed用于标题栏少的情况，每个Tab可以平分屏幕宽度28 其中 scrollable用于标题栏多出屏幕的情况，如果标题栏少的时候用很难看，占不满屏幕29 app:tabGravity="center" 整体居中，不可与上共用30 app:tabBackground="" TabLayout背景，和android:background=""效果一样31 app:tabGravity="" 对齐方式: 居中显示center、fill填满32 -->33 34<android.support.design.widget.TabLayout35 android:id="@+id/tabs2"36 android:layout_width="match_parent"37 android:layout_height="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>
2.2 仅字符菜单栏显示实现：
未加入图片显示，实现较为简单
基本逻辑代码：
每个界面使用不同的fragment，进行一 一对应
1 import android.support.design.widget.TabLayout; 2 public class MainActivity extends AppCompatActivity { 3private ViewPager viewPager; 4private TabLayout tabLayout; 5@Override 6protected 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);13 14 //设置界面文件和文字一一对应15 final Fragment[] fragments = {new Fragment0(), new Fragment1(), new Fragment2()};16 final String[] titles = {"界面1", "界面2", "界面3"};17 18 //添加tablayout中的竖线,每一项的中间分隔线19 //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);20 // linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);21 // linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg));22 23 //每项只进入一次24 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {25@Override26public Fragment getItem(int position) {27return fragments[position];28}29@Override30public int getCount() {31return fragments.length;32}33 34@Override35public CharSequence getPageTitle(int position) {36return titles[position];37}38 });39 40 tabLayout.setupWithViewPager(viewPager);41 tabLayout.getTabAt(1).select();//设置第一个为选中42}43 }
2.3 字符和图片菜单栏实现
图片加汉字菜单栏，菜单栏每项都是一个视图可以自定义设计
菜单栏每项的布局文件设计：
一个图片显示和一个文字显示，定义为垂直布局，其中android:layout_gravity="center"是把控件居中，这里不写，在菜单栏显示时可能会出现错位
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="/apk/res/android" 3android:layout_width="match_parent" 4android:orientation="vertical" 5android:id="@+id/item_view" 6 7android:layout_height="match_parent"> 8<ImageView 9 android:layout_width="wrap_content"10 android:src="@mipmap/ic_launcher"11 android:id="@+id/item_img"12 android:layout_gravity="center"13 android:layout_height="wrap_content" />14<TextView15 android:layout_width="wrap_content"16 android:text="xxxx"17 android:layout_gravity="center"18 android:id="@+id/item_text"19 android:layout_height="wrap_content" />20 </LinearLayout>
主布局文件更改：
在主布局文件的<android.support.design.widget.TabLayout>更改android:layout_height="70dp"，表示其菜单栏的高度改变。
定义必要的类变量：
1 private ViewPager viewPager; 2 private TabLayout tabLayout; 3 //设置界面文件和文字一一对应 4 private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()}; 5 private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"}; 6 //未选中图片 7 private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4}; 8 //选中图片 9 private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4};10 //配置默认选中第几项11 private int ItemWhat=1;
数据初始化及基本界面加载：
1 //只进入一次，初始化 2 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { 3@Override 4public Fragment getItem(int position) { 5 return Lfragments[position]; 6} 7@Override 8public int getCount() { 9 return Lfragments.length;10}11 12@Override13public CharSequence getPageTitle(int position) {14 return Ltitles[position];15}16 });17 18 //绑定19 tabLayout.setupWithViewPager(viewPager);20 21 //设置默认选中页，宏定义22 tabLayout.getTabAt(ItemWhat).select();23 viewPager.setOffscreenPageLimit(3); //设置向左和向右都缓存的页面个数24 //初始化菜单栏显示25 for (int i = 0; i < tabLayout.getTabCount(); i++) {26//寻找到控件27View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items, null);28LinearLayout mTabView = (LinearLayout) view.findViewById(R.id.item_view);29TextView mTabText = (TextView) view.findViewById(R.id.item_text);30ImageView mTabIcon = (ImageView) view.findViewById(R.id.item_img);31 32mTabText.setText(Ltitles[i]);33mTabIcon.setImageResource(Limg[i]);34//设置不可点击35 // mTabView.setClickable(true);36 37//更改选中项样式38if(i==ItemWhat){39 mTabIcon.setImageResource(Limgn[i]);40 mTabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));41}42 43//设置样式44tabLayout.getTabAt(i).setCustomView(view);45 }
监听选择事件：
1 //是否选中监听 2 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 3@Override 4public void onTabSelected(TabLayout.Tab tab) { 5//选中时进入，改变样式 6 ItemSelect(tab); 7 //onTabselected方法里面调用了viewPager的setCurrentItem 所以要想自定义OnTabSelectedListener，也加上mViewPager.setCurrentItem(tab.getPosition())就可以了 8 viewPager.setCurrentItem(tab.getPosition()); 9}10 11@Override12public void onTabUnselected(TabLayout.Tab tab) {13 //未选中进入，改变样式14 ItemNoSelect(tab);15 16}17 18@Override19public void onTabReselected(TabLayout.Tab tab) {20//重新选中21 22}23 });
选中和非选中，更改其中显示样式：
1 //某个项选中，改变其样式 2 private void ItemSelect(TabLayout.Tab tab) { 3View customView = tab.getCustomView(); 4TextView tabText = (TextView) customView.findViewById(R.id.item_text); 5ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img); 6tabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed)); 7String stitle = tabText.getText().toString(); 8for(int i=0;i<Ltitles.length;i++){ 9if(Ltitles[i].equals(stitle)){10 //Toast.makeText(MainActivity.this,"xxx+"+i,Toast.LENGTH_SHORT).show();11 tabIcon.setImageResource(Limgn[i]);12}13}14 }15 //某个项非选中，改变其样式16 private void ItemNoSelect(TabLayout.Tab tab) {17View customView = tab.getCustomView();18TextView tabText = (TextView) customView.findViewById(R.id.item_text);19ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);20tabText.setTextColor(ContextCompat.getColor(this, R.color.colorBlack));21String stitle = tabText.getText().toString();22for(int i=0;i<Ltitles.length;i++){23if(Ltitles[i].equals(stitle)){24 tabIcon.setImageResource(Limg[i]);25}26}27 }
整体代码：
1 import android.support.design.widget.TabLayout; 2 public class MainActivity extends AppCompatActivity { 3private ViewPager viewPager; 4private TabLayout tabLayout; 5//设置界面文件和文字一一对应 6private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()}; 7private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"}; 8//未选中图片 9private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4}; 10//选中图片 11private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4}; 12 //配置默认选中第几项 13private int ItemWhat=1; 14@Override 15protected void onCreate(Bundle savedInstanceState) { 16 super.onCreate(savedInstanceState); 17 setContentView(R.layout.activity_main); 18 19 //找控件 20 tabLayout = (TabLayout) findViewById(R.id.tabs2); 21 viewPager = (ViewPager) findViewById(R.id.viewpager); 22 23 //添加tablayout中的竖线,每一项的中间分隔线 24 //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0); 25 // linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); 26 // linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg)); 27 28 //只进入一次，初始化 29 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { 30 @Override 31 public Fragment getItem(int position) { 32 return Lfragments[position]; 33 } 34 @Override 35 public int getCount() { 36 return Lfragments.length; 37 } 38 39 @Override 40 public CharSequence getPageTitle(int position) { 41 return Ltitles[position]; 42 } 43 }); 44 45 //绑定 46 tabLayout.setupWithViewPager(viewPager); 47 48 //设置默认选中页，宏定义 49 tabLayout.getTabAt(ItemWhat).select(); 50 viewPager.setOffscreenPageLimit(3); //设置向左和向右都缓存的页面个数 51 //初始化菜单栏显示 52 for (int i = 0; i < tabLayout.getTabCount(); i++) { 53 //寻找到控件 54 View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items, null); 55 LinearLayout mTabView = (LinearLayout) view.findViewById(R.id.item_view); 56 TextView mTabText = (TextView) view.findViewById(R.id.item_text); 57 ImageView mTabIcon = (ImageView) view.findViewById(R.id.item_img); 58 59 mTabText.setText(Ltitles[i]); 60 mTabIcon.setImageResource(Limg[i]); 61 //设置不可点击 62 // mTabView.setClickable(true); 63 64 //更改选中项样式 65 if(i==ItemWhat){ 66 mTabIcon.setImageResource(Limgn[i]); 67 mTabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed)); 68 } 69 70 //设置样式 71 tabLayout.getTabAt(i).setCustomView(view); 72 } 73 //是否选中监听 74 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 75 @Override 76 public void onTabSelected(TabLayout.Tab tab) { 77 //选中时进入，改变样式 78 ItemSelect(tab); 79 //onTabselected方法里面调用了viewPager的setCurrentItem 所以要想自定义OnTabSelectedListener，也加上mViewPager.setCurrentItem(tab.getPosition())就可以了 80 viewPager.setCurrentItem(tab.getPosition()); 81 } 82 @Override 83 public void onTabUnselected(TabLayout.Tab tab) { 84//未选中进入，改变样式 85 ItemNoSelect(tab); 86 } 87 @Override 88 public void onTabReselected(TabLayout.Tab tab) { 89 //重新选中 90 91 } 92 });} 93//某个项选中，改变其样式 94private void ItemSelect(TabLayout.Tab tab) { 95 View customView = tab.getCustomView(); 96 TextView tabText = (TextView) customView.findViewById(R.id.item_text); 97 ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img); 98 tabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed)); 99 String stitle = tabText.getText().toString();100 for(int i=0;i<Ltitles.length;i++){101 if(Ltitles[i].equals(stitle)){102 //Toast.makeText(MainActivity.this,"xxx+"+i,Toast.LENGTH_SHORT).show();103 tabIcon.setImageResource(Limgn[i]);104 }105 }106}107 //某个项非选中，改变其样式108private void ItemNoSelect(TabLayout.Tab tab) {109 View customView = tab.getCustomView();110 TextView tabText = (TextView) customView.findViewById(R.id.item_text);111 ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);112 tabText.setTextColor(ContextCompat.getColor(this, R.color.colorBlack));113 String stitle = tabText.getText().toString();114 for(int i=0;i<Ltitles.length;i++){115 if(Ltitles[i].equals(stitle)){116 tabIcon.setImageResource(Limg[i]);117 }118 }119}120 121 }
