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

来源：互联网发布：网络被劫持怎么处理编辑：程序博客网时间：2024/05/21 19:28

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  马鞍棕色”，如果不设置其值，则选择系统默认的颜色。

1 0