如何使进度条进度从边缘四舍五入?
Posted
技术标签:
【中文标题】如何使进度条进度从边缘四舍五入?【英文标题】:How to make progressbar progress rounded from edge? 【发布时间】:2020-02-21 05:29:32 【问题描述】:我正在制作圆形和渐变色的自定义进度条。我做到了,但让它从边缘变圆是行不通的。
这是我的进度条
<ProgressBar
android:id="@+id/progress1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_
android:layout_
android:indeterminate="false"
android:max="100"
android:progress="80"
android:progressDrawable="@drawable/bg_progressbar_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
这里是drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/progress"
android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp">
<rotate
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thickness="15dp" >
<gradient
android:centerColor="#e62a77"
android:endColor="#d5302a"
android:startColor="#ff006d"
android:type="sweep" />
<corners android:radius="8dp"/>
</shape>
</rotate>
</item>
我用<corners android:radius="8dp"/>
还是不行。
【问题讨论】:
This 可以帮助.. 【参考方案1】:请尝试以下代码
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="270" android:toDegrees="270">
<shape
android:innerRadiusRatio="2.55"
android:shape="ring"
android:thickness="15dp"
android:useLevel="true">
<gradient
android:centerColor="#e62a77"
android:endColor="#d5302a"
android:startColor="#ff006d"
android:type="sweep" />
</shape>
</rotate>
</item>
<item android:bottom="211dp">
<shape
android:innerRadiusRatio="1000"
android:shape="ring"
android:thickness="7dp"
android:useLevel="false">
<solid android:color="#ff006d" />
</shape>
</item>
<item>
<rotate>
<inset android:insetBottom="211dp">
<shape
android:innerRadiusRatio="1000"
android:shape="ring"
android:thickness="7dp"
android:useLevel="false">
<solid android:color="#d5302a" />
</shape>
</inset>
</rotate>
</item>
</layer-list>
参考:https://***.com/a/56905735/6997819
它使用三个项目
1) 起点圆
2) 沿着进度移动的圆圈
3) 主要进度路线
检查结果图片
【讨论】:
不,它不起作用。开始和结束上的点未正确对齐。我无法为 android:bottom 和 android:insetBottom 分配修复 dp 你必须在某个地方解决这个问题。根据您的布局要求,您可以进行相应的更改 可以调整,但是颜色呢?我使用渐变色进行二次进度,我们为点提供纯色。不同的进度不匹配以上是关于如何使进度条进度从边缘四舍五入?的主要内容,如果未能解决你的问题,请参考以下文章
前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果