圆形进度条内的圆形进度 [英] 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屋！