android - 圆形进度条大小对齐

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>

我已尝试根据此 https://stackoverflow.com/a/9362168/3929188 使 circular_shape.xml(进度条背景)根据屏幕大小进行缩放.但是从 drawable 创建位图 xml 对我来说是一个挑战，我根本做不到(菜鸟开发者)。

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

欢迎任何想法!

Answer 1

终于解决了。我将循环进度的背景可绘制对象作为单独的 View 放在 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);

希望对大家有帮助。 :)