BottomNavigationBar底部导航条用法

先来张效果图

接下来是实现过程

1.加入依赖

 compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0' 

2.xml布局

fragment.xml的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_fragment_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="@string/app_name"
        android:textColor="@color/colorAccent"
        android:textSize="24sp"/>
</LinearLayout>

activity_main.xml的布局
<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cct.buttomnavigationbar.MainActivity">
    <LinearLayout
        android:id="@+id/ll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:text="Hello World!">
    </LinearLayout>
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
    </com.ashokvarma.bottomnavigation.BottomNavigationBar>
</RelativeLayout>

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="green">#79E65D</color>
    <color name="orange">#F8A52A</color>
    <color name="pink">#FF77FF</color>
    <color name="yellow">#FFFF44</color>
    <color name="light">#BBFFF1</color>
</resources>

strings.xml
<resources>
    <string name="app_name">BottomNavigationBar</string>
    <string name="tab_one">Fish</string>
    <string name="tab_two">Fly</string>
    <string name="tab_three">Bird</string>
    <string name="tab_four">Coffee</string>
</resources>

2.Java代码

BaseFragment类

package cct.buttomnavigationbar.fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import cct.buttomnavigationbar.R;
public class BaseFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment,container,false);
        TextView mFragmentText = (TextView) view.findViewById(R.id.tv_fragment_text);
        Bundle bundle = getArguments();
        String args = bundle.getString(Constants.KEY_ARGS);
        mFragmentText.setText(args);
        return view;
    }
}

Constants类

package cct.buttomnavigationbar.fragment;
public class Constants {
    public static final String KEY_ARGS = "args";
}

Fragment1类， Fragment2，Fragment3,Fragment4与之一样，就不贴了

package cct.buttomnavigationbar.fragment;
import android.os.Bundle;
public class FragmentOne extends BaseFragment {
    public static FragmentOne newInstance(String s){
        Bundle bundle = new Bundle();
        bundle.putString(Constants.KEY_ARGS,s);
        FragmentOne fragment = new FragmentOne();
        fragment.setArguments(bundle);
        return fragment;
    }
}

MainActivity类

package cct.buttomnavigationbar;
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 cct.buttomnavigationbar.fragment.FragmentFour;
import cct.buttomnavigationbar.fragment.FragmentOne;
import cct.buttomnavigationbar.fragment.FragmentThree;
import cct.buttomnavigationbar.fragment.FragmentTwo;

public class MainActivity extends AppCompatActivity {
    private BottomNavigationBar bottomNavigationBar;
    private FragmentOne mFragmentOne;
    private FragmentTwo mFragmentTwo;
    private FragmentThree mFragmentThree;
    private FragmentFour mFragmentFour;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BadgeItem badgeItem=new BadgeItem();
        badgeItem.setHideOnSelect(false)
                .setText("10").setBackgroundColor(R.color.light)
                .setBorderWidth(0);
        bottomNavigationBar= (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_one,R.string.tab_one).setActiveColorResource(R.color.green).setBadgeItem(badgeItem))
                .addItem(new BottomNavigationItem(R.drawable.icon_two, R.string.tab_two).setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_three, R.string.tab_three).setActiveColorResource(R.color.pink))
                .addItem(new BottomNavigationItem(R.drawable.icon_four, R.string.tab_four).setActiveColor(R.color.yellow))//依次添加item,分别icon和名称
                .setFirstSelectedPosition(0)//设置默认选择item
                .initialise();//初始化
        bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {
                android.support.v4.app.FragmentTransaction transaction=getSupportFragmentManager().beginTransaction();
               switch(position)
               {
                   case 0:
                   {
                       if(mFragmentOne==null)
                       {
                           mFragmentOne=FragmentOne.newInstance("First Fragment");
                       }
                       transaction.replace(R.id.ll_content, mFragmentOne);
                       break;
                   }
                   case 1:
                   {
                       if(mFragmentTwo==null)
                   {
                          mFragmentTwo=FragmentTwo.newInstance("Second Fragment");
                   }
                   transaction.replace(R.id.ll_content,mFragmentTwo);
                       break;
                   }
                   case 2:
                   {
                       if(mFragmentThree==null)
                       {
                           mFragmentThree=FragmentThree.newInstance("ThirdFragment");
                       }
                transaction.replace(R.id.ll_content,mFragmentThree);
                       break;
                   }
                   case 3:
                   {
                       if(mFragmentFour==null)
                       {
                           mFragmentFour=FragmentFour.newInstance("Forth Fragment");
                       }
                   transaction.replace(R.id.ll_content,mFragmentFour);
                       break;
                   }
                   default:
                       if(mFragmentOne==null)
                       {
                         mFragmentOne=FragmentOne.newInstance("First Fragment");
                       }
                   transaction.replace(R.id.ll_content,mFragmentOne);
                       break;

               }
                transaction.commit();
           }
            @Override
            public void onTabUnselected(int position) {

            }
            @Override
            public void onTabReselected(int position) {

            }
        });
    }
}