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

    本文要解決在側(cè)滑菜單右邊加個(gè)文本框，并能實(shí)現(xiàn)文本的上下滑動和菜單的左右滾動。這里推薦可以好好看看android的觸摸事件的分發(fā)機(jī)制，這里我就不詳細(xì)講了，我只講講這個(gè)應(yīng)用。要實(shí)現(xiàn)的功能就像UC瀏覽器（或其它手機(jī)瀏覽器）的左右滾動，切換網(wǎng)頁，上下滾動，拖動內(nèi)容。

目錄：一、功能要求與實(shí)現(xiàn)

      二、布局與代碼

      三、原理與說明

本文的效果：（×××）

一、功能要求與實(shí)現(xiàn)

1、功能要求：

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

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

2、實(shí)現(xiàn)：

   在上一篇中，為左邊的菜單項(xiàng)增加一個(gè)listview，為右邊的內(nèi)容項(xiàng)添加一個(gè)textview，并且為了能讓它實(shí)現(xiàn)上下滾動的功能，給textview加了個(gè)scrollview

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

     這時(shí)我就想從觸摸事件的分發(fā)入手，這里因?yàn)槲沂前裇crollView的觸摸事件注冊到LinearLayout。（LinearLayout中包含了ScrollView，不懂看下面的布局）中去，所以觸摸事件會先傳遞給LinearLayout。

分以下兩種情況：

（1）如果是手指左右移動，則把觸摸事件傳給LinearLayout。函數(shù)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" >
        <!-- 添加一個(gè)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、代碼

