android的左右側滑選單實現

查志強發表於2014-07-13
Android

【原文：http://blog.csdn.net/cuiran/article/details/11973155】

最近看了很多app應用都採用的是左右側滑，比如網易新聞、凡客等

這裡也試著寫一下側滑

首先看一下效果

 

然後給出xml佈局程式碼

[html] view plaincopy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".MainActivity" >  
  6.       
  7.     <LinearLayout   
  8.         android:id="@+id/layout"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:orientation="horizontal">  
  12.           
  13.          <LinearLayout  
  14.             android:id="@+id/leftMenu"  
  15.             android:layout_width="match_parent"  
  16.             android:layout_height="match_parent" >  
  17.              <TextView  
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:text="@string/left_text" />  
  21.          </LinearLayout>  
  22.        
  23.              
  24.          <LinearLayout  
  25.             android:id="@+id/content"  
  26.             android:layout_width="match_parent"  
  27.             android:layout_height="match_parent"  
  28.          >  
  29.           
  30.           <RelativeLayout   
  31.             android:layout_width="fill_parent"  
  32.             android:id="@+id/layout01"   
  33.             android:layout_height="wrap_content"  
  34.             android:background="@drawable/bg_title"  
  35.             android:layout_alignParentTop="true"   
  36.             android:gravity="center"  
  37.             android:orientation="horizontal">  
  38.             <ImageView   
  39.             android:id="@+id/leftBtn"  
  40.             android:layout_alignParentLeft="true"  
  41.             android:layout_height="wrap_content"  
  42.             android:layout_width="wrap_content"  
  43.             android:padding="10dp"  
  44.             android:src="@drawable/home_category"/>  
  45.             <ImageView   
  46.             android:id="@+id/leftIcon"  
  47.             android:layout_toRightOf="@+id/leftBtn"  
  48.             android:layout_height="wrap_content"  
  49.             android:layout_width="wrap_content"  
  50.             android:src="@drawable/title_icon_line"/>  
  51.              <TextView   
  52.                 android:id="@+id/home_resource"  
  53.                 android:text="@string/app_name"  
  54.                 android:layout_width="fill_parent"  
  55.                 android:layout_height="wrap_content"  
  56.                 android:textColor="@color/white"  
  57.                 android:textSize="@dimen/title_size"  
  58.                 android:textStyle="bold"  
  59.               android:padding="10dp"  
  60.                 android:gravity="center"/>  
  61.             <ImageView   
  62.             android:id="@+id/rightIcon"  
  63.             android:layout_toLeftOf="@+id/rightBtn"  
  64.             android:layout_height="wrap_content"  
  65.             android:layout_width="wrap_content"  
  66.             android:src="@drawable/title_icon_line"/>  
  67.              <ImageView   
  68.             android:id="@+id/rightBtn"  
  69.              android:padding="10dp"  
  70.             android:layout_alignParentRight="true"  
  71.             android:layout_height="wrap_content"  
  72.             android:layout_width="wrap_content"  
  73.             android:src="@drawable/home_myvancl"  
  74.             />  
  75.             </RelativeLayout>  
  76.           </LinearLayout>  
  77.              
  78.           <LinearLayout  
  79.             android:id="@+id/rightMenu"  
  80.             android:layout_width="match_parent"  
  81.             android:layout_height="match_parent"  
  82.             >  
  83.              <TextView  
  84.                 android:layout_width="wrap_content"  
  85.                 android:layout_height="wrap_content"  
  86.                 android:text="@string/right_text" />  
  87.                     
  88.          </LinearLayout>    
  89.              
  90.     </LinearLayout>  
  91.              
  92.       
  93.   
  94. </RelativeLayout>  


接著寫Activity

