ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Android 布局:实现 Title + Tag 横向布局效果。Title 标题末尾跟随 Tag 标签。当标题长度超过横向可用空间时,则 Tag 固定在屏幕右侧。

Android 布局:实现 Title + Tag 横向布局效果。Title 标题末尾跟随 Tag 标签。当标题长度超过横向可用空间时,则 Tag 固定在屏幕右侧。 一、需求需求目标如标题所属。想要实现的效果图如下1、当 Title 标题的长度较短时则右侧的 Tag 标签跟随在 TItle 标题的末尾。2、当 Title 标题的长度大于横向可用空间时超出部分以 ... 显示。右侧的 Tag 标签固定在屏幕右侧。二、实现1、方案一代码动态计算。如果是普通的布局如 LinearLayout 或 RelativeLayout 等想在 xml 中搞定是不可能的。必须得在代码中计算 root 容器的宽度计算右侧 Tag 标签的宽度然后计算剩余空间宽度最后赋值给左侧 Title 标题的宽度。非常麻烦。2、方案二使用 ConstraintLayout 布局可以直接在 xml 中搞定。完整代码如下?xml version1.0 encodingutf-8? androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:idid/main android:layout_widthmatch_parent android:layout_heightmatch_parent android:layout_margin10dp android:background#CCCCCC app:layout_constraintBottom_toBottomOfparent app:layout_constraintStart_toStartOfparent app:layout_constraintEnd_toEndOfparent app:layout_constraintTop_toTopOfparent TextView android:idid/title android:layout_width0dp android:layout_heightwrap_content android:background#AAAAAA android:ellipsizeend android:lines1 android:maxLines1 android:padding5dp android:text标题123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 app:layout_constraintBottom_toBottomOfparent app:layout_constraintEnd_toStartOfid/tag app:layout_constraintHorizontal_bias0 app:layout_constraintHorizontal_chainStylepacked app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toTopOfparent app:layout_constraintWidth_defaultwrap / TextView android:idid/tag android:layout_widthwrap_content android:layout_heightwrap_content android:background#888888 android:padding5dp android:text标签 app:layout_constraintBottom_toBottomOfparent app:layout_constraintEnd_toEndOfparent app:layout_constraintStart_toEndOfid/title app:layout_constraintTop_toTopOfparent / /androidx.constraintlayout.widget.ConstraintLayout三、核心配置如下?xml version1.0 encodingutf-8? androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:idid/main android:layout_widthmatch_parent ... TextView android:idid/title android:layout_width0dp ... android:ellipsizeend android:lines1 android:maxLines1 ... android:text标题1234567890... ... app:layout_constraintEnd_toStartOfid/tag app:layout_constraintHorizontal_bias0 app:layout_constraintHorizontal_chainStylepacked ... app:layout_constraintWidth_defaultwrap / TextView android:idid/tag android:layout_widthwrap_content ... android:text标签 ... app:layout_constraintStart_toEndOfid/title ... / /androidx.constraintlayout.widget.ConstraintLayout四、拆分解释title 的宽度设置为 0dpandroid:layout_width0dptitle 设置为最大 1 行超出部分在末尾省略android:maxLines1 android:ellipsizeendtitle 与 tag 首尾有依赖关系TextView android:idid/title ... app:layout_constraintEnd_toStartOfid/tag ... / TextView android:idid/tag ... app:layout_constraintStart_toEndOfid/title ... /title 与 tag 以作用链方式约束并占满剩余的全部空间TextView android:idid/title android:layout_width0dp ... app:layout_constraintHorizontal_bias0 app:layout_constraintHorizontal_chainStylepacked ... /最后 title 还需要设置 Width_default表示当 title 内容较少时title 能以 wrap_content 方式布局TextView android:idid/title ... app:layout_constraintWidth_defaultwrap /
返回列表