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

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

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

此代码在我的片段中 class。

    @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;
    }

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

progress bar inside fragment cuts off at top and bottom

android

android-progressbar

android-fragments

progress-bar