Android仿UC瀏覽器左右上下滾動功能(附源碼)

標籤：android   左右上下   滑動   scrollview   linelayout   

           本文要解決在側滑菜單右邊加個文字框，並能實現文本的上下滑動和菜單的左右滾動。這裡推薦可以好好看看android的觸摸事件的分發機制，這裡我就不詳細講了，我只講講這個應用。要實現的功能就像UC瀏覽器（或其它手機瀏覽器）的左右滾動，切換網頁，上下滾動，拖動內容。

目錄：

      一、功能要求與實現

      二、布局與代碼

      三、原理與說明

本文的效果： （源碼下載）

一、功能要求與實現

1、功能要求：

（1）手指一開始按著螢幕左右移動時，只能左右滾動菜單，如果這時手指一直按著，而且上下移動了，那麼菜單顯示部分保持不變，但文字框也不上下移動！                       

（2）手指一開始按著螢幕上下移動時，只能上下滾動文字框，如果這時手指一直按著，而且左右移動了，那麼文字框顯示部分保持不變，但菜單也不左右移動！

2、初步實現：

       在上一篇中，為左邊的功能表項目增加一個listview，為右邊的內容項添加一個textview，並且為了能讓它實現上下滾動的功能，給textview加了個scrollview。

         這種效果肯定是不對的，你看，我們手指上下禾移動文本時，如果還左右移動了，菜單也顯示出來了。

 3、修改實現   

     這時我就想從觸摸事件的分發入手，這裡因為我是把ScrollView的觸摸事件註冊到LinearLayout。（LinearLayout中包含了ScrollView，不懂看下面的布局）中去，所以觸摸事件會先傳遞給LinearLayout。

分以下兩種情況：

（1）如果是手指左右移動，則把觸摸事件傳給LinearLayout。函數onTouch返回true,表示觸摸事件不再傳遞下去，那麼ScrollView就動不了了

（2）如果是手指上下移動，觸摸事件先傳給LinearLayout，但LinearLayout不做任何處理，直接傳遞給ScrollView，ScrollView來處理觸摸事件。

這是修改後的效果：

                                             

二、布局與代碼
1、布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    tools:context=".MainActivity" >    <LinearLayout        android:id="@+id/menu"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:background="@drawable/menu" >        <!-- 添加一個ListView控制項 -->         <ListView         android:id="@+id/menuList"            android:layout_width="fill_parent"           android:layout_height="fill_parent"/>              </LinearLayout>        <LinearLayout        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">  <ScrollView      android:id="@+id/scrollview"    android:layout_width="fill_parent"      android:layout_height="wrap_content" >          <TextView android:id="@+id/content_text"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/text1"             android:textSize="22px" />  </ScrollView>    </LinearLayout> </LinearLayout>

2、代碼

