Android - 条纹进度条实现,调整view宽度仿进度条

栏目: IOS · Android · 发布时间: 5年前

内容简介:相关代码请参阅:美工同学指定了一个进度条样式这斑斓的进度条,如果要自己画实在是劳民伤财。于是请美工切了一张素材(样例)。
  • Android
  • 自定义UI
  • custom view

相关代码请参阅: github.com/RustFisher/…

美工同学指定了一个进度条样式

Android - 条纹进度条实现,调整view宽度仿进度条

这斑斓的进度条,如果要自己画实在是劳民伤财。于是请美工切了一张素材(样例)。

Android - 条纹进度条实现,调整view宽度仿进度条

如果用shape或者.9图片不太好处理这个条纹。转变思路,放置2张图片。一张作为背景(底,bottom),一张作为进度条图片(cover)。 进度改变时,改变上面图片的宽度。

这就要求上面的图片是圆角的。自定义ImageView,调用 canvas.clipPath 来切割画布。

public class RoundCornerImageView extends android.support.v7.widget.AppCompatImageView {
    private float mRadius = 18;
    private Path mClipPath = new Path();
    private RectF mRect = new RectF();

    public RoundCornerImageView(Context context) {
        super(context);
    }

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

    public RoundCornerImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void setRadiusDp(float dp) {
        mRadius = dp2px(dp, getResources());
        postInvalidate();
    }

    public void setRadiusPx(int px) {
        mRadius = px;
        postInvalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mRect.set(0, 0, this.getWidth(), this.getHeight());
        mClipPath.reset(); // remember to reset path
        mClipPath.addRoundRect(mRect, mRadius, mRadius, Path.Direction.CW);
        canvas.clipPath(mClipPath);
        super.onDraw(canvas);
    }

    private float dp2px(float value, Resources resources) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, resources.getDisplayMetrics());
    }
}
复制代码

每次绘制都切割一次圆角。记得调用 Path.reset() 方法。

回到我们要的进度条。布局文件中放置好层叠的图片。

<RelativeLayout
        android:id="@+id/progress_layout"
        android:layout_width="190dp"
        android:layout_height="10dp"
        android:layout_centerInParent="true">

        <ImageView
            android:id="@+id/p_bot_iv"
            android:layout_width="190dp"
            android:layout_height="10dp"
            android:src="@drawable/shape_round_corner_bottom" />

        <com.rustfisher.view.RoundCornerImageView
            android:id="@+id/p_cover_iv"
            android:layout_width="100dp"
            android:layout_height="10dp"
            android:scaleType="centerCrop"
            android:src="@drawable/pic_cover_blue_white" />

    </RelativeLayout>
复制代码

需要在代码中动态地改变cover的宽度;dialog中提供如下方法改变 LayoutParams

public void updatePercent(int percent) {
        mPercent = percent;
        mPercentTv.setText(String.format(Locale.CHINA, "%2d%%", mPercent));
        float percentFloat = mPercent / 100.0f;
        final int ivWidth = mBotIv.getWidth();
        RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) mProgressIv.getLayoutParams();
        int marginEnd = (int) ((1 - percentFloat) * ivWidth);
        lp.width = ivWidth - marginEnd;
        mProgressIv.setLayoutParams(lp);
        mProgressIv.postInvalidate();
    }
复制代码

显示出dialog并传入进度,就可以看到效果了。

这只是实现效果的一种方法,如果有更多的想法,欢迎和我交流~

RustFisher@github


以上所述就是小编给大家介绍的《Android - 条纹进度条实现,调整view宽度仿进度条》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java核心技术·卷 I(原书第10版)

Java核心技术·卷 I(原书第10版)

[美] 凯.S.霍斯特曼(Cay S. Horstmann) / 周立新 等 / 机械工业出版社 / 2016-9 / CNY 119.00

Java领域最有影响力和价值的著作之一,由拥有20多年教学与研究经验的资深Java技术专家撰写(获Jolt大奖),与《Java编程思想》齐名,10余年全球畅销不衰,广受好评。第10版根据Java SE 8全面更新,同时修正了第9版中的不足,系统全面讲解了Java语言的核 心概念、语法、重要特性和开发方法,包含大量案例,实践性强。 一直以来,《Java核心技术》都被认为是面向高级程序员的经典教......一起来看看 《Java核心技术·卷 I(原书第10版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具