本文轉自：http://blog.csdn.net/swadair/article/details/7487520
請大家多支援原創作者！
這兩天看到“美麗說”首頁的底部導航欄有一個可以滑動的小紅塊，覺得很有趣味。于是做了一個具有類似效果的元件rollnavigationbar。
這個元件可以直接用于大家的生産應用，美化成大家想要的樣式。比如以前android版qq的導航欄的滑動效果。
這裡我舉出rollnavigationbar的一個應用demo，美化成“美麗說”底部導航欄。
美麗說效果圖
rollnavigationbar元件通過美化實作的美麗說效果圖
以下是rollnavigationbar實作美麗說導航欄的源代碼。
[java]
view plaincopyprint?
package cn.w.song.ui;
import java.util.hashmap;
import java.util.linkedlist;
import java.util.list;
import java.util.map;
import android.app.activity;
import android.os.bundle;
import android.view.layoutinflater;
import android.view.motionevent;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.textview;
import cn.w.song.widget.navigation.rollnavigationbar;
import cn.w.song.widget.navigation.adapter.rollnavigationbaradapter;
/**
* 這是rollnavigationbar元件的一個小應用demo， 模仿"美麗說"的底部滑動效果的導航欄
* 注意将w.song.android.widget-1.0.2.jar包導入本項目。
* 可以到http://download.csdn.net/detail/swadair/4253236下載下傳
* @author w.song
* @version 1.0.1
* @date 2012-4-22
*/
public class meilishuonavigationbardemoactivityextends activity {
private string tag = "meilishuodnavigationbardemoactivity";
private string[] title = {
"關注", "熱門", "分類",
"喜歡", "我" };
private int[] photo = { r.drawable.nav_menu_home, r.drawable.nav_menu_hot,
r.drawable.nav_menu_category, r.drawable.nav_menu_like,
r.drawable.nav_menu_me };
private int[] photoselected = { r.drawable.nav_menu_home_selected,
r.drawable.nav_menu_hot_selected,
r.drawable.nav_menu_category_active,
r.drawable.nav_menu_like_active, r.drawable.nav_menu_me_selected };
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.meilishuonavigationbardemo_ui);
rollnavigationbar rnb = (rollnavigationbar) findviewbyid(r.id.navigationbartest_ui_rollnavigationbar);
/* 定制動态資料 */
list<map<string, object>> list = new linkedlist<map<string, object>>();
for (int i =
0; i < title.length; i++) {
map<string, object> map = new hashmap<string, object>();
map.put("title", title[i]);
map.put("photo", photo[i]);
map.put("photoselected", photoselected[i]);
list.add(map);
}
/* 設定滑動條的滑動時間，時間範圍在0.1~1s，不在範圍則預設0.1s */
rnb.setselectermovecontinuetime(0.1f);// 可以不設定，預設0.1s
/* 設定滑動條樣式（圖檔） */
rnb.setselecterdrawablesource(r.drawable.nav_menu_bg);// 必須
/* 設定導航欄的被選位置 */
rnb.setselectedchildposition(0);// 可以不設定
/* 導航欄擴充 */
final mynavigationbaradapter adapter =new mynavigationbaradapter(this, list);
rnb.setadapter(adapter);// 必須
rnb.setnavigationbarlistener(new rollnavigationbar.navigationbarlistener() {
* position 被選位置
* view 為導航欄
* event 移動事件
public void onnavigationbarclick(int position, view view,
motionevent event) {
switch (event.getaction()) {
case motionevent.action_down:// 按下去時
break;
case motionevent.action_move://移動中
case motionevent.action_up:// 擡手時
});
* 導航欄擴充
*
class mynavigationbaradapter
extends rollnavigationbaradapter {
private list<map<string, object>> list;
private layoutinflater minflater;
public mynavigationbaradapter(activity activity,
list<map<string, object>> list) {
minflater = layoutinflater.from(activity);
this.list = list;
public int getcount() {
return list.size();
* 擷取每個元件
* @param position
* 元件的位置
* @param contextview
* 元件
* @param parent
* 上層元件
public view getview(int position, view contextview, viewgroup parent) {
minflater.inflate(r.layout.item, (viewgroup) contextview);
rollnavigationbar rollnavigationbar = (rollnavigationbar) parent;
/* 擷取元件 */
imageview imageview = (imageview) contextview
.findviewbyid(r.id.image_view);
textview titleview = (textview) contextview
.findviewbyid(r.id.title_view);
/* 擷取參數 */
string title = "" + list.get(position).get("title");
int photo = (integer) list.get(position).get("photo");
int photoselected = (integer) list.get(position).get(
"photoselected");
/* 元件設定參數 */
// 區分選擇與被選擇圖檔
if (position == rollnavigationbar.getselectedchildposition()) {//被選擇
imageview.setbackgroundresource(photoselected);
} else {//沒被選擇
imageview.setbackgroundresource(photo);
titleview.settext(title);
return contextview;
public class meilishuonavigationbardemoactivity extends activity {
private string[] title = { "關注", "熱門", "分類", "喜歡", "我" };
for (int i = 0; i < title.length; i++) {
final mynavigationbaradapter adapter = new mynavigationbaradapter(this, list);
class mynavigationbaradapter extends rollnavigationbaradapter {
* 元件的位置
* 元件
* 上層元件
xml配置檔案直接下載下傳demo項目，就不粘貼出來了。
下載下傳 w.song.android.widget-1.0.2.jar
不想複制代碼可以直接下載下傳demo這個項目 usewidgetdemo
在rollnavigationbar的使用過程有任何疑問，可以評論留言，我會盡可能的回複大家的。
w.song.android.widget-1.0.1.jar的下載下傳分數設的有些高，不建議大家下載下傳了。
直接把w.song.android.widget-1.0.2.jar版導入項目即可。