如果大家想要簡單點的，也可以參考：http://blog.csdn.net/jdsjlzx/article/details/51560133

效果圖：

這兩天看到“美麗說”首頁的底部導航欄有一個可以滑動的小紅塊，覺得很有趣味。於是做了一個具有類似效果的元件RollNavigationBar。

這個元件可以直接用於大家的生產應用，美化成大家想要的樣式。比如以前android版QQ的導航欄的滑動效果。

這裡我舉出RollNavigationBar的一個應用demo，美化成“美麗說”底部導航欄。

美麗說效果圖RollNavigationBar元件通過美化實現的美麗說效果圖

以下是RollNavigationBar實現美麗說導航欄的原始碼。

1. package cn.w.song.ui;
2. import java.util.HashMap;
3. import java.util.LinkedList;
4. import java.util.List;
5. import java.util.Map;
6. import android.app.Activity;
7. import android.os.Bundle;
8. import android.view.LayoutInflater;
9. import android.view.MotionEvent;
10. import android.view.View;
11. import
    android.view.ViewGroup;
12. import android.widget.ImageView;
13. import android.widget.TextView;
14. import cn.w.song.widget.navigation.RollNavigationBar;
15. import cn.w.song.widget.navigation.adapter.RollNavigationBarAdapter;
16. /**
17. * 這是RollNavigationBar元件的一個小應用demo， 模仿"美麗說"的底部滑動效果的導航欄
18. * 注意將w.song.android.widget-1.0.2.jar包匯入本專案。
19. * 可以到http://download.csdn.net/detail/swadair/4253236下載
20. * @author w.song
21. * @version 1.0.1
22. * @date 2012-4-22
23. */
24. public class MeiLiShuoNavigationBarDemoActivityextends Activity {
25. private String tag = "MeiLiShuoDNavigationBarDemoActivity";
26. private String[] title = { "關注", "熱門", "分類", "喜歡", "我" };
27. private int[] photo = { R.drawable.nav_menu_home, R.drawable.nav_menu_hot,
28. R.drawable.nav_menu_category, R.drawable.nav_menu_like,
29. R.drawable.nav_menu_me };
30. private int[] photoSelected = { R.drawable.nav_menu_home_selected,
31. R.drawable.nav_menu_hot_selected,
32. R.drawable.nav_menu_category_active,
33. R.drawable.nav_menu_like_active, R.drawable.nav_menu_me_selected };
34. @Override
35. protected void onCreate(Bundle savedInstanceState) {
36. super.onCreate(savedInstanceState);
37. setContentView(R.layout.meilishuonavigationbardemo_ui);
38. RollNavigationBar rnb = (RollNavigationBar) findViewById(R.id.navigationbartest_ui_RollNavigationBar);
39. /* 定製動態資料 */
40. List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();
41. for (int i = 0; i < title.length; i++) {
42. Map<String, Object> map = new HashMap<String, Object>();
43. map.put("title", title[i]);
44. map.put("photo", photo[i]);
45. map.put("photoSelected", photoSelected[i]);
46. list.add(map);
47. }
48. /* 設定滑動條的滑動時間，時間範圍在0.1~1s，不在範圍則預設0.1s */
49. rnb.setSelecterMoveContinueTime(0.1f);// 可以不設定，預設0.1s
50. /* 設定滑動條樣式（圖片） */
51. rnb.setSelecterDrawableSource(R.drawable.nav_menu_bg);// 必須
52. /* 設定導航欄的被選位置 */
53. rnb.setSelectedChildPosition(0);// 可以不設定
54. /* 導航欄擴充套件 */
55. final MyNavigationBarAdapter adapter =new MyNavigationBarAdapter(this, list);
56. rnb.setAdapter(adapter);// 必須
57. rnb.setNavigationBarListener(new RollNavigationBar.NavigationBarListener() {
58. /**
59. * position 被選位置
60. * view 為導航欄
61. * event 移動事件
62. */
63. @Override
64. public void onNavigationBarClick(int position, View view,
65. MotionEvent event) {
66. switch (event.getAction()) {
67. case MotionEvent.ACTION_DOWN:// 按下去時
68. break;
69. case MotionEvent.ACTION_MOVE://移動中
70. break;
71. case MotionEvent.ACTION_UP:// 擡手時
72. break;
73. }
74. }
75. });
76. }
77. /**
78. * 導航欄擴充套件
79. *
80. * @author w.song
81. * @version 1.0.1
82. * @date 2012-4-22
83. */
84. class MyNavigationBarAdapter extends RollNavigationBarAdapter {
85. private List<Map<String, Object>> list;
86. private LayoutInflater mInflater;
87. public MyNavigationBarAdapter(Activity activity,
88. List<Map<String, Object>> list) {
89. mInflater = LayoutInflater.from(activity);
90. this.list = list;
91. }
92. @Override
93. public int getCount() {
94. return list.size();
95. }
96. /**
97. * 獲取每個元件
98. *
99. * @param position
100. * 元件的位置
101. * @param contextView
102. * 元件
103. * @param parent
104. * 上層元件
105. */
106. @Override
107. public View getView(int position, View contextView, ViewGroup parent) {
108. mInflater.inflate(R.layout.item, (ViewGroup) contextView);
109. RollNavigationBar rollNavigationBar = (RollNavigationBar) parent;
110. /* 獲取元件 */
111. ImageView imageView = (ImageView) contextView
112. .findViewById(R.id.image_view);
113. TextView titleView = (TextView) contextView
114. .findViewById(R.id.title_view);
115. /* 獲取引數 */
116. String title = "" + list.get(position).get("title");
117. int photo = (Integer) list.get(position).get("photo");
118. int photoSelected = (Integer) list.get(position).get(
119. "photoSelected");
120. /* 元件設定引數 */
121. // 區分選擇與被選擇圖片
122. if (position == rollNavigationBar.getSelectedChildPosition()) {//被選擇
123. imageView.setBackgroundResource(photoSelected);
124. } else {//沒被選擇
125. imageView.setBackgroundResource(photo);
126. }
127. titleView.setText(title);
128. return contextView;
129. }
130. }
131. }

xml配置檔案直接下載demo專案，就不粘貼出來了。

不想複製程式碼可以直接下載demo這個專案 UseWidgetDemo

在RollNavigationBar的使用過程有任何疑問，可以評論留言，我會盡可能的回覆大家的。

w.song.android.widget-1.0.1.jar的下載分數設的有些高，不建議大家下載了。

直接把w.song.android.widget-1.0.2.jar版匯入專案即可。