android - 具有水平对齐和自动调整大小的 ConstraintLayout、TextView 和 ImageView
问题描述
我一直面临一个问题,并认为这是一组多个不正确的定位选择,之前的一些信息:
1 - 可绘制图像的宽度和高度比它适合的要大。2 - TextView 文本是动态的,但不应超过一行,如果超过一行,则应“剪切”。
我有以下代码:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/icon"
android:text="my small text"
android:lines="1"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/description"
app:layout_constraintTop_toBottomOf="@id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/icon"
android:text="description text"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/icon"
app:layout_constraintStart_toEndOf="@id/title"
app:layout_constraintTop_toTopOf="@id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="@id/description"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="@drawable/ic_print"
app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"
android:padding="8dp"
android:layout_width="0dp"
android:layout_height="0dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
一些解释:由于图像非常大,我需要将它定位在左侧,我使用android:scaleType="fitEnd"和android:padding="8dp"。
结果令人满意:
问题:
当我在标题中放置非常大的文本时,我希望它在实际将自身限制为 50% 时将 ImageView “推”到其极限。
当我实际使用“与 0dp 匹配的约束”时,就像我的 ImageView 有一个“固定”宽度
我已经尝试将 app:layout_constrainedWidth="true" 添加到 id: title 和 id: description (不成功)
解决方案
添加指南并限制您的标题,而不是将其限制在图标上。这样,当它达到指南时,它将停止增加,并且仍然受限于标题的图标将保持其最小空间。当 ellipsize 属性变得太大时,它会在标题末尾添加点。您需要做的就是通过调整指南上的百分比来确定图标的最小空间。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="my small text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="@id/guideline"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="description text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/title" />
<ImageView
android:id="@+id/icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:padding="8dp"
android:scaleType="fitEnd"
android:src="@drawable/ic_print"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="@id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/title"
app:layout_constraintTop_toTopOf="@id/title" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
</androidx.constraintlayout.widget.ConstraintLayout>
在评论中澄清后编辑:这是建议的屏障解决方案。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="my small text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="@id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="description text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/title" />
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:src="@drawable/app_logo"
app:layout_constraintBottom_toBottomOf="@id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/title"
app:layout_constraintTop_toTopOf="@id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
推荐阅读
- python - 计算列表中重复的字符串并打印
- android - Android:如何在不使用自定义布局的情况下更改 AlertDialog 标题文本颜色和背景颜色?
- angular - angular2 中的 PrependChild() 函数
- javascript - 清除 flexbox 列
- angular - 想将数据传递给 route 。怎么做?
- angular - 警告 TS0:@param 上的类型注释与其 TypeScript 类型是多余的,删除 {...} 部分
- python - 如何使用twisted实现websocket客户端?
- vue.js - VueJS 实现转到上一个菜单
- css - 如何使 CSS 形状自行裁剪以适应浏览器窗口而不是使其更宽
- html - div 背景显示错误似乎与使用具有 3 个 z-index 级别的 css 网格区域的属性无关