(原创)实现左侧TextView宽度自适应并且可以显示右侧TextView的布局

news2024/11/6 15:32:01

效果展示

在这里插入图片描述

先来看看上面的效果
左侧的文字宽度是自适应的,但是右侧又有一个TextView
左侧的文字被限制不能把右侧的挤出屏幕外面
所以如果左侧文字超过指定宽度后多余部分就用省略号表示
实际开发中这种情况在一些列表的item中用的比较多
但实际实现的时候会发现
左侧的总是会把右侧的给挤出去
后来用到了ConstraintLayout布局的链条样式来解决这个问题

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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">


  <TextView
    android:id="@+id/title1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="左侧文字较短时:"
    android:textStyle="bold"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


  <TextView
    android:id="@+id/left1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:text="左侧文字"
    android:padding="4dp"
    android:textColor="#f00"
    app:layout_constraintEnd_toStartOf="@+id/right1"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/title1"
    app:layout_constraintWidth_default="wrap" />

  <TextView
    android:id="@+id/right1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="右侧文字"
    android:background="@drawable/shapetest"
    android:padding="4dp"
    android:textColor="#000"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/left1"
    app:layout_constraintTop_toBottomOf="@+id/title1" />


  <TextView
    android:id="@+id/title2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:text="左侧文字较长时:"
    android:textStyle="bold"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/left1" />


  <TextView
    android:id="@+id/left2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:padding="4dp"
    android:text="左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字"
    android:textColor="#f00"
    app:layout_constraintEnd_toStartOf="@+id/right2"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/title2"
    app:layout_constraintWidth_default="wrap" />

  <TextView
    android:id="@+id/right2"
    android:layout_width="wrap_content"
    android:background="@drawable/shapetest"
    android:padding="4dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="右侧文字"
    android:textColor="#000"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/left2"
    app:layout_constraintTop_toBottomOf="@+id/title2" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键代码在于:

app:layout_constraintHorizontal_chainStyle="packed" 使链条上的元素都打包到一起
app:layout_constraintHorizontal_bias="0"  使左侧控件最左侧对齐
app:layout_constraintWidth_default="wrap" 使左侧文字自适应大小并且不超过约束限制,默认是“spread”,会占用所有符合约束的控件

同时要记得:
左右的TextView的start和end约束要写好

LinearLayout解决办法

后来研究了一下,用LinearLayout也能实现了
代码如下:

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">


  <TextView
    android:id="@+id/title1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="左侧文字较长时:"
    android:textStyle="bold"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />



  <androidx.appcompat.widget.LinearLayoutCompat
    android:id="@+id/ll1"
    android:layout_width="0dp"
    android:layout_marginTop="10dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/title1"
    android:orientation="horizontal"
    android:layout_height="wrap_content">
    <androidx.appcompat.widget.LinearLayoutCompat
      android:layout_width="wrap_content"
      android:orientation="horizontal"
      android:layout_height="wrap_content">
      <TextView
        android:id="@+id/left1"
        android:padding="4dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字左侧文字"
        android:textColor="#f00"
     />

      <TextView
        android:id="@+id/right1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧文字"
        android:textColor="#000"
        android:padding="4dp"
        android:background="@drawable/shapetest"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/left1"
        app:layout_constraintTop_toBottomOf="@+id/title1" />

    </androidx.appcompat.widget.LinearLayoutCompat>


  </androidx.appcompat.widget.LinearLayoutCompat>


</androidx.constraintlayout.widget.ConstraintLayout>

要注意一下:
LinearLayout的外层宽度要固定或者match即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1115237.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RabbitMQ运行机制和通讯过程介绍

文章目录 1.RabbitMQ 环境搭建2.RabbitMQ简介3.RabbitMQ的优势&#xff1a;4. rabbitmq服务介绍4.1 rabbitmq关键词说明4.2 消息队列运行机制4.3 exchange类型 5.wireshark抓包查看RabbitMQ通讯过程 1.RabbitMQ 环境搭建 参考我的另一篇&#xff1a;RabbitMQ安装及使用教程&am…

