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>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/android-blogs/p/4973775.html