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

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

 

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

 

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

现在看一下代码:

Java代码  

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

 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>