Android仿UC瀏覽器左右上下滾動功能
本文要解決在側(cè)滑菜單右邊加個文本框,并能實現(xiàn)文本的上下滑動和菜單的左右滾動。這里推薦可以好好看看android的觸摸事件的分發(fā)機制,這里我就不詳細講了,我只講講這個應用。要實現(xiàn)的功能就像UC瀏覽器(或其它手機瀏覽器)的左右滾動,切換網(wǎng)頁,上下滾動,拖動內(nèi)容。
本文的效果:
一、功能要求與實現(xiàn)
1、功能要求:
(1)手指一開始按著屏幕左右移動時,只能左右滾動菜單,如果這時手指一直按著,而且上下移動了,那么菜單顯示部分保持不變,但文本框也不上下移動!
(2)手指一開始按著屏幕上下移動時,只能上下滾動文本框,如果這時手指一直按著,而且左右移動了,那么文本框顯示部分保持不變,但菜單也不左右移動!
2、初步實現(xiàn):
左邊的菜單項增加一個listview,為右邊的內(nèi)容項添加一個textview,并且為了能讓它實現(xiàn)上下滾動的功能,給textview加了個scrollview。
這種效果肯定是不對的,你看,我們手指上下禾移動文本時,如果還左右移動了,菜單也顯示出來了。
3、修改實現(xiàn)
這時我就想從觸摸事件的分發(fā)入手,這里因為我是把ScrollView的觸摸事件注冊到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" > <!-- 添加一個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;//內(nèi)容項 private LayoutParams menuParams;//菜單項目的參數(shù) private LayoutParams contentParams;//內(nèi)容項目的參數(shù)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;//菜單列表的內(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è)置其相應的參數(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ù)類型和運算符", "第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綁定適配器 //啟動列表點擊監(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進行滑動才可以顯示和隱藏左側(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)//當前想滾動顯示文本 return false; xMove=event.getRawX(); yMove=event.getRawY(); if(menuIsShow){ isScrollToShowMenu(); return true; } if(!oneFucction) { oneFucction=true; //這個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時才能把觸摸事件再傳給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(); } } } /** *想要顯示菜單,當向右移動距離大于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); } /** * 創(chuàng)建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) {// 根據(jù)傳入的速度來滾動界面,當滾動到達左邊界或右邊界時,跳出循環(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、首先判斷手勢是想要左右運動還是上下運動,如果是左右運動,那么LinearLayout得到觸摸事件,即函數(shù)OnTouch返回true;如果想上下運動,即函數(shù)OnTouch返回false;
這里要注意的是,手勢判斷只一次,什么意思呢?就是說你第1次按下,到你一直按著,這中間只判斷一次你的手勢想要做的運動。
3、手指離開屏幕后,再來恢復所有的參數(shù)。
這是為大家分享的源碼,請下載:Android仿UC瀏覽器左右上下滾動功能,希望本文所述對大家學習Android軟件編程有所幫助。
- Android自定義View實現(xiàn)廣告信息上下滾動效果
- Android仿天天動聽歌曲自動滾動view
- Android高仿京東垂直循環(huán)滾動新聞欄
- Android PickerView滾動選擇器的使用方法
- Android仿淘寶商品瀏覽界面圖片滾動效果
- Android程序開發(fā)ListView+Json+異步網(wǎng)絡(luò)圖片加載+滾動翻頁的例子(圖片能緩存,圖片不錯亂)
- android開發(fā)之橫向滾動/豎向滾動的ListView(固定列頭)
- android實現(xiàn)上下滾動的TextView
- Android中實現(xiàn)多行、水平滾動的分頁的Gridview實例源碼
- Android新聞廣告條滾動效果
相關(guān)文章
Android開發(fā)之ScrollView的滑動監(jiān)聽
這篇文章主要介紹了Android開發(fā)之ScrollView的滑動監(jiān)聽,非常不錯,介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下2016-08-08android基本控件ToggleButton&Switch使用指南
本文給大家匯總介紹了android的2個基本控件ToggleButton和Switch的使用方法,非常的詳細,有需要的小伙伴可以參考下。2016-01-01Android Compose Column列表不自動刷新問題
這篇文章主要介紹了Android Compose Column列表數(shù)據(jù)更新列表不刷新的問題,總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01Mac 下 Android Studio 不打印日志的解決辦法
這篇文章主要介紹了Mac 下 Android Studio 不打印日志的解決辦法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10android 為應用程序創(chuàng)建桌面快捷方式技巧分享
手機裝的軟件過多,找起來很不方便,所以在主頁面有一個快捷方式的話會很不錯的,本文將介紹如何實現(xiàn),需要了解跟多的朋友可以參考下2012-12-12Android?ScrollView實現(xiàn)滾動超過邊界松手回彈
這篇文章主要為大家詳細介紹了Android?ScrollView實現(xiàn)滾動超過邊界松手回彈,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04Android高級xml布局之輸入框EditText設(shè)計
這篇文章主要為大家詳細介紹了Android高級xml布局之輸入框EditText設(shè)計,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12