圆形进度条大小对齐

Question

我被这个问题困扰了一段时间。可能有人可以提供帮助。

问题是我的 android 圆形进度条的背景根据手机屏幕尺寸有不同的尺寸。

屏幕截图应该可以说明问题。

蓝色不完整的圆圈是圆形进度条（动画）。它实际上应该运行在白色圆圈的顶部。它仅适用于特定的屏幕尺寸。

白色圆圈设置为进度条的背景drawable。

这是代码。（我只放了需要的代码）

acivity_countdown.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:background="#FD4C0D"
    >
    <FrameLayout
        android:id="@+id/CountDownProress"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="#FD4C0D"
    >
        <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:layout_alignParentBottom="true"
        android:background="@drawable/circular_shape"
        android:layout_centerHorizontal="true"
        android:max="500"
        android:progress="0"
        ></ProgressBar>
        <LinearLayout.../><!--this layout contains text inside circular progress -->
    </FrameLayout>
    <FrameLayout.../><!--this layout contains button under circular progress -->
</LinearLayout>

circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="0">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="true">
        <gradient
            android:angle="0"
            android:endColor="#005B7F"
            android:startColor="#005B7F"
            android:type="sweep"
            android:useLevel="false">
        </gradient>
    </shape>
</rotate>

circular_shape.xml(可绘制的背景)

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:useLevel="false"
    android:innerRadius="145dp"
    android:shape="ring"
    android:thickness="0.8dp"
    >
    <solid android:color = "#ffffff"/>
</shape>

我已经尝试根据此根据屏幕尺寸制作 circular_shape.xml（进度条背景）。但是从 drawable 创建位图 xml 对我来说是一个挑战，我根本做不到（菜鸟开发者）。

我曾尝试为 circular_progress_bar.xml 设置背景，使蓝色圆圈动画出现在白色圆圈之上，但失败了。

欢迎任何想法！

Answer 1

不知道为什么从0度旋转到0度，可能是这个原因

rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="0"

Answer 2

终于解决了。我把循环进度的背景drawable作为单独的视图放在FrameLayout中。

acivity_countdown.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:background="#FD4C0D"
    >
    <FrameLayout
        android:id="@+id/CountDownProress"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="#FD4C0D"
    >
        <ImageView
            android:id="@+id/ProgressBackground"
            android:src="@drawable/circular_shape"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            ></ImageView>
        <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
            android:layout_gravity="center"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"
        android:max="500"
        android:progress="0"
        ></ProgressBar>
        <LinearLayout.../><!--this layout contains text inside circular progress -->
    </FrameLayout>
    <FrameLayout.../><!--this layout contains button under circular progress -->
</LinearLayout>

circular_progress_bar.xml（可绘制）

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="0">
    <shape
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="true">
        <gradient
            android:angle="0"
            android:endColor="#005B7F"
            android:startColor="#005B7F"
            android:type="sweep"
            android:useLevel="false">
        </gradient>
    </shape>
</rotate>

circular_shape.xml(可绘制的背景)

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:useLevel="false"
    android:shape="ring"
    android:thickness="0.8dp"
>
    <solid android:color="#ffffff"/>
</shape>

这使得它可以根据手机屏幕尺寸进行缩放。但是尺寸很小。我不得不把它弄大一点。所以我在 OnCreate()

中添加了这段代码

        FrameLayout frame=(FrameLayout) findViewById(R.id.CountDownProressFrame);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(displaymetrics.widthPixels +150 , displaymetrics.heightPixels-300);
        lp.weight = 1;
        lp.gravity = Gravity.CENTER;
        frame.setLayoutParams(lp);
        ImageView img=(ImageView) findViewById(R.id.ProgressBackground);
        FrameLayout.LayoutParams FrameLP = new FrameLayout.LayoutParams(displaymetrics.widthPixels +155 , displaymetrics.heightPixels-280);
        FrameLP.gravity = Gravity.CENTER;
        img.setLayoutParams(FrameLP);

希望对大家有所帮助。 :)

圆形进度条大小对齐

Circular progress bar size alignment

xml

layout

android

drawable

progress-bar