底部导航栏有各种实现方法,下面看看最新的官方定制的标准 BottomNavigationBar 的使用方法:
一、前奏
1、BottomNavigation Github网址(适合能翻墙的同学):
https://github.com/Ashok-Varma/BottomNavigation
2、android 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格式的最好
下面三个按钮是随便做的,测试用用可以
整个项目 目录如下图所示:
如有错误,欢迎指正,谢谢~