LinearLayout，四等分，左右靠边。
2024-06-30 11:14:51
最近有这么一个UI需求。
1. 下面的四个item和上面的横线等长
2. item的key和value居中对齐
3. 同时四个item间距等分
不用代码，纯靠布局实现
方案一：
- 上面一个LinearLayout，下面一个LinearLayout。
- 四个item分别使用weight属性=1
- 同时把左右的item靠边显示。
代码：
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/dimen_36_px2dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="@dimen/dimen_55_px2dp"android:orientation="horizontal"><TextViewstyle="@style/text25gray"android:layout_weight="1"android:text="@string/check_in_counter" /><TextViewstyle="@style/text25gray"android:layout_weight="1"android:gravity="center"android:text="@string/boarding_port" /><TextViewstyle="@style/text25gray"android:layout_weight="1"android:gravity="center"android:text="@string/arrival_port" /><TextViewstyle="@style/text25gray"android:layout_weight="1"android:gravity="end"android:text="@string/baggage_carousel" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:orientation="horizontal"><TextViewandroid:id="@+id/flight_information_check_in_counter"style="@style/text30white"android:layout_weight="1" /><TextViewandroid:id="@+id/flight_information_boarding_port"style="@style/text30white"android:layout_weight="1"android:gravity="center" /><TextViewandroid:id="@+id/flight_information_arrival_port"style="@style/text30white"android:layout_weight="1"android:gravity="center" /><TextViewandroid:id="@+id/flight_information_baggage_carousel"style="@style/text30white"android:layout_weight="1"android:gravity="end" /></LinearLayout>
效果1：
缺点：
方案二
- 分为四个item，上下合成一个居中对齐
- 四个item使用weight属性=1
代码2
<LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_gravity="start"android:layout_weight="1"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/check_in_counter" /><TextViewandroid:id="@+id/flight_information_check_in_counter"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/boarding_port" /><TextViewandroid:id="@+id/flight_information_boarding_port"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/arrival_port" /><TextViewandroid:id="@+id/flight_information_arrival_port"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_gravity="end"android:layout_weight="1"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/baggage_carousel" /><TextViewandroid:id="@+id/flight_information_baggage_carousel"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout>效果2
类似于这种：
缺点
- 居中是居中了，左右没有靠边。
那么做到这里我们知道，使用weight=1属性左右不靠边；左右靠边了，item不等分。那么，怎么解决呢？
办法①，把总长度扩展，使得左右两边对齐上面的边边
(不想扩展长度，得改变布局，还得不断调试，很费劲。而且如果文字长度发生变化，效果也不理想。)
办法②，固定每个item的宽度，从左到右排列，加左边距
(太傻。不灵活，即便在代码中动态设置宽度，也麻烦。我想在布局文件中就解决。)
最后，方案三
代码3
<LinearLayoutandroid:id="@+id/linear_layout_check_in_counter"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_alignParentLeft="true"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/check_in_counter" /><TextViewandroid:id="@+id/flight_information_check_in_counter"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout><LinearLayoutandroid:id="@+id/linear_layout_baggage_carousel"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_alignParentRight="true"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/baggage_carousel" /><TextViewandroid:id="@+id/flight_information_baggage_carousel"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_toLeftOf="@id/flight_information_baggage_carousel"android:layout_toRightOf="@id/flight_information_check_in_counter"android:orientation="horizontal"tools:ignore="NotSibling"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical" /><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/boarding_port" /><TextViewandroid:id="@+id/flight_information_boarding_port"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical" /><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentLeft="true"android:layout_toLeftOf="@id/linear_layout_baggage_carousel"tools:ignore="NotSibling"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical" /><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><TextViewstyle="@style/text25gray"android:layout_height="@dimen/dimen_36_px2dp"android:layout_gravity="center_horizontal"android:text="@string/arrival_port" /><TextViewandroid:id="@+id/flight_information_arrival_port"style="@style/text30white"android:layout_gravity="center_horizontal"android:layout_marginTop="@dimen/dimen_13_px2dp" /></LinearLayout></LinearLayout>
效果3
最后结果：
在不改总宽的情况下纯靠布局，基本实现。
瑕疵就是第一和第二个item间距还是有点大。
还有瑕疵，欢迎指正，一起探讨。
LinearLayout，四等分，左右靠边。相关推荐
- LinearLayout （线性布局）的分析
android提供了5中布局,线性布局,相对布局,帧布局,表格布局和绝对布局 线性和相对布局用的是最多的 下面要说的是线性布局 提到线性布局 一定要记住,它里面的所有组件一定不会重叠的, 切不会换行, ...
- 代码设置LinearLayout的高度
============问题描述============ 我想把这个LinearLayout宽度设置成为FILL_PARENT,源码如下 LinearLayout checkboxLinearLayo ...
- 在LinearLayout中嵌套RelativeLayout来设置Button的位置（xml文件）
想将Button和ListView分别放在屏幕的一左一右. 单纯使用android:gravity和android:layout_gravity不成功. 于是涉及到RelativeLayout 关键为 ...
- Android精通：View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件...
UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...
- 【转】RelativeLayout和LinearLayout及FrameLayout性能分析
原文:http://blog.csdn.net/hejjunlin/article/details/51159419 工作一段时间后,经常会被领导说,你这个进入速度太慢了,竞品的进入速度很快,你搞下优 ...
- LinearLayout增加divider分割线
2019独角兽企业重金招聘Python工程师标准>>> 在android3.0及后面的版本在LinearLayout里增加了个分割线 android:divider="@d ...
- 浅谈Android五大布局——LinearLayout、FrameLayout和AbsoulteLa
为什么80%的码农都做不了架构师?>>> Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了 ...
- android 按钮换行_Android LinearLayout实现自动换行
由于前段时间项目中使用到了自动换行的线性布局,本来打算用表格布局在里面一个个的用Java代码添加ImageView的,但是添加的View控件是不确定的,因为得靠服务器的数据返回,就这样手动用Java代 ...
- Android基础教程之五大布局对象------FrameLayout,LinearLayout,AbsoluteLayout,RelativeLayout,TableLayout...
2019独角兽企业重金招聘Python工程师标准>>> 大家好,我们这一节讲一下Android对用五大布局对象,它们分别是FrameLayout(框架布局:不知道是不是这么翻译的), ...
最新文章
- ShardingSphere-Proxy分库分表以及多租户安装使用
- ERROR 1153 (08S01): Got a packet bigger than 'max_allowed_packet' bytes怎么处理
- MySql入门使用：登录及简单创建查询表
- strip lstrip rstrip
- 数据结构——模式匹配kmp算法
- ajax表单图片,js中使用ajax上传一个带有图片的表单数据
- Android开发笔记1之HelloWorld
- 演讲|微软全球公共事业部政府行业总经理Mark Day：第四次工业革命的数字红利...
- sql 生成csv数据_创建包含SQL Server数据的动态生成的CSV文件
- 挑战安卓会死？华为鸿蒙正为国产操作系统杀出一条路 | 涛滔不绝
- 谷歌发布 XS-Leaks 漏洞知识库
- python sqlserver2008_Python爬取sql server 2008数据
- IOCP的Demo及说明
- 国产APP自动化测试工具AndroidRobot下载地址
- 【Hadoop】之 实验一（过滤、合并文件）
- ABB机器人Test指令
- php中验证码如何实现登录验证,php登录验证码怎么实现
- 贴片电阻功率与尺寸对照表
- 韩国本土IP原生IP站群天堂W奥丁游戏香港站群CN2路线大带宽
- 如何在 Titanic Kaggle Challenge 中获得0.8134分