当我想将通用布局代码重构为一个单独的xml文件时,我正在努力让ConstraintLayout为我工作。我可以使用RelativeLayouts轻松地做到这一点,但我相信RelativeLayouts已被弃用,我们现在应该使用ConstraintLayous。
我有一个带有屏幕的应用,该屏幕在纵向和横向上具有不同的布局,如下图所示。
我有2个具有相同名称的布局文件(“ my_layout.xml”),一个位于“ layout”文件夹中,另一个位于“ layout-land”中。目前,我已经复制了两个布局文件中的所有xml,并调整了约束,以便在横向版本中将视图水平放置。
肖像版
<androidx.constraintlayout.widget.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">
<!-- OTHER VIEWS 1 -->
<View
android:id="@+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="@+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="@+id/OtherViews1"
app:layout_constraintBottom_toTopOf="@+id/scrollbar" />
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="@+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="@+id/scrollbar"
app:layout_constraintBottom_toBottomOf="@+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatSeekBar
android:id="@+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="@+id/OtherViews3"
app:layout_constraintStart_toEndOf="@+id/slow"
app:layout_constraintEnd_toStartOf="@+id/fast"/>
<TextView
android:id="@+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="@+id/scrollbar"
app:layout_constraintBottom_toBottomOf="@+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="@+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
横向版本
<androidx.constraintlayout.widget.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">
<!-- OTHER VIEWS 1 -->
<View
android:id="@+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="@+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="@+id/OtherViews1"
app:layout_constraintBottom_toBottomOf="parent" />
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="@+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintStart_toEndOf="@+id/OtherViews2"
app:layout_constraintTop_toTopOf="@+id/scrollbar"
app:layout_constraintBottom_toBottomOf="@+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatSeekBar
android:id="@+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="@+id/OtherViews3"
app:layout_constraintStart_toEndOf="@+id/slow"
app:layout_constraintEnd_toStartOf="@+id/fast"/>
<TextView
android:id="@+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="@+id/scrollbar"
app:layout_constraintBottom_toBottomOf="@+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="@+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content
app:layout_constraintStart_toEndOf="@+id/OtherViews2""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
两个文件中都复制了“慢速”文本框,滚动条和“快速”文本框的xml。我想将这3个元素的布局移到一个单独的文件中,并在两个“ my_layout.xml”文件中引用它,以便其更可重用,并且在布局文件之间没有重复。我想保持层次结构平坦(否则我将只使用RelativeLayouts)。我不知道如何为滚动条UI指定新的可重用xml布局文件的约束。
纵向版本重新使用滚动条布局
<androidx.constraintlayout.widget.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">
<!-- OTHER VIEWS 1 -->
<View
android:id="@+id/OtherViews1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- OTHER VIEWS 2 -->
<View
android:id="@+id/OtherViews2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottom="@+id/OtherViews1"
app:layout_constraintBottom_toTopOf="@+id/scrollbar" />
<include
layout="@layout/scrollbar
app:layout_constraintBottom_toTopOf="@+id/OtherViews3"
app:layout_constraintStart_toStartOf="parent" />
<!-- OTHER VIEWS 3 -->
<View
android:id="@+id/OtherViews3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
可重复使用的滚动条布局
<androidx.constraintlayout.widget.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="wrap_content"
android:layout_height="wrap_content">
<!-- SCROLL BAR VIEWS -->
<TextView
android:id="@+id/slow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="@+id/scrollbar"
app:layout_constraintBottom_toBottomOf="@+id/scrollbar"
app:layout_constraintStart_toStartOf="parent"/> ******************
<androidx.appcompat.widget.AppCompatSeekBar
android:id="@+id/scrollbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintBottom_toTopOf="@+id/OtherViews3" ******************
app:layout_constraintStart_toEndOf="@+id/slow"
app:layout_constraintEnd_toStartOf="@+id/fast"/>
<TextView
android:id="@+id/fast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
app:layout_constraintTop_toTopOf="@+id/scrollbar"
app:layout_constraintBottom_toBottomOf="@+id/scrollbar"
app:layout_constraintStartEnd_toEndOf="parent" /> ******************
</androidx.constraintlayout.widget.ConstraintLayout>
我不知道在标有****的行中要加什么内容。如果我指定“慢”文本框从父级的开头开始,则不适用于横向版本。我希望此滚动条布局仅指示慢速滚动条在左侧,中间的滚动条(占用所有剩余空间),而快速文本框在右侧。 我如何使用约束布局来做到这一点? 我还如何将所有3个视图垂直居中?
RelativeLayout非常容易,因为我会说慢速文本框是alignedParentLeft,快速是alignedParentRight,而滚动条在慢速文本框的右侧和快速文本框的左侧。最后,我想说所有3个视图在父级中垂直居中。