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

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

实现原理是上方使用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. }  

package com.zj.horizontalsrollview;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.MarginLayoutParams;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
/**
 * HorizontalScrollView和ViewPager联动效果
 * 上面为HorizontalScrollView,下面为ViewPager
 * @author zj
 * 2012-5-23 下午1:07:06
 */
public class MainActivity extends Activity implements OnCheckedChangeListener{
	private RadioGroup mRadioGroup;
	private RadioButton mRadioButton1;
	private RadioButton mRadioButton2;
	private RadioButton mRadioButton3;
	private RadioButton mRadioButton4;
	private RadioButton mRadioButton5;
	private ImageView mImageView;
	private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离
	private HorizontalScrollView mHorizontalScrollView;//上面的水平滚动控件
	private ViewPager mViewPager;	//下方的可横向拖动的控件
	private ArrayList<View> mViews;//用来存放下方滚动的layout(layout_1,layout_2,layout_3)
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        iniController();
        iniListener();
        iniVariable();
        
        mRadioButton1.setChecked(true);
        mViewPager.setCurrentItem(1);
        mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();
        
    }
    
    private void iniVariable() {
		// TODO Auto-generated method stub
    	mViews = new ArrayList<View>();
    	mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));
    	mViews.add(getLayoutInflater().inflate(R.layout.layout_1, null));
    	mViews.add(getLayoutInflater().inflate(R.layout.layout_2, null));
    	mViews.add(getLayoutInflater().inflate(R.layout.layout_3, null));
    	mViews.add(getLayoutInflater().inflate(R.layout.layout_4, null));
    	mViews.add(getLayoutInflater().inflate(R.layout.layout_5, null));
    	mViews.add(getLayoutInflater().inflate(R.layout.layout_0, null));
    	
    	mViewPager.setAdapter(new MyPagerAdapter());//设置ViewPager的适配器
	}
    
    /**
	 * RadioGroup点击CheckedChanged监听
	 */
	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		
		AnimationSet _AnimationSet = new AnimationSet(true);
		TranslateAnimation _TranslateAnimation;
		
		Log.i("zj", "checkedid="+checkedId);
		if (checkedId == R.id.btn1) {
			_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo1), 0f, 0f);
			_AnimationSet.addAnimation(_TranslateAnimation);
			_AnimationSet.setFillBefore(false);
			_AnimationSet.setFillAfter(true);
			_AnimationSet.setDuration(100);
			/*LayoutParams _LayoutParams1 = new LayoutParams(100, 4);
			_LayoutParams1.setMargins(0, 0, 0, 0);
			_LayoutParams1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);*/
			//mImageView.bringToFront();
			mImageView.startAnimation(_AnimationSet);//开始上面蓝色横条图片的动画切换
			//mImageView.setLayoutParams(_LayoutParams1);
			mViewPager.setCurrentItem(1);//让下方ViewPager跟随上面的HorizontalScrollView切换
		}else if (checkedId == R.id.btn2) {
			_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo2), 0f, 0f);

			_AnimationSet.addAnimation(_TranslateAnimation);
			_AnimationSet.setFillBefore(false);
			_AnimationSet.setFillAfter(true);
			_AnimationSet.setDuration(100);

			//mImageView.bringToFront();
			mImageView.startAnimation(_AnimationSet);
			
			mViewPager.setCurrentItem(2);
		}else if (checkedId == R.id.btn3) {
			_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo3), 0f, 0f);
			
			_AnimationSet.addAnimation(_TranslateAnimation);
			_AnimationSet.setFillBefore(false);
			_AnimationSet.setFillAfter(true);
			_AnimationSet.setDuration(100);
			
			//mImageView.bringToFront();
			mImageView.startAnimation(_AnimationSet);
			
			mViewPager.setCurrentItem(3);
		}else if (checkedId == R.id.btn4) {
			_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo4), 0f, 0f);
			
			_AnimationSet.addAnimation(_TranslateAnimation);
			_AnimationSet.setFillBefore(false);
			_AnimationSet.setFillAfter(true);
			_AnimationSet.setDuration(100);
			
			//mImageView.bringToFront();
			mImageView.startAnimation(_AnimationSet);
			mViewPager.setCurrentItem(4);
		}else if (checkedId == R.id.btn5) {
			_TranslateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, getResources().getDimension(R.dimen.rdo5), 0f, 0f);
			
			_AnimationSet.addAnimation(_TranslateAnimation);
			_AnimationSet.setFillBefore(false);
			_AnimationSet.setFillAfter(true);
			_AnimationSet.setDuration(100);
			
			//mImageView.bringToFront();
			mImageView.startAnimation(_AnimationSet);
			
			mViewPager.setCurrentItem(5);
		}
		
		mCurrentCheckedRadioLeft = getCurrentCheckedRadioLeft();
		
		Log.i("zj", "getCurrentCheckedRadioLeft="+getCurrentCheckedRadioLeft());
		Log.i("zj", "getDimension="+getResources().getDimension(R.dimen.rdo2));
		
		mHorizontalScrollView.smoothScrollTo((int)mCurrentCheckedRadioLeft-(int)getResources().getDimension(R.dimen.rdo2), 0);
	}
    
	/**
     * 获得当前被选中的RadioButton距离左侧的距离
     */
	private float getCurrentCheckedRadioLeft() {
		// TODO Auto-generated method stub
		if (mRadioButton1.isChecked()) {
			//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo1));
			return getResources().getDimension(R.dimen.rdo1);
		}else if (mRadioButton2.isChecked()) {
			//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo2));
			return getResources().getDimension(R.dimen.rdo2);
		}else if (mRadioButton3.isChecked()) {
			//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo3));
			return getResources().getDimension(R.dimen.rdo3);
		}else if (mRadioButton4.isChecked()) {
			//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo4));
			return getResources().getDimension(R.dimen.rdo4);
		}else if (mRadioButton5.isChecked()) {
			//Log.i("zj", "currentCheckedRadioLeft="+getResources().getDimension(R.dimen.rdo5));
			return getResources().getDimension(R.dimen.rdo5);
		}
		return 0f;
	}

	private void iniListener() {
		// TODO Auto-generated method stub
		
		mRadioGroup.setOnCheckedChangeListener(this);
		
		
		mViewPager.setOnPageChangeListener(new MyPagerOnPageChangeListener());
	}

	private void iniController() {
		// TODO Auto-generated method stub
		mRadioGroup = (RadioGroup)findViewById(R.id.radioGroup);
		mRadioButton1 = (RadioButton)findViewById(R.id.btn1);
		mRadioButton2 = (RadioButton)findViewById(R.id.btn2);
		mRadioButton3 = (RadioButton)findViewById(R.id.btn3);
		mRadioButton4 = (RadioButton)findViewById(R.id.btn4);
		mRadioButton5 = (RadioButton)findViewById(R.id.btn5);
		
		mImageView = (ImageView)findViewById(R.id.img1);
		
		mHorizontalScrollView = (HorizontalScrollView)findViewById(R.id.horizontalScrollView);
		
		mViewPager = (ViewPager)findViewById(R.id.pager);
	}

	/**
	 * ViewPager的适配器
	 * @author zj
	 * 2012-5-24 下午2:26:57
	 */
	private class MyPagerAdapter extends PagerAdapter{

		@Override
		public void destroyItem(View v, int position, Object obj) {
			// TODO Auto-generated method stub
			((ViewPager)v).removeView(mViews.get(position));
		}

		@Override
		public void finishUpdate(View arg0) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return mViews.size();
		}

		@Override
		public Object instantiateItem(View v, int position) {
			((ViewPager)v).addView(mViews.get(position));
			return mViews.get(position);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public Parcelable saveState() {
			// TODO Auto-generated method stub
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
			// TODO Auto-generated method stub
			
		}
		
	}
	/**
	 * ViewPager的PageChangeListener(页面改变的监听器)
	 * @author zj
	 * 2012-5-24 下午3:14:27
	 */
	private class MyPagerOnPageChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
			
		}
		/**
		 * 滑动ViewPager的时候,让上方的HorizontalScrollView自动切换
		 */
		@Override
		public void onPageSelected(int position) {
			// TODO Auto-generated method stub
			//Log.i("zj", "position="+position);
			
			if (position == 0) {
				mViewPager.setCurrentItem(1);
			}else if (position == 1) {
				mRadioButton1.performClick();
			}else if (position == 2) {
				mRadioButton2.performClick();
			}else if (position == 3) {
				mRadioButton3.performClick();
			}else if (position == 4) {
				mRadioButton4.performClick();
			}else if (position == 5) {
				mRadioButton5.performClick();
			}else if (position == 6) {
				mViewPager.setCurrentItem(5);
			}
		}
		
	}
	
}

 

 

 

 

 

 

 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>