Android導航選單橫向左右滑動並和下方的控制元件實現聯動

edagarli發表於2014-04-09
Android控制元件

這個是美團網個人訂單的效果,找了很多地方都沒找到,自己研究了兩天終於弄出來了^_^,有什麼問題希望大家指出來,謝謝。

 

原始碼下載 這裡有http://www.eoeandroid.com/thread-175041-1-1.html


實現原理是上方使用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>  

 

第一次寫這麼多,希望轉載的朋友能夠尊重作者的勞動成果，加上轉載地，謝謝。

http://zhengjiong.iteye.com/blog/1539951

相關文章