/** * @作者   林炳文 * @時間 2015.2.17 */package com.example.learningjava;import java.util.ArrayList;import java.util.HashMap;import java.util.Map;import com.example.learningjava.R.string;import android.R.integer;import android.R.menu;import android.os.AsyncTask;import android.os.Build;import android.os.Bundle;import android.annotation.SuppressLint;import android.annotation.TargetApi;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ArrayAdapter;import android.widget.LinearLayout.LayoutParams;import android.widget.ListView;import android.widget.ScrollView;import android.widget.Toast;import android.app.Activity;import android.content.Context;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.Log;import android.view.GestureDetector;import android.view.Menu;import android.view.MotionEvent;import android.view.VelocityTracker;import android.view.View;import android.view.View.OnTouchListener;import android.view.Window;import android.widget.LinearLayout;public class MainActivity extends Activity implements OnTouchListener{private LinearLayout menuLayout;//功能表項目private LinearLayout contentLayout;//內容項private LayoutParams  menuParams;//功能表項目的參數private LayoutParams contentParams;//內容項目的參數contentLayout的寬度值 private int disPlayWidth;//手機螢幕解析度    private float xDown;//手指點下去的橫座標    private float xMove;//手指移動的橫座標    private float xUp;//記錄手指上抬後的橫座標    private float yDown;//手指點下去的縱座標    private float yMove;//手指移動的縱座標        private VelocityTracker mVelocityTracker; // 用於計算手指滑動的速度。      private float velocityX;//手指左右移動的速度    public static final int SNAP_VELOCITY = 400; //滾動顯示和隱藏menu時，手指滑動需要達到的速度。      private boolean menuIsShow = false;//初始化功能表項目不可翽private static final int menuPadding=160;//menu完成顯示，留給content的寬度private ListView menuListView;//菜單列表的內容private ScrollView scrollView;// 文字框的捲軸private boolean wantToScrollText=false;//想要下下滾動常值內容private boolean wantToScrollTextMenu=false;private boolean oneFucction=false;//確保函數只被調用一次  protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initLayoutParams();        initMenuList();        initScrollView();    }  /**   *初始化Layout並設定其相應的參數   */  private void initLayoutParams()  {//得到螢幕的大小       DisplayMetrics dm = new DisplayMetrics();      getWindowManager().getDefaultDisplay().getMetrics(dm);        disPlayWidth =dm.widthPixels;              //獲得控制項      menuLayout = (LinearLayout) findViewById(R.id.menu);      contentLayout = (LinearLayout) findViewById(R.id.content);      findViewById(R.id.layout).setOnTouchListener(this);            //獲得控制項參數      menuParams=(LinearLayout.LayoutParams)menuLayout.getLayoutParams();      contentParams = (LinearLayout.LayoutParams) contentLayout.getLayoutParams();             //初始化菜單和內容的寬和邊距      menuParams.width = disPlayWidth - menuPadding;      menuParams.leftMargin = 0 - menuParams.width;      contentParams.width = disPlayWidth;      contentParams.leftMargin=0;            //設定參數      menuLayout.setLayoutParams(menuParams);      contentLayout.setLayoutParams(contentParams);    }  /**   * 初始化菜單列表內容   */  private void initMenuList()  {  final String[] strs = new String[] { "第1章 Java概述 ", "第2章 理解物件導向", "第3章 資料類型和運算子", "第4章 流程式控制制和數組", "第5章 物件導向（上）"};  menuListView = (ListView) findViewById(R.id.menuList);  menuListView.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, strs));//為ListView綁定適配器      //啟動列表點擊監聽事件   menuListView.setOnItemClickListener(new OnItemClickListener() {  @Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) { Toast.makeText(getApplicationContext(),"您選擇了" + strs[arg2], Toast.LENGTH_SHORT).show();  }      });   }   /**   * 初始化scrollView    */  public void initScrollView(){  scrollView = (ScrollView)this.findViewById(R.id.scrollview);      scrollView.setOnTouchListener(this);//綁定監聽側滑事件的View，即在綁定的View進行滑動才可以顯示和隱藏左側布局。 這句非常重要，不要設定它的觸摸事件 了，要不會吞掉布局的觸摸事件  }   @Override  public boolean onTouch(View v, MotionEvent event)  {  acquireVelocityTracker(event); if (event.getAction()==MotionEvent.ACTION_DOWN) {      xDown=event.getRawX();       yDown=event.getRawY();      return false; } else if(event.getAction()==MotionEvent.ACTION_MOVE) { if(wantToScrollText)//當前想滾動顯示文本 return false;      xMove=event.getRawX();        yMove=event.getRawY();      if(menuIsShow){     isScrollToShowMenu();     return true;     }     if(!oneFucction)     {        oneFucction=true;        //這個if只能被調用一次           if(Math.abs(xDown-xMove)<Math.abs(yDown-yMove))              {      wantToScrollText=true;      return false;              }      }             isScrollToShowMenu(); }  else if(event.getAction()==MotionEvent.ACTION_UP)     { oneFucction=false; if(wantToScrollText){      wantToScrollText=false;      return false; }    xUp=event.getRawX();      isShowMenu();      releaseVelocityTracker();   }  else if (event.getAction()==MotionEvent.ACTION_CANCEL) {          releaseVelocityTracker();          return false; }      return true;//false時才能把觸摸事件再傳給scroll  }  /**   * 根據手指按下的距離，判斷是否滾動顯示菜單   */  private void isScrollToShowMenu()  {        int distanceX = (int) (xMove - xDown);              if (!menuIsShow) {      scrollToShowMenu(distanceX);        }else{      scrollToHideMenu(distanceX);        }  }  /**   * 手指抬起之後判斷是否要顯示菜單   */  private void isShowMenu()  {       velocityX =getScrollVelocity();       if(wantToShowMenu()){       if(shouldShowMenu()){       showMenu();       }else{       hideMenu();       }       }       else if(wantToHideMenu()){       if(shouldHideMenu()){       hideMenu();       }else{  showMenu();   }       }      }  /**   *想要顯示菜單,當向右移動距離大於0並且菜單不可見   */  private boolean wantToShowMenu(){  return !menuIsShow&&xUp-xDown>0;  }  /**   *想要隱藏菜單,當向左移動距離大於0並且菜單可見   */  private boolean wantToHideMenu(){  return menuIsShow&&xDown-xUp>0;  }  /**   *判斷應該顯示菜單,當向右移動的距離超過菜單的一半或者速度超過給定值   */  private boolean shouldShowMenu(){  return xUp-xDown>menuParams.width/2||velocityX>SNAP_VELOCITY;  }  /**   *判斷應該隱藏菜單,當向左移動的距離超過菜單的一半或者速度超過給定值   */  private boolean shouldHideMenu(){  return xDown-xUp>menuParams.width/2||velocityX>SNAP_VELOCITY;  }  /**   * 顯示功能表列   */  private void showMenu()  {      new showMenuAsyncTask().execute(50);      menuIsShow=true;  }  /**   * 隱藏功能表列   */  private void hideMenu()  { new showMenuAsyncTask().execute(-50);     menuIsShow=false;  }  /**   *指標按著時，滾動將菜單慢慢顯示出來   *@param scrollX 每次滾動移動的距離   */  private void scrollToShowMenu(int scrollX)  {  if(scrollX>0&&scrollX<= menuParams.width)  menuParams.leftMargin =-menuParams.width+scrollX;  menuLayout.setLayoutParams(menuParams);   }  /**   *指標按著時，滾動將菜單慢慢隱藏出來   *@param scrollX 每次滾動移動的距離   */  private void scrollToHideMenu(int scrollX)  {  if(scrollX>=-menuParams.width&&scrollX<0)  menuParams.leftMargin=scrollX;  menuLayout.setLayoutParams(menuParams);   }       /**     * 建立VelocityTracker對象，並將觸摸content介面的滑動事件加入到VelocityTracker當中。    * @param event 向VelocityTracker添加MotionEvent     */    private void acquireVelocityTracker(final MotionEvent event) {        if(null == mVelocityTracker) {            mVelocityTracker = VelocityTracker.obtain();        }        mVelocityTracker.addMovement(event);    }    /**    * 擷取手指在content介面滑動的速度。    * @return 滑動速度，以每秒鐘移動了多少像素值為單位。    */    private int getScrollVelocity() {        mVelocityTracker.computeCurrentVelocity(1000);        int velocity = (int) mVelocityTracker.getXVelocity();           return Math.abs(velocity);    }   /**     * 釋放VelocityTracker     */    private void releaseVelocityTracker() {        if(null != mVelocityTracker) {            mVelocityTracker.clear();            mVelocityTracker.recycle();            mVelocityTracker = null;        }    }    /**  *  *：類比動畫過程，讓肉眼能看到滾動的效果  *  */  class showMenuAsyncTask extends AsyncTask<Integer, Integer, Integer>  {      @Override      protected Integer doInBackground(Integer... params)      {          int leftMargin = menuParams.leftMargin;          while (true)          {// 根據傳入的速度來滾動介面，當滾動到達左邊界或右邊界時，跳出迴圈。              leftMargin += params[0];              if (params[0] > 0 && leftMargin > 0)              {              leftMargin= 0;                  break;              } else if (params[0] < 0 && leftMargin <-menuParams.width)              {              leftMargin=-menuParams.width;                  break;              }              publishProgress(leftMargin);              try              {                  Thread.sleep(40);//休眠一下，肉眼才能看到滾動效果              } catch (InterruptedException e)              {                  e.printStackTrace();              }          }          return leftMargin;      }      @Override      protected void onProgressUpdate(Integer... value)      {          menuParams.leftMargin = value[0];          menuLayout.setLayoutParams(menuParams);      }      @Override      protected void onPostExecute(Integer result)      {          menuParams.leftMargin = result;          menuLayout.setLayoutParams(menuParams);      }  }}

三、原理與說明

原理 ：

1、將ScrollView的觸摸事件註冊到LinearLayout中去。（LinearLayout中包含了ScrollView，不懂看布局）

2、首先判斷手勢是想要左右運動還是上下運動，如果是左右運動，那麼LinearLayout得到觸摸事件，即函數OnTouch返回true;如果想上下運動，即函數OnTouch返回false;

這裡要注意的是，手勢判斷只一次，什麼意思呢？就是說你第1次按下，到你一直按著，這中間只判斷一次你的手勢想要做的運動。

3、手指離開螢幕後，再來恢複所有的參數。

Android仿UC瀏覽器左右上下滾動功能(附源碼)