android - ConstraintLayout 不显示最后一个 child

Question

我定义了一个 ConstraintLayout，它由 3 个部分组成

• 图表
• 包含与图表相关的信息的 block
• 刷新率

定义如下:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/graph_frame"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/chartBackgroundColor"
        android:paddingBottom="8dp"
        app:layout_constraintDimensionRatio="5:4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/graph"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/chartBackgroundColor" />
    </FrameLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/information"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#F21F2124"
        android:padding="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/graph_frame">

        <!-- title -->
        <TextView
            android:id="@+id/current_voltage_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="150dp"
            android:text="Current Volt. (3s)"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/average_voltage_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Average Volt."
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/current_voltage_title" />

        <TextView
            android:id="@+id/range_min_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Range min. (3s)"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/average_voltage_title" />

        <TextView
            android:id="@+id/range_max_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Range max. (3s)"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/range_min_title" />

        <TextView
            android:id="@+id/auto_focus_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Auto Focus"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/range_max_title" />

        <TextView
            android:id="@+id/lecture_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:minWidth="150dp"
            android:text="Lecture"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_title"
            app:layout_constraintTop_toBottomOf="@+id/auto_focus_title" />

        <!-- value -->
        <TextView
            android:id="@+id/current_voltage_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.currentVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toRightOf="@+id/current_voltage_title"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/average_voltage_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.averageVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/current_voltage_value" />

        <TextView
            android:id="@+id/range_min_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.rangeMinVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/average_voltage_value" />

        <TextView
            android:id="@+id/range_max_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.rangeMaxVoltageLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/range_min_value" />

        <TextView
            android:id="@+id/auto_focus_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.autoFocusLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/range_max_value" />

        <TextView
            android:id="@+id/lecture_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="@{viewModel.autoPlayLabelValue}"
            android:textColor="@android:color/white"
            app:layout_constraintLeft_toLeftOf="@+id/current_voltage_value"
            app:layout_constraintTop_toBottomOf="@+id/auto_focus_value" />

        <!-- pause -->
        <ImageButton
            android:id="@+id/pause_button"
            android:onClick="@{() -> viewModel.pauseButtonPressed()}"
            android:src="@drawable/ic_pause_white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/auto_focus_button"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="spread" />

        <!-- auto-focus -->
        <ImageButton
            android:id="@+id/auto_focus_button"
            android:onClick="@{() -> viewModel.autoFocusButtonPressed()}"
            android:src="@drawable/ic_pause_white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/pause_button" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/warning"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#CC1F2124"
        android:gravity="center"
        android:text="@{viewModel.refreshRateLabelValue}"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/information"
        tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>

<data>

    <variable
        name="viewModel"
        type="com.imihydronic.hytune.features.oscilloscope.OscilloscopeViewModel" />
</data>

在 Android Studio 的预览中，一切都按预期显示:

但不幸的是，最后一个 block (刷新率 block )并没有出现在真实设备上:

我在这里错过了什么？

更新:上面给出的布局用于 Fragment。此 Fragment 在 FrameLayout 容器内膨胀，而该容器又被 ScrollView 包裹。删除 ScrollView 并使用 Taslim Oseni 解决方案完成了工作。

Answer 1

我可以看到您有三个 View 与 id 线性排列:graph_frame、information 和 warning。 一个快速的解决方法是在两个垂直端限制这三个 View 中的每一个(顶部和底部)。这样，无论如何，所有三个 View 都将始终适合屏幕。

因此您的代码看起来像这样(我截断了代码以提高可读性):

<androidx.constraintlayout.widget.ConstraintLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">


<FrameLayout
    android:id="@+id/graph_frame"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/chartBackgroundColor"
    android:paddingBottom="8dp"
    app:layout_constraintDimensionRatio="5:4"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/information">
    ...
</FrameLayout>


<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/information"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#F21F2124"
    android:padding="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/graph_frame"
    app:layout_constraintBottom_toTopOf="@+id/warning">
    ...
</androidx.constraintlayout.widget.ConstraintLayout>


<TextView
    android:id="@+id/warning"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#CC1F2124"
    android:gravity="center"
    android:text="@{viewModel.refreshRateLabelValue}"
    android:textColor="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/information"
    tools:text="Refresh rate = 125ms" />


</androidx.constraintlayout.widget.ConstraintLayout>

希望对您有所帮助。编码愉快!