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

Posted 2022-07-11 韩曙亮

文章目录

• 一、绘制圆角矩形进度条
• 二、像素值转化 dp -> px
• 三、Paint 标志位设置
• 四、Paint 画笔线帽样式设置
• 五、Paint 画笔线段连接处样式设置

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

一、绘制圆角矩形进度条

---

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

二、像素值转化 dp -> px

---

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

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

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

mReachedPaint.setStrokeWidth(dp2px(10));

三、Paint 标志位设置

---

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

        // 抗锯齿 : Paint.ANTI_ALIAS_FLAG
        // 闪烁时启动抖动 : Paint.DITHER_FLAG
        mReachedPaint=new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

Paint 可设置的标志位如下 :

    /**
     * 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 画笔线帽样式设置 :

mReachedPaint.setStrokeCap(Paint.Cap.ROUND);

有 $3$ 种设置方式 :

    /**
     * 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 画笔线段连接处样式设置 : 这里设置成圆弧形状 ;

mReachedPaint.setStrokeJoin(Paint.Join.ROUND);

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

    /**
     * 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 斜面效果 :