Android导航菜单横向左右滑动并和下方的控件实现联动


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

 

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

 

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

现在看一下代码:

Java代码  

  1. package com.zj.horizontalsrollview;
  2. import java.util.ArrayList;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.os.Parcelable;
  6. import android.support.v4.view.PagerAdapter;
  7. import android.support.v4.view.ViewPager;
  8. import android.support.v4.view.ViewPager.OnPageChangeListener;
  9. import android.util.Log;
  10. import android.view.View;
  11. import android.view.View.OnClickListener;
  12. import android.view.ViewGroup.MarginLayoutParams;
  13. import android.view.animation.Animation;
  14. import android.view.animation.AnimationSet;
  15. import android.view.animation.AnimationUtils;
  16. import android.view.animation.TranslateAnimation;
  17. import android.widget.HorizontalScrollView;
  18. import android.widget.ImageView;
  19. import android.widget.RadioButton;
  20. import android.widget.RadioGroup;
  21. import android.widget.RadioGroup.OnCheckedChangeListener;
  22. import android.widget.RelativeLayout;
  23. import android.widget.RelativeLayout.LayoutParams;
  24. /**
  25. * HorizontalScrollView和ViewPager联动效果
  26. * 上面为HorizontalScrollView,下面为ViewPager
  27. * @author zj
  28. * 2012-5-23 下午1:07:06
  29. */
  30. public class MainActivity extends Activity implements OnCheckedChangeListener{
  31. private RadioGroup mRadioGroup;
  32. private RadioButton mRadioButton1;
  33. private RadioButton mRadioButton2;
  34. private RadioButton mRadioButton3;
  35. private RadioButton mRadioButton4;
  36. private RadioButton mRadioButton5;
  37. private ImageView mImageView;
  38. private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离
  39. private HorizontalScrollView mHorizontalScrollView;//上面的水平滚动控件
  40. private ViewPager mViewPager;   //下方的可横向拖动的控件
  41. private ArrayList<View> mViews;//用来存放下方滚动的layout(layout_1,layout_2,layout_3)
  42. @Override
  43. public void onCreate(Bundle savedInstanceState) {
  44. super.onCreate(savedInstanceState);
  45. setContentView(R.layout.main);
  46. iniController();
  47. iniListener();
  48. iniVariable();
  49. mRadioButton1.setChecked(true);
  50. mViewPager.setCurrentItem(1);
  51. mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();
  52. }
  53. private void iniVariable() {
  54. // TODO Auto-generated method stub
  55. mViews = new ArrayList<View>();
  56. mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));
  57. mViews.add(getLayoutInflater().inflate(R.layout.layout_1, null));
  58. mViews.add(getLayoutInflater().inflate(R.layout.layout_2, null));
  59. mViews.add(getLayoutInflater().inflate(R.layout.layout_3, null));
  60. mViews.add(getLayoutInflater().inflate(R.layout.layout_4, null));
  61. mViews.add(getLayoutInflater().inflate(R.layout.layout_5, null));
  62. mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));
  63. mViewPager.setAdapter(new MyPagerAdapter());//设置ViewPager的适配器
  64. }
  65. /**
  66. * RadioGroup点击CheckedChanged监听
  67. */
  68. @Override
  69. public void onCheckedChanged(RadioGroup group, int checkedId) {
  70. AnimationSet _AnimationSet = new AnimationSet(true);
  71. TranslateAnimation _TranslateAnimation;
  72. Log.i("zj", "checkedid=" checkedId);
  73. if (checkedId == R.id.btn1) {
  74. _TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo1), 0f, 0f);
  75. _AnimationSet.addAnimation(_TranslateAnimation);
  76. _AnimationSet.setFillBefore(false);
  77. _AnimationSet.setFillAfter(true);
  78. _AnimationSet.setDuration(100);
  79. /*LayoutParams _LayoutParams1 = new LayoutParams(100, 4);
  80. _LayoutParams1.setMargins(0, 0, 0, 0);
  81. _LayoutParams1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);*/
  82. //mImageView.bringToFront();
  83. mImageView.startAnimation(_AnimationSet);//开始上面蓝色横条图片的动画切换
  84. //mImageView.setLayoutParams(_LayoutParams1);
  85. mViewPager.setCurrentItem(1);//让下方ViewPager跟随上面的HorizontalScrollView切换
  86. }else if (checkedId == R.id.btn2) {
  87. _TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo2), 0f, 0f);
  88. _AnimationSet.addAnimation(_TranslateAnimation);
  89. _AnimationSet.setFillBefore(false);
  90. _AnimationSet.setFillAfter(true);
  91. _AnimationSet.setDuration(100);
  92. //mImageView.bringToFront();
  93. mImageView.startAnimation(_AnimationSet);
  94. mViewPager.setCurrentItem(2);
  95. }else if (checkedId == R.id.btn3) {
  96. _TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo3), 0f, 0f);
  97. _AnimationSet.addAnimation(_TranslateAnimation);
  98. _AnimationSet.setFillBefore(false);
  99. _AnimationSet.setFillAfter(true);
  100. _AnimationSet.setDuration(100);
  101. //mImageView.bringToFront();
  102. mImageView.startAnimation(_AnimationSet);
  103. mViewPager.setCurrentItem(3);
  104. }else if (checkedId == R.id.btn4) {
  105. _TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo4), 0f, 0f);
  106. _AnimationSet.addAnimation(_TranslateAnimation);
  107. _AnimationSet.setFillBefore(false);
  108. _AnimationSet.setFillAfter(true);
  109. _AnimationSet.setDuration(100);
  110. //mImageView.bringToFront();
  111. mImageView.startAnimation(_AnimationSet);
  112. mViewPager.setCurrentItem(4);
  113. }else if (checkedId == R.id.btn5) {
  114. _TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo5), 0f, 0f);
  115. _AnimationSet.addAnimation(_TranslateAnimation);
  116. _AnimationSet.setFillBefore(false);
  117. _AnimationSet.setFillAfter(true);
  118. _AnimationSet.setDuration(100);
  119. //mImageView.bringToFront();
  120. mImageView.startAnimation(_AnimationSet);
  121. mViewPager.setCurrentItem(5);
  122. }
  123. mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();
  124. Log.i("zj", "getCurrentCheckedRadioLeft=" getCurrentCheckedRadioLeft());
  125. Log.i("zj", "getDimension=" getResources().getDimension(R.dimen.rdo2));
  126. mHorizontalScrollView.smoothScrollTo((int)mCurrentCheckedRadioLeft-(int)getResources().getDimension(R.dimen.rdo2), 0);
  127. }
  128. /**
  129. * 获得当前被选中的RadioButton距离左侧的距离
  130. */
  131. private float getCurrentCheckedRadioLeft() {
  132. // TODO Auto-generated method stub
  133. if (mRadioButton1.isChecked()) {
  134. //Log.i("zj", "currentCheckedRadioLeft=" getResources().getDimension(R.dimen.rdo1));
  135. return getResources().getDimension(R.dimen.rdo1);
  136. }else if (mRadioButton2.isChecked()) {
  137. //Log.i("zj", "currentCheckedRadioLeft=" getResources().getDimension(R.dimen.rdo2));
  138. return getResources().getDimension(R.dimen.rdo2);
  139. }else if (mRadioButton3.isChecked()) {
  140. //Log.i("zj", "currentCheckedRadioLeft=" getResources().getDimension(R.dimen.rdo3));
  141. return getResources().getDimension(R.dimen.rdo3);
  142. }else if (mRadioButton4.isChecked()) {
  143. //Log.i("zj", "currentCheckedRadioLeft=" getResources().getDimension(R.dimen.rdo4));
  144. return getResources().getDimension(R.dimen.rdo4);
  145. }else if (mRadioButton5.isChecked()) {
  146. //Log.i("zj", "currentCheckedRadioLeft=" getResources().getDimension(R.dimen.rdo5));
  147. return getResources().getDimension(R.dimen.rdo5);
  148. }
  149. return 0f;
  150. }
  151. private void iniListener() {
  152. // TODO Auto-generated method stub
  153. mRadioGroup.setOnCheckedChangeListener(this);
  154. mViewPager.setOnPageChangeListener(new MyPagerOnPageChangeListener());
  155. }
  156. private void iniController() {
  157. // TODO Auto-generated method stub
  158. mRadioGroup = (RadioGroup)findViewById(R.id.radioGroup);
  159. mRadioButton1 = (RadioButton)findViewById(R.id.btn1);
  160. mRadioButton2 = (RadioButton)findViewById(R.id.btn2);
  161. mRadioButton3 = (RadioButton)findViewById(R.id.btn3);
  162. mRadioButton4 = (RadioButton)findViewById(R.id.btn4);
  163. mRadioButton5 = (RadioButton)findViewById(R.id.btn5);
  164. mImageView = (ImageView)findViewById(R.id.img1);
  165. mHorizontalScrollView = (HorizontalScrollView)findViewById(R.id.horizontalScrollView);
  166. mViewPager = (ViewPager)findViewById(R.id.pager);
  167. }
  168. /**
  169. * ViewPager的适配器
  170. * @author zj
  171. * 2012-5-24 下午2:26:57
  172. */
  173. private class MyPagerAdapter extends PagerAdapter{
  174. @Override
  175. public void destroyItem(View v, int position, Object obj) {
  176. // TODO Auto-generated method stub
  177. ((ViewPager)v).removeView(mViews.get(position));
  178. }
  179. @Override
  180. public void finishUpdate(View arg0) {
  181. // TODO Auto-generated method stub
  182. }
  183. @Override
  184. public int getCount() {
  185. // TODO Auto-generated method stub
  186. return mViews.size();
  187. }
  188. @Override
  189. public Object instantiateItem(View v, int position) {
  190. ((ViewPager)v).addView(mViews.get(position));
  191. return mViews.get(position);
  192. }
  193. @Override
  194. public boolean isViewFromObject(View arg0, Object arg1) {
  195. // TODO Auto-generated method stub
  196. return arg0 == arg1;
  197. }
  198. @Override
  199. public void restoreState(Parcelable arg0, ClassLoader arg1) {
  200. // TODO Auto-generated method stub
  201. }
  202. @Override
  203. public Parcelable saveState() {
  204. // TODO Auto-generated method stub
  205. return null;
  206. }
  207. @Override
  208. public void startUpdate(View arg0) {
  209. // TODO Auto-generated method stub
  210. }
  211. }
  212. /**
  213. * ViewPager的PageChangeListener(页面改变的监听器)
  214. * @author zj
  215. * 2012-5-24 下午3:14:27
  216. */
  217. private class MyPagerOnPageChangeListener implements OnPageChangeListener{
  218. @Override
  219. public void onPageScrollStateChanged(int arg0) {
  220. // TODO Auto-generated method stub
  221. }
  222. @Override
  223. public void onPageScrolled(int arg0, float arg1, int arg2) {
  224. // TODO Auto-generated method stub
  225. }
  226. /**
  227. * 滑动ViewPager的时候,让上方的HorizontalScrollView自动切换
  228. */
  229. @Override
  230. public void onPageSelected(int position) {
  231. // TODO Auto-generated method stub
  232. //Log.i("zj", "position=" position);
  233. if (position == 0) {
  234. mViewPager.setCurrentItem(1);
  235. }else if (position == 1) {
  236. mRadioButton1.performClick();
  237. }else if (position == 2) {
  238. mRadioButton2.performClick();
  239. }else if (position == 3) {
  240. mRadioButton3.performClick();
  241. }else if (position == 4) {
  242. mRadioButton4.performClick();
  243. }else if (position == 5) {
  244. mRadioButton5.performClick();
  245. }else if (position == 6) {
  246. mViewPager.setCurrentItem(5);
  247. }
  248. }
  249. }
  250. }

