如果本文幫助到你糠亩,本人不勝榮幸虐骑,如果浪費(fèi)了你的時(shí)間,本人深感抱歉赎线。
希望用最簡(jiǎn)單的大白話來幫助那些像我一樣的人廷没。如果有什么錯(cuò)誤,請(qǐng)一定指出垂寥,以免誤導(dǎo)大家颠黎、也誤導(dǎo)我另锋。
本文來自:http://www.reibang.com/users/320f9e8f7fc9/latest_articles
感謝您的關(guān)注。
**此項(xiàng)目已更新2.0狭归,
新的文章地址為:
**【BottomBar】Android炫酷的底部切換效果V2.0
不過1.0的也可以用夭坪,
1.0 的項(xiàng)目地址:https://github.com/roughike/BottomBar/tree/v1
本文是1.0的介紹!9怠室梅!
顯示效果圖:
特別炫酷,有木有疚宇?
代碼寫起來非常非常簡(jiǎn)單亡鼠,超級(jí)簡(jiǎn)單哦。
跟著代碼來實(shí)現(xiàn)第二張圖的效果灰嫉。也就是上面地址中的代碼拆宛。
先導(dǎo)包,在Gradle 加上這個(gè):
compile 'com.roughike:bottom-bar:1.3.9'
Maven:
<dependency>
<groupId>com.roughike</groupId>
<artifactId>bottom-bar</artifactId>
<version>1.3.9</version>
<type>pom</type>
</dependency>
注意:
- 最低支持版本是 api 11
- 圖標(biāo)必須是完全不透明的讼撒,純色浑厚,24dp和無填充。
<br />
我們來實(shí)現(xiàn)第二張圖
還是先上步驟:
- 創(chuàng)建一個(gè)res/menu/bottombar_menu.xml:(也可以用代碼來創(chuàng)建)
- 在Activity中設(shè)置menu根盒,設(shè)置點(diǎn)擊切換的顏色钳幅。
1. 創(chuàng)建一個(gè)res/menu/bottombar_menu.xml:
<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>
2. 把下面代碼復(fù)制進(jìn)MainActivity
public class MainActivity extends AppCompatActivity {
private BottomBar mBottomBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
mBottomBar = BottomBar.attach(this, savedInstanceState);
mBottomBar.setItems(R.menu.bottombar_menu);
mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() {
@Override
public void onMenuTabSelected(@IdRes int menuItemId) {
//單擊事件 menuItemId 是 R.menu.bottombar_menu 中 item 的 id
}
@Override
public void onMenuTabReSelected(@IdRes int menuItemId) {
//重選事件,當(dāng)前已經(jīng)選擇了這個(gè)炎滞,又點(diǎn)了這個(gè)tab敢艰。微博點(diǎn)擊首頁刷新頁面
}
});
// 當(dāng)點(diǎn)擊不同按鈕的時(shí)候,設(shè)置不同的顏色
// 可以用以下三種方式來設(shè)置顏色.
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
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
//保存BottomBar的狀態(tài)
mBottomBar.onSaveInstanceState(outState);
}
}
對(duì)沒有看錯(cuò)册赛,setContentView 屏掉了钠导,也可以顯示出來的。
然后直接去運(yùn)行一下森瘪,就可以看到上面第二張圖的效果了牡属。
真的是不要太簡(jiǎn)單,好嗎扼睬?
而且逮栅,他還有一些更強(qiáng)大的功能。
<br />
為Tab添加標(biāo)簽
像這樣:
// 為tab設(shè)置一個(gè)標(biāo)簽窗宇,“信息”提示的數(shù)字
// 參數(shù)分別是:第幾個(gè)tab措伐;小圓圈的顏色;顯示的數(shù)字
BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(0, "#FF0000", 13);
// 設(shè)置顯示或隱藏
unreadMessages.show();
unreadMessages.hide();
// 設(shè)置顯示的數(shù)字
unreadMessages.setCount(4);
// 設(shè)置顯示/消失動(dòng)畫的延遲時(shí)間
unreadMessages.setAnimationDuration(200);
// 如果不點(diǎn)它军俊,它一直顯示
unreadMessages.setAutoShowAfterUnSelection(true);
<br />
定制Tab的一些屬性
// 最開始的第三張圖侥加,是平板所顯示的,是不是挺丑的粪躬?
// 添加這個(gè)之后担败,在手機(jī)端 跟平板顯示的是一樣的矗蕊。
// 千萬注意:這個(gè)方法要用在 setItemsFromMenu 之前,也就是tab還沒有設(shè)置之前要先調(diào)用氢架,不然會(huì)報(bào)錯(cuò)。
mBottomBar.noTabletGoodness();
// 始終顯示標(biāo)題文字朋魔,在 setItems() 之前調(diào)用
mBottomBar.useFixedMode();
// 使用暗色背景岖研,之前設(shè)置的顏色全部失效
mBottomBar.useDarkTheme();
// 為tab設(shè)置顏色;(當(dāng)tabs超過三個(gè)時(shí)警检,忽略)
mBottomBar.setActiveTabColor("#009688");
// 為title文字設(shè)置樣式
mBottomBar.setTextAppearance(R.style.MyTextAppearance);
// 使用自定義的字體孙援,/src/main/assets
// 如果設(shè)置樣式,先設(shè)置樣式
mBottomBar.setTypeFace("MyFont.ttf");
<br />
設(shè)置 滾動(dòng)消失
開始的第一張圖扇雕,底部滾動(dòng)消失是不是很方便呢拓售?
來看看是怎么實(shí)現(xiàn)得到。
在 activity_main.xml 中加入這個(gè)
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:id="@+id/myScrollingContent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 滾動(dòng)的內(nèi)容在這 -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
MainActivity.java:
// 用attachShy()代替attach()镶奉,其余都一樣
mBottomBar = BottomBar.attachShy((CoordinatorLayout)findViewById(R.id.myCoordinator),findViewById(R.id.myScrollingContent),savedInstanceState);
是不是挺簡(jiǎn)單的础淤?
<br />
代碼中添加menu
在剛開始是創(chuàng)建了一個(gè) res/menu/bottombar_menu.xml ,當(dāng)時(shí)說了也可以在代碼中創(chuàng)建哨苛,也就是這樣鸽凶。
mBottomBar.setItems(
new BottomBarTab(R.drawable.ic_recents, "Recents"),
new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
new BottomBarTab(R.drawable.ic_nearby, "Nearby")
);
mBottomBar.setOnTabClickListener(new OnTabClickListener() {
@Override
public void onTabSelected(int position) {
// 單擊, position 是點(diǎn)擊的位置
}
@Override
public void onTabReSelected(int position) {
// 重選
}
});
千萬注意建峭,這兩種添加方式的監(jiān)聽事件是不太一樣的玻侥。
- 用xml添加時(shí),mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener())亿蒸;
回調(diào)參數(shù)的 menuItemId 是 xml 中的 id - 在代碼中創(chuàng)建對(duì)象添加時(shí)凑兰,mBottomBar.setOnTabClickListener(new OnTabClickListener());
回調(diào)參數(shù) position 是用戶當(dāng)前所點(diǎn)擊的icon在列表中的位置
<br />
因?yàn)榇a边锁,都特別簡(jiǎn)單姑食,我就不再傳自己的項(xiàng)目了。
基本都是這個(gè)項(xiàng)目的內(nèi)容:https://github.com/roughike/BottomBar
我只是翻譯了一遍砚蓬。
這么炫酷的效果矢门,這么簡(jiǎn)單的實(shí)現(xiàn),是不是有種立馬想試一試的沖動(dòng)呢灰蛙?