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

一、功能要求與實(shí)現(xiàn)
1、功能要求:
(1)手指一開(kāi)始按著屏幕左右移動(dòng)時(shí),只能左右滾動(dòng)菜單,如果這時(shí)手指一直按著,而且上下移動(dòng)了,那么菜單顯示部分保持不變,但文本框也不上下移動(dòng)!
(2)手指一開(kāi)始按著屏幕上下移動(dòng)時(shí),只能上下滾動(dòng)文本框,如果這時(shí)手指一直按著,而且左右移動(dòng)了,那么文本框顯示部分保持不變,但菜單也不左右移動(dòng)!
2、初步實(shí)現(xiàn):
左邊的菜單項(xiàng)增加一個(gè)listview,為右邊的內(nèi)容項(xiàng)添加一個(gè)textview,并且為了能讓它實(shí)現(xiàn)上下滾動(dòng)的功能,給textview加了個(gè)scrollview。
這種效果肯定是不對(duì)的,你看,我們手指上下禾移動(dòng)文本時(shí),如果還左右移動(dòng)了,菜單也顯示出來(lái)了。


3、修改實(shí)現(xiàn)
這時(shí)我就想從觸摸事件的分發(fā)入手,這里因?yàn)槲沂前裇crollView的觸摸事件注冊(cè)到LinearLayout。(LinearLayout中包含了ScrollView,不懂看下面的布局)中去,所以觸摸事件會(huì)先傳遞給LinearLayout。
分以下兩種情況:
(1)如果是手指左右移動(dòng),則把觸摸事件傳給LinearLayout。函數(shù)onTouch返回true,表示觸摸事件不再傳遞下去,那么ScrollView就動(dòng)不了了
(2)如果是手指上下移動(dòng),觸摸事件先傳給LinearLayout,但LinearLayout不做任何處理,直接傳遞給ScrollView,ScrollView來(lái)處理觸摸事件。
這是修改后的效果:
二、布局與代碼
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、代碼
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;//手指移動(dòng)的橫坐標(biāo)
private float xUp;//記錄手指上抬后的橫坐標(biāo)
private float yDown;//手指點(diǎn)下去的縱坐標(biāo)
private float yMove;//手指移動(dòng)的縱坐標(biāo)
private VelocityTracker mVelocityTracker; // 用于計(jì)算手指滑動(dòng)的速度。
private float velocityX;//手指左右移動(dòng)的速度
public static final int SNAP_VELOCITY = 400; //滾動(dòng)顯示和隱藏menu時(shí),手指滑動(dòng)需要達(dá)到的速度。
private boolean menuIsShow = false;//初始化菜單項(xiàng)不可翙
private static final int menuPadding=160;//menu完成顯示,留給content的寬度
private ListView menuListView;//菜單列表的內(nèi)容
private ScrollView scrollView;// 文本框的滾動(dòng)條
private boolean wantToScrollText=false;//想要下下滾動(dòng)文本內(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ù)類(lèi)型和運(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));//為L(zhǎng)istView綁定適配器
//啟動(dòng)列表點(diǎn)擊監(jiān)聽(tīng)事件
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)聽(tīng)側(cè)滑事件的View,即在綁定的View進(jìn)行滑動(dòng)才可以顯示和隱藏左側(cè)布局。 這句非常重要,不要設(shè)置它的觸摸事件 了,要不會(huì)吞掉布局的觸摸事件
}
@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)前想滾動(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ù)手指按下的距離,判斷是否滾動(dòng)顯示菜單
*/
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)向右移動(dòng)距離大于0并且菜單不可見(jiàn)
*/
private boolean wantToShowMenu(){
return !menuIsShow&&xUp-xDown>0;
}
/**
*想要隱藏菜單,當(dāng)向左移動(dòng)距離大于0并且菜單可見(jiàn)
*/
private boolean wantToHideMenu(){
return menuIsShow&&xDown-xUp>0;
}
/**
*判斷應(yīng)該顯示菜單,當(dāng)向右移動(dòng)的距離超過(guò)菜單的一半或者速度超過(guò)給定值
*/
private boolean shouldShowMenu(){
return xUp-xDown>menuParams.width/2||velocityX>SNAP_VELOCITY;
}
/**
*判斷應(yīng)該隱藏菜單,當(dāng)向左移動(dòng)的距離超過(guò)菜單的一半或者速度超過(guò)給定值
*/
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í),滾動(dòng)將菜單慢慢顯示出來(lái)
*@param scrollX 每次滾動(dòng)移動(dòng)的距離
*/
private void scrollToShowMenu(int scrollX)
{
if(scrollX>0&&scrollX<= menuParams.width)
menuParams.leftMargin =-menuParams.width+scrollX;
menuLayout.setLayoutParams(menuParams);
}
/**
*指針按著時(shí),滾動(dòng)將菜單慢慢隱藏出來(lái)
*@param scrollX 每次滾動(dòng)移動(dòng)的距離
*/
private void scrollToHideMenu(int scrollX)
{
if(scrollX>=-menuParams.width&&scrollX<0)
menuParams.leftMargin=scrollX;
menuLayout.setLayoutParams(menuParams);
}
/**
* 創(chuàng)建VelocityTracker對(duì)象,并將觸摸content界面的滑動(dòng)事件加入到VelocityTracker當(dāng)中。
* @param event 向VelocityTracker添加MotionEvent
*/
private void acquireVelocityTracker(final MotionEvent event) {
if(null == mVelocityTracker) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);
}
/**
* 獲取手指在content界面滑動(dòng)的速度。
* @return 滑動(dòng)速度,以每秒鐘移動(dòng)了多少像素值為單位。
*/
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;
}
}
/**
*
*:模擬動(dòng)畫(huà)過(guò)程,讓肉眼能看到滾動(dòng)的效果
*
*/
class showMenuAsyncTask extends AsyncTask<Integer, Integer, Integer>
{
@Override
protected Integer doInBackground(Integer... params)
{
int leftMargin = menuParams.leftMargin;
while (true)
{// 根據(jù)傳入的速度來(lái)滾動(dòng)界面,當(dāng)滾動(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);//休眠一下,肉眼才能看到滾動(dòng)效果
} 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);
}
}
}
三、原理與說(shuō)明
原理 :
1、將ScrollView的觸摸事件注冊(cè)到LinearLayout中去。(LinearLayout中包含了ScrollView,不懂看布局)
2、首先判斷手勢(shì)是想要左右運(yùn)動(dòng)還是上下運(yùn)動(dòng),如果是左右運(yùn)動(dòng),那么LinearLayout得到觸摸事件,即函數(shù)OnTouch返回true;如果想上下運(yùn)動(dòng),即函數(shù)OnTouch返回false;
這里要注意的是,手勢(shì)判斷只一次,什么意思呢?就是說(shuō)你第1次按下,到你一直按著,這中間只判斷一次你的手勢(shì)想要做的運(yùn)動(dòng)。
3、手指離開(kāi)屏幕后,再來(lái)恢復(fù)所有的參數(shù)。

