Question

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

问题是我的Android循环进度条的背景根据移动屏幕大小有不同的大小。

屏幕截图应该解释这个问题。

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

白色圆圈设置为进度条的背景可绘制。

以下是代码。（我只放了所需的代码）

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对我来说很有挑战性，我根本无法做到（noobie开发人员）。

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

欢迎任何想法！

Answer 1

终于解决了。我将循环进度的背景绘制作为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);

希望它有所帮助。：）

Answer 2

我不知道为什么你从第0名转到第0名，可能是由于这个引起的

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

循环进度条大小对齐

2 个答案: