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软件编程有所帮助。

时间: 2024-09-28 08:13:35

Android仿UC浏览器左右上下滚动功能的相关文章

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

本文要解决在侧滑菜单右边加个文本框,并能实现文本的上下滑动和菜单的左右滚动.这里推荐可以好好看看android的触摸事件的分发机制,这里我就不详细讲了,我只讲讲这个应用.要实现的功能就像UC浏览器(或其它手机浏览器)的左右滚动,切换网页,上下滚动,拖动内容. 本文的效果:   一.功能要求与实现1.功能要求:(1)手指一开始按着屏幕左右移动时,只能左右滚动菜单,如果这时手指一直按着,而且上下移动了,那么菜单显示部分保持不变,但文本框也不上下移动!                       (2

Android仿天天动听歌曲自动滚动view_Android

最近项目中要做一个类似天天动听歌曲自动滚动行数的效果.首先自己想了下Android要滚动的那就是scroller类或者scrollto.scrollby结合了,或者view.layout()方法,或者使用动画.但是要循环滚动,貌似这些到最后一行滚动到第一行都有往回滚的效果,都不是很好的解决方法.怎么会忘记了可以绘制事件万物的的canvas呢.好吧,既然找到了,那就用这个方案吧!但是天天动听歌曲还有一个手动滑动的效果,貌似这篇文章没写.既然这样,那就自己来写下吧!实现之前还是先看下天天动听的效果:

UC:Android版UC浏览器月活跃用户数破1亿

[TechWeb报道]11月5日消息,移动浏览器厂商UC优视今日宣布,Android版UC浏览器月活跃用户数破1亿. UC优视公司董事长兼CEO俞永福认为,"在以Android为代表的新一代智能手机兴起之时,UC面临众多新兴浏览器厂商的挑战,而对手几乎无一例外,都选择了Android平台作为突破口.而UC在Android赛跑中率先撞线1亿用户,U3内核居功至伟." 据了解,U3内核在四年前正式立项,在2011年正式发布和部署在UC浏览器的8.0 For Android版本和iPad版本

Android仿天天动听歌曲自动滚动view

最近项目中要做一个类似天天动听歌曲自动滚动行数的效果.首先自己想了下Android要滚动的那就是scroller类或者scrollto.scrollby结合了,或者view.layout()方法,或者使用动画.但是要循环滚动,貌似这些到最后一行滚动到第一行都有往回滚的效果,都不是很好的解决方法.怎么会忘记了可以绘制事件万物的的canvas呢.好吧,既然找到了,那就用这个方案吧!但是天天动听歌曲还有一个手动滑动的效果,貌似这篇文章没写.既然这样,那就自己来写下吧!实现之前还是先看下天天动听的效果:

Android仿微信通讯录滑动快速定位功能

先给大家展示下效果图: 实现代码如下: 下面简单说下实现原理. public class IndexBar extends LinearLayout implements View.OnTouchListener { private static final String[] INDEXES = new String[]{"#", "A", "B", "C", "D", "E", &qu

Android编程实现TextView垂直自动滚动功能【附demo源码下载】

本文实例讲述了Android编程实现TextView垂直自动滚动功能.分享给大家供大家参考,具体如下: 在做android 应用的开发的时候,横向滚动或者要做出跑马灯的效果很简单,textview本身的属性就支持,只要设置准确就会滚动,开发起来比较简单,但是textview 不支持垂直滚动,那么垂直滚动就需要自己来实现了,很多网友提供的垂直滚 动方案都是千篇一律,使用ScrollView来进行滚动,但是都不完美,做起来有些别扭.有一位网友给出的歌词的滚动思路明确,能从根本上解决问题,因此我实现的

Android仿微信发送语音消息的功能及示例代码

微信的发送语音是有一个向上取消的,我们使用onTouchListener来监听手势,然后做出相应的操作就行了. 直接上代码: //语音操作对象 private MediaPlayer mPlayer = null; private MediaRecorder mRecorder = null; //语音文件保存路径 private String FileName = null; FileName = Environment.getExternalStorageDirectory().getAbs

Android仿QQ空间动态界面分享功能

先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 和 模糊搜索,反复快速滑动仍然非常流畅. 缓存机制使得数据可在启动界面后瞬间加载完成. 动态详情界面MomentActivity支持 (取消)点赞.(删除)评论.点击姓名跳到个人详情 等. 只有1张图片时图片放大显示,超过1张则按九宫格显示. 用到的CommentContainerView和Mom

Android项目仿UC浏览器和360手机卫士消息常驻栏(通知栏)_Android

之前网上看了下自定义消息栏,通知栏,了解到了Notification这个控件,发现UC浏览器等都是这种类型,今天写个demo实现下,如图: 其中每个按钮都有不同的功能,代码如下: package com.example.textwsjdemo; import android.app.Activity; import android.app.Notification; import android.app.NotificationManager; import android.app.Pendin