`
dowhathowtodo
  • 浏览: 775345 次
文章分类
社区版块
存档分类
最新评论

导航菜单横向左右滑动并和下方的控件实现联动(有效果图)

 
阅读更多

这个是美团网个人订单的效果,找了很多地方都没找到,自己研究了两天终于弄出来了^_^,有什么问题希望大家指出来,谢谢。



实现原理是上方使用HorizontalScrollView这个可以水平横向拖动的控件,在其中加入了5个RadioButton;下方使用的是ViewPager,里面加入了7个Layout文件,其中第一个和最后一个为空,是为了实现拖到第一个屏幕的时候还能往外拖动的效果。


先看下效果,切换都是带动画效果的,并且点击上面最右边的标签时会自动滚动出后面的标签。


现在看一下代码:

Java代码 复制代码收藏代码
  1. packagecom.zj.horizontalsrollview;
  3. importjava.util.ArrayList;
  5. importandroid.app.Activity;
  6. importandroid.os.Bundle;
  7. importandroid.os.Parcelable;
  8. importandroid.support.v4.view.PagerAdapter;
  9. importandroid.support.v4.view.ViewPager;
  10. importandroid.support.v4.view.ViewPager.OnPageChangeListener;
  11. importandroid.util.Log;
  12. importandroid.view.View;
  13. importandroid.view.View.OnClickListener;
  14. importandroid.view.ViewGroup.MarginLayoutParams;
  15. importandroid.view.animation.Animation;
  16. importandroid.view.animation.AnimationSet;
  17. importandroid.view.animation.AnimationUtils;
  18. importandroid.view.animation.TranslateAnimation;
  19. importandroid.widget.HorizontalScrollView;
  20. importandroid.widget.ImageView;
  21. importandroid.widget.RadioButton;
  22. importandroid.widget.RadioGroup;
  23. importandroid.widget.RadioGroup.OnCheckedChangeListener;
  24. importandroid.widget.RelativeLayout;
  25. importandroid.widget.RelativeLayout.LayoutParams;
  26. /**
  27. *HorizontalScrollView和ViewPager联动效果
  28. *上面为HorizontalScrollView,下面为ViewPager
  29. *@authorzj
  30. *2012-5-23下午1:07:06
  31. */
  32. publicclassMainActivityextendsActivityimplementsOnCheckedChangeListener{
  33. privateRadioGroupmRadioGroup;
  34. privateRadioButtonmRadioButton1;
  35. privateRadioButtonmRadioButton2;
  36. privateRadioButtonmRadioButton3;
  37. privateRadioButtonmRadioButton4;
  38. privateRadioButtonmRadioButton5;
  39. privateImageViewmImageView;
  40. privatefloatmCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离
  41. privateHorizontalScrollViewmHorizontalScrollView;//上面的水平滚动控件
  42. privateViewPagermViewPager;//下方的可横向拖动的控件
  43. privateArrayList<View>mViews;//用来存放下方滚动的layout(layout_1,layout_2,layout_3)
  44. @Override
  45. publicvoidonCreate(BundlesavedInstanceState){
  46. super.onCreate(savedInstanceState);
  47. setContentView(R.layout.main);
  49. iniController();
  50. iniListener();
  51. iniVariable();
  53. mRadioButton1.setChecked(true);
  54. mViewPager.setCurrentItem(1);
  55. mCurrentCheckedRadioLeft=getCurrentCheckedRadioLeft();
  57. }
  59. privatevoidiniVariable(){
  60. //TODOAuto-generatedmethodstub
  61. mViews=newArrayList<View>();
  62. mViews.add(getLayoutInflater().inflate(R.layout.layout_0,null));
  63. mViews.add(getLayoutInflater().inflate(R.layout.layout_1,null));
  64. mViews.add(getLayoutInflater().inflate(R.layout.layout_2,null));
  65. mViews.add(getLayoutInflater().inflate(R.layout.layout_3,null));
  66. mViews.add(getLayoutInflater().inflate(R.layout.layout_4,null));
  67. mViews.add(getLayoutInflater().inflate(R.layout.layout_5,null));
  68. mViews.add(getLayoutInflater().inflate(R.layout.layout_0,null));
  70. mViewPager.setAdapter(newMyPagerAdapter());//设置ViewPager的适配器
  71. }
  73. /**
  74. *RadioGroup点击CheckedChanged监听
  75. */
  76. @Override
  77. publicvoidonCheckedChanged(RadioGroupgroup,intcheckedId){
  79. AnimationSet_AnimationSet=newAnimationSet(true);
  80. TranslateAnimation_TranslateAnimation;
  82. Log.i("zj","checkedid="+checkedId);
  83. if(checkedId==R.id.btn1){
  84. _TranslateAnimation=newTranslateAnimation(mCurrentCheckedRadioLeft,getResources().getDimension(R.dimen.rdo1),0f,0f);
  85. _AnimationSet.addAnimation(_TranslateAnimation);
  86. _AnimationSet.setFillBefore(false);
  87. _AnimationSet.setFillAfter(true);
  88. _AnimationSet.setDuration(100);
  89. /*LayoutParams_LayoutParams1=newLayoutParams(100,4);
  90. _LayoutParams1.setMargins(0,0,0,0);
  91. _LayoutParams1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);*/
  92. //mImageView.bringToFront();
  93. mImageView.startAnimation(_AnimationSet);//开始上面蓝色横条图片的动画切换
  94. //mImageView.setLayoutParams(_LayoutParams1);
  95. mViewPager.setCurrentItem(1);//让下方ViewPager跟随上面的HorizontalScrollView切换
  96. }elseif(checkedId==R.id.btn2){
  97. _TranslateAnimation=newTranslateAnimation(mCurrentCheckedRadioLeft,getResources().getDimension(R.dimen.rdo2),0f,0f);
  99. _AnimationSet.addAnimation(_TranslateAnimation);
  100. _AnimationSet.setFillBefore(false);
  101. _AnimationSet.setFillAfter(true);
  102. _AnimationSet.setDuration(100);
  104. //mImageView.bringToFront();
  105. mImageView.startAnimation(_AnimationSet);
  107. mViewPager.setCurrentItem(2);
  108. }elseif(checkedId==R.id.btn3){
  109. _TranslateAnimation=newTranslateAnimation(mCurrentCheckedRadioLeft,getResources().getDimension(R.dimen.rdo3),0f,0f);
  111. _AnimationSet.addAnimation(_TranslateAnimation);
  112. _AnimationSet.setFillBefore(false);
  113. _AnimationSet.setFillAfter(true);
  114. _AnimationSet.setDuration(100);
  116. //mImageView.bringToFront();
  117. mImageView.startAnimation(_AnimationSet);
  119. mViewPager.setCurrentItem(3);
  120. }elseif(checkedId==R.id.btn4){
  121. _TranslateAnimation=newTranslateAnimation(mCurrentCheckedRadioLeft,getResources().getDimension(R.dimen.rdo4),0f,0f);
  123. _AnimationSet.addAnimation(_TranslateAnimation);
  124. _AnimationSet.setFillBefore(false);
  125. _AnimationSet.setFillAfter(true);
  126. _AnimationSet.setDuration(100);
  128. //mImageView.bringToFront();
  129. mImageView.startAnimation(_AnimationSet);
  130. mViewPager.setCurrentItem(4);
  131. }elseif(checkedId==R.id.btn5){
  132. _TranslateAnimation=newTranslateAnimation(mCurrentCheckedRadioLeft,getResources().getDimension(R.dimen.rdo5),0f,0f);
  134. _AnimationSet.addAnimation(_TranslateAnimation);
  135. _AnimationSet.setFillBefore(false);
  136. _AnimationSet.setFillAfter(true);
  137. _AnimationSet.setDuration(100);
  139. //mImageView.bringToFront();
  140. mImageView.startAnimation(_AnimationSet);
  142. mViewPager.setCurrentItem(5);
  143. }
  145. mCurrentCheckedRadioLeft=getCurrentCheckedRadioLeft();
  147. Log.i("zj","getCurrentCheckedRadioLeft="+getCurrentCheckedRadioLeft());
  148. Log.i("zj","getDimension="+getResources().getDimension(R.dimen.rdo2));
  150. mHorizontalScrollView.smoothScrollTo((int)mCurrentCheckedRadioLeft-(int)getResources().getDimension(R.dimen.rdo2),0);
  151. }
  153. /**
  154. *获得当前被选中的RadioButton距离左侧的距离
  155. */
  156. privatefloatgetCurrentCheckedRadioLeft(){
  157. //TODOAuto-generatedmethodstub
  158. if(mRadioButton1.isChecked()){
  159. //Log.i("zj","currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo1));
  160. returngetResources().getDimension(R.dimen.rdo1);
  161. }elseif(mRadioButton2.isChecked()){
  162. //Log.i("zj","currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo2));
  163. returngetResources().getDimension(R.dimen.rdo2);
  164. }elseif(mRadioButton3.isChecked()){
  165. //Log.i("zj","currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo3));
  166. returngetResources().getDimension(R.dimen.rdo3);
  167. }elseif(mRadioButton4.isChecked()){
  168. //Log.i("zj","currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo4));
  169. returngetResources().getDimension(R.dimen.rdo4);
  170. }elseif(mRadioButton5.isChecked()){
  171. //Log.i("zj","currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo5));
  172. returngetResources().getDimension(R.dimen.rdo5);
  173. }
  174. return0f;
  175. }
  177. privatevoidiniListener(){
  178. //TODOAuto-generatedmethodstub
  180. mRadioGroup.setOnCheckedChangeListener(this);
  183. mViewPager.setOnPageChangeListener(newMyPagerOnPageChangeListener());
  184. }
  186. privatevoidiniController(){
  187. //TODOAuto-generatedmethodstub
  188. mRadioGroup=(RadioGroup)findViewById(R.id.radioGroup);
  189. mRadioButton1=(RadioButton)findViewById(R.id.btn1);
  190. mRadioButton2=(RadioButton)findViewById(R.id.btn2);
  191. mRadioButton3=(RadioButton)findViewById(R.id.btn3);
  192. mRadioButton4=(RadioButton)findViewById(R.id.btn4);
  193. mRadioButton5=(RadioButton)findViewById(R.id.btn5);
  195. mImageView=(ImageView)findViewById(R.id.img1);
  197. mHorizontalScrollView=(HorizontalScrollView)findViewById(R.id.horizontalScrollView);
  199. mViewPager=(ViewPager)findViewById(R.id.pager);
  200. }
  202. /**
  203. *ViewPager的适配器
  204. *@authorzj
  205. *2012-5-24下午2:26:57
  206. */
  207. privateclassMyPagerAdapterextendsPagerAdapter{
  209. @Override
  210. publicvoiddestroyItem(Viewv,intposition,Objectobj){
  211. //TODOAuto-generatedmethodstub
  212. ((ViewPager)v).removeView(mViews.get(position));
  213. }
  215. @Override
  216. publicvoidfinishUpdate(Viewarg0){
  217. //TODOAuto-generatedmethodstub
  219. }
  221. @Override
  222. publicintgetCount(){
  223. //TODOAuto-generatedmethodstub
  224. returnmViews.size();
  225. }
  227. @Override
  228. publicObjectinstantiateItem(Viewv,intposition){
  229. ((ViewPager)v).addView(mViews.get(position));
  230. returnmViews.get(position);
  231. }
  233. @Override
  234. publicbooleanisViewFromObject(Viewarg0,Objectarg1){
  235. //TODOAuto-generatedmethodstub
  236. returnarg0==arg1;
  237. }
  239. @Override
  240. publicvoidrestoreState(Parcelablearg0,ClassLoaderarg1){
  241. //TODOAuto-generatedmethodstub
  243. }
  245. @Override
  246. publicParcelablesaveState(){
  247. //TODOAuto-generatedmethodstub
  248. returnnull;
  249. }
  251. @Override
  252. publicvoidstartUpdate(Viewarg0){
  253. //TODOAuto-generatedmethodstub
  255. }
  257. }
  258. /**
  259. *ViewPager的PageChangeListener(页面改变的监听器)
  260. *@authorzj
  261. *2012-5-24下午3:14:27
  262. */
  263. privateclassMyPagerOnPageChangeListenerimplementsOnPageChangeListener{
  265. @Override
  266. publicvoidonPageScrollStateChanged(intarg0){
  267. //TODOAuto-generatedmethodstub
  269. }
  271. @Override
  272. publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
  273. //TODOAuto-generatedmethodstub
  275. }
  276. /**
  277. *滑动ViewPager的时候,让上方的HorizontalScrollView自动切换
  278. */
  279. @Override
  280. publicvoidonPageSelected(intposition){
  281. //TODOAuto-generatedmethodstub
  282. //Log.i("zj","position="+position);
  284. if(position==0){
  285. mViewPager.setCurrentItem(1);
  286. }elseif(position==1){
  287. mRadioButton1.performClick();
  288. }elseif(position==2){
  289. mRadioButton2.performClick();
  290. }elseif(position==3){
  291. mRadioButton3.performClick();
  292. }elseif(position==4){
  293. mRadioButton4.performClick();
  294. }elseif(position==5){
  295. mRadioButton5.performClick();
  296. }elseif(position==6){
  297. mViewPager.setCurrentItem(5);
  298. }
  299. }
  301. }
  303. }

XML文件:

Xml代码 复制代码收藏代码
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. >
  7. <HorizontalScrollView
  8. android:layout_width="match_parent"
  9. android:layout_height="50dp"
  10. android:fadingEdge="@null"
  11. android:scrollbars="none"
  12. android:background="#555555"
  13. android:id="@+id/horizontalScrollView"
  14. >
  15. <RelativeLayout
  16. android:layout_width="match_parent"
  17. android:layout_height="match_parent"
  18. android:background="#33b5e5"
  19. >
  20. <RadioGroup
  21. android:id="@+id/radioGroup"
  22. android:layout_width="fill_parent"
  23. android:layout_height="49dp"
  24. android:orientation="horizontal"
  25. android:layout_alignParentTop="true"
  26. >
  27. <RadioButton
  28. style="@style/radioButton"
  29. android:text="one"
  30. android:id="@+id/btn1"
  31. />
  32. <RadioButton
  33. style="@style/radioButton"
  34. android:text="two"
  35. android:id="@+id/btn2"
  36. />
  37. <RadioButton
  38. style="@style/radioButton"
  39. android:text="three"
  40. android:id="@+id/btn3"
  41. />
  42. <RadioButton
  43. style="@style/radioButton"
  44. android:text="four"
  45. android:id="@+id/btn4"
  46. />
  47. <RadioButton
  48. style="@style/radioButton"
  49. android:text="five"
  50. android:id="@+id/btn5"
  51. />
  52. </RadioGroup>
  53. <ImageView
  54. android:id="@+id/img1"
  55. android:layout_width="100dp"
  56. android:layout_height="4dp"
  57. android:background="#33b5e5"
  58. android:layout_alignParentBottom="true"
  59. />
  60. </RelativeLayout>
  61. </HorizontalScrollView>
  62. <android.support.v4.view.ViewPager
  63. android:id="@+id/pager"
  64. android:layout_width="fill_parent"
  65. android:layout_height="fill_parent"
  66. />
  67. </LinearLayout>
分享到：
| Android 定制RadioButton样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics