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

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



实现原理是上方使用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 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();   
  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 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();
    	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>

你可能感兴趣的:(android,UI与导航学习)