[英]How to center two text views inside a Constraint Layout constantly spaced?
I've this layout for a RecyclerView(standard stuff omitted): 我有一个RecyclerView的布局(省略了标准内容):
<androidx.constraintlayout.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
<TextView
android:id="@+id/id_tv_movie_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="@+id/id_tv_movie_release_year"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/id_tv_movie_release_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/id_tv_movie_name" />
</androidx.constraintlayout.ConstraintLayout>
But when I add really long and really short titles I get this: 但是,当我添加很长很短的标题时,我得到的是:
Colored lines show every row has the exact distance between startOfParent-startOf1-endOf1-startOf2-endOf2-endOfParent
. 彩色线表示每一行在
startOfParent-startOf1-endOf1-startOf2-endOf2-endOfParent
之间具有精确的距离。
How can I separate this textViews into 2 constant width columns and when title is bigger, break it into more lines? 如何将这个textViews分成2个等宽的列,当标题较大时,将其分成更多行?
Something like 就像是
The Lord of The Rings: 2001
The FellowShip of the Ring
MIB 1997
you can do like below 你可以像下面这样
<?xml version="1.0" encoding="utf-8"?>
<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">
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title asdf asdf asdg asgasdg asdfg"
android:textAppearance="?android:textAppearanceLarge"
app:layout_constraintEnd_toStartOf="@+id/text"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteY="66dp" />
<TextView
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="2015"
android:textAppearance="?android:textAppearanceLarge"
app:layout_constraintBottom_toBottomOf="@+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toTopOf="@+id/textView3" />
</android.support.constraint.ConstraintLayout>
The easiest way to split the item so that each TextView
consumes a constant width is to specify layout_constraintWidth_percent
like this for 50% of the width: 拆分项目以使每个
TextView
占用恒定宽度的最简单方法是像这样为50%的宽度指定layout_constraintWidth_percent
:
app:layout_constraintWidth_percent="0.5"
To allocate 70% of the width to the title (centered) and 30% to the year (right-justified), do the following: 要将宽度的70%分配给标题(居中),将30%的宽度分配给年份(右对齐),请执行以下操作:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/id_tv_movie_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="A Very, Very, Very, Very, Very, Very, Very, Very, Very Long Movie Title"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/id_tv_movie_release_year"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.7" />
<TextView
android:id="@+id/id_tv_movie_release_year"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="end"
android:text="2002"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3" />
</androidx.constraintlayout.widget.ConstraintLayout>
Which will display the following: 将显示以下内容:
The same layout can be made with a horizontal chain and layout weights if other than a 50/50 split is needed. 如果不需要50/50分割,则可以使用水平链和布局权重进行相同的布局。
Another easy option that you can use is chains : 您可以使用的另一个简单选择是chains :
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.