Android开发艺术笔记 | View的滑动(三种普遍实现方式及其对比、实战)

滑动在Android开发中具有很重要的作用,
不管一些滑动效果多么绚丽,
归根结底,它们都是由不同的滑动外加一些特效所组成的。
因此,掌握滑动的方法是实现绚丽的自定义控件的基础。

  • 常见的实现View的滑动的三种方式:
    第一种是通过View本身提供的scrollTo/scrollBy方法来实现滑动;
    第二种是通过动画给View施加平移效果来实现滑动;
    第三种是通过改变View的LayoutParams使得View重新布局从而实现滑动。

The 1. 使用scrollTo/scrollBy

View提供了专门的方法来实现滑动
scrollTo()scrollBy(),这两个方法的实现如下:

    /**
      * Set the scrolled position of your view. This will cause a call to
      * {@link #onScrollChanged(int,int,int,int)} and the view will be
      * invalidated.
      * @param x the x position to scroll to
      * @param y the y position to scroll to
      */
    public void scrollTo(int x,int y) {
        if (mScrollX != x || mScrollY != y) {
                int oldX = mScrollX;
                int oldY = mScrollY;
                mScrollX = x;
                mScrollY = y;
                invalidateParentCaches();
                onScrollChanged(mScrollX,mScrollY,oldX,oldY);
                if (!awakenScrollBars()) {
                        postInvalidateOnAnimation();
                }
        }
    }
     /**
      * Move the scrolled position of your view. This will cause a call to
      * {@link #onScrollChanged(int,int,int,int)} and the view will be
      * invalidated.
      * @param x the amount of pixels to scroll by horizontally
      * @param y the amount of pixels to scroll by vertically
      */
    public void scrollBy(int x,int y) {
        scrollTo(mScrollX + x,mScrollY + y);
    }
  • 从以上源码可看出,
    scrollBy实际上也是调用了scrollTo方法,
    它实现了基于当前位置相对滑动
    scrollTo则实现了基于所传递参数绝对滑动

  • 这里要注意
    滑动过程中View内部的两个属性mScrollXmScrollY改变规则
    这两个属性可以通过getScrollXgetScrollY方法分别得到。

  • 在滑动过程中,
    mScrollX的值总是
    等于View左边缘View内容左边缘水平方向的距离,
    (即 mScrollX = View左边缘的X值 - View内容左边缘的X值
    mScrollY的值总是
    等于View上边缘View内容上边缘竖直方向的距离。
    (即 mScrollY = View上边缘的Y值 - View内容上边缘的Y值

  • View边缘是指View的位置,由四个顶点组成,
    View内容边缘是指View中的内容边缘
    上一篇笔记(事件体系) 说了,顶点即View的位置信息,
    不改变View的布局参数LayoutParams,它们的值便不会变动!!!
    所以,这里的View边缘
    即View在绘制时layout阶段确定了的原始布局位置!!!】

  • scrollToscrollBy只能改变View内容的位置
    即,本方式实现的是View 内容的滑动!!!
    而不能改变View 本身在布局中的位置顶点坐标!!!
    也就是说,不管怎么滑动,
    不可能当前View滑动到附近View所在的区域

  • mScrollXmScrollY的单位为像素
    并且当View左边缘在View内容左边缘的右边时,mScrollX为正值,
    反之为负值;
    当View上边缘在View内容上边缘的下边时,mScrollY为正值,
    反之为负值。
    换句话说,
    如果从左向右滑动,那么mScrollX负值,反之为正值
    如果从上往下滑动,那么mScrollY负值,反之为正值

    绿色边框代表View在屏幕上对应的矩形区域,灰色阴影代表View的内容

The 2. 使用动画

  • 通过动画可以让一个View进行平移,而平移就是一种滑动。

  • 主要是操作ViewtranslationXtranslationY属性,
    既可以采用传统的View动画,也可以采用属性动画

  • 如果采用属性动画的话,
    为了能够兼容3.0以下的版本,需要采用开源动画库nineoldandroids(http://nineoldandroids.com/)。

  • View动画实例,在100ms内将一个View从原始位置向右下角移动100个像素:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:fillAfter="true"
         android:zAdjustment="normal" >
         <translate
             android:duration="100"
             android:fromXDelta="0"
             android:fromYDelta="0"
             android:interpolator="@android:anim/linear_interpolator"
             android:toXDelta="100"
             android:toYDelta="100" />
    </set>
  • 属性动画示例,将一个View在100ms内从原始位置向右平移100像素。
ObjectAnimator.ofFloat(targetView,"translationX",0,100).setDuration(100).start();
  • 注意,

    • View动画是对View的影像做操作,
      并不能真正改变View的位置参数,包括宽/高,
      并且如果希望动画后的状态得以保留还必须将fillAfter属性设置为true,
      否则动画完成后动画结果会消失。

    • 使用属性动画并不会存在上述问题,
      但是在Android 3.0以下无法使用属性动画,
      需使用动画兼容库nineoldandroids来实现属性动画,
      不过,
      在Android 3.0以下的手机上通过nineoldandroids来实现的属性动画
      本质上仍然是View动画。

  • 同时View动画还有一个很严重的问题,
    比如我们通过View动画将一个Button向右移动100px,
    并且这个View设置的有单击事件,
    这样子单击新位置无法触发onClick事件,
    而单击原始位置仍然可以触发onClick事件,
    尽管Button已经不在原始位置了。

    它的位置信息(四个顶点和宽/高)并不会随着动画而改变,
    因此在系统眼里,这个Button并没有发生任何改变,
    它的真身仍然在原始位置,
    在新位置上只是View的影像而已。


    基于这一点,
    我们不能简单地给一个View做平移动画
    并且还希望它在新位置继续触发事件。

The 3. 改变布局参数

  • 改变布局参数,即改变LayoutParams,使View重新布局
    比如我们想把一个Button向右平移100px,
    我们只需要将这个Button的LayoutParams里的marginLeft参数的值增加100px即可,
    示例代码:
MarginLayoutParams params = (MarginLayoutParams)mButton1.getLayoutParams();
params.width += 100;
params.leftMargin += 100;
mButton1.requestLayout();//或mButton1.setLayoutParams(params);

各种滑动效果实现方式的对比

The 1. scrollTo/scrollBy:

  • View提供的原生方法,专门用于View的滑动,
  • 操作简单方便,
  • 不影响内部元素的单击事件。
  • 缺点:它只能滑动View的内容,并不能滑动View本身。

The 2. 动画:

  • 使用动画实现View的滑动,要分情况。
    • Android 3.0以上并采用属性动画的方式,
      没有明显的缺点;
      适用于需具有交互性的View;

    • 使用View动画或者在Android 3.0以下使用属性动画,
      则均不能改变View本身的属性。
      适用于View不需要响应交互的情况,
      需要交互则不太适合。

  • 优点:一些复杂的效果必须要通过动画才能实现。

The 3. 改变布局参数

  • 适用于需具有交互性的View;
  • 缺点:操作稍微复杂;

实战

  • 一三种方式,
    我们使用自定义View的方式来实现View的滑动,
    主要是配置一下背景颜色,以及在onTouchEvent()中做一下事件处理;
    这里贴上关键代码,详细请见GitHub项目地址

The 1. scrollTo/scrollBy

public class DragView4 extends View {

    private int lastX;
    private int lastY;

    public DragView4(Context context) {
        super(context);
        ininView();
    }

    public DragView4(Context context, AttributeSet attrs) {
        super(context, attrs);
        ininView();
    }

    public DragView4(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        ininView();
    }

    private void ininView() {
        setBackgroundColor(Color.BLUE);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = (int) event.getX();
                lastY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = x - lastX;
                int offsetY = y - lastY;
                ((View) getParent()).scrollBy(-offsetX, -offsetY);
                break;
        }
        return true;
    }
}

The 2. 动画

  • 以上已经对View动画、属性动画分别给过例子;

或参考以下博客:

The 3. 改变布局参数

public class DragView3 extends View {

    private int lastX;
    private int lastY;

    public DragView3(Context context) {
        super(context);
        ininView();
    }
    public DragView3(Context context, AttributeSet attrs) {
        super(context, attrs);
        ininView();
    }
    public DragView3(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        ininView();
    }

    private void ininView() {
        setBackgroundColor(Color.BLUE);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 记录触摸点坐标
                lastX = (int) event.getX();
                lastY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                // 计算偏移量
                int offsetX = x - lastX;
                int offsetY = y - lastY;

                ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) getLayoutParams();
//                LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
                layoutParams.leftMargin = getLeft() + offsetX;
                layoutParams.topMargin = getTop() + offsetY;
                setLayoutParams(layoutParams);
                break;
        }
        return true;
    }
}







参考:

  • 《Android开发艺术探索》
  • 《Android群英传》
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266