我定义了一个 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 解决方案完成了工作。
最佳答案
我可以看到您有三个 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>
希望对您有所帮助。编码愉快!
关于android - ConstraintLayout 不显示最后一个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57772408/