安卓 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
- 安卓 BottomNavigationBar 底部导航栏 最简单用法详解
- BottomNavigationBar底部导航栏
- Android 底部导航栏 BottomNavigationBar
- UI-BottomNavigationBar-底部导航栏
- Android------底部导航栏BottomNavigationBar
- 安卓BottomNavigationBar酷炫导航栏
- Android 底部导航栏 BottomNavigationBar的简单使用
- 导航栏 BottomNavigationBar 详解
- android BottomNavigationBar——底部导航栏
- BottomNavigationBar实现Android特色底部导航栏
- BottomNavigationBar实现Android特色底部导航栏
- Android底部导航栏组件:BottomNavigationBar
- BottomNavigationBar实现Android特色底部导航栏
- BottomNavigationBar实现Android特色底部导航栏
- 底部导航栏 BottomNavigationBar的使用
- Android底部导航栏实现之BottomNavigationBar
- 底部导航栏:BottomNavigationBar的使用
- Android之底部导航栏BottomNavigationBar
- OpenSSL 与 SSL 数字证书概念贴
- nohup使程序在Linux下后台运行 (关掉终端继续让程序运行的方法)
- ORACLE查询
- 初遇乔伊
- 中小创势如破竹未来投资机会在哪
- 安卓 BottomNavigationBar 底部导航栏 最简单用法详解
- 用contains判断包含中文字符
- 关于函数实现数值交换
- Day7-24.Auto increment and decrement
- 在js中怎样获得checkbox里选中的多个值
- discuzX3.2部分DIY模块无法实现伪静态的解决方法
- 怎样才能保证服务器数据的安全?
- 使用数组简单实现的阻塞队列
- 借助WindowBuilder插件轻松完成JAVA图形用户界面编辑