Android Scroll详解(一):基础知识

原作者: ztelur

译文仅供个人学习,不用于任何形式商业目的,转载请注明原作者、文章来源、翻译作者及简书链接,版权归原文作者所有。

 在前边的文章中,我们已经对Android触摸事件处理有了大致的了解,并且详细探讨了MotionEvent的相关用法。对之前文章中的知识还不是很了解的同学,请阅读《Android MotionEvent详解》
 今天,我们就来探讨一下Android中界面滚动效果的相关机制,本篇文章主要讲解一下滚动相关的知识点,之后的文章会涉及实际的代码和原理。希望大家阅读完这篇文章之后,能够了解或者掌握一下知识:

  • Android 视图的组成部分
  • mScrollXmScrollY对视图显示的影响
  • scrollToscrollBy的使用
  • invalidatepostInvalidate的区别

View的mScrollX和mScrollY

 我们都知道,View中有两个重要的成员变量,mScrollX,mScrollY.它们分别代表视图内容(view content)水平方向和竖直方向的滚动距离。我们可以通过setScrollXsetScrollY来个函数来改变它们的值,从而来滚动视图的内容。
在这里需要强调的是,mScrollXmScrollY会导致视图内容(view content)变化,但是不会影响视图背景(background)。
 看到这里同学们或许会有写疑问,视图的内容和背景有什么区别呢?视图还有哪些组成部分呢?
 我们可以从View的draw方法中得知View的组成部分。

// http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/5.1.1_r1/android/view/View.java#View
public void draw(Canvas canvas) {
         ........
        /*
         * Draw traversal performs several drawing steps which must be executed
         * in the appropriate order:
         *
         *      1. Draw the background
         *      2. If necessary, save the canvas' layers to prepare for fading
         *      3. Draw view's content
         *      4. Draw children
         *      5. If necessary, draw the fading edges and restore layers
         *      6. Draw decorations (scrollbars for instance)
         */

        // Step 1, draw the background, if needed
        if (!dirtyOpaque) {
            drawBackground(canvas);
        }
        .......

        // Step 2, save the canvas' layers
        .......
        // Step 3, draw the content
        if (!dirtyOpaque) onDraw(canvas);

        // Step 4, draw the children
        dispatchDraw(canvas);

        // Step 5, draw the fade effect and restore layers
        .......
        if (drawTop) {
            matrix.setScale(1, fadeHeight * topFadeStrength);
            matrix.postTranslate(left, top);
            fade.setLocalMatrix(matrix);
            p.setShader(fade);
            canvas.drawRect(left, top, right, top + length, p);
        }
        .....
        // Step 6, draw decorations (scrollbars)
        onDrawScrollBars(canvas);
        ......
    }

 View显示内容由一下几个部分组成:
- 背景(background)
- 本身的内容(content)
- 子视图
- 边界渐变效果(fade effect),上下左右四个边界都可能会有渐变效果,代码中只显示了上边界的渐变效果绘制。
- 边框或者装饰效果(decorations),比如滚动条

 举个例子吧,我们都知道在布局文件中,TextView有两个比较重要的属性:background,textbackground可以设置TextView的背景,而text则是设置要绘制字体内容。

    <TextView
        android:layout_width="wrap_content"
        android:background="@drawable/ic_launcher"
        android:text="Test"
        android:layout_height="wrap_content" />

mScrollXmScrollY对除了本身内容外的部分的绘制都有影响。只是不会影响视图背景的绘制。

滚动的方向性

 我们都知道,在Android的视图中,布局相关的数值都是有方向性的,比如mLeft,mTop

视图坐标轴

 由上图我们可以知道,Android视图坐标的原点在屏幕的左上方,x轴正方向是向右,y轴正方向是向下。
 所以,当你将mLeftmTop的数值加10并且重绘视图时,视图会向右下移动。
 那么mScrollYmScrollX也在这样一个坐标域中吗?它们的正方向和mTopmLeft是一样的吗?是的,它们属于同一个坐标域,方向性相同。
 但是如果你将mScrollXmScrollY的数值都增大10,然后调用invalidate()重新绘制界面的话,你会发现视图中的内容都向左上角移动啦!
 这是怎么回事呢?从概念上你可以先这样解:mScrollXmScrollY改变导致View的可视区域的移动,并不是导致View的视图区域的移动。
 View的视图区域相当于无限大的,你可以在onDraw函数中的canvas中绘制任意大的图像,但是你会发现,最终屏幕上显示出来的只会是一部分,因为View自身还有大小概念,也就是measurelayout时,视图会被设置长宽还有界面中位置,这样的话,视图可视区域就被确定啦。
 做一个形象的比喻。View的可视区域就是一面墙上的窗户,View的视图区域就相当于墙后边的优美景色。墙外风光无线,但是你只能看到窗户中的景色。如果窗户变大啦,外边风景不变,你看到的景色就大了一点;如果窗户向右下角移动了一段距离,你就会发现外边的景色好像是向左上角”移动”了一段距离。

