Android:TabLayout+ViewPager+Fragment实现底部导航
前言:最近项目重构,整体架构还是采用的底部导航切换页面实现。之前的一篇文章介绍了kotlin中使用BottomNagivationView实现的底部导航效果,今天记录下TabLayout+ViewPager+Fragment实现底部导航的过程,当然底部导航实现的方式有很多,今天不做过多介绍。
先上效果图:
1.导入依赖
TabLayout是Android Support Design库的新控件(API25)
implementation 'com.android.support:design:26.1.0'
2.布局引用
<?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" tools:context="cn.demo.ui.activity.MainActivity"> <include layout="@layout/toolbar_head"/> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="@dimen/dp_50" android:layout_marginBottom="@dimen/dp_1" android:background="@color/white" app:tabTextAppearance="@style/TabLayout_Style" app:tabIndicatorHeight="0dp" > </android.support.design.widget.TabLayout> </LinearLayout>
3.TabLayout
(1)TabLayout条目布局(tab_item)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_top" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <TextView android:id="@+id/tv_des" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textSize="@dimen/sp_12" android:textColor="@drawable/tab_text_selector" /> </LinearLayout>(2)item文字颜色drawable(tab_text_selector)
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color="@color/colorTabClick" /> <item android:state_selected="false" android:color="@color/colorFont" /> </selector>(3)item图片drawable(以首页为例:tab_home)
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@mipmap/tab_home_pressed" /> <item android:state_selected="false" android:drawable="@mipmap/tab_home_normal" /> </selector>(4)设置tabs
/** * @description: 设置添加Tab * @param tab_titles tab条目名字 * @param tab_imgs tab上条目上的图片 */ private void setTabs(String[] tab_titles, int[] tab_imgs){ for (int i = 0; i < tab_titles.length; i++) { //获取TabLayout的tab TabLayout.Tab tab = mTabLayout.newTab(); //初始化条目布局view View view = getLayoutInflater().inflate(R.layout.tab_item,null); tab.setCustomView(view); //tab的文字 TextView tvTitle = view.findViewById(R.id.tv_des); tvTitle.setText(tab_titles[i]); //tab的图片 ImageView imgTab = view.findViewById(R.id.iv_top); imgTab.setImageResource(tab_imgs[i]); if (i==0){ //设置第一个默认选中 mTabLayout.addTab(tab,true); }else { mTabLayout.addTab(tab,false); } } }
4.ViewPager的adapter
/** * Created by ruancw on 2018/5/28. * FragmentAdapter */ public class FragmentAdapter extends FragmentPagerAdapter { private List<Fragment> mFragments; public FragmentAdapter(FragmentManager fragmentManager, List<Fragment> mFragments) { super(fragmentManager); this.mFragments = mFragments; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } }
4.TabLayout+ViewPager+Fragment
fragments.add(HomeFragment.newInstance("首页")); fragments.add(HomeFragment.newInstance("功能")); fragments.add(HomeFragment.newInstance("学校")); fragments.add(HomeFragment.newInstance("我")); tab_titles = new String[]{"首页", "功能", "学校","我"}; tab_imgs=new int[]{R.drawable.tab_home,R.drawable.tab_function,R.drawable.tab_school,R.drawable.tab_mine}; setTabs(tab_titles,tab_imgs); //设置viewpager的adapter mViewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragments)); //TabLayout与ViewPager的绑定 mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout)); mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));这样就实现了可左右滑动和点击切换页面的底部导航效果,当然,如果你不想要左右滑动切换页面,可以设置onTouchListener事件监听,让其消费掉事件(默认返回false,不消费)。
mViewPager.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { return true;//true:消费事件 } });不足之处,欢迎留言评论!!!