给ScrollView添加一个横向的进度条

最新推荐文章于 2023-10-31 13:38:52 发布

原创最新推荐文章于 2023-10-31 13:38:52 发布 · 970 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#应用 #体验 #app #android #进度条

知识分享专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用ScrollView实现带有横向进度条滚动页面的方法。通过调整绘制顺序和利用onScrollChanged方法更新进度条位置，成功避免了内部视图覆盖进度条的问题。

转载请注明出处 http://blog.youkuaiyun.com/u011453163/article/details/52166656

今天七夕节，单身汪只能在家撸代码，前几天朋友介绍了一个能推荐好应用的app AppSo，看到了一个还蛮新鲜多体验。一个带有横向进度条的滚动页面。今天用ScrollView简单的实现了这样的效果。
先上效果
这里写图片描述

实现这个效果的想法其实也简单，在ScrollView 绘制完所有内部view的时候再绘制上一个进度矩形。view的绘制我的第一想法是在ondraw里去实现，但发现和我想象的不一样，得到了这样的效果
这里写图片描述
因为View的绘制过程是这样的
/*
* 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)
*/
View是先绘制自己然后在会内部view，所以在ondraw里绘制的话被内部view覆盖。其实知道了view的绘制过程，要实现这样点效果就简单很多了。只要在view绘制完自身和所有内部view之后在绘制我们的进度条就不会被覆盖了。
于是我就把绘制进度条的工作放在了draw方法里

 @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        canvas.drawRect(0,top,progressWidth,top+10,p);
    }
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        top=t;
        progressWidth=top/((float)this.getChildAt(0).getHeight()-this.getHeight())*this.getWidth();
    }

代码的逻辑就不解释啦，代码比较简单。

但是有个地方要注意

@Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        canvas.drawRect(0,top,progressWidth,top+10,p);
    }

这里的执行顺序不能反，还是因为view的绘制过程问题。