本文实现效果参考文献：
http://blog.csdn.net/u010046908/article/details/50962081
http://blog.csdn.net/baidu_28534147/article/details/51713172
http://blog.csdn.net/qq_16131393/article/details/51419901
根据以上参考文献自己实现了安卓BottomNavigationBar的效果。
BottomNavigationBar的下载地址:
贴上网上效果图及自己实现的截图
网上效果图：
all.gif
自己实现的截图：
image.png
image.png
首先新建安卓工程（本人使用的是Android Studio），加入引用：
compile 'com.ashokvarma.android:bottom-navigation-bar:0.9.5'
image.png
整体思路是，先加载布局，然后设置每个Item，最后选中事件，设置监听器
然后在MainActivity的布局中，引用组件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="yanjianqi.top.miaomiao.MainActivity">
<LinearLayout
android:id="@+id/tb"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
<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>
然后打开MainActivity，并新建四个Fragment
image.png
新建完成后，在MainActivity中：
1.添加接口
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener{ }
2.初始化变量
int lastSelectedPosition = 0;//作为最后一次被选中的position
private String TAG = MainActivity.class.getSimpleName();
private MainFragment mMainFragment;//第一个页面
private ListFragment mListFragment;//第二个页面
private DataAnalyseFragment mDataAnalyseFragment;//第三个页面
private SetFragment mSetFragment;//第四个页面
然后添加Fragment中的内容：
只以一个fragment为例子，demo中其他都差不多一样
布局文件：(一眼就知道是什么好吧，做戏做全套，也把它给出来了)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="yanjianqi.top.miaomiao.Fragment.MainFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/tv_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="主页" />
</FrameLayout>
Fragment中的内容：
import android.app.Fragment;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import yanjianqi.top.miaomiao.R;
public class MainFragment extends Fragment {
private static final String ARG_PARAM1 = "agrs1";
private String mParam1;
public MainFragment() {
}
public static MainFragment newInstance(String param1) {
MainFragment fragment = new MainFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
fragment.setArguments(args);
return fragment;
}
@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.fragment_main, container, false);
Bundle bundle = getArguments();
String agrs1 = bundle.getString("agrs1");
TextView tv = (TextView)view.findViewById(R.id.tv_main);
tv.setText(agrs1);
return view;
}
}
首先生成构造函数，在被调用的时候，通过bundle去获取从MainActivity传过来的字符串，然后在OnCreateView方法中赋值给textView而已，其他操作还需要自己改。
以此类推，做出四个不同的fragment
在MainActivity中：（BOSS）
绑定控件，再通过它本身的addItem方法，初始化控件
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottomNavigationBar = (BottomNavigationBar)findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar
.addItem(new BottomNavigationItem(R.mipmap.ic_home_white_24dp,"主页").setActiveColor(R.color.blue))
.addItem(new BottomNavigationItem(R.mipmap.ic_favorite_white_24dp,"账单").setActiveColor(R.color.main))
.addItem(new BottomNavigationItem(R.mipmap.ic_find_replace_white_24dp,"分析").setActiveColor(R.color.brown))
.addItem(new BottomNavigationItem(R.mipmap.ic_tv_white_24dp,"设置").setActiveColor(R.color.grey))
.setFirstSelectedPosition(lastSelectedPosition)
.initialise();
bottomNavigationBar.setTabSelectedListener(this);
setDefaultFragment();
}
可以看到setDefaultFragment()还没给出来，这个方法的作用是设置默认的fragment
private void setDefaultFragment() {
FragmentManager fm = getFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
mMainFragment = MainFragment.newInstance("主页");
transaction.replace(R.id.tb,mMainFragment);
transaction.commit();
}
通过FragmentManager 和 FragmentTransaction来设置
在这里不得不说一下这个transaction.replace()方法！！
transaction.replace(R.id.content, IndexFragment);
两个参数如何使用，具体看看这篇博客
http://blog.csdn.net/baidu_28534147/article/details/51713172
然后到了最后一步，设置监听事件
@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 (mMainFragment == null) {
mMainFragment = mMainFragment.newInstance("主页");
}
transaction.replace(R.id.tb, mMainFragment);
break;
case 1:
if (mListFragment == null) {
mListFragment = mListFragment.newInstance("账单");
}
transaction.replace(R.id.tb, mListFragment);
break;
case 2:
if (mDataAnalyseFragment == null) {
mDataAnalyseFragment = mDataAnalyseFragment.newInstance("分析");
}
transaction.replace(R.id.tb, mDataAnalyseFragment);
break;
case 3:
if (mSetFragment == null) {
mSetFragment = mSetFragment.newInstance("设置");
}
transaction.replace(R.id.tb, mSetFragment);
break;
default:
break;
}
transaction.commit();
}
哎，这就完成了，不信你去试试看，资源之类的，也就四个小图标
ic_favorite_white_24dp.png
ic_find_replace_white_24dp.png
ic_home_white_24dp.png
ic_tv_white_24dp.png
大概就是这样子了
有什么错误的希望大家提出，此文章作为学习记录的一个过程.
谢谢大家~
网友评论