代码之家 › 专栏 › 技术社区 › DaveNOTDavid

对宽度限制使用约束而不是maxWidth属性

android-constraintlayout android-support-library xml android

DaveNOTDavid · 技术社区 · 7 年前

我想知道是否有可能实现以下目标(消息线程; 首先从发件人的右侧开始,与收件人的一侧相对 )查看:

。。。使用支持库中的Android约束,而不是maxWidth属性,特别是对于文本气泡的宽度,我非常希望容器的宽度(包括TextView及其圆形背景和发件人的ImageView图标)最多为屏幕的五分之四,然后像标准消息应用程序一样,相应地包装下面的文本行。因为到目前为止,我无法使用以下约束准则来实现它:

<?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="wrap_content">

    <android.support.constraint.Guideline
        android:id="@+id/left_margin_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2"/>

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_one_half"
        app:layout_constraintStart_toEndOf="@+id/left_margin_guideline"
        app:layout_constraintEnd_toEndOf="parent">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/message_icon"
            android:layout_width="@dimen/conversation_icon_size"
            android:layout_height="@dimen/conversation_icon_size"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:src="@drawable/ic_toolbar_logo"/>

        <io.github.rockerhieu.emojicon.EmojiconTextView
            android:id="@+id/message_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_curved_corners_message"
            android:padding="@dimen/padding_one_half"
            android:layout_marginRight="@dimen/padding_one_half"
            android:layout_marginEnd="@dimen/padding_one_half"
            app:layout_constraintEnd_toStartOf="@+id/message_icon"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:text="This is a message that should wrap if it gets too long or if there is a \nnewline in the middle of the message"/>

        <TextView
            android:id="@+id/message_posted"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/font_small"
            android:textColor="@color/colorGrayXLight"
            android:layout_marginTop="@dimen/padding_one_half"
            app:layout_constraintTop_toBottomOf="@+id/message_text"
            app:layout_constraintEnd_toEndOf="@+id/message_text"
            tools:text="2:45 PM"/>

    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

。。。导致:

正如您所注意到的,消息文本从一开始就被切断,如果我要设置文本与父文本的开始约束,那么它就违背了单行文本(即单个单词)的全部目的,因为文本的宽度将与父文本匹配,当我想将其包装时,就像顶部屏幕截图中的一样,将其居中。

综上所述,如果我能在有约束的情况下解决这个问题,那就太好了,因为我希望这个布局在其他屏幕大小上尽可能响应,而不使用带有硬编码值的maxWidth属性,也不使用基于屏幕大小的编程设置,我发现在样板代码方面非常不便,尤其是对于消息线程视图。

2 回复 | 直到 7 年前

Nicolas Roard 7 年前

是的,您可以在该文本元素上使用偏置居中约束(左+右+偏置1)和约束宽度(ConstraintLayout 1.1)来实现这一点:

  <?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="wrap_content">

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:text="a message that should wrap if it is too long or if there is a space in the middle of the text"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="2:45 PM"
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/textView7" />
</android.support.constraint.ConstraintLayout>

将文本替换为可正确调整的较短消息:

gopalanrc 5 年前

解决此类问题的正确方法是使用 app:layout_constrainedWidth=âtrue|falseâ 或 app:layout_constrainedHeight=âtrue|falseâ 根据需要。