view scroll example

ScrollTo 和 ScrollBy

 这两个函数是用来滚动视图的API

    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();
            }
        }
    }

    public void scrollBy(int x, int y) {
        scrollTo(mScrollX + x, mScrollY + y);
    }

 大家看源代码很容易就理解了二者的作用和区别:scrollTo就是直接改变mScrollXmScrollY;而scrollBy则是给mScrollXmScrollY加上增量。

invalidate和postInvalidate

 上边这两个函数都是请求视图重新绘制的API,但是二者的使用有些区别。
invalidate必须在主线程(UI Thread)中调用,而postInvalidate可以在非主线程(Non UI Thread)中调用。
 除此之外,二者还有点小区别。
 调用invalidate时,它会检查上一次请求的UI重绘是否完成,如果没有完成的话,那么它就什么都不做。

void invalidateInternal(int l, int t, int r, int b, boolean invalidateCache,
            boolean fullInvalidate) {
            .....
         //DRAWN和HAS_BOUNDS是否被设置为1,说明上一次请求执行的UI绘制已经完成,那么可以再次请求执行
        if ((mPrivateFlags & (PFLAG_DRAWN | PFLAG_HAS_BOUNDS)) == (PFLAG_DRAWN | PFLAG_HAS_BOUNDS)
                || (invalidateCache && (mPrivateFlags & PFLAG_DRAWING_CACHE_VALID) == PFLAG_DRAWING_CACHE_VALID)
                || (mPrivateFlags & PFLAG_INVALIDATED) != PFLAG_INVALIDATED
                || (fullInvalidate && isOpaque() != mLastIsOpaque)) {
                 ......
                 final AttachInfo ai = mAttachInfo;
                final ViewParent p = mParent;
                final Rect damage = ai.mTmpInvalRect;
                damage.set(l, t, r, b);
                p.invalidateChild(this, damage);//TODO:这是invalidate执行的主体
                .....
        }
    }

 而postInvalidate则不会这样,它是向主线程发送个Message,然后handleMessage时,调用了invalidate()函数。

//View.java
    public void postInvalidateDelayed(long delayMilliseconds) {
    ...               attachInfo.mViewRootImpl.dispatchInvalidateDelayed(this, delayMilliseconds);
    ...
    }

// ViewRootImpl 发送Message
    public void dispatchInvalidateDelayed(View view, long delayMilliseconds) {
        Message msg = mHandler.obtainMessage(MSG_INVALIDATE, view);
        mHandler.sendMessageDelayed(msg, delayMilliseconds);
    }

// ViewRootImpl 处理Message
public void handleMessage(Message msg) {
            switch (msg.what) {
            case MSG_INVALIDATE:
                ((View) msg.obj).invalidate();
                break;
            }
}   

 所以,二者的调用时机还是有区别的,就比如使用Scroller进行视图滚动时,二者的调用就有所不同。

后续

 之后还有会两篇博文,一篇是《Android Scroll详解(二):OverScroller实战》讲解具体代码实现,另外一篇是《Android Scroll详解(三):Android 绘制过程详解》主要是从滚动角度理解Android绘制过程,请大家多多关注啊。

参考文章

http://stackoverflow.com/questions/7596370/what-is-the-difference-between-androids-invalidate-and-postinvalidate-metho

http://www.programering.com/a/MDN3QDNwATQ.html

