安卓使用TabLayout+ViewPager+Fragment 实现页面切换,可实现左右滑动切换视图界面和点击切换
可自定义菜单栏是在顶部还是在底部
一、实现效果:
二、实现过程:
2.1 一些重要的设置
添加必须依赖:
因为需要使用:import android.support.design.widget.TabLayout;,所以必须添加下列依赖
compile 'com.android.support:design:23.3.0'
使用Android Studio3时,此步可能出现问题,请参考下面的升级篇
主布局文件编写:
顶部或者底部显示,只要更改ViewPager和TabLayout排列顺序即可
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>
2.2 仅字符菜单栏显示实现:
未加入图片显示,实现较为简单
基本逻辑代码:
每个界面使用不同的fragment,进行一 一对应
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 }
2.3 字符和图片菜单栏实现
图片加汉字菜单栏,菜单栏每项都是一个视图可以自定义设计
菜单栏每项的布局文件设计:
一个图片显示和一个文字显示,定义为垂直布局,其中android:layout_gravity="center"是把控件居中,这里不写,在菜单栏显示时可能会出现错位
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 >
主布局文件更改:
在主布局文件的<android.support.design.widget.TabLayout>更改android:layout_height="70dp",表示其菜单栏的高度改变。
定义必要的类变量:
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 }
升级篇
Android Studio3版本:android-studio-ide-191.5900203-windows
依赖修改
implementation 'com.android.support:design:28.0.0'
XML修改:
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;