4.底部导航栏BottomNavigationBar

实现底部导航栏的方式是多种多样的,今天学习一下谷歌刚出的底部导航栏控件。

一、在使用BottomNavigation前需要自己先导入依赖并手动添加xml资源以及java类

库文件可以从gitHub地址:https://github.com/Ashok-Varma/BottomNavigation下载
实现效果如下:

4.底部导航栏BottomNavigationBar_第1张图片
在gitHub中文件大概是这样的

1.我们需要用到的只有bottom-navigation-bar,在这个文件夹下找到名叫ashokvarma的文件夹并将其复制到com文件夹下,如下图所示:
2.将res文件夹下的资源文件加入已经创建的项目中(有重名的就只加入其中的资源),若不加入这些资源文件那么在运行时会出现找不到R文件的情况,因为ashokvarma中的类会用到这些xml文件中的变量或者其他资源。
3.在github中找到如下位置,点击下载JAR文件
4.完成后点击File->project structure选择Dependencies选项卡,点击右边的加号选择jar dependency,然后选择刚刚下载的jar文件并确认,最后进行sync。


二、完成以上步骤后我们就已经成功添加了依赖(他喵的是真的费劲,真不知道那些直接写一句compile“xxxx.xxxx”的是怎们添加的,反正我这样添加有若干错误,望哪位大神指导一下如何像他们一样简单的添加依赖)

准备工作已经完成了,接下来需要编辑布局文件以及java程序了
1.布局文件(其实只需要把navigationBar添加到xml文件中就行)

    
        
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/ res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        com.ashokvarma.bottomnavigation.BottomNavigationBar>
    
    
    
    RelativeLayout>

2.java程序
(1)若只是在xml文件中添加了导航栏就运行,那么导航栏中不会出现任东西,因此我们还需要往其中添加项目。需要在oncreate()中添加以下程序段

    BottomNavigationBar iconBar;
    TextBadgeItem badgeItem = new TextBadgeItem();
    badgeItem.setHideOnSelect(false).setText("10").setBackgroundColorResource(R.color.coloryello).setBorderWidth(0);//设置图标右上角的圆圈加数字的显示属性
    //笔记:除了这个TextBadgeItem之外还有一个ShapeBadgeItem(右上角变成五角形或者其他的)
    iconBar =(BottomNavigationBar)findViewById(R.id.bottom_navigation);
    
    iconBar.setMode(BottomNavigationBar.MODE_SHIFTING);
    //笔记:底部导航栏有三种MODE
    1)Default 默认效果 选中会突出,有水纹背景的变化 item未选中时不显示文字
    2)FIXED 选中图形不会突出  item未选中时显示文字
    3)SHIFTING  与Default效果近似
    iconBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
    //笔记:1)STATIC  点击时没有水波纹效果
    2)RIPPLE 点击时有水波纹效果
    3)DEFAULT mode为fixed则使用static    mode使用shifting则使用RIPPLE
    这两个设置需要放在前面才有效
    iconBar.addItem(new BottomNavigationItem(R.drawable.jiapurson,R.string.firsticonname).setActiveColorResource(R.color.colorgreen).setBadgeItem(badgeItem))
    .addItem(new BottomNavigationItem(R.drawable.information
            ,R.string.secondiconname).setActiveColorResource(R.color.coloryello))
    .addItem(new BottomNavigationItem(R.drawable.icon_three,R.string.thirdiconname).setActiveColorResource(R.color.colorPrimaryDark))
    .addItem(new BottomNavigationItem(R.drawable.icon_four,R.string.forthiconname).setActiveColorResource(R.color.HONG));//向导航栏中添加item   setBadgeItem()用于设置右上角的消息提醒
    iconBar.setFirstSelectedPosition(0).initialise();//设置初始选中位置

(2)在添加完导航栏后我们需要对导航栏的item添加监听,以完成item间的切换动作。每一个切换项都是一个Fregment,每一个Fragment都可以像activity一样加载XML布局文件完成页面布局,所以我们需要在此创建4个布局(fragment1…)和一个Fragment的子类。每个activity中可以包含多个Fragment,两者具有相同的生命周期。

接下来看具体的代码
Fragment010.java

    package com.example.r.achat;
    
    import android.annotation.SuppressLint;
    import android.os.Bundle;
    import android.support.annotation.LayoutRes;
    import android.support.annotation.NonNull;
    import android.support.annotation.Nullable;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    public class Fragment010 extends Fragment {
        private  int layout=R.layout.fragment1;
    
        @Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            LayoutInflater lf = LayoutInflater.from(getContext());
    //笔记:getContext()  这是在View类中提供的方法,用于获取当前View运行的Context。
            View  view = lf.inflate(layout,container,false);//加载布局并将其转化为VIEW对象。
           return view;
        }
        public  void setLayout(int layout)//将layout下的布局文件名传入
        {
    
            this.layout = layout;
    
        }
    }

fragment1.xml 其他三个布局和这个基本一样

    
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:text="first fragment"
        />
    LinearLayout>

然后我们来看看监听程序,这段程序需要写在oncreate()中

    iconBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
    
        @Override
        public void onTabSelected(int position) {
            
        switch(position)
        {
        case  0 :
           FragmentManager fm = getSupportFragmentManager();//创建一个Fragment管理器
            FragmentTransaction ft = fm.beginTransaction();//开启事务
            Fragment010 fs = new Fragment010();
            fs.setLayout(R.layout.fragment1);//创建一个fragment对象并将布局名作为参数传入其中
            ft.replace(R.id.activity_main,fs);//布局替换,这里需要注意第一个参数是activity布局
           ft.commit();//提交事务
            break;
        case  1:
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction1 = fragmentManager.beginTransaction();
            Fragment010 fragment010 = new Fragment010();
            fragment010.setLayout(R.layout.fragment2);
            fragmentTransaction1.replace(R.id.activity_main,fragment010);
            fragmentTransaction1.commit();
            break;
        case  2:
            FragmentManager fragmentManager1= getSupportFragmentManager();
            FragmentTransaction fragmentTransaction2 = fragmentManager1.beginTransaction();
            Fragment010 fragment0101 = new Fragment010();
            fragment0101.setLayout(R.layout.fragment3);
            fragmentTransaction2.replace(R.id.activity_main,fragment0101);
            fragmentTransaction2.commit();
            break;
        case  3:
            FragmentManager fragmentManager2= getSupportFragmentManager();
            FragmentTransaction fragmentTransaction3 = fragmentManager2.beginTransaction();
            Fragment010 fragment0102 = new Fragment010();
            fragment0102.setLayout(R.layout.fragment4);
            fragmentTransaction3.replace(R.id.activity_main,fragment0102);
            fragmentTransaction3.commit();

            break;
        default:
            Toast.makeText(MainActivity.this,"default",Toast.LENGTH_SHORT).show();
            FragmentManager fm1 = getSupportFragmentManager();
            FragmentTransaction ft1 = fm1.beginTransaction();
            Fragment010 fs1 = new Fragment010();
            fs1.setLayout(R.layout.fragment1);
            ft1.replace(R.id.activity_main,fs1);
            ft1.commit();


    }



你可能感兴趣的:(4.底部导航栏BottomNavigationBar)