2023备考软考中级-软件设计师资料

2023备考软考中级-软件设计师资料 一、资源目录介绍 1. 资源目录 2. 2004-2023年真题及答案解析 3. 03-第五版教材、大纲、笔记、精讲精练等 二、资源下载 2023备考软考中级-软件设计师 https://www.aliyundrive.com/s/7MPqUUuaY4K 点击链接保存&#xff0c;或者复制本段内容…

Java每日笔试题错题分析(7)

Java每日笔试题错题分析&#xff08;7&#xff09; 一、错题知识点前瞻第1题第2题第3题第4题第5题 二、错题展示及其解析第1题第2题第3题第4题第5题 一、错题知识点前瞻 第1题 非静态变量不能被静态方法引用 第2题 start()方法与run()方法 start()方法是启动一个线程&#xff…

KMP 算法 + 运用前后缀信息 + 案例分析 + 实战力扣题

一、理解KMP算法如何运用后缀和前缀的信息 文本串text:abcxabcdabxabcdabcdabcy模式串pattern:abcdabcy 当发现不匹配的点&#xff0c;我们的目标不是在这个串中进行回溯操作。因此我们要检查的是 d 的前面的子串&#xff08;abc&#xff09;&#xff0c;在这个子串&#xff08…

2000-2021年全国30省市水土流失治理面积、水库数量、水库总容量、除涝面积数据

2000-2021年全国30省市水土流失治理面积、水库数量、水库总容量、除涝面积数据 1、时间&#xff1a;1995-2020年 2、指标&#xff1a;水土流失治理面积、水库数量、水库总容量、除涝面积 3、范围:30省市不含上海 4、来源&#xff1a;国家统计J、各省NJ 5、指标解释&#x…

优秀数据库模式迁移工具的发展历程

数据库模式迁移可能是应用程序开发中风险最大的领域——因为这是一个困难的、有风险的和痛苦的过程。数据库模式迁移工具的存在是为了减轻这种痛苦&#xff0c;并且已经取得了长足的进步&#xff1a;从基本的CLI工具到GUI工具&#xff0c;从简单的SQL GUI客户端到一体化协作数据…

[牛客]计算机网络习题笔记_1020

1、物理层&#xff1a;以太网 调制解调器 电力线通信(PLC) SONET/SDH G.709 光导纤维 同轴电缆 双绞线等。 2、数据链路层&#xff08;网络接口层包括物理层和数据链路层&#xff09;&#xff1a;Wi-Fi(IEEE 802.11) WiMAX(IEEE 802.16) ATM DTM 令牌环 以太网 FDD…

在JavaScript中,如何创建一个数组或对象?

在JavaScript中,可以使用以下方式创建数组和对象: 一:创建数组(Array): 1:使用数组字面量(Array Literal)语法,使用方括号 [] 包裹元素,并用逗号分隔: let array1 = []; // 空数组 let array2 = [1, 2, 3]; // 包含三个数字的数组 let array3 = [apple, banana,…

HypeX Labs:充分释放加密资产的潜力

加密货币通常被视为是资产类别或投资工具&#xff0c;不过其代表了一种全新的意识形态&#xff0c;且与传统资产有着完全不同的底层价值逻辑&#xff0c;所以它们不仅可以被视为一种资产类别或投资工具&#xff0c;在大多数情况下可以被视为一种基于技术的实现。因此我们可以认…

C++练习:人员信息管理程序计算不同职员的每月工资。

要求编写一个简单的人员信息管理程序&#xff0c;具体要求如下&#xff1a; 程序涉及到五个类&#xff0c;分别是employee&#xff0c;technician&#xff0c;salesman&#xff0c;manager&#xff0c;salsemanager。 这五个类的关系为&#xff1a;employee是顶层父类&#xf…