這是為大家分享的源碼,請(qǐng)下載:Android仿UC瀏覽器左右上下滾動(dòng)功能,希望本文所述對(duì)大家學(xué)習(xí)Android軟件編程有所幫助。
- Android自定義View實(shí)現(xiàn)廣告信息上下滾動(dòng)效果
- Android仿天天動(dòng)聽(tīng)歌曲自動(dòng)滾動(dòng)view
- Android高仿京東垂直循環(huán)滾動(dòng)新聞欄
- Android PickerView滾動(dòng)選擇器的使用方法
- Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果
- Android程序開(kāi)發(fā)ListView+Json+異步網(wǎng)絡(luò)圖片加載+滾動(dòng)翻頁(yè)的例子(圖片能緩存,圖片不錯(cuò)亂)
- android開(kāi)發(fā)之橫向滾動(dòng)/豎向滾動(dòng)的ListView(固定列頭)
- android實(shí)現(xiàn)上下滾動(dòng)的TextView
- Android中實(shí)現(xiàn)多行、水平滾動(dòng)的分頁(yè)的Gridview實(shí)例源碼
- Android新聞廣告條滾動(dòng)效果
相關(guān)文章
Android開(kāi)發(fā)之ScrollView的滑動(dòng)監(jiān)聽(tīng)
這篇文章主要介紹了Android開(kāi)發(fā)之ScrollView的滑動(dòng)監(jiān)聽(tīng),非常不錯(cuò),介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
Android應(yīng)用APP自動(dòng)更新功能的代碼實(shí)現(xiàn)
本篇文章主要介紹了Android應(yīng)用APP自動(dòng)更新功能的代碼實(shí)現(xiàn),想要實(shí)現(xiàn)這個(gè)效果的同學(xué)可以了解一下。2016-11-11
Android實(shí)現(xiàn)系統(tǒng)日歷同步日程
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)系統(tǒng)日歷同步日程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
android基本控件ToggleButton&Switch使用指南
本文給大家匯總介紹了android的2個(gè)基本控件ToggleButton和Switch的使用方法,非常的詳細(xì),有需要的小伙伴可以參考下。2016-01-01
Android Compose Column列表不自動(dòng)刷新問(wèn)題
這篇文章主要介紹了Android Compose Column列表數(shù)據(jù)更新列表不刷新的問(wèn)題,總的來(lái)說(shuō)這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路2023-01-01
Mac 下 Android Studio 不打印日志的解決辦法
這篇文章主要介紹了Mac 下 Android Studio 不打印日志的解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10
android 為應(yīng)用程序創(chuàng)建桌面快捷方式技巧分享
手機(jī)裝的軟件過(guò)多,找起來(lái)很不方便,所以在主頁(yè)面有一個(gè)快捷方式的話會(huì)很不錯(cuò)的,本文將介紹如何實(shí)現(xiàn),需要了解跟多的朋友可以參考下2012-12-12
Android?ScrollView實(shí)現(xiàn)滾動(dòng)超過(guò)邊界松手回彈
這篇文章主要為大家詳細(xì)介紹了Android?ScrollView實(shí)現(xiàn)滾動(dòng)超過(guò)邊界松手回彈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android高級(jí)xml布局之輸入框EditText設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了Android高級(jí)xml布局之輸入框EditText設(shè)計(jì),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12

