androidui绘制圆角矩形进度条①(像素值转化dp->px|paint标志位设置|paint画笔线帽样式设置|paint画笔线段连接处样式设置)(代码片段)

韩曙亮 韩曙亮     2022-10-21     548

关键词:

文章目录


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

圆角矩形精度条(代码片段)

publicclassDownProgressBarextendsView/***注意:*1,整个精度条的宽度MaxProgress;*2,当前精度条的宽度currentProgress;*4,背景颜色*5,进度颜色*6,文字,文字颜色,大小**@paramcontext*/privateintmMaxProgress;privateintmProgress;privateintmBackgro 查看详情

带圆角的 Android 圆形进度条

...角,我能够获得圆形进度条。我正在尝试使用xmldrawable来绘制它。<ProgressBarandroid:id="@+id/onboarding_act 查看详情

canvas——绘制圆角矩形之详解

  Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。    我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处&#x... 查看详情

canvas——绘制圆角矩形之详解

  Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。    我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处&#x... 查看详情

绘制一个圆角矩形,一侧为圆角[重复]

】绘制一个圆角矩形,一侧为圆角[重复]【英文标题】:Drawingaroundedrectanglewithonesiderounded[duplicate]【发布时间】:2011-07-0123:28:49【问题描述】:可能重复:iOSDrawRectaglewithcurvedends在Objective-C(一个iPhone应用程序)中,我将如何编写... 查看详情

如何快速绘制简单的圆角矩形(圆角)

】如何快速绘制简单的圆角矩形(圆角)【英文标题】:Howtodrawasimpleroundedrectinswift(roundedcorners)【发布时间】:2015-05-2108:47:03【问题描述】:我设法画了一个矩形:-)但我不知道如何画一个圆角矩形。有人可以帮我用下面的代码如... 查看详情

canvas绘制圆角矩形

参考技术A首先声明一个自定义函数然后在绘制的时候调用该函数,效果图: 查看详情

canva绘制圆角矩形(代码片段)

...是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制方案一、统一圆角<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>canvas制作圆角矩形(包括填充矩形的功能)</title></head><bod 查看详情

创建带有圆角矩形的进度指示器

】创建带有圆角矩形的进度指示器【英文标题】:Creatingaprogressindicatorwitharoundedrectangle【发布时间】:2018-09-2517:22:37【问题描述】:我正在尝试在我的应用程序中创建一个圆角矩形进度指示器。我之前实现了一个圆形指示器,但... 查看详情

圆角矩形框绘制-iOS

】圆角矩形框绘制-iOS【英文标题】:Roundedrectangleboxdraw-iOS【发布时间】:2012-09-2816:49:06【问题描述】:如何创建如图所示的圆角矩形?另外我的第二个问题是如何获得多行,如何格式化以使其成为多行,如红色矩形所示?提前... 查看详情

绘制圆角矩形的透明度问题

】绘制圆角矩形的透明度问题【英文标题】:Transparencyissuesdrawingarectanglewithroundedcorners【发布时间】:2018-02-1410:13:42【问题描述】:我正在尝试使用我在教程中找到的一些代码绘制圆角矩形,并由我稍作修改:#Roundedrectanglealgorith... 查看详情

androidui系列-view实现圆形进度条

我就不从canvas和paint开始说了,onMeasure,onLayout,onDraw这些方法的介绍和源码解析。网上一搜很多。一篇解释不清楚,多看几篇。话不多说了,先看看效果吧。做成gif显示会有问题。我们先来分析一下需要什么数据、1、... 查看详情

在核心图形中绘制圆角矩形

】在核心图形中绘制圆角矩形【英文标题】:Drawingroundedrectincoregraphics【发布时间】:2012-05-1119:02:28【问题描述】:我想复制默认iPad日历的事件标记,如下所示:我正在尝试为此使用coregraphics,绘制圆角矩形的路径。这是我能想... 查看详情

canvas绘制圆形图片绘制圆角矩形图片?(代码片段)

前言在Canvas中我们常常遇到的一个需求绘制一个圆形或者一个圆角矩形图像,常用于展示用户头像,我们知道CSS有border-radius属性,但是Canvas是没有的~?? 很尴尬,我们就来瞅瞅怎么整出一个圆形头像~Part.1 效果圆形头像&nbs... 查看详情

android自定义view实现可拖拽的进度条

...设置给PathMeasure使用PathMeasure得出当前进度的路径并进行绘制,这里我将上一步的绘制放在了一起这个矩形的宽度需要我们用绘制最长的文字来确定其宽高另外矩形的显示位置也是以当前进度所在的点为中心点文字显示的位置计... 查看详情

cad绘制矩形框命令

该功能制可以绘制矩形,并能按指定值绘制倒角和圆角。该功能绘制出的矩形是封闭的单一实体。1.单击菜单栏,“绘图->矩形框。2.单击绘图工具栏”绘矩形框命令”按钮。3.在命令行中输入Rectang,按回车键。(1)执行命令... 查看详情

opencv-绘制圆角矩形(代码片段)

功能函数//绘制圆角矩形voidDrawRotatedRectChamfer(cv::Matmask,constcv::RotatedRectrotatedrect,floatradius,constcv::Scalar&color,intthickness,intlineType) //创建画布 cv::Matcanvas=cv::Mat::zeros(mask.size(), 查看详情

如何在 Xamarin.iOS 中绘制圆角矩形?

】如何在Xamarin.iOS中绘制圆角矩形?【英文标题】:HowtodrawaroundedrectangleinXamarin.iOS?【发布时间】:2017-06-1018:43:17【问题描述】:我想绘制一个带圆角的矩形,但我对这个平台很陌生,它与例如WPF或UWP确实不同。我看过Objective-C中... 查看详情