底部導航欄和左右滑動

      基本上每個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'

    這樣你就可以在項目中使用這個框架。接下來先在佈局文件下引入這個控件:

<com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottom_navigation_bar"
        android:layout_alignParentBottom="true"
      /> 

    接下來接寫一些設置代碼:

//    初始化底部導航欄,並進行設置
    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方法中獲取控件並初始化設置底部導航欄,通過這兩步就可以實現底部導航欄,比其他的方法簡單多了。而且這種方式還能實現右上角信息條數的顯示。

                                                     

2、ViewPager實現左右滑動

        在使用ViewPager之前,需要先創建四個Fragement,來代表四個界面,通過ViewPager中的一些方法就可以實現Fragement的切換。現在主佈局文件中引入v4.view.ViewPager,然後就進行ViewPager的初始化和獲取當前ViewPager對象。

    private void initViewPager(){
        List<Fragment> fragments=new ArrayList<Fragment>();
        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);
            }

        這時候導航的功能就基本上實現了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章