android 底部导航栏BottomNavigationBar的详细使用

最新推荐文章于 2024-07-22 16:44:57 发布

哈丨吅

最新推荐文章于 2024-07-22 16:44:57 发布

阅读量9.5k

点赞数 7

文章标签： android BottomNavigationBar

本文链接：https://blog.csdn.net/a549742320/article/details/52452356

版权

Google最近添加到Material design中的底部导航栏BottomNavigationBar，效果如下：

这里写图片描述

实现：

1.在Gradle中添加依赖：

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

2.布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.administrator.bottomnavigationbar.MainActivity">
    <RelativeLayout
        android:id="@+id/root"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_bar">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv"
            android:textSize="40dp"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true">
    </com.ashokvarma.bottomnavigation.BottomNavigationBar>
</RelativeLayout>

3.主界面的实现：

package com.example.administrator.bottomnavigationbar;

 
 
  
  
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


import com.ashokvarma.bottomnavigation.BadgeItem;
import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{
    private BottomNavigationBar mBottomNavigationBar;
    private ArrayList<Fragment>fragments;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        assignViews();
    }
    //添加页面
    private void assignViews(){
        //添加标签的消息数量
        BadgeItem numberBadgeItem=new BadgeItem()
                .setBorderWidth(4)
                .setBackgroundColorResource(R.color.blue)
                .setText("5")
                .setHideOnSelect(true);
        mBottomNavigationBar=(BottomNavigationBar)findViewById(
  
  R.id.bottom_bar);
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp,"Music").setInActiveColor(R.color.teal).setBadgeItem(numberBadgeItem))
                                .addItem(new BottomNavigationItem(R.drawable.ic_location_on_white_24dp,"Location").setInActiveColor(R.color.teal).setActiveColor("#32CD32"))
                                .addItem(new BottomNavigationItem(R.drawable.ic_find_replace_white_24dp,"Find").setInActiveColor(R.color.teal))
                                .addItem(new BottomNavigationItem(R.drawable.ic_favorite_white_24dp,"Favorite").setInActiveColor(R.color.teal))
                                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp,"Books").setInActiveColor(R.color.teal))
                                .setFirstSelectedPosition(0)
                                .initialise();
        fragments=getFragments();
        setDefaultFragment();//设置默认选项
        mBottomNavigationBar.setTabSelectedListener(this); //设置监听

    }
    private void setDefaultFragment(){
        FragmentManager fragmentManager=getSupportFragmentManager();  //获取FragmentManager
        FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();//开启一个事务
        fragmentTransaction.add(
  
  R.id.root,MusicFragment.newInstance(""));
        fragmentTransaction.commit();


    }
    private ArrayList<Fragment> getFragments(){
        ArrayList<Fragment> fragments=new ArrayList<>();
        fragments.add(MusicFragment.newInstance("Music"));
        fragments.add(LocationFragment.newInstance("Location"));
        fragments.add(FindFragment.newInstance("Find"));
        fragments.add(FavoriteFragment.newInstance("Favorite"));
        fragments.add(BookFragment.newInstance("Books"));
        return fragments;
    }

    @Override
    public void onTabSelected(int position) {   //被选中
        if(fragments!=null){
            if(position<fragments.size()){
                FragmentManager fm=getSupportFragmentManager();
                FragmentTransaction ft=fm.beginTransaction();
                Fragment fragment=fragments.get(position);
                if(fragment.isAdded()){
                    ft.replace(
  
  R.id.root,fragment);
                }else {
                    ft.add(
  
  R.id.root,fragment);
                }
                ft.commitAllowingStateLoss();
            }
        }

    }

    @Override
    public void onTabUnselected(int position) {  //未被选中
        if(fragments!=null){
            FragmentManager fm=getSupportFragmentManager();
            FragmentTransaction ft=fm.beginTransaction();
            Fragment fragment=fragments.get(position);
            ft.remove(fragment);
            ft.commitAllowingStateLoss();
        }

    }

    @Override
    public void onTabReselected(int position) { //重新选中

    }
}

4.使用Fragment，新建MusicFragment等几个类以及各自的xml文件，这里给出其中一个，其他的相似：

package com.example.administrator.bottomnavigationbar;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/9/6.
 */
public class MusicFragment extends FindFragment {
    public static MusicFragment newInstance(String param1){
        MusicFragment fragment=new MusicFragment();
        Bundle args=new Bundle();
        args.putString("args1",param1);
        fragment.setArguments(args);
        return fragment;
    }
    public MusicFragment(){

    }
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.fragment_Music,container,false);
        Bundle bundle=getArguments();
        String args1=bundle.getString("args1");
        TextView tv=(TextView)view.findViewById(R.id.tv_Music);
        tv.setText(args1);
        return view;
    }
}

xml：

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="50dp"
        android:id="@+id/tv_location" />
</RelativeLayout>
效果：
      
代码说明：

1.导航栏的模式和切换形式
BottomNavigationBar.setMode有几种值：MODE_FIXED.MODE_SHIFTING.MODE_DEFAULT.MODE_CLASSIC
其中 MODE_FIXED  要求 dependencies{compile'com.ashokvarma.android:bottom-navigation-bar:1.2.0'}
MODE_CLASSIC  要求  dependencies{compile'com.ashokvarma.android:bottom-navigation-bar:0.9.5'}
mBottomNavigationBar.setBackgroundStyle有几种值：BACKGROUND_STYLE_STATIC.BACKGROUND_STYLE_RIPPLE.BACKGROUND_STYLE_DEFAULT
MODE_FIXED+BACKGROUND_STYLE_STATIC效果
MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果
MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果
MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

   
   
Tips：模式跟背景的设置都要在添加tab前面，不然不会有效果
2.颜色的改变
setInActiveColor-----图标和文字的颜色一致（未被选中时）
setActiveColor-----(选中时的颜色) “其值可以任意选取，eg：#8B4513  马鞍棕色”，如果不设置其值，则选择系统默认的颜色。