[英]TextView wrapping/off screen in ConstraintLayout
I am trying to set two TextViews in a ConstraintLayout side by side.我试图在 ConstraintLayout 中并排设置两个 TextView。 TextView2 (Market) should always be on right of TextView1.
TextView2(市场)应始终位于 TextView1 的右侧。 It should never go off screen.
它永远不应该离开屏幕。 This is my requirement with different lengths of TextView1:
这是我对不同长度的 TextView1 的要求:
This is my XML:这是我的 XML:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem ipsum"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/tvRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/half_margin"
android:background="@drawable/tag_marketplace_backround"
android:paddingStart="@dimen/half_margin"
android:paddingEnd="@dimen/half_margin"
android:text="@string/market"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@id/chat_message"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This works when TextView1 is small (first image).这在 TextView1 很小(第一张图片)时有效。 But TextView2 goes off screen when I increase length of TextView2.
但是当我增加 TextView2 的长度时 TextView2 会离开屏幕。 Please help me implement this.
请帮我实现这一点。
Try this layout.试试这个布局。 It uses chains and horizontal bias:
它使用链和水平偏置:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum "
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tvRate"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tvRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/half_margin"
android:background="@drawable/ic_launcher_background"
android:paddingStart="@dimen/half_margin"
android:paddingEnd="@dimen/half_margin"
android:text="@string/market"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/chat_message"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try this尝试这个
<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="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/tvRate"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Lorem dsjdlk lkjdksl jdlk jdlk djslkdjslkdsjdlskdjsdlsjsdl kjdl ksjd lksjlkd jl kjdl ksj slk jdslkd sjdlskjdslkj dlkj dlkjd lkd jsldksjdlksdjskdlsdjlksdjsl kj ldkjd lskdjs ldkjsldskjlk" />
<TextView
android:id="@+id/tvRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Market" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
0dp is basically between the left side of the screen till the right text which is tvRate (take as much space as possible) wrap content is basically take the space that is needed to wrap the content that the element has 0dp 基本上在屏幕的左侧直到右边的文本 tvRate(占用尽可能多的空间) wrap content 基本上占用了包装元素所具有的内容所需的空间
I believe you can achieve that using the horizontal chain you make both View
's layouts depend on each other and on the parent.我相信您可以使用水平链实现这一点,您可以使
View
的布局相互依赖并依赖于父级。 Then ConstraintLayout
can define their resolved constraints in interesting ways.然后
ConstraintLayout
可以以有趣的方式定义它们解决的约束。 You can define the style of the chain on the first View
in the chain.您可以在链中的第一个
View
上定义链的样式。 I also noticed that the orientation
was set, but that does nothing for ConstraintLayout
and the layout_constraintWidth_default
only applies when the android:width
is set to 0dp
.我还注意到设置了
orientation
,但这对ConstraintLayout
没有任何作用,并且layout_constraintWidth_default
仅在android:width
设置为0dp
。
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem ipsum"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="@id/tvRate"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<TextView
android:id="@+id/tvRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/half_margin"
android:background="@drawable/tag_marketplace_backround"
android:paddingStart="@dimen/half_margin"
android:paddingEnd="@dimen/half_margin"
android:text="@string/market"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@id/chat_message"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.