底部导航栏和左右滑动

      基本上每个APP应用都有自己的导航栏,但是使用的方法各有不同,常用的方法如下:

            (1)使用LinearLayout+TextView实现。

            (2)使用RadioGroup+RadioButton实现。

            (3)使用TabLayout+ViewPager实现。

            (4)使用BottomNavigationBar实现。

而在这个项目中,我选择了第四种,第四种方式比较简单,不需要单独去建立xml文件和一些事件代码。对于左右滑动我使用的是自带的ViewPager这个控件。

1、BottomNavigationBar底部导航栏

       在使用之前需要下载这个jar包,你可以到我的云盘(点击打开链接)下载bottom-navigation-bar-1.2.0-sources.jar,下载以后将其导入你的项目中的Lib目录下,然后手动在build.gradle文件中添加下面一句话:

compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'

    这样你就可以在项目中使用这个框架。接下来先在布局文件下引入这个控件:

 

    接下来接写一些设置代码:

//    初始化底部导航栏,并进行设置
    private void initBottomNavigationBar() {
        bottom_navigation_bar.setMode(BottomNavigationBar.MODE_FIXED);
        bottom_navigation_bar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        //设置默认颜色
        bottom_navigation_bar
                .setInActiveColor(R.color.tabInActive)//设置未选中的Item的颜色,包括图片和文字
                .setActiveColor(R.color.tabActive)
                .setBarBackgroundColor(R.color.tabBackground);//设置整个控件的背景色
        //设置徽章
        badge=new BadgeItem()
//                .setBorderWidth(2)//Badge的Border(边界)宽度
//                .setBorderColor("#FF0000")//Badge的Border颜色
//                .setBackgroundColor("#9ACD32")//Badge背景颜色
//                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角
                .setText("2")//显示的文本
//                .setTextColor("#F0F8FF")//文本颜色
//                .setAnimationDuration(2000)
//                .setHideOnSelect(true)//当选中状态时消失,非选中状态显示
        ;
        //添加选项
        bottom_navigation_bar.addItem(new BottomNavigationItem(R.mipmap.books_active, "书库").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.books_inactive)))
                .addItem(new BottomNavigationItem(R.mipmap.discover_active, "发现").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.discover_inactive)))
                .addItem(new BottomNavigationItem(R.mipmap.info_active, "书友圈").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.info_inactive)).setBadgeItem(badge))
                .addItem(new BottomNavigationItem(R.mipmap.mine_active, "我的").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.mine_inactive)))

                .initialise();//初始化BottomNavigationButton,所有设置需在调用该方法前完成
        bottom_navigation_bar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {//未选中 -> 选中
                
            }

            @Override
            public void onTabUnselected(int position) {//选中 -> 未选中
            }

            @Override
            public void onTabReselected(int position) {//选中 -> 选中
            }
        });

    }

     然后在Main_Activity中的onCreate方法中获取控件并初始化设置底部导航栏,通过这两步就可以实现底部导航栏,比其他的方法简单多了。而且这种方式还能实现右上角信息条数的显示。

                                                     底部导航栏和左右滑动_第1张图片

2、ViewPager实现左右滑动

        在使用ViewPager之前,需要先创建四个Fragement,来代表四个界面,通过ViewPager中的一些方法就可以实现Fragement的切换。现在主布局文件中引入v4.view.ViewPager,然后就进行ViewPager的初始化和获取当前ViewPager对象。

    private void initViewPager(){
        List fragments=new ArrayList();
        fragments.add(new books());
        fragments.add(new discover());
        fragments.add(new info());
        fragments.add(new mine());
        FragAdpater adpater=new FragAdpater(getSupportFragmentManager(),fragments);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
               
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setAdapter(adpater);
    }

       虽然到这里已经基本上完成了,但是经过运行你会发现,BottomNavigationBar和ViewPager两者之间并没有相连,也就是当ViewPager左右滑动,底部导航栏的图标还是没有发生变化,但是界面确实是变了。这里就需要做稍微的改动。

 public void onPageSelected(int position) {
                bottom_navigation_bar.selectTab(position);
            }

       在初始化ViewPager中的onPageSelected方法添加一个设置底部导航栏的选中方法。同理在导航栏初始化中的onTabSelected中设置ViewPager的选中。

 public void onTabSelected(int position) {//未选中 -> 选中
                viewPager.setCurrentItem(position);
            }

        这时候导航的功能就基本上实现了。

你可能感兴趣的:(APP设计)