Android应用开发--底部导航栏效果的一种实现方式（ViewPager 、Fragment）

关键词：
底部导航栏效果、ViewPager&Fragment实现页面切换、Android手机应用开发

开发环境：Windows 10 x64、AndroidStudio2.2

实现功能：底部导航栏效果，可以用以切换页面

具体流程：在布局文件中使用ViewPager控件以及导航栏效果控件PagerTabStrip、创建所要切换的页面布局、创建页面布局所对应的后台活动代码、在主活动中将要切换的页面导入ViewPager控件中。

大致效果图

一种优化的结果，下方的导航栏可以*度较高的自定义

1.在布局文件中使用控件

这里面，ViewPager是一个可以理解为是一个View的组，或者说是List<View>，页面切换的部分就会在这里面展开。也就是说，所有的页面都会在这面进行切换，就像一个列表list一样。

PagerTabStrip控件表示上图中的底部部分，注意该控件的android:layout_gravity="bottom"属性，表示这个控件的布局位置是在底部，也就是说PagerTabStrip是在ViewPager的底部显示的，如果想要其他的布局方式也可以自行修改这个属性。
需要注意的是，我在AndroidStudio2.2版本上写这个属性的时候，AndroidStudio不会自动弹出这个属性，是在我写完这个属性之后，它才显示出作用的。

2.写要切换页面的布局文件（Layout）

直接在app/res/layout文件夹中新建文件

我给它起名page1_fragment
随便写一点东西在里面

然后我们照搬一个page2_fragment.layout，别忘了改一下控件的id啥的

3.写布局文件的后台活动代码

这个后台活动代码也就跟Activity一样，只不过这个东西继承的是Fragment而不是AppCompatActivity
我们直接在app/java/com…viewpagerfragment中新建一个Java类，让它继承Fragment

注意这里继承的是v4.app包下的Fragment，不要继承错了。

新建完之后可以看到里面里面基本上啥都没有，这个时候就需要我们的大杀器，Alt+Insert了。

选中Override Methods，在里面找到OnCreate和OnCreateView两个方法，打开这个窗口之后可以直接在键盘上打出oncreate，它会自动弹出红框里面的Search for

选中之后我们开始对里面的东西进行更改
首先还是我们熟悉的第一步，创建成员变量，赋初始值，注意这里的viewPage1这个成员变量的赋值，在这里它把Page1Fragment.java、page1_fragment.layout和activity_main.layout里面的ViewPager控件联系在了一起。

这样以来，这个页面page1_fragment.layout这个页面的活动基本上就已经写完了，如有其它想要写的函数活动也可以像MainActivity里面一样写在这个onCreate里面，或者由onCreate调用。

然后就是onCreateView这个方法

这样一来后台的活动代码也就写的差不多了，我们现在只需要照搬一个Page2Fragment.java即可

4.在主活动中把Fragment页面导入ViewPager里

接下来我们开始写主活动中的代码，首先还是熟悉的初始化
这一次我们把fragmentList和titleList都初始化了

然后就是把存储有我们编写的Fragment列表的fragmentList放进ViewPager里面
这里我们使用的是ViewPager的setAdapter方法，可以看到它需要的是一个PagerAdapter类型的参数，我们使用匿名内部类的方法，创建一个FragmentPagerAdapter类的子类的对象，FragmentPagerAdapter这个类是FragmentAdapter的一个子类，所以我们创建的匿名内部类也可以作为它的参数
关于匿名内部类的相关内容各位可自行查阅百度了解

写完之后我们可以看到这里面自动生成的内容，以及这个东西需要实现的方法

        viewpagerMain.setAdapter(new FragmentPagerAdapter() {
            @Override
            public Fragment getItem(int position) {
                return null;
            }

            @Override
            public int getCount() {
                return 0;
            }
        });

这上面说的是就是，这个地方需要一个FragmentManager类型的参数，但是你没有给任何东西来作为参数
所以我们要添加这个东西给它作为参数

viewpagerMain.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

这样就可以写里面的方法
可以看到里面自己生成了两个方法，
第一个是getItem，它的返回值为Fragment，它的参数为position，可以猜到，它是用来获得索引位置为position的页面Fragment，那么我们就直接返回fragmentList.get(position)即可
第二个是getCount，它的返回值是int，它的参数是空的，也可以猜到这是一个获取什么东西个数（总数）的一个方法，在这里它是一个获取页面个数的函数，我们直接返回fragmentList.size()即可

随后我们如果想要把我们原来建立的titleList放到底部的导航栏里面，就需要按下ALT+Insert键加入一个新的函数，即是getPageTitle这个函数，我们直接给它返回titleList.get(position)即可

        viewpagerMain.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return titleList.get(position);
            }
        });

到此为止就算写完了，运行程序可以看到如下的页面，画红框的就是PagerTabStrip，即底部导航栏效果的控件，关于这个控件大家可以稍微详细的了解一下，可以对其的一些样式进行更改，但是问题是不太好加图片啥的，只能用文字就显得很low。

5.效果升级

所以我们可以使用如下的方式对其进行升级
在对ViewPager这个控件在后台的代言对象的分析和探索之后，我们发现它有这么一个方法

viewpagerMain.setCurrentItem(0);

它的参数是int型，从名字可以看出来，这个方法可以设置ViewPager的当前项目，也就是说可以设置当前显示的页面。那么我们就可以根据这个，写出如下格式的东西

首先我们在activity_main.layout布局文件中加上这个

这样一改，就可以对底部的Button进行个性化设置，或者把Button改成TextView、ImageView等等，只要是能设置单击事件的或者能对各位操作做出反应的玩意都可以。
接下来我就稍微给它整一下吧

这里是使用了一个LinearLayout来做一个小的布局，实现文字和图片的上下叠加，粗糙设置，主要还是表达这么个概念。

然后后端的代码

本文地址：https://blog.csdn.net/qq_20179227/article/details/110228564