片段内的进度条在顶部和底部切断

Question

我想实现一个计时器，它周围有一个圆圈，随着计时器开始计时而逐渐消失。我遇到的问题是包含进度条的片段不会缩放以适应它所在的容器并在顶部和底部切断。我感觉这是一个与高度相关的问题，因为如果我增加包含片段的容器的高度，进度条会再次按预期工作。

此图显示圆形进度条在顶部和底部被截断

在这张图片中，我增加了父母的高度，并且切断问题得到了解决，但这个解决方案不适合我的目的。

这是我的 xml 文件

shape_ring_color_yellow.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="360"
    android:toDegrees="0">
    <shape
        android:shape="ring"
        android:thickness="10dp"
        android:useLevel="true">

        <solid android:color="@color/colorCountDownTimerYellow" />
    </shape>
</rotate>

count_down_timer_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">


    <TextView
        android:id="@+id/textViewTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text=""
        android:textColor="@android:color/black"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="@+id/progressBarCircle"
        app:layout_constraintEnd_toEndOf="@+id/progressBarCircle"
        app:layout_constraintStart_toStartOf="@+id/progressBarCircle"
        app:layout_constraintTop_toTopOf="@+id/progressBarCircle" />


    <ProgressBar
        android:id="@+id/progressBarCircle"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:max="100"
        android:progress="100"
        android:progressDrawable="@drawable/shape_ring_color_yellow" />

</RelativeLayout>

使用 count_down_timer_fragment.xml 的布局的部分 XML

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bubblewall.saik.bubblewall.RemoteControlBubbleWall"
    android:background="@drawable/background_gradient_color_light_blue">


    <LinearLayout
        android:id="@+id/linear_layout_control_buttons"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/horizontal_guideline_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/button_on_off"
            style="@style/Widget.AppCompat.Button"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/button_background_gradient_green_black_border"
            android:text="@string/on" />


        <fragment
            android:id="@+id/countDownTimerFragment"
            android:name="com.bubblewall.saik.bubblewall.CountDownTimerFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:scaleType="fitCenter"
            tools:layout="@layout/count_down_timer_fragment" />


        <Button
            android:id="@+id/button_sleep"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/button_background_gradient_yellow_black_border"
            android:text="@string/sleep"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="@+id/constraint_layout_sleep_button_and_timer"
            app:layout_constraintEnd_toEndOf="@+id/constraint_layout_sleep_button_and_timer"
            app:layout_constraintStart_toStartOf="@+id/constraint_layout_sleep_button_and_timer"
            app:layout_constraintTop_toTopOf="@+id/constraint_layout_sleep_button_and_timer" />

    </LinearLayout>

此时我尝试了一切。我尝试将布局重力设置为中心，我尝试更改 scaleType 但没有任何效果。

Answer 1

这是一种TRICK方法，因为您确实不希望您的按钮伸展并变大。

这样做：

在您的Buttons 之一（比如说on_off_button）中，您必须添加以下行：

android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"

然后在同一个 Button 中将值的数量增加到 2dp 然后到 3dp 然后到 4dp 等等，同时密切关注您的循环进度，直到您对循环值的方式感到满意看起来又好又饱。但请记住，这两个值必须相同，这将平衡顶部和底部，因此 Button 将居中。

然后将边距值复制并粘贴到其他剩余的Button，以便它们可以等于现在看起来相等。

Answer 2

好的，我想我终于能够解决问题了。据我所知，这是因为进度条在线性布局中水平缩放，并且造成进度条的水平和垂直尺寸不同的情况。令人惊讶的是，我找不到可以在布局文件中使用的解决方案，最终我编写了代码来解决这个问题。我基本上所做的是在高度或宽度上设置填充，以确保片段内的内容具有相等的高度和宽度。这是处理该问题的代码。

这段代码在我的片段类中。

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        final View root = inflater.inflate(R.layout.count_down_timer_fragment, container, false);

        root.post(new Runnable() {
            @Override
            public void run() {
                int fragmentHeight=root.getMeasuredHeight();
                int fragmentWidth = root.getMeasuredWidth();
                CustomLogger.log("------------------------- H: " + fragmentHeight + " W: " + fragmentWidth, 'i');
                if(fragmentWidth > fragmentHeight){
                    root.setPadding((fragmentWidth - fragmentHeight) / 2, 0, (fragmentWidth - fragmentHeight) / 2, 0);
                } else {
                    root.setPadding(0, (fragmentHeight - fragmentWidth) / 2, 0, (fragmentHeight - fragmentWidth) / 2);
                }
            }
        });

        return root;
    }