前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Android UI】绘制圆角矩形进度条 ① ( 像素值转化 dp -> px | Paint 标志位设置 | Paint 画笔线帽样式设置 | Paint 画笔线段连接处样式设置 )

【Android UI】绘制圆角矩形进度条 ① ( 像素值转化 dp -> px | Paint 标志位设置 | Paint 画笔线帽样式设置 | Paint 画笔线段连接处样式设置 )

作者头像
韩曙亮
发布2023-03-30 16:02:55
7910
发布2023-03-30 16:02:55
举报
文章被收录于专栏:韩曙亮的移动开发专栏

文章目录

PathMeasure 官方文档 : https://developer.android.google.cn/reference/kotlin/android/graphics/PathMeasure

一、绘制圆角矩形进度条


绘制圆角矩形进度条 , 默认进度条框是灰色 , 进度条走过的区间是黑色的 ;

二、像素值转化 dp -> px


在自定义组件中涉及到像素值问题 , 为了保证在所有的设备中显示相同的效果 , 一般情况下推荐使用 dp 作为计量单位 , 如这里将进度条的宽度设置为 10 dp , 这个宽度在不同屏幕像素密度的手机中的实际 px 像素值是不同的 .

代码语言:javascript
复制
    /**
     * 将 dp 屏幕像素 值转为 px 真实像素值, 目的是使用 dp 为单位在手机中显示相同的效果
     * @param dp
     * @return
     */
    public float dp2px(float dp){
        return TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                dp,
                getResources().getDisplayMetrics());
    }

如果要设置绘制的线宽度时 , 使用如下设置 :

代码语言:javascript
复制
mReachedPaint.setStrokeWidth(dp2px(10));

三、Paint 标志位设置


Paint 可以在创建实例对象时设置标志位 , 这里启用抗锯齿 , 闪烁抖动设置 ;

代码语言:javascript
复制
        // 抗锯齿 : Paint.ANTI_ALIAS_FLAG
        // 闪烁时启动抖动 : Paint.DITHER_FLAG
        mReachedPaint=new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

Paint 可设置的标志位如下 :

代码语言:javascript
复制
    /**
     * Paint flag that enables antialiasing when drawing.
     *
     * <p>Enabling this flag will cause all draw operations that support
     * antialiasing to use it.</p>
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int ANTI_ALIAS_FLAG     = 0x01;
    /**
     * Paint flag that enables bilinear sampling on scaled bitmaps.
     *
     * <p>If cleared, scaled bitmaps will be drawn with nearest neighbor
     * sampling, likely resulting in artifacts. This should generally be on
     * when drawing bitmaps, unless performance-bound (rendering to software
     * canvas) or preferring pixelation artifacts to blurriness when scaling
     * significantly.</p>
     *
     * <p>If bitmaps are scaled for device density at creation time (as
     * resource bitmaps often are) the filtering will already have been
     * done.</p>
     *
     * <p>On devices running {@link Build.VERSION_CODES#O} and below, hardware
     * accelerated drawing always uses bilinear sampling on scaled bitmaps,
     * regardless of this flag. On devices running {@link Build.VERSION_CODES#Q}
     * and above, this flag defaults to being set on a new {@code Paint}. It can
     * be cleared with {@link #setFlags} or {@link #setFilterBitmap}.</p>
     *
     * @see #Paint()
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int FILTER_BITMAP_FLAG  = 0x02;
    /**
     * Paint flag that enables dithering when blitting.
     *
     * <p>Enabling this flag applies a dither to any blit operation where the
     * target's colour space is more constrained than the source.
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int DITHER_FLAG         = 0x04;
    /**
     * Paint flag that applies an underline decoration to drawn text.
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int UNDERLINE_TEXT_FLAG = 0x08;
    /**
     * Paint flag that applies a strike-through decoration to drawn text.
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int STRIKE_THRU_TEXT_FLAG = 0x10;
    /**
     * Paint flag that applies a synthetic bolding effect to drawn text.
     *
     * <p>Enabling this flag will cause text draw operations to apply a
     * simulated bold effect when drawing a {@link Typeface} that is not
     * already bold.</p>
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int FAKE_BOLD_TEXT_FLAG = 0x20;
    /**
     * Paint flag that enables smooth linear scaling of text.
     *
     * <p>Enabling this flag does not actually scale text, but rather adjusts
     * text draw operations to deal gracefully with smooth adjustment of scale.
     * When this flag is enabled, font hinting is disabled to prevent shape
     * deformation between scale factors, and glyph caching is disabled due to
     * the large number of glyph images that will be generated.</p>
     *
     * <p>{@link #SUBPIXEL_TEXT_FLAG} should be used in conjunction with this
     * flag to prevent glyph positions from snapping to whole pixel values as
     * scale factor is adjusted.</p>
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int LINEAR_TEXT_FLAG    = 0x40;
    /**
     * Paint flag that enables subpixel positioning of text.
     *
     * <p>Enabling this flag causes glyph advances to be computed with subpixel
     * accuracy.</p>
     *
     * <p>This can be used with {@link #LINEAR_TEXT_FLAG} to prevent text from
     * jittering during smooth scale transitions.</p>
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int SUBPIXEL_TEXT_FLAG  = 0x80;
    /** Legacy Paint flag, no longer used. */
    public static final int DEV_KERN_TEXT_FLAG  = 0x100;
    /** @hide bit mask for the flag enabling subpixel glyph rendering for text */
    public static final int LCD_RENDER_TEXT_FLAG = 0x200;
    /**
     * Paint flag that enables the use of bitmap fonts when drawing text.
     *
     * <p>Disabling this flag will prevent text draw operations from using
     * embedded bitmap strikes in fonts, causing fonts with both scalable
     * outlines and bitmap strikes to draw only the scalable outlines, and
     * fonts with only bitmap strikes to not draw at all.</p>
     *
     * @see #Paint(int)
     * @see #setFlags(int)
     */
    public static final int EMBEDDED_BITMAP_TEXT_FLAG = 0x400;
    /** @hide bit mask for the flag forcing freetype's autohinter on for text */
    public static final int AUTO_HINTING_TEXT_FLAG = 0x800;
    /** @hide bit mask for the flag enabling vertical rendering for text */
    public static final int VERTICAL_TEXT_FLAG = 0x1000;

    // These flags are always set on a new/reset paint, even if flags 0 is passed.
    static final int HIDDEN_DEFAULT_PAINT_FLAGS = DEV_KERN_TEXT_FLAG | EMBEDDED_BITMAP_TEXT_FLAG
            | FILTER_BITMAP_FLAG;

