Android30问之滑动组件

本文来自http://blog.csdn.net/w324821962,引用麻烦注明出处


    为了让大家有个概念,这里引用了一下网络上的一个全景照片,相信大家对于这样的拍照技巧还是有了解过的,别说你没用过全景。

现在先说明一下几个对象:

  • 镜头
  • 场景
  • 内容

那么转换后,这个图该这么看

所谓镜头就是我们的手机屏幕大小,无论是3.7寸,4.3寸等等。

所谓场景就是我们所有内容的有序排列,无论是横向(ViewPage),还是纵向(ListView)等等。

所谓内容就是显示在镜头内的事物。

按照相对论,虽然实际上我们是移动镜头去捕捉内容从而达到场景的实现。反过来,就是镜头静止,我们移动场景来展现内容。



在android中对于滑动提供了一个Scroll类

如果你使用 Scroller ,流程如下:

1.可以在自定义的布局中,按照需求初始化 Scroller 构造函数。

2.重写onInterceptTouchEvent(MotionEvent ev)方法,看看是否要拦截相关的点击时间。

3.重写onTouchEvent(MotionEvent event)方法,根据触摸屏上的动作使用 computeScroll()以及 scrollTo 和 scrollBy 方法 进行根据手指对布局进行滑动效果。

4.在触摸操作结束(MotionEvent.ACTION_UP)的时候,调用startScroll(int startX, int startY, int dx, int dy, int duration)方法,进行动画自动操作,来完成整个滚动流程。

针对于Scroll的运用如下如所示

而对于ScrollTo和ScrollBy的区别在于你对To和By的理解,ScrollTo 是 到那个位置,ScrollBy 是经过这段位置。



在Android对于手势通过了一个VelocityTracker类。Android.View.VelocityTracker主要用于跟踪触屏事件(flinging和其他gestures事件)的速率。

大体的使用是这样的:

当你需要跟踪触摸屏事件的速度的时候,使用obtain()方法来获得VelocityTracker类的一个实例对象

在onTouchEvent回调函数中,使用addMovement(MotionEvent)函数将当前的移动事件传递给VelocityTracker对象

使用computeCurrentVelocity (int units)函数来计算当前的速度,使用 getXVelocity ()、 getYVelocity ()函数来获得当前的速度

private VelocityTracker mVelocityTracker;
//在onTouchEvent(MotionEvent event)中
if(mVelocityTracker == null){
    mVelocityTracker = new VelocityTracker .obtain();//获得VelocityTracker类实例
}
mVelocityTracker .addMotionEvent(event);//将事件加入到VelocityTracker类实例中
 //判断当ev事件是MotionEvent.ACTION_UP时:计算速率
final VelocityTracker velocityTracker  = mVelocityTracker;
velocityTracker.computerCurrentVelocity(1,(float)0.01);
 velocityTracker.computeCurrentVelocity(1000); //设置units的值为1000,意思为一秒时间内运动了多少个像素 

通过这几天的学习,目前对于滑动的理解暂时只有这么多,如果这篇文章对大家有一点帮助,说明我的学习还是有点成果的。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-29 16:24:34

Android30问之滑动组件的相关文章

webapp之滑动组件(基于zepto)

一直都没有封装过一套移动web下的滑动组件,正巧今天公司没事,就闲下来写了一个半成品,称之为半成品是因为,循环效果暂时还没有添加. ; (function($) { $.fn.slider = function(opts) { this.each(function() { init.call(this, opts); }); return this; }; function init(opts) { var defaults = { cont: this, contWidth: false, /

iSlider手机平台JS滑动组件

iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动.兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.你需要为iSlider先新建好数据: var data = [

从零开始学android<SeekBar滑动组件.二十二.>

拖动条可以由用户自己进行手工的调节,例如:当用户需要调整播放器音量或者是电影的播放进度时都会使用到拖动条,SeekBar类的定义结构如下所示: java.lang.Object ? android.view.View ? android.widget.ProgressBar ? android.widget.AbsSeekBar ? android.widget.SeekBar 常用方法 public SeekBar(Context context) 构造 创建SeekBar类的对象 publi

android滑动组件嵌套一般思路,多任务手势思路,触摸传递思路,【例】listview嵌套viewpager

在android UI开发中,我们经常会遇到这种需求: 两个支持滑动的组件,比如listview嵌套多个listview,listview的item是一个viewpager或gallary?亦或是scrollview嵌套scrollview等等. 一般情况下,你还可能需要支持如下几种功能: ¤ 两层组件都可以滑动 ¤ 不让两个组件同时滑动,或者让两个组件同时滑动并可以自己调节 ¤ 不影响底层view的子view和嵌套view的子view的点击事件 实现上述功能时,我们也经常遇到一些问题: ¤ 点

从零開始学android<SeekBar滑动组件.二十二.>

拖动条能够由用户自己进行手工的调节,比如:当用户须要调整播放器音量或者是电影的播放进度时都会使用到拖动条,SeekBar类的定义结构例如以下所看到的: java.lang.Object ? android.view.View ? android.widget.ProgressBar ? android.widget.AbsSeekBar ? android.widget.SeekBar 经常用法 public SeekBar(Context context) 构造 创建SeekBar类的对象 p

【咸鱼教程】EUI多图片滑动组件ScrollView

先看看实际效果 实现原理1.  ScrollView继承eui.Scroll2.  监听eui.Sroll的CHANGE_START和CHANGE_END事件,      根据鼠标滑动距离,来改变视口viewport.scrollH,达到图片滑动的效果. 使用方法1. 拖动组件到exml上在自定义组件里,拖动ScrollView组件到exml上,将要显示的图片拖动到Scroll的Group下.ScrollView高宽一定要和图片高宽一致. 2. 设置Group的布局和水平间隔比如如果是横着的图片

关于Android30问专栏的前言

前言 上周的时候见一个日报的老大哥,在吃饭闲聊之余,问了一下我你在公司是不是属于那比不可少的人员,我有点不好意思的说是的,因为项目组里做android的人暂时只有我一个.趁这周末的时候,我自己想了一想,自己目前的能力是属于可以好好的运用工具.接口.语法等来完成公司要求的任务,但对于技术的核心,原理什么的,让我详细的描述的话,还是一知半解.这样的结果就体现在了求职面试中,以及就职你所能争取的薪资上.面试过程不能举一反三,不能描述实现过程:薪资被压,加薪提升职位缓慢等等. 在自我批评的过程中,想到了

Slip.js(移动端跟随手指滑动组件,零依赖)

Slip.js可用于移动端滑动banner,移动端整屏滑动等效果,个人觉得用于移动端滑动banner比较好,不会和iScroll.js起冲突,因为它不依赖任何其它的js库. Html: <!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body> ... <div id="container"

【weex开发】vue-swipe 滑动组件的使用

一,vue-swipe简介 vue-swipe 是饿了么团队开发的vue专用的轮播图插件: 可以实现简单的图片和view轮播,可控制动画时长,可限制手动滑动: 简而言之,可以实现轮播,也可以实现ppt样式的带动画的报告. 二,vue-swipe的引入 1,安装 $ npm install vue-swipe 2,引入依赖 import { Swipe, SwipeItem } from 'vue-swipe'; components: { swipe: Swipe, swipeItem: Swi