Android仿UC浏览器左右上下滚动功能

本文要解决在侧滑菜单右边加个文本框，并能实现文本的上下滑动和菜单的左右滚动。这里推荐可以好好看看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、代码

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() {
  @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);//绑定监听侧滑事件的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浏览器左右上下滚动功能，希望本文所述对大家学习Android软件编程有所帮助。