XML文件:

Xml代码  

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns: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>
时间： 2024-08-05 02:24:25

Android导航菜单横向左右滑动并和下方的控件实现联动的相关文章

android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)

第三节(2):常用控件之ViewPager.日期时间相关.ListView  一.ViewPager 实例:结合PagerAdapter滑动切换图片  二.日期时间相关:AnalogClock\DigitalClock\DatePicker\TimerPicker\DatePickerDialog\TimePickerDialog 三.ListView 实例1:城市选择器 实例2:自定义列表项 百度网盘视频下载地址:http://pan.baidu.com/s/1c0ip6la android内

android listview和button，ImageButton等有事件的控件的总结

? 1 2 3 4 public ImageButton(Context context, AttributeSet attrs, int defStyle) {     super(context, attrs, defStyle);     setFocusable(true); } 在listview中(或者ExpandableListview),item的view会被进行特殊的处理,通过convertview可以减少解析xml文件,提高效率.但是如果你自己解析一次,然后用变量保存,那么只

Android开发系列（十八）：自己定义控件样式在drawable目录下的XML实现

在Android开发的过程中,我们常常须要对控件的样式做一下改变,能够通过用添加背景图片的方式进行改变,可是背景图片放多了肯定会使得APK文件变的非常大. 我们能够用自己定义属性shape来实现. shape: gradient   -- 相应颜色渐变. startcolor.endcolor就不多说了. android:angle 是指从哪个角度開始变. solid      --  填充. stroke   --  描边. corners  --  圆角. padding   -- 定义内容

