Android圆弧形进度条(表盘原理)

有图有真相,先来看看效果图:

其实基本原理并不复杂,无非就是根据当前进度来计算对应的弧度,然后绘制出圆弧即可。

主要的难点在于进度条按钮(图标,thumb)的绘制,需要根据当前进度来计算出图标的坐标,然后将icon绘制到合适的坐标上。算法可以参考我的上一篇博客求圆上某点旋转一定弧度之后的新坐标

下面来看看对应的布局文件:

 <com.pang.robot.facelogindemo.view.CircleProgress
            android:id="@+id/tasks_view"
            android:layout_width="223dp"
            android:layout_height="223dp"
            app:circleColor="@color/white"
            app:radius="50dip"
            app:ringBgColor="@color/white2"
            app:ringColor="@color/colorRed"
            app:strokeWidth="10dip"
            app:thumb
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要创建一个带有圆弧形进度条的HTML元素,可以使用SVG(可缩放矢量图形)和CSS来实现。 以下是一个示例代码: ```html <div class="progress-circle"> <svg> <circle class="progress" cx="50%" cy="50%" r="70"></circle> <circle class="bg" cx="50%" cy="50%" r="70"></circle> </svg> <div class="progress-text"> <span class="value">0</span>% </div> </div> ``` 接下来是CSS样式: ```css .progress-circle { position: relative; width: 140px; height: 140px; } .progress-circle svg { transform: rotate(-90deg); } .progress-circle circle { fill: none; stroke-width: 10; stroke-linecap: round; } .progress-circle .bg { stroke: #e6e6e6; } .progress-circle .progress { stroke: #ff8a00; stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset 1s ease-out; } .progress-circle .progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #333; } .progress-circle .value { font-weight: bold; } ``` 该代码使用SVG元素创建两个圆形元素,一个用于表示进度条进度,另一个用于表示进度条的背景。CSS样式定义了进度条的样式和动画效果。 要更改进度条的值,可以使用JavaScript或jQuery将`stroke-dashoffset`属性设置为不同的值。例如: ```javascript var value = 50; // 进度条的值 var circle = document.querySelector('.progress-circle .progress'); var radius = circle.r.baseVal.value; var circumference = radius * 2 * Math.PI; var offset = circumference - value / 100 * circumference; circle.style.strokeDashoffset = offset; document.querySelector('.progress-circle .value').textContent = value; ``` 这将将`stroke-dashoffset`属性设置为相应值,并将进度条文本更新为进度条的新值。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值