[java] view plaincopy
  1. package com.example.viewdemo;  
  2.   
  3.   
  4.   
  5.   
  6. import android.os.AsyncTask;  
  7. import android.os.Bundle;  
  8. import android.app.Activity;  
  9. import android.util.Log;  
  10. import android.view.Menu;  
  11. import android.view.View;  
  12. import android.view.View.OnClickListener;  
  13. import android.widget.ImageView;  
  14. import android.widget.LinearLayout;  
  15. import android.widget.LinearLayout.LayoutParams;  
  16. /** 
  17.  *  
  18.  * TODO 
  19.  * @author cuiran 
  20.  * @version 1.0.0 
  21.  */  
  22. public class MainActivity extends Activity implements OnClickListener{  
  23.     private static final String TAG="MainActivity";  
  24.   
  25.     private LinearLayout leftMenu;  
  26.     private LinearLayout content;  
  27.     private LinearLayout rightMenu;  
  28.       
  29.     private LayoutParams leftMenuParams;  
  30.     private LayoutParams contentParams;  
  31.     private LayoutParams rightMenuParams;  
  32.   
  33.     // menu完全顯示時，留給content的寬度值。  
  34.     private static final int menuPadding = 120;  
  35.     private ImageView leftBtn,rightBtn;  
  36.   
  37.     // 解析度  
  38.     private int disPlayWidth;  
  39.      
  40.     private boolean mIsShow = false;  
  41.     private boolean mIsRightShow = false;  
  42.       
  43.     private static final int speed = 50;  
  44.     public boolean isMenu=false;  
  45.     public boolean isRightMenu=false;  
  46.       
  47.     @SuppressWarnings("deprecation")  
  48.     @Override  
  49.     protected void onCreate(Bundle savedInstanceState) {  
  50.         super.onCreate(savedInstanceState);  
  51.         setContentView(R.layout.activity_main);  
  52.           
  53.         initView();  
  54.     }  
  55.       
  56.       
  57.       
  58.   
  59.     /**初始化檢視 
  60.      * TODO 
  61.      */  
  62.     private void initView() {  
  63.         // TODO Auto-generated method stub  
  64.         disPlayWidth = getWindowManager().getDefaultDisplay().getWidth();  
  65.         leftMenu = (LinearLayout) findViewById(R.id.leftMenu);  
  66.         leftMenu.setOnClickListener(this);  
  67.         content = (LinearLayout) findViewById(R.id.content);  
  68.         content.setOnClickListener(this);  
  69.         rightMenu = (LinearLayout) findViewById(R.id.rightMenu);  
  70.         rightMenu.setOnClickListener(this);  
  71.           
  72.           
  73.         leftMenuParams = (LayoutParams) leftMenu.getLayoutParams();  
  74.         contentParams = (LayoutParams) content.getLayoutParams();  
  75.         rightMenuParams= (LayoutParams) rightMenu.getLayoutParams();  
  76.   
  77.         leftMenuParams.width = disPlayWidth - menuPadding;  
  78.         contentParams.width = disPlayWidth;  
  79.         rightMenuParams.width = disPlayWidth - menuPadding;  
  80.           
  81.         leftBtn=(ImageView)findViewById(R.id.leftBtn);  
  82.         rightBtn=(ImageView)findViewById(R.id.rightBtn);  
  83.           
  84.         leftBtn.setOnClickListener(this);  
  85.         rightBtn.setOnClickListener(this);  
  86.           
  87.         showMenu(mIsShow);  
  88.         showRightMenu(mIsRightShow);  
  89.     }  
  90.   
  91.   
  92.   
  93.     /** 
  94.      * 顯示介面 
  95.      * TODO 
  96.      * @param isShow 
  97.      */  
  98.     private void showMenu(boolean isShow)  
  99.     {  
  100.         if (isShow)  
  101.         {  
  102.             mIsShow = true;  
  103.             leftMenuParams.leftMargin = 0;  
  104.         } else  
  105.         {  
  106.             mIsShow = false;  
  107.             leftMenuParams.leftMargin = 0 - leftMenuParams.width;  
  108.         }  
  109.         leftMenu.setLayoutParams(leftMenuParams);  
  110.     }  
  111.       
  112.     private void showRightMenu(boolean isShow)  
  113.     {  
  114.         if (isShow)  
  115.         {  
  116.             mIsRightShow = true;  
  117.             contentParams.leftMargin = 0 ;  
  118.         } else  
  119.         {  
  120.             mIsRightShow = false;  
  121.             contentParams.leftMargin  =  0;  
  122.         }  
  123.         content.setLayoutParams(contentParams);  
  124.     }  
  125.   
  126.       /** 
  127.        *  
  128.        * TODO 控制左側View 
  129.        * @author cuiran 
  130.        * @version 1.0.0 
  131.        */  
  132.     class showMenuAsyncTask extends AsyncTask<Integer, Integer, Integer>  
  133.     {  
  134.   
  135.         @Override  
  136.         protected Integer doInBackground(Integer... params)  
  137.         {  
  138.             int leftMargin =leftMenuParams.leftMargin;  
  139.             Log.i(TAG, "leftMargin="+leftMargin);  
  140.             while (true)  
  141.             {  
  142.                 leftMargin += params[0];  
  143.                 if (params[0] > 0 && leftMargin >= 0)  
  144.                 {  
  145.                     break;  
  146.                 } else if (params[0] < 0 && leftMargin <= -leftMenuParams.width)  
  147.                 {  
  148.                     break;  
  149.                 }  
  150.                   
  151.                 Log.i(TAG, "doInBackground:leftMargin"+leftMargin);  
  152.                 publishProgress(leftMargin);  
  153.                 try  
  154.                 {  
  155.                     Thread.sleep(30);  
  156.                 } catch (InterruptedException e)  
  157.                 {  
  158.                     e.printStackTrace();  
  159.                 }  
  160.             }  
  161.             return leftMargin;  
  162.         }  
  163.   
  164.         @Override  
  165.         protected void onProgressUpdate(Integer... values)  
  166.         {  
  167.             super.onProgressUpdate(values);  
  168.             leftMenuParams.leftMargin = values[0];  
  169.             leftMenu.setLayoutParams(leftMenuParams);  
  170.         }  
  171.   
  172.         @Override  
  173.         protected void onPostExecute(Integer result)  
  174.         {  
  175.             super.onPostExecute(result);  
  176.             leftMenuParams.leftMargin = result;  
  177.             leftMenu.setLayoutParams(leftMenuParams);  
  178.         }  
  179.   
  180.     }  
  181.       
  182.     /** 
  183.        *  
  184.        * TODO 控制右側View 
  185.        * @author cuiran 
  186.        * @version 1.0.0 
  187.        */  
  188.   class showRightMenuAsyncTask extends AsyncTask<Integer, Integer, Integer>  
  189.   {  
  190.   
  191.       @Override  
  192.       protected Integer doInBackground(Integer... params)  
  193.       {  
  194.           int leftMargin =contentParams.leftMargin;  
  195.           while (true)  
  196.           {  
  197.               leftMargin += params[0];  
  198.               if (params[0] > 0 && leftMargin >= 0)  
  199.               {  
  200.                   break;  
  201.               } else if (params[0] < 0 && leftMargin <= -contentParams.width+menuPadding)  
  202.               {  
  203.                   break;  
  204.               }  
  205.               publishProgress(leftMargin);  
  206.               try  
  207.               {  
  208.                   Thread.sleep(30);  
  209.               } catch (InterruptedException e)  
  210.               {  
  211.                   e.printStackTrace();  
  212.               }  
  213.           }  
  214.           return leftMargin;  
  215.       }  
  216.   
  217.       @Override  
  218.       protected void onProgressUpdate(Integer... values)  
  219.       {  
  220.             
  221.           super.onProgressUpdate(values);  
  222.           contentParams.leftMargin = values[0];  
  223.           content.setLayoutParams(contentParams);  
  224.       }  
  225.   
  226.       @Override  
  227.       protected void onPostExecute(Integer result)  
  228.       {  
  229.           Log.i(TAG, "onPostExecute");  
  230.           super.onPostExecute(result);  
  231.           contentParams.leftMargin = result;  
  232.           content.setLayoutParams(contentParams);  
  233.       }  
  234.   
  235.   }  
  236.       
  237.     @Override  
  238.     public boolean onCreateOptionsMenu(Menu menu) {  
  239.         // Inflate the menu; this adds items to the action bar if it is present.  
  240.         getMenuInflater().inflate(R.menu.main, menu);  
  241.         return true;  
  242.     }  
  243.   
  244.     /* (non-Javadoc) 
  245.      * @see android.view.View.OnClickListener#onClick(android.view.View) 
  246.      */  
  247.     @Override  
  248.     public void onClick(View v) {  
  249.         // TODO Auto-generated method stub  
  250.           switch (v.getId())  
  251.             {  
  252.             case R.id.leftMenu:  
  253.                 isMenu=false;  
  254.                  new showMenuAsyncTask().execute(-speed);  
  255.                 break;  
  256.             case R.id.leftBtn:  
  257.                   
  258.                 if(isMenu){  
  259.                     isMenu=false;  
  260.                      new showMenuAsyncTask().execute(-speed);  
  261.                 }else{  
  262.                     isMenu=true;  
  263.                     new showMenuAsyncTask().execute(speed);  
  264.                 }  
  265.                   
  266.                  break;  
  267.             case R.id.rightBtn:  
  268.                 Log.i(TAG, "點選rightBtn");  
  269.                 if(isRightMenu){  
  270.                     isRightMenu=false;  
  271.                     new showRightMenuAsyncTask().execute(speed);  
  272.                 }else{  
  273.                     isRightMenu=true;  
  274.                      new showRightMenuAsyncTask().execute(-speed);  
  275.                 }  
  276.                 break;  
  277.             case R.id.content:  
  278.                  
  279.                 break;  
  280.             }  
  281.     }  
  282.   
  283. }  


原始碼下載地址為:https://github.com/cayden/viewdemo


相關文章