代码之家 › 专栏 › 技术社区 › Jemil Riahi

约束布局链

android-constraintlayout android

Jemil Riahi · 技术社区 · 7 年前

我发现很难使用 ConstraintLayout 让我解释一下我在所附图片中发现的问题

这里我们有两排。绿色框表示文本视图。橙色框表示ImageView(或任何其他视图)。

在第一行,文本视图1(左)被限制在屏幕的左侧。imageview被约束到此textview。

我遇到的问题是,当这个文本视图大于右侧的文本视图时。我不想将图像剪辑到该视图上。我希望它像图片中的第二行一样结束。

我想我应该使用约束链。但我无法让它发挥作用。

有没有关于如何实现我想要的东西的想法?

编辑,添加布局

    <?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/tv1"
        android:layout_width="wrap_content"
        android:layout_height="19dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:lines="1"
        app:layout_constraintEnd_toStartOf="@+id/tv2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@string/lorem_ipsum" />


    <ImageView
        android:id="@+id/iv1"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/tv1"
        app:layout_constraintEnd_toStartOf="@+id/tv2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/tv1"
        app:layout_constraintTop_toTopOf="@+id/tv1"
        tools:background="@drawable/ic_close" />


    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:textAlignment="viewEnd"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="18 000 000 Dollar" />Â¨


</android.support.constraint.ConstraintLayout>

2 回复 | 直到 7 年前

Cheticamp 7 年前

ConstrataintLayout 版本1.1.0-beta5提供了一些您正在寻找的更好的维度控制。请参见 release notes .

具体而言,您可以利用 layout_constraintWidth_default = wrap 这将迫使 TextView 在满足其约束的限制后进行包装。

Wrap提供了一个重要的新行为,小部件的大小调整就像使用了Wrap\u内容一样,但受到连接约束的限制。因此,小部件不会超出端点。

以下XML位置 tv1 和 iv1 在受左侧父对象约束的打包链中,以及 tv2 在右边。 tv1 有 app:layout_constraintWidth_default="wrap" 设置

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:lines="1"
        android:text="This is some very long text. How does it behave?"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/iv1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap"
        tools:ignore="HardcodedText" />


    <ImageView
        android:id="@+id/iv1"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginEnd="8dp"
        android:background="#ff9d00"
        app:layout_constraintBottom_toBottomOf="@+id/tv1"
        app:layout_constraintEnd_toStartOf="@id/tv2"
        app:layout_constraintStart_toEndOf="@+id/tv1"
        app:layout_constraintTop_toTopOf="@+id/tv1"
        tools:ignore="ContentDescription" />


    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="18 000 000 Dollar"
        android:textAlignment="viewEnd"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <android.support.v4.widget.Space
        android:id="@+id/spacer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/tv2"
        app:layout_constraintEnd_toStartOf="@id/tv2"
        app:layout_constraintTop_toTopOf="@id/tv2" />

</android.support.constraint.ConstraintLayout>

下面是长文本布局的外观。。。

... 还有一些简短的文字。。。

NIKHIL NEDIYODATH 7 年前

您可以使用 elevation 中类似于z索引的属性 html . 对于ImageView,添加高程=1dp;对于TextView,添加高程=2dp,如下所示

<ImageView
    android:id="@+id/iv1"
    android:elevation="1dp"
    android:layout_width="16dp"
    android:layout_height="16dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/tv1"
    app:layout_constraintEnd_toStartOf="@+id/tv2"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toEndOf="@+id/tv1"
    app:layout_constraintTop_toTopOf="@+id/tv1"
    tools:background="@drawable/ic_close" />


<TextView
    android:id="@+id/tv2"
    android:elevation="2dp"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="8dp"
    android:textAlignment="viewEnd"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="18 000 000 Dollar" />Â¨