安卓底部导航栏BottomNavigationView的简单应用

1.添加依赖

   compile 'com.android.support:design:26.1.0'

2.在activity_main.xml中添加BottomNavigationView控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/fl_main"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_alignParentTop="true"
        android:layout_height="wrap_content" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/negavition"/>

</LinearLayout>

3.在主界面中添加了BottomNavigationView后就要为其设置item项，在item中设置按钮图标和文字

   在res目录下新建menu文件夹，在该文件夹下新建menu resource file,命名navigation.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/a1"
        android:title="home"/>
    <item
        android:id="@+id/navigation_buy"
        android:icon="@drawable/a5"
        android:title="order"/>
    <item
        android:id="@+id/navigation_user"
        android:icon="@drawable/a3"
        android:title="my"/>

</menu>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.创建fragment

在此创建3个不同的fragment

首页：

public class HeadFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_head,container,false);
        // Inflate the layout for this fragment
        return view;
    }
}

fragment_head.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".HeadFragment">

    <TextView
        android:id="@+id/tv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="首页"
        android:textSize="30sp"/>

</FrameLayout>

为简单起见，在fragment中只添加了一个TextView。

再按同样的方法创建其他两个fragment，

分别是OrderFragment.java+fragment_order.xml 和 UserFragment.java+fragment_user.xml

创建过程就不在此赘述，和创建HeadFragment一样
 

5.MainActivity.java

public class MainActivity extends AppCompatActivity {
    private BottomNavigationView navigationView;
    private Fragment headFragment;
    private Fragment orderFragment;
    private Fragment userFragment;
    private Fragment[] fragmentlist;
    //用于标识上一个fragment
    private int lastFragment;
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //fragmrent初始化
        initFragment();
    }

    private void initFragment() {
        navigationView = (BottomNavigationView) findViewById(R.id.bnv_main);
        //配置菜单按钮显示图标
        navigationView.setItemIconTintList(null);
        //将三个fragment先放在数组里
        headFragment = new HeadFragment();
        orderFragment = new OrderFragment();
        userFragment = new UserFragment();
        fragmentlist = new Fragment[]{headFragment, orderFragment, userFragment};
        //此时标识标识首页
        //0表示首页，1表示orderFragment，2表示userFragment
        lastFragment = 0;
        //设置默认页面为headFragment
        getSupportFragmentManager().beginTransaction().replace(R.id.fl_main, headFragment)
                .show(headFragment).commit();
        navigationView.setSelectedItemId(R.id.navigation_home);
        //给BottomNavigation添加按钮的点击事件
        navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem Item) {
                resetToDefaultIcon();
                switch (Item.getItemId()) {
                    case R.id.navigation_home:
                        //判断要跳转的页面是否是当前页面，若是则不做动作
                        if (lastFragment != 0) {
                            switchFragment(lastFragment, 0);
                            lastFragment = 0;
                        }
                        Item.setIcon(R.drawable.a2);
                        return true;
                    case R.id.navigation_buy:
                        if (lastFragment != 1) {
                            switchFragment(lastFragment, 1);
                            lastFragment = 1;
                        }
                        Item.setIcon(R.drawable.a6);
                        return true;
                    case R.id.navigation_user:
                        if (lastFragment != 2) {
                            switchFragment(lastFragment, 2);
                            lastFragment = 2;
                        }
                        Item.setIcon(R.drawable.a4);
                        return true;
                }
                return false;
            }
        });
    }

    private void switchFragment(int lastFragment, int i) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        //隐藏上个fragment
        transaction.hide(fragmentlist[lastFragment]);

        if (fragmentlist[i].isAdded() == false) {
            transaction.add(R.id.fl_main, fragmentlist[i]);
        }
        transaction.show(fragmentlist[i]).commitAllowingStateLoss();
    }
   //重新配置每个按钮的状态
    private void resetToDefaultIcon() {
        navigationView.getMenu().findItem(R.id.navigation_home).setIcon(R.drawable.a1);
        navigationView.getMenu().findItem(R.id.navigation_buy).setIcon(R.drawable.a5);
        navigationView.getMenu().findItem(R.id.navigation_user).setIcon(R.drawable.a3);
    }
}

代码中的注释都很详细

其中，FragmentTransaction相当于是个容器，会将所有被添加的fragment保存起来，再配置把哪个显示、哪个隐藏。

可以把BottomNavigationView默认icon设置为null。