android 动态背景的实现以及SurfaceView中添加EditText控件

      首先还是一贯作风,我们先看案例: 静态图看不出来效果,如果用过此软件(扎客)的同学们都知道,她的背景会动.怎么样,是不是觉得很时尚,起码比静态的要好(个人观点).其实实现起来并 不复杂,这个如果让做游戏程序员做简直太小儿科了,这里我说明一点,其实我们做应用的也应该多少了解下游戏编程思维,起码对我们做应用有很好的帮助. 下面我简单介绍下实现方式. 实现原理:自定义一个SurfaceView控件.对之不停的onDraw,使得其背景动起来. 对于SurfaceView如果不了解的同学们麻烦

Android UI开源组件库BottomView ，第三方自定义UI控件

这里分享一个Android的非常经典实用而且简单方便的第三方UI控件库:BottomView(小米的米UI也用到了这个) 实现功能: 可以在底部弹出的View里自定义布局: 可以自定义是否可以触摸外部消失: 可以自定义事件: 可以自定义外围背景是否透明: 可以自定义动画: 如果需要的话,可以强制为顶部View显示 BottomView.jar库文件下载地址:http://download.csdn.net/detail/jay100500/7547055 BottomView的Demo下载地址:

【Android界面实现】使用ActionBar和DrawerLayout纯原生控件，实现侧滑栏和滑动Tab界面

