Android官方开发文档Training系列课程中文版:创建自定义View之View的交互

简介: 写在前面的话:这一章很有价值,想要提升安卓知识的一定要读一读。不做安卓的也可以得到其它方面的提升。原文地址:http://android.xsoftlab.net/training/custom-views/making-interactive.htmlUI的绘制只是自定义View的一部分。

写在前面的话:这一章很有价值,想要提升安卓知识的一定要读一读。不做安卓的也可以得到其它方面的提升。

原文地址:http://android.xsoftlab.net/training/custom-views/making-interactive.html

UI的绘制只是自定义View的一部分。你还需要使View可以以一种接近真实世界的反馈方式来响应用户的输入事件。虚拟世界中的对象应该总是以真实世界中对象的行为方式来行动。比如说,图像不应该从某处突然出现或消失,因为真实世界中的图像总是从一个地方移动到另一个地方的。

用户还应该在UI界面上感知到一些细微的感觉。最好的反馈就是模仿真实世界的微妙行为。举个栗子,用户在快速滑动UI对象时,应该在开始时感觉到延迟的摩擦力,在滑出去后还应当继续保持惯性滑动。

这节课将会演示如何使用Android的框架特性为自定义View添加这些真实世界的行为。

处理输入手势

与其它UI框架很接近,Android同样支持输入事件模型。用户的行为会被转换为一种会触发回调的事件,你可以通过重写这些回调方法来决定如何对这些事件做出响应。Android中最为常见的输入事件是touch,它会触发onTouchEvent(android.view.MotionEvent)。通过重写这个方法来处理一些事件:

   @Override
   public boolean onTouchEvent(MotionEvent event) {
    return super.onTouchEvent(event);
   }

触摸事件本身并不是特别有用处。触摸UI定义了一些交互手势,比如双击、下拉、上推、快速滑动以及缩放等等。为了将原始触摸事件转换为手势,Android提供了GestureDetector

构造GestureDetector需要传递一个GestureDetector.OnGestureListener的实现类作为参数。如果你只是需要处理几个手势,你可以继承GestureDetector.SimpleOnGestureListener。下面的代码继承了这个接口,并重写了它的onDown(MotionEvent)方法。

class mListener extends GestureDetector.SimpleOnGestureListener {
   @Override
   public boolean onDown(MotionEvent e) {
       return true;
   }
}
mDetector = new GestureDetector(PieChart.this.getContext(), new mListener());

无论你是否使用GestureDetector.SimpleOnGestureListener接口,你都需要实现一个返回true的onDown()方法。这一步是必须的,因为所有的手势都是从onDown()方法开始的。如果你在onDown()方法中返回了false,那么系统会认为你想忽略这次事件,并且其它的相关方法都不会被调用。如果你真的想要忽略整个手势事件,那么在onDown()方法中返回false是唯一的一种方式。一旦实现了GestureDetector.OnGestureListener接口,并创建了GestureDetector的实例,则可以使用GestureDetector对象来与在onTouchEvent()中接收到的触摸事件进行交互。

@Override
public boolean onTouchEvent(MotionEvent event) {
   boolean result = mDetector.onTouchEvent(event);
   if (!result) {
       if (event.getAction() == MotionEvent.ACTION_UP) {
           stopScrolling();
           result = true;
       }
   }
   return result;
}

当传给onTouchEvent()方法一个不能识别的手势时,它会返回false,这样你就可以运行自定义的手势识别代码了。

创建物理模拟手势

手势是用来控制触摸屏设备的一种强大方式,除非它们提供了物理模拟效果,否则它们可能是违反直觉的、难以记住的。一个好的示例就是飞速滑动手势:当用户快速的在屏幕上滑动手指时,手指突然离开了屏幕,就会触发这种手势。如果UI在同一方向上继续滑动然后慢慢的减速,这时就会给用户造成一种感觉:仿佛在操作一个飞轮一样。

不管怎样,模拟飞轮这种感觉并不是没有价值的。为了正确模拟这种感觉,需要很多的物理及数学运算。幸运的是,Android为此提供了辅助类。Scroller是一个专门用来处理这种飞轮感觉手势的辅助类。

