在四舍五入的进度条内四舍五入 [英] 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" />

Gradle

compile 'com.akexorcist:RoundCornerProgressBar:2.0.3'

https://github.com/akexorcist/Android-RoundCornerProgressBar

这篇关于在四舍五入的进度条内四舍五入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！