安卓 BottomNavigationBar 底部导航栏 最简单用法详解

来源:互联网 发布:java中九九乘法表算法 编辑:程序博客网 时间:2024/05/24 03:22

底部导航栏有各种实现方法,下面看看最新的官方定制的标准 BottomNavigationBar 的使用方法:

一、前奏

1、BottomNavigation Github网址(适合能翻墙的同学):
https://github.com/Ashok-Varma/BottomNavigation

2、andriod studio gradle加载方式(由于有更新,请去上面的官网找到最新版本加载):

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

3、官方的用户指南网址:
https://material.io/guidelines/components/bottom-navigation.html

4、界面预览(官网的截图):

这里写图片描述

二、正文

使用说明都在对应代码的注释里

MainActivity.java

package com.abs.app;//这里换成你自己的import android.app.FragmentManager;import android.app.FragmentTransaction;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.util.Log;import com.ashokvarma.bottomnavigation.BottomNavigationBar;import com.ashokvarma.bottomnavigation.BottomNavigationItem;/** * Created by 武当山道士 on 2017/8/16. */public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{    private BottomNavigationBar bottomNavigationBar;    int lastSelectedPosition = 0;    private String TAG = MainActivity.class.getSimpleName();    private MyFragment mMyFragment;    private ScanFragment mScanFragment;    private HomeFragment mHomeFragment;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        /**         * bottomNavigation 设置         */        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);        /** 导航基础设置 包括按钮选中效果 导航栏背景色等 */        bottomNavigationBar                .setTabSelectedListener(this)                .setMode(BottomNavigationBar.MODE_FIXED)                /**                 *  setMode() 内的参数有三种模式类型:                 *  MODE_DEFAULT 自动模式:导航栏Item的个数<=3 用 MODE_FIXED 模式,否则用 MODE_SHIFTING 模式                 *  MODE_FIXED 固定模式:未选中的Item显示文字,无切换动画效果。                 *  MODE_SHIFTING 切换模式:未选中的Item不显示文字,选中的显示文字,有切换动画效果。                */                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)                /**                 *  setBackgroundStyle() 内的参数有三种样式                 *  BACKGROUND_STYLE_DEFAULT: 默认样式 如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC                 *                                    如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。                 *  BACKGROUND_STYLE_STATIC: 静态样式 点击无波纹效果                 *  BACKGROUND_STYLE_RIPPLE: 波纹样式 点击有波纹效果                 */                .setActiveColor("#FF107FFD") //选中颜色                .setInActiveColor("#e9e6e6") //未选中颜色                .setBarBackgroundColor("#1ccbae");//导航栏背景色        /** 添加导航按钮 */        bottomNavigationBar                .addItem(new BottomNavigationItem(R.drawable.ic_home, "首页"))                .addItem(new BottomNavigationItem(R.drawable.ic_scan, "扫一扫"))                .addItem(new BottomNavigationItem(R.drawable.ic_my, "个人设置"))                .setFirstSelectedPosition(lastSelectedPosition )                .initialise(); //initialise 一定要放在 所有设置的最后一项        setDefaultFragment();//设置默认导航栏    }    /**     * 设置默认导航栏     */    private void setDefaultFragment() {        FragmentManager fm = getFragmentManager();        FragmentTransaction transaction = fm.beginTransaction();        mHomeFragment = HomeFragment.newInstance("首页");        transaction.replace(R.id.tb, mHomeFragment);        transaction.commit();    }    /**     * 设置导航选中的事件     */    @Override    public void onTabSelected(int position) {        Log.d(TAG, "onTabSelected() called with: " + "position = [" + position + "]");        FragmentManager fm = this.getFragmentManager();        //开启事务        FragmentTransaction transaction = fm.beginTransaction();        switch (position) {            case 0:                if (mHomeFragment == null) {                    mHomeFragment = HomeFragment.newInstance("首页");                }                transaction.replace(R.id.tb, mHomeFragment);                break;            case 1:                if (mScanFragment == null) {                    mScanFragment = ScanFragment.newInstance("扫一扫");                }                transaction.replace(R.id.tb, mScanFragment);                break;            case 2:                if (mMyFragment == null) {                    mMyFragment = MyFragment.newInstance("个人中心");                }                transaction.replace(R.id.tb, mMyFragment);                break;            default:                break;        }        transaction.commit();// 事务提交    }    /**     * 设置未选中Fragment 事务     */    @Override    public void onTabUnselected(int position) {    }    /**     * 设置释放Fragment 事务     */    @Override    public void onTabReselected(int position) {    }}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.abs.app.MainActivity">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <LinearLayout            android:id="@+id/tb"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="horizontal">        </LinearLayout>        <com.ashokvarma.bottomnavigation.BottomNavigationBar            android:id="@+id/bottom_navigation_bar"            android:layout_width="match_parent"            android:layout_alignParentBottom="true"            android:layout_height="wrap_content"/>    </RelativeLayout></android.support.design.widget.CoordinatorLayout>

首页
HomeFragment.java

package com.abs.app;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by 武当山道士 on 2017/8/16. */public class HomeFragment extends Fragment {    public static HomeFragment newInstance(String param1) {        HomeFragment fragment = new HomeFragment();        Bundle args = new Bundle();        args.putString("agrs1", param1);        fragment.setArguments(args);        return fragment;    }    public HomeFragment() {    }    @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.home_fragment, container, false);        Bundle bundle = getArguments();        String agrs1 = bundle.getString("agrs1");        TextView tv = (TextView)view.findViewById(R.id.container);        tv.setText(agrs1);        return view;    }}

其余两个(Fragment) .java: MyFragment.java (对应 个人设置) 和 ScanFragment.java (对应 扫一扫)内容跟这个类似,把里面对应xml名字 换成对应的就行

home_fragment.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:id="@+id/container"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

其他两个 .xml :home_fragment.xml , my_fragment.xml 跟这个一样就行,简单测试嘛

最后在 layout里加上三个按钮,png格式的最好
下面三个按钮是随便做的,测试用用可以
这里写图片描述
这里写图片描述
这里写图片描述

整个项目 目录如下图所示:
这里写图片描述

如有错误,欢迎指正,谢谢~

阅读全文
1 0
原创粉丝点击