ConstraintLayout使用中遇到的问题:同一行内的两个Textview,第二个被挤出屏幕的解决方案

本文主要是介绍ConstraintLayout使用中遇到的问题:同一行内的两个Textview,第二个被挤出屏幕的解决方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

遇到的一个问题:
同一行的两个Textview,要实现两个View连着,前一个view的内容长度不确定,过长的时候会导致第二个view被挤出屏幕外,使用LinearLayout也会出现这种情况。

这里提供一个解决方案:
借助于辅助线,和

app:layout_constrainedHeight表示是否约束height,相应的也有app:layout_constrainedWidth
*
app:layout_constraintVertical_bias表示作用于链头第一个子控件,通过设置值0~1控制头尾间距比例(偏移比例)

这里贴上一个拖拽UI的界面图。
在这里插入图片描述
垂直方向,借助于3条垂直辅助线。从左至右,后续依次称为,guideline1,guideline2, guideline3。两个textview依次称为t1,t2。

要实现t2紧跟t1,则t2左侧的依赖关系就要依赖于t1的右侧,当文字内容较短的时候,t2可以实现紧跟t1。
但当t1文字内容过长,就会把t2顶出屏幕外。
但是这个时候t2是紧贴屏幕右侧的
往往我们都需要t2右侧有一定的间距
在这里插入图片描述
如上图,t2与第二条辅助线右侧建立关系。此时不存在guideline2,这事就会出现t1过长直接把t2挤出去的情况。
因为t2的左侧已经和t1的右侧建立了关系,这个时候t1的右侧已经不能再与t2的左侧建立关系。这时,我们添加一条辅助线guideline2。
让t1的右侧与guideline2建立关系。但是这个时候,当t1文字过长的时候,不会再将t2挤出屏幕外了,但是会覆盖住t2。

这个时候给t1 加入app:layout_constrainedWidth=true,这个属性,可以防止t2被覆盖。

但是还有一个问题,t1上下左右全部加入了依赖关系,当文字内容过短的时候,文字出现了居中的现象,这显然不是我们想要的效果。
这时候,就需要引入app:layout_constraintHorizontal_bias=“0.0”,让t1居左显示(1.0是居右显示)

最后附上代码(虽说是界面化操作,但是有的时候界面和代码同时使用能更好的解决问题):

<?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/nim_pop_notice_layout"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.constraint.Guidelineandroid:id="@+id/guideline21"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_end="88dp" /><android.support.constraint.Guidelineandroid:id="@+id/guideline3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_end="37dp" /><android.support.constraint.Guidelineandroid:id="@+id/guideline2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_begin="37dp" /><android.support.constraint.Guidelineandroid:id="@+id/guideline4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_begin="52dp" /><TextViewandroid:id="@+id/vx_content"android:layout_width="wrap_content"android:layout_height="wrap_content"android:ellipsize="end"android:gravity="center_vertical"android:includeFontPadding="false"android:maxLines="1"android:text="@string/vx_content"android:textColor="@color/black_333333"android:textSize="@dimen/common_title_size16"app:layout_constrainedWidth="true"app:layout_constraintBottom_toTopOf="@+id/guideline5"app:layout_constraintEnd_toStartOf="@+id/guideline21"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline2"app:layout_constraintTop_toTopOf="@+id/guideline4" /><TextViewandroid:id="@+id/vx_change"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginStart="26dp"android:includeFontPadding="false"android:singleLine="true"android:text="@string/vx_change"android:textColor="@color/color_2d7eff"android:textSize="@dimen/common_title_size12"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintBottom_toTopOf="@+id/guideline5"app:layout_constraintEnd_toStartOf="@+id/guideline3"app:layout_constraintStart_toEndOf="@+id/vx_content"app:layout_constraintTop_toTopOf="@+id/guideline4" /><android.support.constraint.Guidelineandroid:id="@+id/guideline5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_begin="74dp" /><ImageViewandroid:id="@+id/seven_iv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:contentDescription="TODO"android:paddingTop="@dimen/common_size_5"android:paddingBottom="@dimen/common_size_5"android:src="@drawable/nochoice_squareicon"app:layout_constraintStart_toStartOf="@+id/guideline2"app:layout_constraintTop_toTopOf="@+id/guideline7" /><TextViewandroid:id="@+id/seven_tv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:includeFontPadding="false"android:paddingStart="8dp"android:paddingTop="@dimen/common_size_5"android:paddingBottom="@dimen/common_size_5"android:text="@string/seven_day_not_notice"android:textColor="@color/grey_999999"android:textSize="12sp"app:layout_constraintStart_toEndOf="@+id/seven_iv"app:layout_constraintTop_toTopOf="@+id/guideline7" /><android.support.constraint.Groupandroid:id="@+id/group"android:layout_width="wrap_content"android:layout_height="wrap_content"app:constraint_referenced_ids="seven_tv,seven_iv" /><android.support.constraint.Guidelineandroid:id="@+id/guideline7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_begin="97dp" /><android.support.constraint.Guidelineandroid:id="@+id/guideline15"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_begin="113dp" /><android.support.constraint.Guidelineandroid:id="@+id/guideline16"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_begin="136dp" /></android.support.constraint.ConstraintLayout>