/**
 * @作者   林炳文
 * @時(shí)間 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;//菜單項(xiàng)
    private LinearLayout contentLayout;//內(nèi)容項(xiàng)
    private LayoutParams  menuParams;//菜單項(xiàng)目的參數(shù)
    private LayoutParams contentParams;//內(nèi)容項(xiàng)目的參數(shù)contentLayout的寬度值 
    
    private int disPlayWidth;//手機(jī)屏幕分辨率
    private float xDown;//手指點(diǎn)下去的橫坐標(biāo)
    private float xMove;//手指移動的橫坐標(biāo)
    private float xUp;//記錄手指上抬后的橫坐標(biāo)
    private float yDown;//手指點(diǎn)下去的縱坐標(biāo)
    private float yMove;//手指移動的縱坐標(biāo)
    
    private VelocityTracker mVelocityTracker; // 用于計(jì)算手指滑動的速度。  
    private float velocityX;//手指左右移動的速度
    public static final int SNAP_VELOCITY = 400; //滾動顯示和隱藏menu時(shí)，手指滑動需要達(dá)到的速度。 
 
    private boolean menuIsShow = false;//初始化菜單項(xiàng)不可翙
    private static final int menuPadding=160;//menu完成顯示，留給content的寬度
    
    private ListView menuListView;//菜單列表的內(nèi)容
    private ScrollView scrollView;// 文本框的滾動條
    private boolean wantToScrollText=false;//想要下下滾動文本內(nèi)容
    private boolean wantToScrollTextMenu=false;
    private boolean oneFucction=false;//確保函數(shù)只被調(diào)用一次
    
  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initLayoutParams();
        initMenuList();
        initScrollView();
    }
  /**
   *初始化Layout并設(shè)置其相應(yīng)的參數(shù)
   */
  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);
      
      //獲得控件參數(shù)
      menuParams=(LinearLayout.LayoutParams)menuLayout.getLayoutParams();
      contentParams = (LinearLayout.LayoutParams) contentLayout.getLayoutParams();
      
       //初始化菜單和內(nèi)容的寬和邊距
      menuParams.width = disPlayWidth - menuPadding;
      menuParams.leftMargin = 0 - menuParams.width;
      contentParams.width = disPlayWidth;
      contentParams.leftMargin=0;
      
      //設(shè)置參數(shù)
      menuLayout.setLayoutParams(menuParams);
      contentLayout.setLayoutParams(contentParams);
      
  }
  /**
   * 初始化菜單列表內(nèi)容
   */
  private void initMenuList()
  {  
    final String[] strs = new String[] { "第1章 Java概述 ", "第2章 理解面向?qū)ο?, "第3章 數(shù)據(jù)類型和運(yùn)算符", "第4章 流程控制和數(shù)組", "第5章 面向?qū)ο螅ㄉ希?};
      menuListView = (ListView) findViewById(R.id.menuList);
      menuListView.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, strs));//為ListView綁定適配器
      //啟動列表點(diǎn)擊監(jiān)聽事件 
      menuListView.setOnItemClickListener(new OnItemClickListener() {  
            @Override
            public 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);//綁定監(jiān)聽側(cè)滑事件的View，即在綁定的View進(jìn)行滑動才可以顯示和隱藏左側(cè)布局。 這句非常重要，不要設(shè)置它的觸摸事件 了，要不會吞掉布局的觸摸事件
  }
 
  @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)//當(dāng)前想滾動顯示文本
             return false;
          xMove=event.getRawX();  
          yMove=event.getRawY(); 
         if(menuIsShow){
             isScrollToShowMenu();
             return true;
         }
         if(!oneFucction)
         {
            oneFucction=true;
            //這個(gè)if只能被調(diào)用一次
           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時(shí)才能把觸摸事件再傳給scroll
  }
  /**
   * 根據(jù)手指按下的距離，判斷是否滾動顯示菜單
   */
  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();
           }
       }    
  }
  /**
   *想要顯示菜單,當(dāng)向右移動距離大于0并且菜單不可見
   */
  private boolean wantToShowMenu(){
      return !menuIsShow&&xUp-xDown>0;
  }
  /**
   *想要隱藏菜單,當(dāng)向左移動距離大于0并且菜單可見
   */
  private boolean wantToHideMenu(){
      return menuIsShow&&xDown-xUp>0;
  }
  /**
   *判斷應(yīng)該顯示菜單,當(dāng)向右移動的距離超過菜單的一半或者速度超過給定值
   */
  private boolean shouldShowMenu(){
      return xUp-xDown>menuParams.width/2||velocityX>SNAP_VELOCITY;
  }
  /**
   *判斷應(yīng)該隱藏菜單,當(dāng)向左移動的距離超過菜單的一半或者速度超過給定值
   */
  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;
  }
  /**
   *指針按著時(shí)，滾動將菜單慢慢顯示出來
   *@param scrollX 每次滾動移動的距離
   */
  private void scrollToShowMenu(int scrollX)
  {
      if(scrollX>0&&scrollX<= menuParams.width)
      menuParams.leftMargin =-menuParams.width+scrollX;
      menuLayout.setLayoutParams(menuParams); 
  }
  /**
   *指針按著時(shí)，滾動將菜單慢慢隱藏出來
   *@param scrollX 每次滾動移動的距離
   */
  private void scrollToHideMenu(int scrollX)
  {
      if(scrollX>=-menuParams.width&&scrollX<0)
      menuParams.leftMargin=scrollX;
      menuLayout.setLayoutParams(menuParams); 
  }
   
  
  /**  
   * 創(chuàng)建VelocityTracker對象，并將觸摸content界面的滑動事件加入到VelocityTracker當(dāng)中。 
   * @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)
          {// 根據(jù)傳入的速度來滾動界面，當(dāng)滾動到達(dá)左邊界或右邊界時(shí)，跳出循環(huán)。
              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、首先判斷手勢是想要左右運(yùn)動還是上下運(yùn)動，如果是左右運(yùn)動，那么LinearLayout得到觸摸事件，即函數(shù)OnTouch返回true;如果想上下運(yùn)動，即函數(shù)OnTouch返回false;

這里要注意的是，手勢判斷只一次，什么意思呢？就是說你第1次按下，到你一直按著，這中間只判斷一次你的手勢想要做的運(yùn)動。

3、手指離開屏幕后，再來恢復(fù)所有的參數(shù)。

（×××）