Android 自定义 View(四)path 的圆角处理

目录表

  • android 自定义view必备api
  • android 可拖动圆环刻度条
  • android 仿滴滴大头针跳动波纹效果
  • android 仿网易云鲸云音效
  • Android 仿滴滴首页嵌套滑动效果
  • path 的圆角处理

    在开发过程中,圆角背景和圆角图片应该都算是标配了,如下面效果:顶部一个自定义的进度背景 view,下面挨着路口放大图 ImageView。

    Android 自定义 View(四)path 的圆角处理

    实现一

    由于都是代码动态设置的,所以就不考虑 xml 了。设置背景首先想到的是 GradientDrawable,我们可以通过其 setCornerRadii 方法来指定 4 个圆角的弧度。float[] 的长度是 8 ,2 个一组,很灵活。最后通过 setBackgroundDrawable(Drawable background) 直接设置即可。

        private GradientDrawable getBackground(boolean isNightMode) {
    int color;
    if (isNightMode) {
    color = Color.parseColor("#000000");
    } else {
    color = Color.parseColor("#3C3F46");
    }
    float radius = NaviUtil.dp2px(getContext(), 8);
    GradientDrawable drawable = new GradientDrawable();
    drawable.setShape(GradientDrawable.RECTANGLE);
    drawable.setCornerRadii(new float[]{radius, radius, radius, radius
    ,0, 0, 0, 0});
    drawable.setColor(color);
    return drawable;
    }

    实现二

    可以将整个 view 通过裁剪画布的方式,在 onDraw方法中进行绘制。主要方法即 path.addRoundRect(…) ,代码见下:

        private void drawClipPathOnCanval(Canvas canvas) {
    if(mClipPath == null){
    mClipPath = new Path();
    if(mClipRectF == null)
    mClipRectF = new RectF(0, 0
    , CommentUtils.dip2px(mContext, 150)
    , CommentUtils.dip2px(mContext, 150));

    // path为圆形矩形。裁剪圆形,弧等都同理
    /*
    * RectF:矩形轮廓
    * rx:圆角矩形的圆角的x半径
    * ry:圆角矩形的圆角的y半径
    * direction:cw:顺时针、CCW:逆时针
    */
    mClipPath.addRoundRect(mClipRectF
    , CommentUtils.dip2px(mContext, 15)
    , CommentUtils.dip2px(mContext, 15)
    , Path.Direction.CW);
    }
    canvas.clipPath(mClipPath);
    }

    方法 addRoundRect(RectF, rx, ry, direction) 同时绘制 4 个角弧度是非常方便的,但如果只需绘制左上和左下两个弧角呢?所幸其还有带 float[] 参数的同载方法,可以灵活设置每个角的弧度,使用方法估计一看就明:

            addRoundRect(RectF rect, float[] radii, Direction dir)

    在对 canvas 进行裁剪前,我们需要锁定下画布,裁剪绘制完成之后,再恢复画布。在 onDraw方法见下:

            // 锁定当前画布
    canvas.save();
    // 裁剪画布
    drawClipPathOnCanval(canvas);
    // 正常绘制逻辑:这里包括绘制进度条等
    // 恢复画布
    canvas.restore();

    实现三

    如果对于进度值的精度要求不高,完全可能通过多边形 + 圆弧的方式来实现两个角的圆弧矩形。例如上图中的绿色进度实现,方法可以如下:

        @Override
    protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float currW = getWidth() * mProgress;
    if (currW < mRadus * 0.25) {
    return;
    } else if (currW <= mRadus) {
    currW = mRadus;
    } else if (currW > getWidth() - mRadus) {
    // 绘制右上角弧度
    canvas.drawArc(getRect(getWidth() - 2 * mRadus, 0
    , getWidth(), 2 * mRadus)
    , -90, 90
    , true, mPbBgPaint);
    canvas.drawRect(getRect(getWidth() - mRadus, mRadus
    , getWidth(), mPbheight), mPbBgPaint);

    currW = getWidth() - mRadus;
    }

    // 绘制左上角弧度
    canvas.drawArc(getRect(0, 0, mRadus * 2, mRadus * 2)
    , 180, 90
    , true, mPbBgPaint);

    // 绘制多边形
    mMorePath.moveTo(0, mPbheight);
    mMorePath.lineTo(0, mRadus);
    mMorePath.lineTo(mRadus, mRadus);
    mMorePath.lineTo(mRadus, 0);
    mMorePath.lineTo(currW, 0);
    mMorePath.lineTo(currW, mPbheight);
    mMorePath.close();
    canvas.drawPath(mMorePath, mPbBgPaint);
    }

    实现四

    对于图片 Bitmap 的裁剪,我们也可以通过 path 来生成一个两个弧角的 Bitmap,方法见下:

        public Bitmap getRoundedCornerBitmap(Bitmap bitmap, float[] rids) {
    try {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
    bitmap.getHeight(), Bitmap.Config.ARGB_4444);
    Canvas canvas = new Canvas(output);
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(),
    bitmap.getHeight());
    final RectF rectF = new RectF(new Rect(0, 0, bitmap.getWidth(),
    bitmap.getHeight()));
    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.BLACK);
    Path path = new Path();
    // float[] rids 可灵活设置每个角的弧度
    path.addRoundRect(rectF
    , rids
    , Path.Direction.CW);
    canvas.drawPath(path, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

    final Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

    canvas.drawBitmap(bitmap, src, rect, paint);
    return output;
    } catch (OutOfMemoryError outOfMemoryError){
    outOfMemoryError.printStackTrace();
    return bitmap;
    }catch (Exception e) {
    TLog.e(TAG, TLog.USR, e);
    return bitmap;
    }
    }

    原创:https://www.panoramacn.com
    源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

    专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

    Android 自定义 View(四)path 的圆角处理

    免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

    您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
    www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
    未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Android 自定义 View(四)path 的圆角处理
    关注我们小说电影免费看
    关注我们,获取更多的全网素材资源,有趣有料!
    120000+人已关注
    分享到:
    赞(0) 打赏
  • 评论抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    您的打赏就是我分享的动力!

    支付宝扫一扫打赏

    微信扫一扫打赏