码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2015-11-18 12:17:19      阅读：204      评论：0      收藏：0      [点我收藏+]

标签：

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

 

 

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

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

标签：

原文地址：http://www.cnblogs.com/android-blogs/p/4973775.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！