Android 使用 TabLayout 实现底部导航栏简明教程（超详细） |
您所在的位置：网站首页 › 设置底部导航怎么设置的 › Android 使用 TabLayout 实现底部导航栏简明教程（超详细） |
Android 使用 TabLayout 实现底部导航栏简明教程（超详细）
|
一、实现效果：
TabLayout + ViewPager + FragmentPagerAdapter + Fragment 三、目录结构
4.1 TabFragmentPagerAdapter 的创建 这一步相对来说比较简单，只需要创建 Adapter 类并使其继承 FragmentPagerAdapter ，通过构造器获取其所有要管理的 fragment 并保存，并重写其 getItem() 和 getCount() 这两个方法并即可。 //TabFragmentPagerAdapter.java public class TabFragmentPagerAdapter extends FragmentPagerAdapter { private List mFragments; public TabFragmentPagerAdapter(FragmentManager fm, List fragments) { super(fm); mFragments = fragments; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } }4.2 分页面的 Fragment的创建 我一共写了三个分页面，因为代码都是相同的，所以这里只展示其中一个的 fragment。其中我使用了共产模式的 newInstance() 方法来创建实例对象，这种实例化方式的好处就不在此赘述了，同时我才用了 arguments 来进行 fragment 之间的参数传递，而传递的具体参数只是为了进行后期的页面识别，也不在此赘述了。 //CurrentClassFragment.java public class CurrentClassFragment extends Fragment { private TextView mTextView; public static CurrentClassFragment newInstance(String title){ Bundle arguments = new Bundle(); arguments.putString("TITLE", title); CurrentClassFragment fragment = new CurrentClassFragment(); fragment.setArguments(arguments); return fragment; } @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View root = inflater.inflate(R.layout.fragment_current_class, container, false); mTextView = (TextView) root.findViewById(R.id.current_text); mTextView.setText(getArguments().getString("TITLE")); return root; } }4.3 分页面 fragment 布局文件的创建 fragment 的布局文件自己定义即可，因为三个页面的布局文件都是一样的，显示的内容仅用于分辨分页面，所以在此只列一个的代码。 4.4 自定义Tab布局 custom_tab 的创建 之前在网上查找相关的文章时有提到过这样的问题，即对于 Tab 的图标和文字仅在 java 代码中通过 setText() 和 setIcon() 方法来进行设置，但是实践后我们就会发现存在这样的问题，即图标很小并且其与文字之前的距离非常的大，看上去非常的丑，而且很不幸的是我们没有办法通过代码来对图标和文字之间的距离进行设置。 因此我们采取了另一种方案，TabLayout.tab 提供了一个方法叫做 setCustomView(View view) ，通过这个方法，我们可以将自定义好的图标和文字布局实例化之后直接传入，这样我们就可以实现想要的效果了，下面是我根据设计师自定义的图标和文字的布局。 4.5 图标选择器和文字选择器的创建 图标选择器和文字选择器的创建，因为我们需要实现点击或选择该 Tab 的图标和文字的样式同时进行变换，网上提供了一种方式是直接通过 TabLayout 布局文件中的 app:tabSelectedTextColor 和 app:tabTextColor 设置来对文字的样式进行设置，如果是直接使用 TabLayout 提供的 Tab 布局的话这样设置是可以的，但是我们是使用的自定义布局，所以这样的设置是没有用的。 因此我们采用 selector 来对图标和文字的样式变换进行设置，具体的设置代码我放在下面了。上面的是图标的样式选择器，因为我的三个图标都是一样的，所以我只贴了一份代码，实践中的话需要自己针对问一个图标都写一个样式的选择器，下面的一个是文字的样式选择器，具体设置也不赘述。注意，文字样式选择器一定要按照我贴出的代码来写，如果只按照上面图标样式选择器那样配置是没有效果的。
4.6 TabLayoutActivity 的布局文件 activity_tab_layout 的创建 布局文件的设置需要注意几个比较重要的点，一个是需要设置 TabLayout 的 app:tabIndicatorHeight 为 0dp 来隐藏其下方的 Indicator，还有一个就是需要设置 app:tabBackground 和 app:tabRippleColor 这两个属性都为 @android:color/transparent (透明) 来隐藏 Material Design v7 主题自带的点击水波纹效果。 4.7 TabLayoutActivity 的创建 这一步中主要有这么几个比较重要的步骤，即实例化 TabLayout 和 ViewPager ，实例化 Fragment 分页面，然后创建 FragmentPagerAdapter 并将 fragments 传入，将 Adapter 设置给 ViewPager，再将 ViewPager 绑定到 TabLayout 上，再将自定义的 Tab 布局实例化后设置给 Tab 即可。 //TabLayoutActivity.java public class TabLayoutActivity extends AppCompatActivity { private List mFragments; private String[] mTitles; private int[] mImages = {R.drawable.ic_tab_selector_rr, R.drawable.ic_tab_selector_cc, R.drawable.ic_tab_selector_pc}; private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); initView(); } private void initView(){ //实例化组件 mViewPager = (ViewPager) findViewById(R.id.tabViewPager); mTabLayout = (TabLayout) findViewById(R.id.tabLayout); //因为我是将文字信息都放到了 strings 资源文件中进行统一管理，所以要从 resources 中获取 //也可以在创建 mTitles 数组的时候直接进行显示初始化赋值 Resources resources = getResources(); mTitles = resources.getStringArray(R.array.bottom_tab_bar_titles); //初始化分页面的 Fragment，并将其添加到列表中 initFragment(); //实例化 FragmentPagerAdapter 并将 Fragment 列表传入 TabFragmentPagerAdapter adapter = new TabFragmentPagerAdapter(getSupportFragmentManager(), mFragments); //将实例化好的 Adapter 设置到 ViewPager 中 mViewPager.setAdapter(adapter); //设置打开时的默认页面 mViewPager.setCurrentItem(1); //将 ViewPager 绑定到 TabLayout上 mTabLayout.setupWithViewPager(mViewPager); //进行 Tab自定义布局的实例化和添加 for(int i = 0; i < mTitles.length; i++){ //实例化 Tab 布局 View view = LayoutInflater.from(this).inflate(R.layout.custom_tab, null); ImageView imageView = (ImageView)view.findViewById(R.id.tabImageView); TextView textView = (TextView)view.findViewById(R.id.tabTextView); textView.setText(mTitles[i]); imageView.setImageResource(mImages[i]); //将实例化好的 Tab 布局设置给当前的 Tab即可 mTabLayout.getTabAt(i).setCustomView(view); } } private void initFragment(){ mFragments = new ArrayList(); mFragments.add(RecentRecordFragment.newInstance(mTitles[0])); mFragments.add(CurrentClassFragment.newInstance(mTitles[1])); mFragments.add(PersonalCenterFragment.newInstance(mTitles[2])); } } 五、心得体会其实之前类似的文章也读过挺多，但是当真的自己动手开始做的时候，就发现了很多的问题，但是相关解决问题的文章或者对于底部导航栏实现的文章都是比较早期的了，很多地方都已经不再适用了，同时很多的文章是都是心得体会式的，即简单的把代码贴出来，然后目录文件一概不提，让人读的一头雾水，我也是读了很多篇文章，然后把多篇文章的可用之处摘出来，自己实践后才写出了这篇，不敢说是最新最详细的，但也应该算是比较热呼比较实际有用的了，也是希望这篇文章可以帮到大家，如果在实现的过程中有什么问题，可以及时与我沟通。 |
【本文地址】
今日新闻 |
推荐新闻 |