底部tabbar小滑块的滑动效果，就像QQ中的水滴效果

本文转自：http://blog.csdn.net/swadair/article/details/7487520  请大家多支持原创作者！

这两天看到“美丽说”首页的底部导航栏有一个可以滑动的小红块，觉得很有趣味。于是做了一个具有类似效果的组件RollNavigationBar。

这个组件可以直接用于大家的生产应用，美化成大家想要的样式。比如以前android版QQ的导航栏的滑动效果。

这里我举出RollNavigationBar的一个应用demo，美化成“美丽说”底部导航栏。

美丽说效果图RollNavigationBar组件通过美化实现的美丽说效果图

以下是RollNavigationBar实现美丽说导航栏的源代码。

[java]  view plain copy

1. package cn.w.song.ui;
3. import java.util.HashMap;
4. import java.util.LinkedList;
5. import java.util.List;
6. import java.util.Map;
8. import android.app.Activity;
9. import android.os.Bundle;
10. import android.view.LayoutInflater;
11. import android.view.MotionEvent;
12. import android.view.View;
13. import android.view.ViewGroup;
14. import android.widget.ImageView;
15. import android.widget.TextView;
16. import cn.w.song.widget.navigation.RollNavigationBar;
17. import cn.w.song.widget.navigation.adapter.RollNavigationBarAdapter;
19. /**
20. * 这是RollNavigationBar组件的一个小应用demo， 模仿"美丽说"的底部滑动效果的导航栏
21. * 注意将w.song.android.widget-1.0.2.jar包导入本项目。
22. * 可以到http://download.csdn.net/detail/swadair/4253236下载
23. * @author w.song
24. * @version 1.0.1
25. * @date 2012-4-22
26. */
27. public class MeiLiShuoNavigationBarDemoActivityextends Activity {
28. private String tag = "MeiLiShuoDNavigationBarDemoActivity";
29. private String[] title = { "关注", "热门", "分类", "喜欢", "我" };
30. private int[] photo = { R.drawable.nav_menu_home, R.drawable.nav_menu_hot,
31. R.drawable.nav_menu_category, R.drawable.nav_menu_like,
32. R.drawable.nav_menu_me };
33. private int[] photoSelected = { R.drawable.nav_menu_home_selected,
34. R.drawable.nav_menu_hot_selected,
35. R.drawable.nav_menu_category_active,
36. R.drawable.nav_menu_like_active, R.drawable.nav_menu_me_selected };
39. @Override
40. protected void onCreate(Bundle savedInstanceState) {
41. super.onCreate(savedInstanceState);
42. setContentView(R.layout.meilishuonavigationbardemo_ui);
43. RollNavigationBar rnb = (RollNavigationBar) findViewById(R.id.navigationbartest_ui_RollNavigationBar);
44. /* 定制动态数据 */
45. List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();
46. for (int i = 0; i < title.length; i++) {
47. Map<String, Object> map = new HashMap<String, Object>();
48. map.put("title", title[i]);
49. map.put("photo", photo[i]);
50. map.put("photoSelected", photoSelected[i]);
51. list.add(map);
52. }
53. /* 设置滑动条的滑动时间，时间范围在0.1~1s，不在范围则默认0.1s */
54. rnb.setSelecterMoveContinueTime(0.1f);// 可以不设置，默认0.1s
55. /* 设置滑动条样式（图片） */
56. rnb.setSelecterDrawableSource(R.drawable.nav_menu_bg);// 必须
57. /* 设置导航栏的被选位置 */
58. rnb.setSelectedChildPosition(0);// 可以不设置
60. /* 导航栏扩展 */
61. final MyNavigationBarAdapter adapter =new MyNavigationBarAdapter(this, list);
62. rnb.setAdapter(adapter);// 必须
63. rnb.setNavigationBarListener(new RollNavigationBar.NavigationBarListener() {
64. /**
65. * position 被选位置
66. * view 为导航栏
67. * event 移动事件
68. */
69. @Override
70. public void onNavigationBarClick(int position, View view,
71. MotionEvent event) {
72. switch (event.getAction()) {
73. case MotionEvent.ACTION_DOWN:// 按下去时
74. break;
75. case MotionEvent.ACTION_MOVE://移动中
76. break;
77. case MotionEvent.ACTION_UP:// 抬手时
78. break;
79. }
81. }
83. });
84. }
86. /**
87. * 导航栏扩展
88. *
89. * @author w.song
90. * @version 1.0.1
91. * @date 2012-4-22
92. */
93. class MyNavigationBarAdapter extends RollNavigationBarAdapter {
94. private List<Map<String, Object>> list;
95. private LayoutInflater mInflater;
97. public MyNavigationBarAdapter(Activity activity,
98. List<Map<String, Object>> list) {
99. mInflater = LayoutInflater.from(activity);
100. this.list = list;
101. }
103. @Override
104. public int getCount() {
105. return list.size();
106. }
108. /**
109. * 获取每个组件
110. *
111. * @param position
112. * 组件的位置
113. * @param contextView
114. * 组件
115. * @param parent
116. * 上层组件
117. */
118. @Override
119. public View getView(int position, View contextView, ViewGroup parent) {
120. mInflater.inflate(R.layout.item, (ViewGroup) contextView);
121. RollNavigationBar rollNavigationBar = (RollNavigationBar) parent;
122. /* 获取组件 */
123. ImageView imageView = (ImageView) contextView
124. .findViewById(R.id.image_view);
125. TextView titleView = (TextView) contextView
126. .findViewById(R.id.title_view);
128. /* 获取参数 */
129. String title = "" + list.get(position).get("title");
130. int photo = (Integer) list.get(position).get("photo");
131. int photoSelected = (Integer) list.get(position).get(
132. "photoSelected");
134. /* 组件设置参数 */
135. // 区分选择与被选择图片
136. if (position == rollNavigationBar.getSelectedChildPosition()) {//被选择
137. imageView.setBackgroundResource(photoSelected);
138. } else {//没被选择
139. imageView.setBackgroundResource(photo);
140. }
141. titleView.setText(title);
143. return contextView;
144. }
146. }
147. }

