android-整体UI设计-（滑动导航栏+滚动页面）

看到CSDN有这样一篇关于横滑屏的界面，是通过打包以后的组件实现的。下面是正文

=================================================================================================================

要转的朋友请保留博客地址http://blog.csdn.net/swadair/article/details/7551609

很多朋友对RollNavigationBar+SlidePageView如何设计业务界面感到疑惑，今天我专门写了Demo共大家参考。效果图如下：

页面A页面A滑向页面B中页面B做了个简单的动态效果图

实现源码如下：

[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. import cn.w.song.widget.scroll.SlidePageView;  
19. import cn.w.song.widget.scroll.SlidePageView.OnPageViewChangedListener;  
20.   
21. /** 
22.  * 注意确保将w.song.android.widget-1.0.4.jar导入项目 
23.  * w.song.android.widget-1.0.4.jar下载地址 http://download.csdn.net/detail/swadair/4289692 
24.  * QQ 2636852590 
25.  * @author w.song 
26.  * @version 1.0.1 
27.  * @date 2012-5-9 
28.  */  
29. public class UIADemoActivity extends Activity {  
30.     private String tag = "UIADemoActivity";  
31.     private String[] title = { "关注", "热门", "分类", "喜欢" };  
32.     private int[] photo = { R.drawable.nav_menu_home, R.drawable.nav_menu_hot,  
33.             R.drawable.nav_menu_category, R.drawable.nav_menu_like};  
34.     private int[] photoSelected = { R.drawable.nav_menu_home_selected,  
35.             R.drawable.nav_menu_hot_selected,  
36.             R.drawable.nav_menu_category_active,  
37.             R.drawable.nav_menu_like_active};  
38.   
39.     @Override  
40.     protected void onCreate(Bundle savedInstanceState) {  
41.         super.onCreate(savedInstanceState);  
42.         setContentView(R.layout.uiademo_ui);  
43.         /* 获取组件 */  
44.         final RollNavigationBar rnb = (RollNavigationBar) findViewById(R.id.uiademo_ui_RollNavigationBar);  
45.         final SlidePageView spv = (SlidePageView) findViewById(R.id.uiademo_ui_SlidePageView);  
46.   
47.         /* 定制动态数据 */  
48.         List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();  
49.         for (int i = 0; i < title.length; i++) {  
50.             Map<String, Object> map = new HashMap<String, Object>();  
51.             map.put("title", title[i]);  
52.             map.put("photo", photo[i]);  
53.             map.put("photoSelected", photoSelected[i]);  
54.             list.add(map);  
55.         }  
56.         /* 设置滑动条的滑动时间，时间范围在0.1~1s，不在范围则默认0.1s */  
57.         rnb.setSelecterMoveContinueTime(0.1f);// 可以不设置，默认0.1s  
58.         /* 设置滑动条样式（图片） */  
59.         rnb.setSelecterDrawableSource(R.drawable.nav_menu_bg);// 必须  
60.         /* 设置导航栏的被选位置 */  
61.         rnb.setSelectedChildPosition(0);// 可以不设置  
62.   
63.         /* 导航栏扩展 */  
64.         final MyNavigationBarAdapter adapter = new MyNavigationBarAdapter(this,  
65.                 list);  
66.         rnb.setAdapter(adapter);// 必须  
67.         rnb.setNavigationBarListener(new RollNavigationBar.NavigationBarListener() {  
68.             /** 
69.              * position 被选位置 view 为导航栏 event 移动事件 
70.              */  
71.             @Override  
72.             public void onNavigationBarClick(int position, View view,  
73.                     MotionEvent event) {  
74.                 switch (event.getAction()) {  
75.                 case MotionEvent.ACTION_DOWN:// 按下去时  
76.                     spv.setCurrPagePosition(position);  
77.                     spv.CurrPageScrollToScreenCenter();  
78.                     break;  
79.                 case MotionEvent.ACTION_MOVE:// 移动中  
80.   
81.                     break;  
82.                 case MotionEvent.ACTION_UP:// 抬手时  
83.   
84.                     break;  
85.                 }  
86.   
87.             }  
88.   
89.         });  
90.           
91.         /* 滚动页面（正文）监听 */  
92.         spv.setOnPageViewChangedListener(new OnPageViewChangedListener() {  
93.   
94.             @Override  
95.             public void OnPageViewChanged(int currPagePosition,  
96.                     View currPageView) {  
97.                 rnb.setSelectedChildPosition(currPagePosition);  
98.                 rnb.refreshView(adapter);  
99.             }  
100.         });  
101.     }  
102.   
103.     /** 
104.      * 导航栏扩展 
105.      *  
106.      * @author w.song 
107.      * @version 1.0.1 
108.      * @date 2012-4-22 
109.      */  
110.     class MyNavigationBarAdapter extends RollNavigationBarAdapter {  
111.         private List<Map<String, Object>> list;  
112.         private LayoutInflater mInflater;  
113.   
114.         public MyNavigationBarAdapter(Activity activity,  
115.                 List<Map<String, Object>> list) {  
116.             mInflater = LayoutInflater.from(activity);  
117.             this.list = list;  
118.         }  
119.   
120.         @Override  
121.         public int getCount() {  
122.             return list.size();  
123.         }  
124.   
125.         /** 
126.          * 获取每个组件 
127.          *  
128.          * @param position 
129.          *            组件的位置 
130.          * @param contextView 
131.          *            组件 
132.          * @param parent 
133.          *            上层组件 
134.          */  
135.         @Override  
136.         public View getView(int position, View contextView, ViewGroup parent) {  
137.             mInflater.inflate(R.layout.item, (ViewGroup) contextView);  
138.             RollNavigationBar rollNavigationBar = (RollNavigationBar) parent;  
139.             /* 获取组件 */  
140.             ImageView imageView = (ImageView) contextView  
141.                     .findViewById(R.id.image_view);  
142.             TextView titleView = (TextView) contextView  
143.                     .findViewById(R.id.title_view);  
144.   
145.             /* 获取参数 */  
146.             String title = "" + list.get(position).get("title");  
147.             int photo = (Integer) list.get(position).get("photo");  
148.             int photoSelected = (Integer) list.get(position).get(  
149.                     "photoSelected");  
150.   
151.             /* 组件设置参数 */  
152.             // 区分选择与被选择图片  
153.             if (position == rollNavigationBar.getSelectedChildPosition()) {// 被选择  
154.                 imageView.setBackgroundResource(photoSelected);  
155.             } else {// 没被选择  
156.                 imageView.setBackgroundResource(photo);  
157.             }  
158.             titleView.setText(title);  
159.   
160.             return contextView;  
161.         }  
162.   
163.     }  
164. }  

demo项目源码下载地址http://download.csdn.net/detail/swadair/4289766

注意demo项目务必导入w.song.android.widget-1.0.4.jar包。

w.song.android.widget.jar有了1.0.4版本，该版本没有新增组件，但对现有组件做了良好的优化。

w.song.android.widget-1.0.4.jar下载地址 http://download.csdn.net/detail/swadair/4289692