AUTOSAR AP 硬核知识点梳理(3)AUTOSAR AP 方法论和开发流程的最佳实践

一 Adaptive AUTOSAR 方法论 AUTOSAR AP开发方法论包括三个主要阶段,分别是: 1、架构和设计阶段: 在这个阶段,您需要确定系统的需求、功能和服务,并将它们分配到合适的Machine上。 根据个人习惯使用一些建模工具,例如[Simulink]、[ProVision]或[RTA-VRTE SDK]自带的DS…

我们不一样①

我们不一样① 从hello world开始 别人的hello world​​ 我们的hello world 代码展示 #include <stdio.h> int main(){printf("\033[31mhello world\033[0m"); getchar();return 0; } 此处用了 ANSI转义序列 ANSI转义序列是一种带内信号的转义序列标准&am…

代码随想录算法训练营第23期day27|93.复原IP地址、78.子集、90.子集II

目录 一、&#xff08;leetcode 93&#xff09;复原IP地址 二、&#xff08;leetcode 78&#xff09;子集 三、&#xff08;leetcode 90&#xff09;子集II 一、&#xff08;leetcode 93&#xff09;复原IP地址 力扣题目链接 状态&#xff1a;没有写出来&#xff0c;待回顾…

Python —— 验证码的处理执行JavaScript语句

1、验证码的处理 1、概述&绕过验证码的方案 很多的网站都在登录页面加入了识别文字&#xff0c;识别图片&#xff0c;拖动拼图的验证码方式来防止爬虫、恶意注册 等&#xff0c;如果是做自动化&#xff0c;需要绕过验证码才能进入下一步操作&#xff0c;那么有4种方案可以…

深入探讨 Golang 中的追加操作

通过实际示例探索 Golang 中的追加操作 简介 在 Golang 编程领域&#xff0c;append 操作是一种多才多艺的工具&#xff0c;使开发人员能够动态扩展切片、数组、文件和字符串。在这篇正式的博客文章中&#xff0c;我们将踏上一段旅程&#xff0c;深入探讨在 Golang 中进行追加…

基于跳蛛优化的BP神经网络(分类应用) - 附代码

基于跳蛛优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于跳蛛优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.跳蛛优化BP神经网络3.1 BP神经网络参数设置3.2 跳蛛算法应用 4.测试结果&#xff1a;5.M…

eltable el-tooltip__popper 换行、字体、颜色等调整

show-overflow-tooltip属性 element-ui表格 默认情况下若内容过多会折行显示&#xff0c;若需要单行显示可以使用show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 默认情况 element-ui表格 sh…

【练习题】二.栈和队列

1.蒋编号为0和[的两个栈存放于一个数组空间 V[m]中,栈底分别处于数组的两端。当第0号栈的栈顶播针 top[0]等F-1 时该戍为空:当第1号栈的栈顶指针 top[I]等于 m 时,该栈为空两个栈均从两端向中间增长 (见图 3.2)。试编写双栈初始化,判渐栈空、栈满、进栈和出栈等算法的两数。…

5年经验之谈 —— 总结自动化测试与性能测试的区别!

很多刚刚接触自动化测试和性能测试的同学感觉性能测试和自动化测试是没什么区别的&#xff0c;就像小编刚刚接触自动化测试和性能测试的时候一样&#xff0c;区别就是&#xff1a;自动化测试是一个用户在测试&#xff0c;而性能测试需要并发&#xff0c;需要设计各种场景。测试…

论文辅助笔记:t2vec 数据预处理

1 波尔图数据 curl http://archive.ics.uci.edu/ml/machine-learning-databases/00339/train.csv.zip -o data/porto.csv.zip 这条命令使用 curl 从给定的URL下载一个名为 train.csv.zip 的压缩文件&#xff0c;并将其保存为 data/porto.csv.zip。 unzip data/porto.csv.zip 使…