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 这样做的方法，因为你 NOT 希望你的按钮伸展并变得更大。

DO这个：

在你的一个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;
    }

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

2 个答案: