Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

bottombar

　　bottombar是github上的一个开源框架，因为从1.3.3开始不支持fragments了，要自己配置，弄了很久，不管是app的fragment还是v4 的程序总是总是闪退。于是就用这种方式实现了，效果还不错。github有详细说明，多余的就不说了。

　　这个roughike是这个项目的所有者（大神致敬）。

　　我用的是android studio开发，fragment全部导的v4的包（以为最开始就支持的是v4的，后面也支持了app.fragment）.

首先是dependencies

compile 'com.jakewharton:butterknife:7.0.0'
compile 'com.roughike:bottom-bar:1.3.3'

添加第二个就行了，我这用到了butterknife（不知道的可以百度，出自jakewharton大神的一款view注入框架）。

从menu添加items

res/menu/bottombar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/bb_menu_recents"
android:icon="@drawable/ic_recents"
android:title="recents" />
<item
android:id="@+id/bb_menu_favorites"
android:icon="@drawable/ic_favorites"
android:title="favorites" />
<item
android:id="@+id/bb_menu_nearby"
android:icon="@drawable/ic_nearby"
android:title="nearby" />
<item
android:id="@+id/bb_menu_friends"
android:icon="@drawable/ic_friends"
android:title="friends" />
<item
android:id="@+id/bb_menu_food"
android:icon="@drawable/ic_restaurants"
android:title="food" />
</menu>

在activity中初始化bottombar和viewpager

public class mainactivity extends fragmentactivity {
@bind(r.id.viewpager)
viewpager viewpager;
@bind(r.id.mycoordinator)
coordinatorlayout mycoordinator;
private bottombar mbottombar;
private list<fragment> fragmentlist;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
butterknife.bind(this);
initviewpager();
createbottombar(savedinstancestate);
}
private void createbottombar(bundle savedinstancestate) {
mbottombar = bottombar.attachshy(mycoordinator,viewpager, savedinstancestate);
mbottombar.setitemsfrommenu(r.menu.bottombar_menu, new onmenutabclicklistener() {
@override
public void onmenutabselected(@idres int menuitemid) {
switch (menuitemid) {
case r.id.bb_menu_recents:
viewpager.setcurrentitem(0);
break;
case r.id.bb_menu_favorites:
viewpager.setcurrentitem(1);
break;
case r.id.bb_menu_nearby:
break;
case r.id.bb_menu_friends:
break;
case r.id.bb_menu_food:
break;
}
}
@override
public void onmenutabreselected(@idres int menuitemid) {
}
});
// setting colors for different tabs when there's more than three of them.
// you can set colors for tabs in three different ways as shown below.
mbottombar.mapcolorfortab(0, contextcompat.getcolor(this, r.color.coloraccent));
mbottombar.mapcolorfortab(1, 0xff5d4037);
mbottombar.mapcolorfortab(2, "#7b1fa2");
mbottombar.mapcolorfortab(3, "#ff5252");
mbottombar.mapcolorfortab(4, "#ff9800");
}
@override
public void onsaveinstancestate(bundle outstate) {
super.onsaveinstancestate(outstate);
// necessary to restore the bottombar's state, otherwise we would
// lose the current tab on orientation change.
mbottombar.onsaveinstancestate(outstate);
}
private void initviewpager() {
fragmentlist = new arraylist<>();
fragmentlist.add(new fragmentone());
fragmentlist.add(new fragmenttwo());
viewpager.setadapter(new fragmentstatepageradapter(getsupportfragmentmanager()) {
@override
public fragment getitem(int position) {
return fragmentlist.get(position);
}
@override
public int getcount() {
return fragmentlist.size();
}
});
viewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
@override
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
}
@override
public void onpageselected(int position) {
mbottombar.selecttabatposition(position, true);
}
@override
public void onpagescrollstatechanged(int state) {
}
});
}
}

　　bottombar的github上提供了两种初始化方式，这里是第二种实现下滑隐藏，因为是fragment滚动所以fragment的布局要被nestedscrollview包裹（下面贴代码，很简单的），同时注意viewpager.setonpagechangelistener已经过时了。

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.coordinatorlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mycoordinator"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitssystemwindows="true"
tools:context="com.example.bottombar.bottombar.mainactivity">
<android.support.v4.view.viewpager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.coordinatorlayout>

fragmentone.java

public class fragmentone extends fragment {
view v;
context context;
@nullable
@override
public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
v = inflater.inflate(r.layout.fragment_one, container,false);
context = getactivity();
return v;
}
}

layout/fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.nestedscrollview
android:id="@+id/myscrollview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<relativelayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<textview
android:layout_centerinparent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/baiduinfo"/>
</relativelayout>
</android.support.v4.widget.nestedscrollview>

以上所述是小编给大家介绍的android 开发之bottombar+viewpager+fragment实现炫酷的底部导航效果的相关知识，希望对大家有所帮助