圆形进度指示器忽略宽度/高度属性并且不缩放

Posted 2023-02-22

【中文标题】圆形进度指示器忽略宽度/高度属性并且不缩放

【英文标题】：Circular Progress Indicator ignores width/height attributes and doesn't scale

【发布时间】：2021-04-28 11:14:21

【问题描述】：

我需要水平放置 4 个圆形进度条，如下所示：

所以我决定使用新的材料组件循环进度指示器 (https://material.io/components/progress-indicators/android)。我传播链这4个进度条 在约束布局中，但它们不会缩放。看起来他们仍然有默认的 24dp 大小。即使我尝试将宽度和高度硬编码为 200dp，例如，输出仍然是小的进度条。

<com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarCalories"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="6dp"
            android:layout_
            android:layout_
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/progressBarProtein"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarProtein"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:layout_
            android:layout_
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toEndOf="@id/progressBarCalories"
            app:layout_constraintEnd_toStartOf="@id/progressBarCarbs"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarCarbs"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:layout_
            android:layout_
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toEndOf="@id/progressBarProtein"
            app:layout_constraintEnd_toStartOf="@id/progressBarFat"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarFat"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="16dp"
            android:layout_
            android:layout_
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toEndOf="@id/progressBarCarbs"
            app:layout_constraintEnd_toEndOf="parent"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBar"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            app:layout_constraintWidth_min="200dp"
            android:minWidth="200dp"
            android:layout_
            android:layout_
            app:layout_constraintTop_toBottomOf="@id/progressBarFat"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            tools:progress="75"/>

【问题讨论】：

***.com/questions/21333866/… 这可能会有所帮助。

【参考方案1】：

在版本中：

implementation 'com.google.android.material:material:1.5.0-alpha01'

您可以使用以下属性设置大小：

app:indicatorSize="180dp"
app:trackThickness="10dp"

完整的 xml 项目看起来像：

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_
    android:layout_
    app:indicatorSize="180dp"
    app:trackThickness="10dp"
    app:trackColor="@color/colorPrimary"
    app:indicatorColor="@color/colorPrimaryDark"
    android:layout_gravity="center_horizontal"
    android:progress="80"
    app:trackCornerRadius="8dp"
    android:layout_marginTop="30dp"/>

请注意：您需要将 XML 显示主题设置为“MeterialTheme”才能看到 UI 更新。

【参考方案2】：

对于那些使用数据绑定的，你可以使用

@BindingAdapter("bindProgressSizeToViewWidth")
fun bindProgressSizeToViewWidth(circularProgressIndicator: CircularProgressIndicator, view: View?) 
view ?: LogEventUtils.logApiError("bindProgressSizeToViewWidth: null view").run  return  // safty line you can remove it

    view.post 
        circularProgressIndicator.indicatorSize = view.measuredWidth
    

XML（只需将文本填充 12dp 并在圆形进度指示器内居中）

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/progressTv"
                    android:layout_
                    android:layout_
                    android:fontFamily="sans-serif"
                    android:lineSpacingExtra="4sp"
                    android:padding="12dp"
                    tools:text="4/15"
                    android:textColor="@color/pumpkin_orange"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toStartOf="@id/circularProgressIndicator"
                    app:layout_constraintBottom_toBottomOf="@+id/circularProgressIndicator"
                    app:layout_constraintEnd_toEndOf="@+id/circularProgressIndicator"
                    app:layout_constraintTop_toTopOf="@+id/circularProgressIndicator" />

                <com.google.android.material.progressindicator.CircularProgressIndicator
                    android:id="@+id/circularProgressIndicator"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="16dp"
                    android:indeterminate="false"
                    android:progress="@40"
                    app:bindProgressSizeToViewWidth="@progressTv"
                    app:indicatorColor="?colorPrimary"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:trackColor="@color/battleship_grey" />

结果

【参考方案3】：

你必须使用 indicatorSize 属性：

   <com.google.android.material.progressindicator.CircularProgressIndicator
            android:indeterminate="true"
            android:layout_
            android:layout_
            app:indicatorSize="90dp"
            app:indicatorColor="@color/colorPrimary"
            ../>

【讨论】：

是否可以设置indicatorSize 以匹配父级？我正在尝试用 CircularProgressIndicator 填充父 LinearLayout

@remotedeveloper 您可以使用viewTreeObserver.addOnGlobalLayoutListener 获取父视图大小并将其应用于indicatorSize

【参考方案4】：

我认为这是因为 progressBar 的 maxHeight 和 maxWidth 在样式中设置为 48dp。您必须覆盖它才能使条形缩放。