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系统之lvcreate命令使用解读

《Linux系统之lvcreate命令使用解读》lvcreate是LVM中创建逻辑卷的核心命令,支持线性、条带化、RAID、镜像、快照、瘦池和缓存池等多种类型,实现灵活存储资源管理,需注意空间分配、R... 目录lvcreate命令详解一、命令概述二、语法格式三、核心功能四、选项详解五、使用示例1. 创建逻

在Java中使用OpenCV实践

《在Java中使用OpenCV实践》用户分享了在Java项目中集成OpenCV4.10.0的实践经验,涵盖库简介、Windows安装、依赖配置及灰度图测试,强调其在图像处理领域的多功能性,并计划后续探... 目录前言一 、OpenCV1.简介2.下载与安装3.目录说明二、在Java项目中使用三 、测试1.测

C++中detach的作用、使用场景及注意事项

《C++中detach的作用、使用场景及注意事项》关于C++中的detach,它主要涉及多线程编程中的线程管理,理解detach的作用、使用场景以及注意事项,对于写出高效、安全的多线程程序至关重要,下... 目录一、什么是join()?它的作用是什么?类比一下:二、join()的作用总结三、join()怎么

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束

mybatis中resultMap的association及collectio的使用详解

《mybatis中resultMap的association及collectio的使用详解》MyBatis的resultMap定义数据库结果到Java对象的映射规则,包含id、type等属性,子元素需... 目录1.reusltmap的说明2.association的使用3.collection的使用4.总

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程,然而 @Builder

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe

Python错误AttributeError: 'NoneType' object has no attribute问题的彻底解决方法

《Python错误AttributeError:NoneTypeobjecthasnoattribute问题的彻底解决方法》在Python项目开发和调试过程中,经常会碰到这样一个异常信息... 目录问题背景与概述错误解读:AttributeError: 'NoneType' object has no at