圆形进度条内的圆形进度 [英] Rounded progress within rounded progress bar
问题描述
我正在尝试在我们正在开发的应用程序中创建自定义进度条,我需要的最后一部分是进度指示器本身.相反,我想让该条像进度条本身的左右边缘一样圆滑,就像第二张图片一样(当然要减去红色圆圈).
I'm trying to create a custom progress bar in an app we're working on, and the last piece I need is the progress indicator itself. Instead, I want to have that bar be rounded just like the left- and right-hand edges of the progress bar itself, like in the second image (minus the red circle of course).
这里是进度条的布局定义(为了简洁省略了布局文件的其余部分):
Here's the layout definition of the progress bar (the rest of the layout file omitted for brevity):
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="3dp"
android:max="100"
android:progressDrawable="@drawable/progress_bar_states"
android:layout_marginTop="10dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateOnly="false"
android:layout_below="@id/textview2"
android:layout_alignLeft="@id/textview2"
/>
这里是 progress_bar_states.xml 文件:
and here's the progress_bar_states.xml file:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<solid android:color="#20ffff00"/>
<corners android:radius="60dp"/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<solid android:color="#20ffffff"/>
<corners android:radius="60dp"/>
</shape>
</clip>
</item>
</layer-list>
我该怎么做?我根本看不到任何允许我定义进度指示器的选项.我应该以不同的方式做这件事吗?我对 Android 还是很陌生,因此感谢您提供任何指导.
How do I do this? I don't see any options to allow me to define the progress indicator at all. Should I be doing this a different way? I'm still pretty new at Android, so any guidance is appreciated.
@Ando - 您的解决方案非常接近我的需要.指标移动的开始是现在的问题,我猜这是因为它不像原始剪辑那样.指标启动时,一直到开始的某个点,看起来像是被挤压"了
@Ando - your solution is very close to what I need. The start of the indicator movement is the issue now, and I'm guessing it's because it's not a clip like the original. When the indicator starts, and up to a certain point in the beginning, it looks like it is "squeezed"
直到它到达适当的点然后它看起来很好:
until it gets to the appropriate point then it looks fine:
我们如何在此解决方案开始时完成剪辑"?
How do we accomplish the 'clipping' at the start with this solution?
对于@bladefury - 正如您所看到的,与上图的前缘相比,它似乎确实变平了.
For @bladefury - as you can see, compared to the leading edge of the image above, it does appear to be flattened.
在很长一段时间没有看这个之后,我在 https 查看了一个新组件://github.com/akexorcist/Android-RoundCornerProgressBar/issues,它与这里的建议存在相同的问题.
EDIT : After not looking at this for quite some time, I looked at a new component at https://github.com/akexorcist/Android-RoundCornerProgressBar/issues, and it has the same issue as the suggestions here.
推荐答案
你可以使用这个库做圆角进度条
You can use this library for rounded corner progress bar
<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
android:layout_width="dimension"
android:layout_height="dimension"
app:rcProgress="float"
app:rcSecondaryProgress="float"
app:rcMax="float"
app:rcRadius="dimension"
app:rcBackgroundPadding="dimension"
app:rcReverse="boolean"
app:rcProgressColor="color"
app:rcSecondaryProgressColor="color"
app:rcBackgroundColor="color" />
摇篮
compile 'com.akexorcist:RoundCornerProgressBar:2.0.3'
https://github.com/akexorcist/Android-RoundCornerProgressBar
这篇关于圆形进度条内的圆形进度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!