为了启动滑动,需要以一个初始速度值及其它相关速度参数调用fling()。有关速度值,你可以通过GestureDetector计算得到。

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
   mScroller.fling(currentX, currentY, velocityX / SCALE, velocityY / SCALE, minX, minY, maxX, maxY);
   postInvalidate();
}

Note: 尽管GestureDetector计算到的这个速度值在物理上很精确,但是很多开发者感觉使用这个值来启动滑动还是太快了。通常会在4到8之间取一个系数来减小x和y。

先调用fling()为滑动手势设置物理模型。然后你需要定期调用Scroller.computeScrollOffset()来更新ScrollercomputeScrollOffset()通过读取当前的时间以及使用物理模型来计算x及y的位置来更新Scroller对象的内部状态。通过调用getCurrX()getCurrY()来接收这些值。

很多View将Scroller对象的x,y的位置值直接传递给scrollTo()。饼图示例在这里有些小小的不同:它使用当前滑动的y的位置来设置饼图的旋转角度:

if (!mScroller.isFinished()) {
    mScroller.computeScrollOffset();
    setPieRotation(mScroller.getCurrY());
}

Scroller会为你计算滑动的位置,但是它不会自动的将这些值应用到你的View中。为了使View的滑动效果更佳平滑,获得并应用这些值是需要你去做的。有两种方式可以实现:

在饼图示例中使用了第二种方案。这项技术在设置上稍微的有些复杂,但是它的工作过程与动画系统更为接近,并且不会请求不必要的更新。它的缺点是在API 11之前ValueAnimator并不适用,所以这项技术在Android 3.0之前不可以使用。

Note: ValueAnimator在API 11之前并不可用,但是你仍然还可以在API 11之前使用。你只需要确保在运行时检查当前的API等级,并且在等级低于11时不调用View动画就可以。

       mScroller = new Scroller(getContext(), null, true);
       mScrollAnimator = ValueAnimator.ofFloat(0,1);
       mScrollAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
           @Override
           public void onAnimationUpdate(ValueAnimator valueAnimator) {
               if (!mScroller.isFinished()) {
                   mScroller.computeScrollOffset();
                   setPieRotation(mScroller.getCurrY());
               } else {
                   mScrollAnimator.cancel();
                   onScrollFinished();
               }
           }
       });

使滑动过程更流畅

用户不希望状态之间的过渡发生卡顿。所以UI元素的淡入淡出取代了闪现与消失。动作的平滑过渡取代了突然的启动与停止。Android 3.0中出现的property animation framework使平滑转场更加简便。

每次属性的变更都会影响View的外观,所以不要直接更改它们的属性。相反,可以使用ValueAnimator来做出变更。在下面的示例中,修改当前所选择的扇形图会使整个饼图发生旋转,所以选择的这个点在饼图中看起来是居正中的。ValueAnimator更改旋转用了数百毫秒的时间。

mAutoCenterAnimator = ObjectAnimator.ofInt(PieChart.this, "PieRotation", 0);
mAutoCenterAnimator.setIntValues(targetAngle);
mAutoCenterAnimator.setDuration(AUTOCENTER_ANIM_DURATION);
mAutoCenterAnimator.start();

如果你想更改View的基础属性,那么这项事情就更容易了,因为View有一个内置的View属性动画框架ViewPropertyAnimator,它专门用来同时作用多个属性,比如:

animate().rotation(targetAngle).setDuration(ANIM_DURATION).start();
目录
相关文章
|
6月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
506 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
6月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
106 0
|
6月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
304 65
Android自定义view之网易云推荐歌单界面
|
6月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
629 84
|
6月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
170 3
|
6月前
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
118 0
Android自定义view之围棋动画(化繁为简)
|
6月前
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景,到创建固定棋子及动态棋子,最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长,并优化视觉效果,如添加渐变色让白子更明显。最终效果既可作为围棋动画展示,也可用作加载等待动画。代码完整,适合进阶开发者学习参考。
140 0
|
25天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
161 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
224 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
480 3
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

热门文章

最新文章