[java]  view plain copy

1. package cn.w.song.ui;  
2.   
3. import java.util.HashMap;  
4. import java.util.LinkedList;  
5. import java.util.List;  
6. import java.util.Map;  
7.   
8. import android.app.Activity;  
9. import android.os.Bundle;  
10. import android.view.LayoutInflater;  
11. import android.view.MotionEvent;  
12. import android.view.View;  
13. import android.view.ViewGroup;  
14. import android.widget.ImageView;  
15. import android.widget.TextView;  
16. import cn.w.song.widget.navigation.RollNavigationBar;  
17. import cn.w.song.widget.navigation.adapter.RollNavigationBarAdapter;  
18.   
19. /** 
20.  * 这是RollNavigationBar组件的一个小应用demo， 模仿"美丽说"的底部滑动效果的导航栏 
21.  * 注意将w.song.android.widget-1.0.2.jar包导入本项目。 
22.  * 可以到http://download.csdn.net/detail/swadair/4253236下载 
23.  * @author w.song 
24.  * @version 1.0.1 
25.  * @date 2012-4-22 
26.  */  
27. public class MeiLiShuoNavigationBarDemoActivity extends Activity {  
28.     private String tag = "MeiLiShuoDNavigationBarDemoActivity";  
29.     private String[] title = { "关注", "热门", "分类", "喜欢", "我" };  
30.     private int[] photo = { R.drawable.nav_menu_home, R.drawable.nav_menu_hot,  
31.             R.drawable.nav_menu_category, R.drawable.nav_menu_like,  
32.             R.drawable.nav_menu_me };  
33.     private int[] photoSelected = { R.drawable.nav_menu_home_selected,  
34.             R.drawable.nav_menu_hot_selected,  
35.             R.drawable.nav_menu_category_active,  
36.             R.drawable.nav_menu_like_active, R.drawable.nav_menu_me_selected };  
37.       
38.   
39.     @Override  
40.     protected void onCreate(Bundle savedInstanceState) {  
41.         super.onCreate(savedInstanceState);  
42.         setContentView(R.layout.meilishuonavigationbardemo_ui);  
43.         RollNavigationBar rnb = (RollNavigationBar) findViewById(R.id.navigationbartest_ui_RollNavigationBar);  
44.         /* 定制动态数据 */  
45.         List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();  
46.         for (int i = 0; i < title.length; i++) {  
47.             Map<String, Object> map = new HashMap<String, Object>();  
48.             map.put("title", title[i]);  
49.             map.put("photo", photo[i]);  
50.             map.put("photoSelected", photoSelected[i]);  
51.             list.add(map);  
52.         }  
53.         /* 设置滑动条的滑动时间，时间范围在0.1~1s，不在范围则默认0.1s */  
54.         rnb.setSelecterMoveContinueTime(0.1f);// 可以不设置，默认0.1s  
55.         /* 设置滑动条样式（图片） */  
56.         rnb.setSelecterDrawableSource(R.drawable.nav_menu_bg);// 必须  
57.         /* 设置导航栏的被选位置 */  
58.         rnb.setSelectedChildPosition(0);// 可以不设置  
59.   
60.         /* 导航栏扩展 */  
61.         final MyNavigationBarAdapter adapter = new MyNavigationBarAdapter(this, list);  
62.         rnb.setAdapter(adapter);// 必须  
63.         rnb.setNavigationBarListener(new RollNavigationBar.NavigationBarListener() {  
64.            /** 
65.             * position 被选位置 
66.             * view 为导航栏 
67.             * event 移动事件 
68.             */  
69.             @Override  
70.             public void onNavigationBarClick(int position, View view,  
71.                     MotionEvent event) {      
72.                 switch (event.getAction()) {  
73.                 case MotionEvent.ACTION_DOWN:// 按下去时  
74.                     break;  
75.                 case MotionEvent.ACTION_MOVE://移动中  
76.                     break;  
77.                 case MotionEvent.ACTION_UP:// 抬手时             
78.                     break;  
79.                 }  
80.                   
81.             }  
82.   
83.         });  
84.     }  
85.   
86.     /** 
87.      * 导航栏扩展 
88.      *  
89.      * @author w.song 
90.      * @version 1.0.1 
91.      * @date 2012-4-22 
92.      */  
93.     class MyNavigationBarAdapter extends RollNavigationBarAdapter {  
94.         private List<Map<String, Object>> list;  
95.         private LayoutInflater mInflater;  
96.   
97.         public MyNavigationBarAdapter(Activity activity,  
98.                 List<Map<String, Object>> list) {  
99.             mInflater = LayoutInflater.from(activity);  
100.             this.list = list;  
101.         }  
102.   
103.         @Override  
104.         public int getCount() {  
105.             return list.size();  
106.         }  
107.   
108.         /** 
109.          * 获取每个组件 
110.          *  
111.          * @param position 
112.          *            组件的位置 
113.          * @param contextView 
114.          *            组件 
115.          * @param parent 
116.          *            上层组件 
117.          */  
118.         @Override  
119.         public View getView(int position, View contextView, ViewGroup parent) {  
120.             mInflater.inflate(R.layout.item, (ViewGroup) contextView);  
121.             RollNavigationBar rollNavigationBar = (RollNavigationBar) parent;  
122.             /* 获取组件 */  
123.             ImageView imageView = (ImageView) contextView  
124.                     .findViewById(R.id.image_view);  
125.             TextView titleView = (TextView) contextView  
126.                     .findViewById(R.id.title_view);  
127.   
128.             /* 获取参数 */  
129.             String title = "" + list.get(position).get("title");  
130.             int photo = (Integer) list.get(position).get("photo");  
131.             int photoSelected = (Integer) list.get(position).get(  
132.                     "photoSelected");  
133.   
134.             /* 组件设置参数 */  
135.             // 区分选择与被选择图片  
136.             if (position == rollNavigationBar.getSelectedChildPosition()) {//被选择  
137.                 imageView.setBackgroundResource(photoSelected);  
138.             } else {//没被选择  
139.                 imageView.setBackgroundResource(photo);  
140.             }  
141.             titleView.setText(title);  
142.   
143.             return contextView;  
144.         }  
145.   
146.     }  
147. }  

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版导入项目即可。

另外附上一些朋友运行demo时发生（强制关闭）

Caused by: android.view.InflateException: Binary XML file line #12: Error inflating class cn.w.song.widget.navigation.RollNavigationBar

错误的解决方案，看下面博客

http://blog.csdn.net/swadair/article/details/7529471