Android中使用BottomNavigationBar实现仿微信底部按钮

Android中使用BottomNavigationBar实现仿微信底部按钮

BottomNavigationBar点击进入GitHub

GitHub示例图：

借鉴了这篇博客，写出了实现仿微信底部按钮

转载请注明出处: https://blog.csdn.net/a_zhon/article/details/52431767

首先在app的build.gradle 中加入BottomNavigationBar的

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

1.布局内容activity_main.xml：

<?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"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.example.weixin.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/fragment_content">

    </FrameLayout>

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout_width="match_parent"
        android:layout_gravity="bottom"
        android:id="@+id/bottom_navigation_bar"
        android:layout_height="wrap_content">

    </com.ashokvarma.bottomnavigation.BottomNavigationBar>

</LinearLayout>

2.Activity——MainActivity.java

package com.example.weixin;

import android.graphics.Color;
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 android.widget.Toast;

import com.ashokvarma.bottomnavigation.BadgeItem;
import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.example.weixin.fragment.FragmentAddress;
import com.example.weixin.fragment.FragmentPersonal;
import com.example.weixin.fragment.FragmentSettings;
import com.example.weixin.fragment.FragmentWeiXin;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity
        implements BottomNavigationBar.OnTabSelectedListener {

    private BottomNavigationBar mBottomNavigationBar;

    private BadgeItem mBadgeItem;

    private FragmentAddress mFragmentAddress;
    private FragmentPersonal mFragmentPersonal;
    private FragmentSettings mFragmentSettings;
    private FragmentWeiXin mFragmentWeiXin;

    private List<Fragment> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();

    }

    private void initViews() {

        list = new ArrayList<Fragment>();

        /**
         * 添加标签的消息数量
         */
        mBadgeItem = new BadgeItem()
                .setBorderWidth(1)
                .setBackgroundColor(Color.RED)
                .setText("99+")
                .setHideOnSelect(true);

        /**
         * 设置BottomNavigationBar以及Item项（BottomNavigationItem）
         *      包括按钮选中效果 导航栏背景色等
         */
        mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        mBottomNavigationBar
                /**
                 *  setMode() 内的参数有三种模式类型：
                 *  MODE_DEFAULT 自动模式：导航栏Item的个数<=3 用 MODE_FIXED 模式，否则用 MODE_SHIFTING 模式
                 *  MODE_FIXED 固定模式：未选中的Item显示文字，无切换动画效果。
                 *  MODE_SHIFTING 切换模式：未选中的Item不显示文字，选中的显示文字，有切换动画效果。
                 */
                .setMode(BottomNavigationBar.MODE_FIXED)
                /**
                 *  setBackgroundStyle() 内的参数有三种样式
                 *  BACKGROUND_STYLE_DEFAULT: 默认样式 如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC
                 *                                    如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
                 *  BACKGROUND_STYLE_STATIC: 静态样式 点击无波纹效果
                 *  BACKGROUND_STYLE_RIPPLE: 波纹样式 点击有波纹效果
                 */
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)
                .setActiveColor("#7CFC00")                  //选中颜色
                .setInActiveColor("#FFFFFF")                //未选中颜色
                .setBarBackgroundColor("#D1D1D1")           //导航栏背景色
                /**
                 * 添加导航按钮
                 */
                .addItem(new BottomNavigationItem(R.drawable.tab_weixi, "微信"))
                .addItem(new BottomNavigationItem(R.drawable.tab_contacts, "通讯录"))
                .addItem(new BottomNavigationItem(R.drawable.tab_settings, "设置"))
                .addItem(new BottomNavigationItem(R.drawable.tab_personal, "我").setBadgeItem(mBadgeItem))
                .setFirstSelectedPosition(0)
                .initialise();

        mBottomNavigationBar.setTabSelectedListener(this);

        /**
         *因为首次进入不会主动回调选中页面的监听，所以这里进行手动调用一遍，初始化第一个页面
         */
        onTabSelected(0);

    }

    /**
     * 设置导航选中的事件
     *
     * @param position
     *              选中的下标
     */
    @Override
    public void onTabSelected(int position) {

        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        /**
         *每次添加之前隐藏所有正在显示的Fragment
         *      如果是第一次添加的话使用transaction.add();第二次显示的时候,使用transaction.show();
         * 这样子我们就可以保存Fragment的状态了
         */
        hideFragment(transaction);
        switch (position) {

            case 0:{
                if (mFragmentWeiXin == null) {
                    mFragmentWeiXin = new FragmentWeiXin();
                    transaction.add(R.id.fragment_content, mFragmentWeiXin);
                    list.add(mFragmentWeiXin);
                } else {
                    transaction.show(mFragmentWeiXin);
                }
                break;
            }

            case 1:{
                if (mFragmentAddress == null) {
                    mFragmentAddress = new FragmentAddress();
                    transaction.add(R.id.fragment_content, mFragmentAddress);
                    list.add(mFragmentAddress);
                } else {
                    transaction.show(mFragmentAddress);
                }
                break;
            }

            case 2:{
                if (mFragmentSettings == null) {
                    mFragmentSettings = new FragmentSettings();
                    transaction.add(R.id.fragment_content, mFragmentSettings);
                    list.add(mFragmentSettings);
                } else {
                    transaction.show(mFragmentSettings);
                }
                break;
            }

            case 3:{
                if (mFragmentPersonal == null) {
                    mFragmentPersonal = new FragmentPersonal();
                    transaction.add(R.id.fragment_content, mFragmentPersonal);
                    list.add(mFragmentPersonal);
                } else {
                    transaction.show(mFragmentPersonal);
                }
                break;
            }

            default:{
                break;
            }
        }
        transaction.commit();

    }

    /**
     * 设置未选中Fragment 事件
     */
    @Override
    public void onTabUnselected(int position) {

    }

    /**
     * 设置再次选中的Fragment 事件
     */
    @Override
    public void onTabReselected(int position) {
        if (position == 1) {
            Toast.makeText(this, "神奇奇迹", Toast.LENGTH_SHORT).show();
        }
    }

    /**
     *  隐藏所有正在显示的Fragment
     *
     * @param transaction
     *              FragmentTransaction
     */
    private void hideFragment(FragmentTransaction transaction) {

        for (Fragment fragment :
                list) {
            transaction.hide(fragment);
        }

    }

}

3.Fragment——其中一个FragmentWeixin.java

package com.example.weixin.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 com.example.weixin.R;

/**
 * Created by xiaobaiyang on 2018/4/12.
 */

public class FragmentWeiXin extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_weixin, container, false);
    }

}

它的xml布局文件

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="设置"
        android:textColor="@color/colorAccent"
        android:textSize="50sp"
        android:gravity="center"/>

</LinearLayout>

其他三个Fragment碎片中，修改了inflater.inflate(R.layout.fragment_weixin, container, false)布局文件。以及布局文件中的TextView控件的android:text=""属性。

这里就不贴出来了。

运行效果图：

使用BottomNavigationBar的setMode()和setBackgroundStyle()两个方法，可以达到以下图例中的效果。

1、MODE_FIXED+BACKGROUND_STYLE_STATIC效果

2、MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

3、MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果

4、MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

Demo下载