BottomNavigationView底部导航栏+fragemnt和viewpage的实现实现(二)

声明: 本文的连接地址(微信打开): http://view.inews.qq.com/w/WXN20180301025918030?refer=nwx&bat_id=1115006214&cur_pos=1&openid=o04IBAOQzAM4aOm6JQYDgPf5unAs&groupid=1519893627&msgid=1

我学习的大牛的微信公众号的文章,特此说明.

记录一点就是自己火狐的通行证 账号: [email protected]

密码: 经常使用的哪一个

三月一号,加油学习.

基于上一篇的学习,我们基本对于底部导航栏有一个明确的认识很基本使用,我们常见的是底部导航栏搭配的fragment来使用,完成页面的切换.

BottomNavigationView+fragment

思路就是我们想集成底部的导航栏,对导航栏进行select的监听;

代码如下:

布局:

menu的代码 如果需要自己寻找图片代替:

我们新建需要的fragment,然后对fragemnt开启事物进行替换.替换的就是对我们展示的FrameLayout的布局.

具体的代码如下:

 /**
 * 事物的处理
 */
private void initEvent() {

    bottom_frgament.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.action_favorites4:
                    // 点击的时候切换的 就是我们的FrameLayout
                    getSupportFragmentManager().beginTransaction().replace(R.id.fl_main_contain, own1Fragment).commit();
                    return true;
                // break;
                case R.id.action_launcher4:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fl_main_contain, own1Fragment).commit();
                    return true;
                // break;
                case R.id.action_music4:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fl_main_contain, own1Fragment).commit();
                    return true;
                // break;
                case R.id.action_sport4:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fl_main_contain, own1Fragment).commit();
                    return true;
                //  break;
            }
            return false;
        }
    });
}

注意的是关于supportfragment和fragment,然后就是监听select的时候返回使用return true,不然不会生效.还有就是事物提交时候注意的事项.

BottomNavigationView+viewpage

这次要实现的是关于BottomNavigation和Viewpage实现,我们发现底部导航只能点击进入下一个页面,不能滑动到下一个页面,我们搭建viewpage的组合;

页面的布局展示:

初始化结束后先给ViewPage设置设置适配器

关于viewpage的适配器的选择

关于适配器的学习连接: http://blog.csdn.net/jack_king007/article/details/41413405

第一点就是 PagerAdapter 是基类, FragmentPagerAdapter 是继承PagerAdapter 的,FragmentStatePagerAdapter也是继承于PagerAdapter.

我们直接使用FrgamentAdapter:

代码如下:

public class VgAdapter extends FragmentPagerAdapter{
 private List fragmentList ;
public VgAdapter(FragmentManager fm, List fragments) {
    super(fm);
    fragmentList=fragments;
}
@Override
public Fragment getItem(int position) {
    Fragment fragment = fragmentList.get(position);
    return fragment;
}
@Override
public int getCount() {
    return fragmentList.size();
}
}

在主页面设置adapter和对BottomNavigationView监听,展示返回true,不然底部不能点金,此时发现底部可以点金,viewpage也可以滑动,下面就是关联起来.

这是昨天的一些遗漏,我们今天主要是对ViewPage的适配器的学习,上面介绍了关于Viewpage的三种适配器,我们分别继承来实现我们当前的viewpage的实现.

#### 第一个就是继承FagmentPagerAdapter类 ####

具体代码的实现在上面,这里面说说,类中方法的实现含义,构造方法便于传递一个FragmentManager,后面的list是便于Fragment的传递,geItem(postion),根据postion绑定对应的fragment. 最后是getCount(),返回的是页面的size.

实现起来比较方便.

第二个adapter继承基类PagerAdapter

使用pageradapter，至少必须重写下面的四个方法
【 instantiateItem(ViewGroup, int)】

这个函数的实现的功能是创建指定位置的页面视图。适配器有责任增加即将创建的View视图到这里给定的container中，这是为了确保在finishUpdate(viewGroup)返回时这个已经完成
返回值：返回一个代表新增视图页面的Object

【public void destroyItem (ViewGroup container, int position, Object object)】

该方法实现的功能是移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。
【 public int getCount()】

返回当前有效视图的个数。

【isViewFromObject(View, Object)】

功能：该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)
返回值：如果对应的是同一个View，返回True，否则返回False。

代码展示:
public class ViewPagerPageAdapter extends PagerAdapter {
private List fragmentList;
private List mVIEWList;

/*public ViewPagerPageAdapter(List fragments) {
    fragmentList = fragments;
}*/

public ViewPagerPageAdapter(Context context) {
    TextView textView = new TextView(context);
    textView.setText("这是textview");
    mVIEWList = new ArrayList<>();
    mVIEWList.add(textView);
    mVIEWList.add(textView);
    mVIEWList.add(textView);
    mVIEWList.add(textView);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
    container.addView( mVIEWList.get(position));
    return  mVIEWList.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView( mVIEWList.get(position));
}

@Override
public int getCount() {
    return mVIEWList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
    return view==object;
}
}

还有一个FragmentStatePagerAdapter

代码展示如下:

public class VPFragmentStusAdapter extends FragmentStatePagerAdapter {
private List fragmentList;

public VPFragmentStusAdapter(FragmentManager fm, List fragments) {
    super(fm);
    fragmentList = fragments;
}

@Override
public Fragment getItem(int position) {
    return fragmentList.get(position);
}

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

在Activity中的使用的情况也是一致的.

这个类也是继承与PagerAdapter; 使用于多个tab页面的情况.

最后是适配器的区别

首先他们都是继承自PagerAdapter，FragmentPagerAdapter适合使用在固定的数量较少的场景，比如本例的4个tab的fragment滑动界面，而FragmentStatePagerAdapter适合适合用在多个tab场景下，并且会保存当前界面以及下一个界面和上一界面，最多可以保留3个（具体源码分析参见http://blog.csdn.net/jackrex/article/details/9885469?utm_source=tuicool&utm_medium=referral）他们的使用方式一致

底部点击和viewpage绑定的fragment的切话

首先是底部选中切换到对应的viewpage:

代码如下:

图中有注意点,我们case后面使用break,也可以实现点击底部导航栏完成viewpage的切换,但是使用break的话,底部不会出现选择和为选择时候颜色的变化.

 // 设置viewpage的滑动的监听
    mVg_bvg.addOnPageChangeListener(this);

上面我们已经实现了对底部点击和viewpage中对应fragment的切话,你仔细看还有一个问题那就是我们滑动的时候,底部不会变化.

滑动viewpage出现对底部同步变化

哪我们想到是什么时候viewpage滑动,我们需要监听viewpage在做出底部的切换.

我们知道底部导航栏使用的menu指定的元素,BottomNavigationView的源码方法可以获取一个menu;

我们进Menu源码查看

我们可以finIteam(postion),滑动到哪里我们可以获取到postion的iteam,之个对象是MenuIteam,我们进去看看:

最后成功关联.

最后的代码展示:

最后的展示图片(ps图片这张是借用的):