如何改进我的进度条匹配以跟随图像（颜色、角度、形状等）

Question

我创建了一个圆形进度条，并使其尽可能接近下图中的设计。

但我很难让它与下图中的设计相匹配（颜色、角度、形状等）：

我不知道如何匹配：

• 上面的颜色？
• 还是形状？

我想要遵循的设计：

我当前的设计如下所示：

到目前为止我的代码如下：

activity_main.xml

 <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/progressBar"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="75"
        android:progressDrawable="@drawable/style_circular_fill"
        android:secondaryProgress="10"
        android:layout_alignParentBottom="false"
        android:layout_alignParentStart="false"
        android:focusableInTouchMode="false"
        android:layout_alignParentTop="true"
        android:layout_marginTop="70dp"
        xmlns:android="http://schemas.android.com/apk/res/android" />

style_circular_fill.xml

<item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true" >
            <gradient
                android:centerColor="#A9E2F3"
                android:endColor="#A9E2F3"
                android:startColor="#A9E2F3"
                android:type="sweep" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true" >
            <gradient
                android:centerColor="#26ce61"
                android:endColor="#26ce61"
                android:startColor="#26ce61"
                android:type="sweep" />
        </shape>
    </rotate>
</item>

Answer 1

你可以试试CircleProgress 库。他们提供的其中一个示例看起来与您的要求非常相似。

我没用过，所以不能确认它的易用性。

为了保持平衡，请查看进度条库的this list。可能有一个库可以达到预期的效果。

Answer 2

我建议您将图像导出到匹配资源文件夹（mdpi、hdpi 等...）；

然后创建一个像这样的动画 xml 文件（我们称这个文件为“progress_bar_animation.xml”）：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/your_resource_file_name"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1"
    android:fromDegrees="0"
    android:toDegrees="1800" />

然后创建进度条样式（在style.xml文件中）

 <style name="ProgressBar" parent="Base.Widget.AppCompat.ProgressBar">
        <item name="android:indeterminateDrawable">@drawable/progress_bar_animation</item>
    </style>

最后在你的xml中添加一个进度条并设置你之前创建的样式，像这样：

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/ProgressBar" />

Answer 3

使用此进度对话框

  public class MyCustomProgressDialog extends ProgressDialog {

private Context c;
private ProgressWheel pd;
private ImageView imgLogo;

public MyCustomProgressDialog(Context context) {
    super(context);
    getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    c=context;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.progress_bar_loading);

}

@Override
public void show() {
    super.show();
}

@Override
public void dismiss() {
    super.dismiss();
}
}

progress_bar_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transperent"
android:gravity="center"
>
<TextView
    android:id="@+id/lbl_x"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="center_horizontal"
    android:text=" "
    android:textColor="@color/white"
    android:textSize="20sp"
    android:textStyle="bold"/>

<com.organigoal.customcontrol.ProgressWheel
    android:id="@+id/progress_wheel"
    xmlns:wheel="http://schemas.android.com/apk/res-auto"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_centerInParent="true"
    wheel:barColor="@color/grey"
    wheel:progressIndeterminate="true"/>