安卓使用TabLayout+ViewPager+Fragment 实现页面切换，可实现左右滑动切换视图界面和点击切换 可自定义菜单栏是在顶部还是在底部 一、实现效果： 二、实现过程： 2.1 一些重要的设置 添加必须依赖： 因为需要使用：import android.support.design.widget.TabLayout;，所以必须添加下列依赖 compile 'com.android.support:design:23.3.0' 主布局文件编写： 顶部或者底部显示，只要更改ViewPager和TabLayout排列顺序即可 复制代码 1 2 13 14 20 33 34 46 复制代码 2.2 仅字符菜单栏显示实现： 未加入图片显示，实现较为简单 基本逻辑代码： 每个界面使用不同的fragment，进行一 一对应 复制代码 1 import android.support.design.widget.TabLayout; 2 public class MainActivity extends AppCompatActivity { 3 private ViewPager viewPager; 4 private 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); 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 @Override 26 public Fragment getItem(int position) { 27 return fragments[position]; 28 } 29 @Override 30 public int getCount() { 31 return fragments.length; 32 } 33 34 @Override 35 public CharSequence getPageTitle(int position) { 36 return titles[position]; 37 } 38 }); 39 40 tabLayout.setupWithViewPager(viewPager); 41 tabLayout.getTabAt(1).select();//设置第一个为选中 42 } 43 } 复制代码 2.3 字符和图片菜单栏实现 图片加汉字菜单栏，菜单栏每项都是一个视图可以自定义设计 菜单栏每项的布局文件设计： 一个图片显示和一个文字显示，定义为垂直布局，其中android:layout_gravity="center"是把控件居中，这里不写，在菜单栏显示时可能会出现错位 复制代码 1 2 8 14 20 复制代码 主布局文件更改： 在主布局文件的更改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 4 public Fragment getItem(int position) { 5 return Lfragments[position]; 6 } 7 @Override 8 public int getCount() { 9 return Lfragments.length; 10 } 11 12 @Override 13 public 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 //寻找到控件 27 View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items, 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 32 mTabText.setText(Ltitles[i]); 33 mTabIcon.setImageResource(Limg[i]); 34 //设置不可点击 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 } 复制代码 监听选择事件： 复制代码 1 //是否选中监听 2 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 3 @Override 4 public 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 @Override 12 public void onTabUnselected(TabLayout.Tab tab) { 13 //未选中进入，改变样式 14 ItemNoSelect(tab); 15 16 } 17 18 @Override 19 public void onTabReselected(TabLayout.Tab tab) { 20 //重新选中 21 22 } 23 }); 复制代码 选中和非选中，更改其中显示样式： 复制代码 1 //某个项选中，改变其样式 2 private void 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(this, R.color.colorRed)); 7 String stitle = tabText.getText().toString(); 8 for(int i=0;i

关键字：