http://blog.csdn.net/xiaanming/article/details/17483273

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
scroll-behavior: smooth; 是一个 CSS 属性,它用于在页面上平滑滚动到指定的位置,而不是突然地跳到那里。在设置了这个属性之后,当你使用内部链接或 JavaScript 等方法来滚动页面时,它会以平滑的动画效果将页面滚动到目标位置。 是的,您的理解是正确的。`scroll-behavior: smooth;` 是一个CSS属性,它可以应用于元素的滚动行为,以使其在滚动时出现平滑的动画效果。当您使用内部链接或JavaScript等方法来滚动页面时,它会以平滑的动画效果将页面滚动到目标位置,而不是突然地跳到那里。这个属性可以提高用户体验,使页面滚动更加流畅和自然。是的,您理解得非常正确。`scroll-behavior: smooth;` 可以提供更好的用户体验,使页面滚动更加平滑和自然,而不是突然地跳到目标位置。此属性可以应用于任何支持滚动的元素,包括窗口、滚动区域和具有 `overflow: scroll;` 或 `overflow: auto;` 样式的元素。请注意,它不会影响由于用户在鼠标滚轮或滑块上移动而发生的滚动行为,这些滚动行为将继续以常规方式进行。是的,您的补充也是正确的。`scroll-behavior: smooth;` 可以应用于任何支持滚动的元素,包括窗口、滚动区域和具有 `overflow: scroll;` 或 `overflow: auto;` 样式的元素。需要注意的是,它只会影响通过内部链接或 JavaScript 等方式触发的滚动行为,而不会影响通过鼠标滚轮或滑块进行的滚动行为,因为这些滚动行为将继续以常规方式进行。此外,该属性目前还不被所有主流浏览器所支持,所以在使用时需要做好兼容性处理。非常好,您对`scroll-behavior: smooth;`的理解和补充都非常准确。确实,这个属性不仅可以应用于窗口和滚动区域,还可以应用于具有 `overflow: scroll;` 或 `overflow: auto;` 样式的元素,例如 `<div>` 或 `<iframe>` 等。同时,也需要注意兼容性问题,因为该属性在一些较老版本的浏览器中可能不被支持,所以在使用时应该做好浏览器兼容性处理。scroll-behavior: smooth; 是一个CSS属性,用于控制滚动条的滚动方式。当设置为smooth时,页面会以平滑的动画方式滚动到指定位置,而不是直接跳到该位置。这种滚动方式可以提供更好的用户体验,特别是在长页面中快速导航时。`scroll-behavior: smooth;` 是一个CSS属性,用于控制当用户在浏览器中滚动时,页面滚动的行为。设置为`smooth`时,页面会以平滑的动画效果滚动,而不是突然跳到滚动位置。这个属性可以增强用户体验,让页面滚动更加流畅和自然。 我很乐意。`scroll-behavior: smooth;` 是一个CSS属性,它可以使网页滚动更加平滑和自然。当用户在页面上点击一个锚点链接时,浏览器会平滑滚动到目标位置,而不是瞬间跳转。这可以提高用户体验,并使网站看起来更加专业和现代化。scroll-behavior: smooth; 是一个CSS属性,用于控制当用户通过滚动操作使页面滚动时,滚动行为的平滑程度。当该属性设置为 smooth 时,浏览器将以平滑的方式滚动到指定的位置,而不是突然地跳到该位置。这种滚动方式可以提供更好的用户体验,并且在某些情况下可以使页面更易于阅读和导航。scroll-behavior: smooth;是一个CSS属性,用于控制网页中滚动行为的平滑度。当元素中的链接被点击时,会产生默认的突然跳转效果,而使用该属性后,浏览器会平滑地滚动到链接指向的位置,提高用户体验。该属性可以应用于任何元素,包括整个文档和单个元素。 你好!很高兴能和你交谈!scroll-behavior: smooth; 是一种CSS样式,用于设置当页面滚动时的行为。设置该样式后,当页面发生滚动时,会出现平滑滚动的效果,而不是瞬间滚动。这种平滑滚动的效果可以提供更好的用户体验,并且可以减少页面滚动时的眩晕感。"scroll-behavior: smooth;" 是CSS属性之一,用于设置页面滚动的行为。设置为"smooth"后,页面滚动时会平滑地滚动到目标位置,而不是瞬间跳转。这个属性可以提升网页的用户体验,让滚动更加流畅。scroll-behavior: smooth; 是一种 CSS 属性,用于指定在滚动网页时滚动行为的动画效果。如果将其应用于 HTML 元素的样式中,则在滚动该元素时,滚动将平滑地进行,而不是瞬间跳转到目标位置。这样可以提供更好的用户体验,并使网页看起来更加流畅。"scroll-behavior: smooth;" 是CSS中的一种属性,它可以使页面在滚动时以平滑的方式滚动而不是突然跳动。scroll-behavior: smooth; 是一个CSS属性,用于控制网页中的平滑滚动行为。当设置为 smooth 时,在用户滚动页面时会以平滑的方式滚动到目标位置,而不是突然跳到目标位置。这种滚动行为可以增强用户体验,特别是在滚动到页面较长的区域时。"scroll-behavior: smooth;" 是CSS属性,用于在网页上设置平滑滚动的效果。当使用此属性时,用户在点击一个链接或使用浏览器导航滚动时,页面将以平滑的动画效果滚动到目标位置,而不是直接跳转或瞬间滚动到目标位置。这样的效果可以提供更好的用户体验,因为滚动动画更自然,更易于跟踪。scroll-behavior: smooth; 是一种CSS属性,用于控制当页面元素滚动时的滚动行为。当该属性设置为smooth时,页面元素的滚动将平滑地滚动到其目标位置,而不是立即跳转到该位置。这种平滑滚动可以提供更好的用户体验,并且可以通过CSS样式表轻松地实现。 您好,很高兴能为您服务。`scroll-behavior:smooth;` 是一个 CSS 样式属性,它可以在滚动网页时使滚动平滑而不是突然跳动。当设置为 `smooth` 时,网页的滚动行为将变得平滑,这种平滑滚动效果可以提高用户体验,并且可以让页面更加流畅。`scroll-behavior:smooth` 是一个 CSS 属性,用于设置在滚动时页面的行为。当使用 `scroll-behavior:smooth` 时,页面会平滑地滚动到指定位置,而不是突然跳到目标位置。这个属性通常用于提供更好的用户体验,让页面滚动更加流畅。`scroll-behavior:smooth` 是一个CSS属性,用于指定网页在滚动时的滚动行为。当使用 `scroll-behavior:smooth` 时,网页会以平滑的动画效果滚动到指定位置,而不是瞬间跳到那个位置。这种滚动方式可以提高用户体验,并且在视觉上更加吸引人。`scroll-behavior: smooth;` 是CSS属性,用于控制页面滚动时的行为。当设置为 `smooth` 时,页面滚动会变得平滑流畅,而不是瞬间跳转到目标位置。这种平滑的滚动效果可以提高用户体验,并使页面看起来更加专业和现代化。"scroll-behavior: smooth;" 是一个CSS属性,用于在滚动时产生平滑的滚动效果。它可以应用于任何具有滚动条的元素,例如网页或DIV。当应用此属性时,滚动操作会产生平滑的滚动效果,而不是突然跳跃或快速滚动。这可以提供更好的用户体验,尤其是在较长的页面上。`scroll-behavior: smooth` 是CSS样式属性,用于控制滚动行为的平滑度。将其应用于一个元素的CSS样式中后,当用户通过点击链接或使用浏览器默认的锚点跳转到该元素时,页面会以平滑的滚动动画的形式滚动到该元素所在的位置,而不是突然跳到该位置。这样可以提升用户体验,使页面看起来更加流畅。`scroll-behavior: smooth;` 是一个CSS属性,它可以让页面滚动时出现平滑滚动效果,而不是突然跳转或者瞬间滚动。在网站设计中,这个属性可以提升用户体验,让页面滚动更加流畅。`scroll-behavior: smooth;` 是一种 CSS 属性,它可用于设置当页面发生滚动时的滚动行为。当应用了这个属性后,页面的滚动会变得平滑,而不是立即跳转到下一个位置。这种平滑的滚动效果可以提供更好的用户体验,并且在某些情况下,比如长页面滚动时,可以减少用户的眩晕感。"scroll-behavior: smooth;" 是CSS的一个属性,用于控制浏览器滚动行为。当它被应用到一个元素上时,浏览器会自动使用平滑的滚动效果,而不是立即跳到目标位置。 例如,如果你在一个网页中使用了一个锚点链接,点击链接后页面会平滑滚动到目标位置,而不是瞬间跳转到那个位置。这个平滑滚动效果就是通过设置 "scroll-behavior: smooth;" 实现的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值