您的位置: 首页  >  文章  >  android-整体UI设计-（滑动导航栏+滚动页面）

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

分类: 文章 • 2024-12-03 19:10:16

转自http://blog.****.net/swadair/article/details/7551609

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

android-整体UI设计-（滑动导航栏+滚动页面）页面Aandroid-整体UI设计-（滑动导航栏+滚动页面）页面A滑向页面B中android-整体UI设计-（滑动导航栏+滚动页面）页面Bandroid-整体UI设计-（滑动导航栏+滚动页面）做了个简单的动态效果图

实现源码如下：

[java] view plaincopy
  1. packagecn.w.song.ui;
  3. importjava.util.HashMap;
  4. importjava.util.LinkedList;
  5. importjava.util.List;
  6. importjava.util.Map;
  8. importandroid.app.Activity;
  9. importandroid.os.Bundle;
  10. importandroid.view.LayoutInflater;
  11. importandroid.view.MotionEvent;
  12. importandroid.view.View;
  13. importandroid.view.ViewGroup;
  14. importandroid.widget.ImageView;
  15. importandroid.widget.TextView;
  16. importcn.w.song.widget.navigation.RollNavigationBar;
  17. importcn.w.song.widget.navigation.adapter.RollNavigationBarAdapter;
  18. importcn.w.song.widget.scroll.SlidePageView;
  19. importcn.w.song.widget.scroll.SlidePageView.OnPageViewChangedListener;
  21. /**
  22. *注意确保将w.song.android.widget-1.0.4.jar导入项目
  23. *w.song.android.widget-1.0.4.jar下载地址http://download.****.net/detail/swadair/4289692
  24. *QQ2636852590
  25. *@authorw.song
  26. *@version1.0.1
  27. *@date2012-5-9
  28. */
  29. publicclassUIADemoActivityextendsActivity{
  30. privateStringtag="UIADemoActivity";
  31. privateString[]title={"关注","热门","分类","喜欢"};
  32. privateint[]photo={R.drawable.nav_menu_home,R.drawable.nav_menu_hot,
  33. R.drawable.nav_menu_category,R.drawable.nav_menu_like};
  34. privateint[]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};
  39. @Override
  40. protectedvoidonCreate(BundlesavedInstanceState){
  41. super.onCreate(savedInstanceState);
  42. setContentView(R.layout.uiademo_ui);
  43. /*获取组件*/
  44. finalRollNavigationBarrnb=(RollNavigationBar)findViewById(R.id.uiademo_ui_RollNavigationBar);
  45. finalSlidePageViewspv=(SlidePageView)findViewById(R.id.uiademo_ui_SlidePageView);
  47. /*定制动态数据*/
  48. List<Map<String,Object>>list=newLinkedList<Map<String,Object>>();
  49. for(inti=0;i<title.length;i++){
  50. Map<String,Object>map=newHashMap<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);//可以不设置
  63. /*导航栏扩展*/
  64. finalMyNavigationBarAdapteradapter=newMyNavigationBarAdapter(this,
  65. list);
  66. rnb.setAdapter(adapter);//必须
  67. rnb.setNavigationBarListener(newRollNavigationBar.NavigationBarListener(){
  68. /**
  69. *position被选位置view为导航栏event移动事件
  70. */
  71. @Override
  72. publicvoidonNavigationBarClick(intposition,Viewview,
  73. MotionEventevent){
  74. switch(event.getAction()){
  75. caseMotionEvent.ACTION_DOWN://按下去时
  76. spv.setCurrPagePosition(position);
  77. spv.CurrPageScrollToScreenCenter();
  78. break;
  79. caseMotionEvent.ACTION_MOVE://移动中
  81. break;
  82. caseMotionEvent.ACTION_UP://抬手时
  84. break;
  85. }
  87. }
  89. });
  91. /*滚动页面（正文）监听*/
  92. spv.setOnPageViewChangedListener(newOnPageViewChangedListener(){
  94. @Override
  95. publicvoidOnPageViewChanged(intcurrPagePosition,
  96. ViewcurrPageView){
  97. rnb.setSelectedChildPosition(currPagePosition);
  98. rnb.refreshView(adapter);
  99. }
  100. });
  101. }
  103. /**
  104. *导航栏扩展
  105. *
  106. *@authorw.song
  107. *@version1.0.1
  108. *@date2012-4-22
  109. */
  110. classMyNavigationBarAdapterextendsRollNavigationBarAdapter{
  111. privateList<Map<String,Object>>list;
  112. privateLayoutInflatermInflater;
  114. publicMyNavigationBarAdapter(Activityactivity,
  115. List<Map<String,Object>>list){
  116. mInflater=LayoutInflater.from(activity);
  117. this.list=list;
  118. }
  120. @Override
  121. publicintgetCount(){
  122. returnlist.size();
  123. }
  125. /**
  126. *获取每个组件
  127. *
  128. *@paramposition
  129. *组件的位置
  130. *@paramcontextView
  131. *组件
  132. *@paramparent
  133. *上层组件
  134. */
  135. @Override
  136. publicViewgetView(intposition,ViewcontextView,ViewGroupparent){
  137. mInflater.inflate(R.layout.item,(ViewGroup)contextView);
  138. RollNavigationBarrollNavigationBar=(RollNavigationBar)parent;
  139. /*获取组件*/
  140. ImageViewimageView=(ImageView)contextView
  141. .findViewById(R.id.image_view);
  142. TextViewtitleView=(TextView)contextView
  143. .findViewById(R.id.title_view);
  145. /*获取参数*/
  146. Stringtitle=""+list.get(position).get("title");
  147. intphoto=(Integer)list.get(position).get("photo");
  148. intphotoSelected=(Integer)list.get(position).get(
  149. "photoSelected");
  151. /*组件设置参数*/
  152. //区分选择与被选择图片
  153. if(position==rollNavigationBar.getSelectedChildPosition()){//被选择
  154. imageView.setBackgroundResource(photoSelected);
  155. }else{//没被选择
  156. imageView.setBackgroundResource(photo);
  157. }
  158. titleView.setText(title);
  160. returncontextView;
  161. }
  163. }
  164. }


demo项目源码下载地址http://download.****.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.****.net/detail/swadair/4289692




相关推荐