为什么我的文本在具有左约束时会出现在左侧
Why is my text going out on the left side when it has a left constraint
基本上我想要做的是让 Checkbox
和 TextView
在它的左边右对齐。这是可行的,但是当文本很长时,它会在左边框之外的左侧继续,而不是文本换行。
这是设计工具显示的内容,在 phone 上看起来大致相同:
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:padding="24dp"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:textColor="@color/secondary_text"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="message" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintTop_toTopOf="@+id/always_do_this_checkbox_label"
app:layout_constraintLeft_toLeftOf="@+id/message"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintRight_toLeftOf="@+id/always_do_this_checkbox_label"
android:id="@+id/spacer" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/always_do_this_checkbox_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:layout_marginTop="4dp"
android:textColor="@color/secondary_text"
android:textSize="14sp"
android:layout_marginRight="16dp"
app:layout_constraintTop_toTopOf="@+id/always_do_this"
app:layout_constraintLeft_toRightOf="@+id/spacer"
app:layout_constraintRight_toLeftOf="@+id/always_do_this"
tools:text="this is is super long text that will probably wrap as soon as it" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/always_do_this"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="@+id/message"
app:layout_constraintLeft_toRightOf="@+id/always_do_this_checkbox_label"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
我做错了什么?
编辑:需要说明的是,对于长文本,问题在于它会出现在左侧。但它适用于短文本,一切都是右对齐的。已建议的一些解决方案将修复它以用于长文本,但最终会破坏它以用于短文本。两者都必须有效。
因为你不使用 layout_constrainedWidth 而你的 always_do_this_checkbox_label TextView 有一个 layout_constraintLeft_toRightOf 必须是 layout_constraintLeft_toLeftOf 并且 app:layout_constraintHorizontal_bias 必须是1 和 app:layout_constraintHorizontal_chainStyle 必须 packed,因此将您的 TextView 更改为:
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/always_do_this_checkbox_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:layout_marginTop="4dp"
android:textColor="@color/secondary_text"
android:textSize="14sp"
android:layout_marginRight="16dp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="@+id/always_do_this"
app:layout_constraintLeft_toLeftOf="@+id/spacer"
app:layout_constraintRight_toLeftOf="@+id/always_do_this"
tools:text="this is is super long text that will probably wrap as soon as it" />
您可以尝试布局供您参考:
<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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:padding="24dp"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:textColor="@android:color/black"
android:textSize="14sp"
android:gravity="end"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="message" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintTop_toTopOf="@+id/always_do_ths"
app:layout_constraintLeft_toLeftOf="@+id/message"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintRight_toLeftOf="@+id/always_do_label"
android:id="@+id/spacer" />
<TextView
android:id="@+id/always_do_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="this is is super long, loong, lonng, longg Text that will probably wrap as soon as it"
android:textSize="14sp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="@id/message"
app:layout_constraintTop_toBottomOf="@+id/message"
app:layout_constraintEnd_toStartOf="@+id/always_do_ths"/>
<androidx.appcompat.widget.AppCompatCheckBox
android:id="@+id/always_do_ths"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/message"
app:layout_constraintBottom_toBottomOf="@+id/always_do_label"/>
<View
android:id="@+id/spacer_2"
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/always_do_label"
android:layout_marginTop="10dp"/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_percent="0.85"
android:text="really long text with lots n lots of data to display and with\nstill filling with some random data...."
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="@+id/spacer_2"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatCheckBox
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/spacer_2"
app:layout_constraintWidth_percent="0.15"/>
</androidx.constraintlayout.widget.ConstraintLayout>
为了更清晰起见,我添加了两个示例布局,您可以使用其中一个。对于要右对齐的文本,您可以使用重力作为结束或右对齐。
基本上我想要做的是让 Checkbox
和 TextView
在它的左边右对齐。这是可行的,但是当文本很长时,它会在左边框之外的左侧继续,而不是文本换行。
这是设计工具显示的内容,在 phone 上看起来大致相同:
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:padding="24dp"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:textColor="@color/secondary_text"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="message" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintTop_toTopOf="@+id/always_do_this_checkbox_label"
app:layout_constraintLeft_toLeftOf="@+id/message"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintRight_toLeftOf="@+id/always_do_this_checkbox_label"
android:id="@+id/spacer" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/always_do_this_checkbox_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:layout_marginTop="4dp"
android:textColor="@color/secondary_text"
android:textSize="14sp"
android:layout_marginRight="16dp"
app:layout_constraintTop_toTopOf="@+id/always_do_this"
app:layout_constraintLeft_toRightOf="@+id/spacer"
app:layout_constraintRight_toLeftOf="@+id/always_do_this"
tools:text="this is is super long text that will probably wrap as soon as it" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/always_do_this"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="@+id/message"
app:layout_constraintLeft_toRightOf="@+id/always_do_this_checkbox_label"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
我做错了什么?
编辑:需要说明的是,对于长文本,问题在于它会出现在左侧。但它适用于短文本,一切都是右对齐的。已建议的一些解决方案将修复它以用于长文本,但最终会破坏它以用于短文本。两者都必须有效。
因为你不使用 layout_constrainedWidth 而你的 always_do_this_checkbox_label TextView 有一个 layout_constraintLeft_toRightOf 必须是 layout_constraintLeft_toLeftOf 并且 app:layout_constraintHorizontal_bias 必须是1 和 app:layout_constraintHorizontal_chainStyle 必须 packed,因此将您的 TextView 更改为:
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/always_do_this_checkbox_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:layout_marginTop="4dp"
android:textColor="@color/secondary_text"
android:textSize="14sp"
android:layout_marginRight="16dp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="@+id/always_do_this"
app:layout_constraintLeft_toLeftOf="@+id/spacer"
app:layout_constraintRight_toLeftOf="@+id/always_do_this"
tools:text="this is is super long text that will probably wrap as soon as it" />
您可以尝试布局供您参考:
<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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:padding="24dp"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="3dp"
android:textColor="@android:color/black"
android:textSize="14sp"
android:gravity="end"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="message" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintTop_toTopOf="@+id/always_do_ths"
app:layout_constraintLeft_toLeftOf="@+id/message"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintRight_toLeftOf="@+id/always_do_label"
android:id="@+id/spacer" />
<TextView
android:id="@+id/always_do_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="this is is super long, loong, lonng, longg Text that will probably wrap as soon as it"
android:textSize="14sp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="@id/message"
app:layout_constraintTop_toBottomOf="@+id/message"
app:layout_constraintEnd_toStartOf="@+id/always_do_ths"/>
<androidx.appcompat.widget.AppCompatCheckBox
android:id="@+id/always_do_ths"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/message"
app:layout_constraintBottom_toBottomOf="@+id/always_do_label"/>
<View
android:id="@+id/spacer_2"
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/always_do_label"
android:layout_marginTop="10dp"/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_percent="0.85"
android:text="really long text with lots n lots of data to display and with\nstill filling with some random data...."
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="@+id/spacer_2"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatCheckBox
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/spacer_2"
app:layout_constraintWidth_percent="0.15"/>
</androidx.constraintlayout.widget.ConstraintLayout>
为了更清晰起见,我添加了两个示例布局,您可以使用其中一个。对于要右对齐的文本,您可以使用重力作为结束或右对齐。