这篇关于ConstraintLayout使用中遇到的问题:同一行内的两个Textview,第二个被挤出屏幕的解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071697

相关文章

linux生产者,消费者问题

pthread_cond_wait() :用于阻塞当前线程,等待别的线程使用pthread_cond_signal()或pthread_cond_broadcast来唤醒它。 pthread_cond_wait() 必须与pthread_mutex 配套使用。pthread_cond_wait()函数一进入wait状态就会自动release mutex。当其他线程通过pthread

C语言中联合体union的使用

本文编辑整理自: http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union)与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量

问题:第一次世界大战的起止时间是 #其他#学习方法#微信

问题:第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示

Tolua使用笔记(上)

目录   1.准备工作 2.运行例子 01.HelloWorld:在C#中,创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile:在C#中,对一个lua文件的执行调用 03.CallLuaFunction:在C#中,对lua函数的操作 04.AccessingLuaVariables:在C#中,对lua变量的操作 05.LuaCoroutine:在Lua中,

Vim使用基础篇

本文内容大部分来自 vimtutor,自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下,然后再分别介绍正常模式,插入模式,和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式(Normal模式) 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT

2024.6.24 IDEA中文乱码问题(服务器 控制台 TOMcat)实测已解决

1.问题产生原因: 1.文件编码不一致:如果文件的编码方式与IDEA设置的编码方式不一致,就会产生乱码。确保文件和IDEA使用相同的编码,通常是UTF-8。2.IDEA设置问题:检查IDEA的全局编码设置和项目编码设置是否正确。3.终端或控制台编码问题:如果你在终端或控制台看到乱码,可能是终端的编码设置问题。确保终端使用的是支持你的文件的编码方式。 2.解决方案: 1.File -> S

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据,优化了分类算法,支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类;一键生成危险点报告和交跨报告;还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com,资源源于网络,本介绍用于学习使用,如有侵权请您联系删除! 2.新增快速版,简洁易上手 支持快速版和专业版切换使用,快速版界面简洁,保留主

如何免费的去使用connectedpapers?

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录(也就是访客模式)4. 两次用完,关闭无痕模式(继续重复步骤 2 - 4) 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址:https://www.connectedpapers.com/ 3. 不需要登录(也就是

笔记本电脑屏幕模糊?6招恢复屏幕清晰!

在数字化时代的浪潮中,笔记本电脑已成为我们生活、学习和工作中不可或缺的一部分。然而,当那曾经清晰明亮的屏幕逐渐变得模糊不清时,无疑给我们的使用体验蒙上了一层阴影。屏幕模糊不仅影响视觉舒适度,更可能对我们的工作效率和眼睛健康构成威胁。 遇到笔记本电脑屏幕模糊的情况时我们应该如何解决?本文将与大家分享6个简单易懂的解决方法。 方法一:调整Windows分辨率 电脑屏幕模糊显示不清晰怎

vcpkg安装opencv中的特殊问题记录(无法找到opencv_corexd.dll)

我是按照网上的vcpkg安装opencv方法进行的(比如这篇:从0开始在visual studio上安装opencv(超详细,针对小白)),但是中间出现了一些别人没有遇到的问题,虽然原因没有找到,但是本人给出一些暂时的解决办法: 问题1: 我在安装库命令行使用的是 .\vcpkg.exe install opencv 我的电脑是x64,vcpkg在这条命令后默认下载的也是opencv2:x6