四、Paint 画笔线帽样式设置


Paint 画笔线帽样式设置 :

代码语言:javascript
复制
mReachedPaint.setStrokeCap(Paint.Cap.ROUND);

3 种设置方式 :

代码语言:javascript
复制
    /**
     * The Cap specifies the treatment for the beginning and ending of
     * stroked lines and paths. The default is BUTT.
     */
    public enum Cap {
        /**
         * The stroke ends with the path, and does not project beyond it.
         */
        BUTT    (0),
        /**
         * The stroke projects out as a semicircle, with the center at the
         * end of the path.
         */
        ROUND   (1),
        /**
         * The stroke projects out as a square, with the center at the end
         * of the path.
         */
        SQUARE  (2);

        private Cap(int nativeInt) {
            this.nativeInt = nativeInt;
        }
        final int nativeInt;
    }

如果设置成 Paint.Cap.ROUND , 样式如下 :

在这里插入图片描述
在这里插入图片描述

五、Paint 画笔线段连接处样式设置


Paint 画笔线段连接处样式设置 : 这里设置成圆弧形状 ;

代码语言:javascript
复制
mReachedPaint.setStrokeJoin(Paint.Join.ROUND);

Paint 画笔线段连接处样式的 3 种设置方式 :

代码语言:javascript
复制
    /**
     * The Join specifies the treatment where lines and curve segments
     * join on a stroked path. The default is MITER.
     */
    public enum Join {
        /**
         * The outer edges of a join meet at a sharp angle
         */
        MITER   (0),
        /**
         * The outer edges of a join meet in a circular arc.
         */
        ROUND   (1),
        /**
         * The outer edges of a join meet with a straight line
         */
        BEVEL   (2);

        private Join(int nativeInt) {
            this.nativeInt = nativeInt;
        }
        final int nativeInt;
    }

Paint.Join.MITER 直角效果 :

在这里插入图片描述
在这里插入图片描述

Paint.Join.ROUND 圆弧效果 :

在这里插入图片描述
在这里插入图片描述

Paint.Join.BEVEL 斜面效果 :

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、绘制圆角矩形进度条
  • 二、像素值转化 dp -> px
  • 三、Paint 标志位设置
  • 四、Paint 画笔线帽样式设置
  • 五、Paint 画笔线段连接处样式设置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档