圆环

package com.bwie.test;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class RingView extends View {

    private Context context;
    private Paint paint;

    public RingView(Context context) {
        this(context, null);
    }

    public RingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.paint = new Paint();
        this.paint.setAntiAlias(true);
        this.paint.setStyle(Paint.Style.STROKE);

    }

    @Override
    public void onDraw(Canvas canvas) {

        int center = getWidth() / 2;
        int cennCricle = dip2px(context, Float.valueOf(MainActivity.mRadius));// 设置内圆半径
        int cricleWith = dip2px(context, Float.valueOf(MainActivity.mWidth));// 设置圆环宽度

        // 绘制内圆
        this.paint.setARGB(155, 167, 190, 206);
        this.paint.setStrokeWidth(2);
        canvas.drawCircle(center, center, cennCricle, this.paint);
        // 绘制圆环
        this.paint.setARGB(255, 212, 225, 233);
        this.paint.setStrokeWidth(cricleWith);
        this.paint.setColor(Color.parseColor(MainActivity.mColor));
        canvas.drawCircle(center, center, cennCricle + cricleWith / 2,
                this.paint);
        // 绘制外圆
        this.paint.setARGB(155, 167, 190, 206);
        this.paint.setStrokeWidth(2);
        canvas.drawCircle(center, center, cennCricle + cricleWith, this.paint);

        super.onDraw(canvas);

    }

    private static int dip2px(Context context, float dpValue) {

        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
圆环进度条是一种常见的 UI 设计元素,用于表示任务或进程的完成度。它通常由一个圆环和一个指示器组成,指示器会沿着圆环逐渐移动,表示进度的完成情况。 实现圆环进度条的方法有很多种,其中比较常见的是通过 CSS3 的 transform 属性来实现。具体来说,可以通过设置圆环的 border 属性和 border-radius 属性来定义圆环的形状,并通过设置 border-color 属性和 transform 属性来控制指示器的位置和角度。 以下是一个简单的示例代码,实现了一个 50% 完成度的圆环进度条: ```html <div class="progress-bar"> <div class="progress-bar__inner"></div> </div> ``` ```css .progress-bar { width: 100px; height: 100px; border: 10px solid #ccc; border-radius: 50%; position: relative; } .progress-bar__inner { width: 100%; height: 100%; border: 10px solid #38b6ff; border-radius: 50%; position: absolute; top: 0; left: 0; transform: rotate(45deg); border-right-color: transparent; border-top-color: transparent; } ``` 在上面的代码中,`.progress-bar` 是圆环进度条的外层容器,`.progress-bar__inner` 是进度指示器。通过设置 `.progress-bar__inner` 的 `transform: rotate(45deg)` 属性,可以让指示器从圆环的正上方开始。 当需要实现动态的圆环进度条时,可以通过 JavaScript 来动态修改 `.progress-bar__inner` 的 `transform` 属性,从而让指示器沿着圆环逐渐移动,表示进度的完成情况。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值