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

本篇文章不再维护——如GitHub库有更新，请点击下方链接进入GitHub库中进行查看更新内容。

BottomNavigationBar点击进入GitHub

GitHub示例图：

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

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

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

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

1.布局内容activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>

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 list;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initViews();    }    private void initViews() {        list = new ArrayList();        /**         * 添加标签的消息数量         */        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"?>

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

这里就不贴出来了。

运行效果图：

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

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

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

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

使用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下载

更多相关文章

随机推荐