ConstraintLayout:当文本展开时保留在父级中的复合ImageView

麦克斯1998

考虑以下布局:

<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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text" />

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@id/text_view"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>

图像视图(或按钮或任何其他小部件,重要的是它具有固定的大小)在TextView的右/右对齐,其大小为wrap_content,因此,文本本身仅占用所需的空间。

我现在想要的是,当文本展开时(也就是更长的时间),该按钮将对齐到父级的右边,并且文本视图仅获得左侧的宽度并变为椭圆形。此刻,图像视图被推到外面,一旦填充整个父级,文本就会变成椭圆形。

我试图通过在图像上添加endToEnd =“ parent”约束并将水平偏差设置为0(请参见代码)来解决此问题,但这不起作用。

关于我可以做什么的任何建议?

帕维尔·拉斯考斯基(Pawel Laskowski)

为了防止ImageView将推送到父对象之外,您需要将的结尾限制TextView为的开头ImageView以创建链。现在,要确保TextView仅占用所需的空间,但也要强制实施其约束,则需要在中添加app:layout_constrainedWidth="true"属性TextView

如果您想将ImageView其立即保留在的右侧,则TextView可以使用packed水平偏差为的链式样式0如果您希望将ImageView其与父级的右边对齐,则可以使用spread_inside链式样式而不会产生偏差。

经过上述更改的结果XML可能看起来像这样:

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/image_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/text_view"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>

编辑:根据评论中的要求,这是如何Barrier在3TextViewsImageView在这种情况下,您无需为的末端指定约束,TextViews因此不再需要将它们水平链接。相反,您将创建一个Barrier,其方向为中引用end的所有方向这将确保始终位于最宽处最后要做的是将的起始端限制TextViewsBarrierBarrierTextViewImageViewBarrier

XML示例:

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toTopOf="@id/text_view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text1" />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toTopOf="@id/text_view3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text_view1"
        tools:text="Text2" />

    <TextView
        android:id="@+id/text_view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text_view2"
        tools:text="Text3" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="text_view1,text_view2,text_view3" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

python-从子级调用父方法时保留在基类中

双向映射空值保留在子级的父级引用列中

删除的小部件保留在父级上

将文本保留在div中

将子视图保留在ConstraintLayout中的布局内

当Textview为HorizontalCentered时,如何使ImageView保留在TextView中

使用Bootstrap输入不会保留在父容器中

将工具提示保留在父容器中

Android 如何在外面点击时将文本保留在 EditText 中?

如何将UILabel的文本保留在safeArea中?

将文本保留在UITableViewCell内的UITextView中

使用XPath将元素保留在文本中

读取JSON保留在sqllite中时出错

更改路线时,导入CSS仍保留在页面中

展开,但将原始数组保留在每个结果行中

更改片段时,ImageView上的Android-Keep图像保留在片段上

更改视图高度/宽度时,如何使子元素保留在父元素内?

如何从其子活动中获取父活动的价值并将其保留在android中?

删除重复但优先保留在大熊猫中的优先级

如何将文本框中的文本保留在附加框中?

为什么成员函数名称查找保留在父类中?

如何删除父元素,但将其子元素保留在 Thymeleaf 中?

为什么这条轻微的红线保留在父容器中?

父脚本调用子脚本:如果退出,如何保留在子脚本中设置的变量?

除非修改,否则将文本保留在“编辑文本”中

将用户保留在 TEdit 中

保留在python,pandas中

将事件保留在Fullcalendar中

调整大小并保留在向量中