转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 在前面的文章中,我们使用第三方开源控件,比如说是SlidingMenu和PagerSlidingTabStrip,实现过侧滑栏和滑动Tab界面.但是在support-v4包中,提供了原生的侧滑栏控件DrawerLayout,而滑动的Tab效果,我们可以使用ViewPager和ActionBar上的Tab来进行实现.所以在今天的文章里面,我们将介绍如何将DrawerLayout与ActionBar进行整合,

【Android】13.0 UI开发（四）——列表控件RecyclerView的横向布局排列实现

1.0 新建项目,由于ListView的局限性,RecyclerView是一种很好取代ListView的控件,可以灵活实现多种布局. 2.0 新建项目RecyclerviewTest,目录如下: 3.0 这里需要在app/build.gradle中配置,导入依赖包: dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompa

Android 高级UI设计笔记11：Gallery（画廊控件）之Gallery基本使用

1. 这里要向大家介绍Android控件Gallery(画廊控件) Gallery控件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Gallery组件指定了10张图像,那么当Gallery组件显示到第10张时,就不会再继续显示了. 2. Gallery基本用法: 步骤如下: (1)首先我们新建一个Android工程,工程目录如下: (2)activity_main.xml(主布局文件),如下: 在activity_main.xml添加Ima

Android UI设计中一些不错的示例及第三方控件

1.二级ListView自定义布局ExpandableListView http://pan.baidu.com/s/1mg01BRU 密码:jyl311 2.ListView实现各种动画效果ListViewAnimations 实现各种列表动画效果.包括卡片式列表(效果图1),Grid View列表(效果图2),列表item逐个淡入显示(效果图3),拖动列表item重新排序(效果图4),滑动删除列表item(效果图5),批量删除列表item(效果图6),展开列表item(效果图7)等等.