LinearLayout，四等分，左右靠边。

最新推荐文章于 2023-10-12 19:31:42 发布
原创 最新推荐文章于 2023-10-12 19:31:42 发布 · 7.2k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#LinearLayout #均分 #等分 #靠边 #布局

本文探讨在不使用代码仅依赖布局的情况下，如何实现四个UI元素与上部横线等长，同时确保元素间的间距相等且内容居中对齐。通过三种方案的对比，详细解析了每种方法的实现细节与局限性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

飞机航班详情
最近有这么一个UI需求。

1. 下面的四个item和上面的横线等长
2. item的key和value居中对齐
3. 同时四个item间距等分

不用代码，纯靠布局实现

方案一：

  1. 上面一个LinearLayout，下面一个LinearLayout。
  2. 四个item分别使用weight属性=1
  3. 同时把左右的item靠边显示。

  • 代码：

<LinearLayout
        android: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">

        <TextView
            style="@style/text25gray"
            android:layout_weight="1"
            android:text="@string/check_in_counter" />

        <TextView
            style="@style/text25gray"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/boarding_port" />

        <TextView
            style="@style/text25gray"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/arrival_port" />

        <TextView
            style="@style/text25gray"
            android:layout_weight="1"
            android:gravity="end"
            android:text="@string/baggage_carousel" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/flight_information_check_in_counter"
            style="@style/text30white"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/flight_information_boarding_port"
            style="@style/text30white"
            android:layout_weight="1"
            android:gravity="center" />

        <TextView
            android:id="@+id/flight_information_arrival_port"
            style="@style/text30white"
            android:layout_weight="1"
            android:gravity="center" />

        <TextView
            android:id="@+id/flight_information_baggage_carousel"
            style="@style/text30white"
            android:layout_weight="1"
            android:gravity="end" />

    </LinearLayout>

  • 效果1：效果1

  • 缺点：

  1. 左右两个item的key和value没有居中对齐
  2. 四个item间距不等(因为左右的item靠边了，其实weight属性设置下应该距边有段距离的)

方案二

  1. 分为四个item，上下合成一个居中对齐
  2. 四个item使用weight属性=1

  • 代码2

<LinearLayout

        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            style="@style/text25gray"
            android:layout_height="@dimen/dimen_36_px2dp"
            android:layout_gravity="center_horizontal"
            android:text="@string/check_in_counter" />

        <TextView
            android:id="@+id/flight_information_check_in_counter"
            style="@style/text30white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/dimen_13_px2dp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            style="@style/text25gray"
            android:layout_height="@dimen/dimen_36_px2dp"
            android:layout_gravity="center_horizontal"
            android:text="@string/boarding_port" />

        <TextView
            android:id="@+id/flight_information_boarding_port"
            style="@style/text30white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/dimen_13_px2dp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            style="@style/text25gray"
            android:layout_height="@dimen/dimen_36_px2dp"
            android:layout_gravity="center_horizontal"
            android:text="@string/arrival_port" />

        <TextView
            android:id="@+id/flight_information_arrival_port"
            style="@style/text30white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/dimen_13_px2dp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            style="@style/text25gray"
            android:layout_height="@dimen/dimen_36_px2dp"
            android:layout_gravity="center_horizontal"
            android:text="@string/baggage_carousel" />

        <TextView
            android:id="@+id/flight_information_baggage_carousel"
            style="@style/text30white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/dimen_13_px2dp" />

    </LinearLayout>

  • 效果2效果2

类似于这种：
类似于这种

  • 缺点

  1. 居中是居中了，左右没有靠边。
那么做到这里我们知道，使用weight=1属性左右不靠边；左右靠边了，item不等分。那么，怎么解决呢？

办法①，把总长度扩展，使得左右两边对齐上面的边边
(不想扩展长度，得改变布局，还得不断调试，很费劲。而且如果文字长度发生变化，效果也不理想。)

办法②，固定每个item的宽度，从左到右排列，加左边距
(太傻。不灵活，即便在代码中动态设置宽度，也麻烦。我想在布局文件中就解决。)

最后，方案三

在这里插入图片描述

思路过程

  • 代码3

<LinearLayout
        android:id="@+id/linear_layout_check_in_counter"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:orientation="vertical">

        <TextView
            style="@style/text25gray"
            android:layout_height="@dimen/dimen_36_px2dp"
            android:layout_gravity="center_horizontal"
            android:text="@string/check_in_counter" />

        <TextView
            android:id="@+id/flight_information_check_in_counter"
            style="@style/text30white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/dimen_13_px2dp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_layout_baggage_carousel"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:orientation="vertical">

        <TextView
            style="@style/text25gray"
            android:layout_height="@dimen/dimen_36_px2dp"
            android:layout_gravity="center_horizontal"
            android:text="@string/baggage_carousel" />

        <TextView
            android:id="@+id/flight_information_baggage_carousel"
            style="@style/text30white"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/dimen_13_px2dp" />

    </LinearLayout>


    <LinearLayout
        android: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">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                style="@style/text25gray"
                android:layout_height="@dimen/dimen_36_px2dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/boarding_port" />

            <TextView
                android:id="@+id/flight_information_boarding_port"
                style="@style/text30white"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/dimen_13_px2dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/linear_layout_baggage_carousel"
        tools:ignore="NotSibling">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                style="@style/text25gray"
                android:layout_height="@dimen/dimen_36_px2dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/arrival_port" />

            <TextView
                android:id="@+id/flight_information_arrival_port"
                style="@style/text30white"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/dimen_13_px2dp" />
        </LinearLayout>

    </LinearLayout>

  • 效果3效果3

最后结果：
在不改总宽的情况下纯靠布局，基本实现。
瑕疵就是第一和第二个item间距还是有点大。
还有瑕疵，欢迎指正，一起探讨。
【android学习】监听左右滑动的LinearLayout
zkq49099的专栏
01-15 1068
public class BCustomerLinearLayout extends LinearLayout implements View.OnTouchListener { private static final String TAG = "CustomerLinearLayout"; public OnGestureChangeListener listener; public interface OnGestureChangeListener { .
android LinearLayout中，三个按钮靠左，一个按钮靠右
最新发布
weixin_46536618的博客
12-03 977
【代码】android LinearLayout中，三个按钮靠左，一个按钮靠右。
android 布局设置右边,【Android学习】 LinearLayout 组件左右分开的布局设置
weixin_36183945的博客
05-26 1237
在学习和使用Linearlayout 时，新手有时候会遇到---------------------------------------------------------|《组件1》-----------------------------《组件2》|| ...
LinearLayout 实现内容显示在水平两侧
caishengkai的博客
01-09 2729
这里我主要实现这样一个布局，左侧文字，右侧2个按钮。 效果如下图： 配置文件如下： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_co
Android学习—LinearLayout布局中实现左右对齐
weixin_34414650的博客
10-25 2500
在android中的控件LinearLayout 中的android:gravity="center" 属性，要么是居左、居右、居中对齐，android:gravity="right" 和 android:gravity="left"并不能达到双控件的左右两端对齐，要实现两端对齐方式，要采用 中间增加一个控件的方式实现 ，并设置属性android:layout_weig...
linearlayout左右对齐
朴勇佑的专栏
04-03 2070
&lt;LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" &...
Android四等分布局Demo
09-16
要实现四等分，可以在垂直方向上放置两个`LinearLayout`，每个内部再包含两个水平的`LinearLayout`。通过设置子元素的`layout_weight`属性，确保它们平分空间。 2. **RelativeLayout**： `RelativeLayout`允许更...
继承Linearlayout的Viewgroup可以左右流畅滑动切换
06-04
标题“继承LinearLayout的Viewgroup可以左右流畅滑动切换”描述的就是这样一个场景，我们可以通过继承LinearLayout并添加相应的滑动逻辑来达到类似ViewPager的效果。 首先，我们需要创建一个新的ViewGroup类，比如...
Android LinearLayout实现自动换行
08-27
Android LinearLayout 实现自动换行 Android LinearLayout 实现自动换行是 Android 开发中常见的需求。LinearLayout 是 Android 中最常用的布局控件之一，但它有一个缺陷，就是不能自动换行。今天，我们将详细介绍...
简析Android五大布局（LinearLayout、FrameLayout、RelativeLayout等）
01-20
LinearLayout的一个重要特性是`android:layout_weight`属性，它用于分配子元素在剩余空间中占据的比例。例如，两个等长的文本框设置`android:layout_weight=1`，它们将平分剩余空间。而权重越小的元素，其优先级越高...
AndroidLinearLayout 实现三等分，垂直和水平居中的效果
小游
12-03 2833
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 实现三等分的效果 其实就是把width设置为0，然后三个控件的android:layout_weight设置为一样的就可以了。 居中 android:gravity="center"这个是控件内部居中 android:layout_gravity="center"这个是控件本身居中 垂直和水平居中 就是textview中可已使用 gravity来实现 有center_horizontal属性 ...
LinearLayout中，让两个图片均分，各占一半
柳鲲鹏
10-12 354
要设置layout_weight，即可均分。
android中如何在等分LinearLayout
hhy018的专栏
01-08 1734
xml       android:orientation="horizontal"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="1">     java        final Linea
LinearLayout 让最后一个空间靠到屏幕底部
a1243655860的博客
10-18 2285
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:layout_weight="0.1"android:gravity="bottom"android:orientation="verti...
使用LinearLayout设置左中右布局
feitian145623的专栏
06-09 1266
设置前 设置后 代码 LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:background="#efefef" android:orientation="horizontal"> Te
【Android学习】 LinearLayout 组件左右分开的布局设置
消失的天空
02-21 9209
在学习和使用Linearlayout 时，新手有时候会遇到  --------------------------------------------------------- |《组件1》-----------------------------《组件2》|   |
线性布局 Linear Layout
power的专栏
02-18 1116
<br />本文翻译自官方文档<br />http://androidappdocs.appspot.com/resources/tutorials/views/hello-linearlayout.html<br />线性布局(Linear Layout)<br /> LinearLayout 是一个组视图。它用于水平或垂直的显示它的子元素视图。<br /> 你应该谨慎，不要滥用 LinearLayout。如果你开始多层嵌套使用LinearLayout，此时你可以考虑使用RelativeLayout来
2.2.1 LinearLayout(线性布局)
chuanao8829的博客
03-21 300
2.2.1 LinearLayout(线性布局) 分类Android 基础入门教程 本节引言 本节开始讲Android中的布局，Android中有六大布局,分别是: LinearLayout(线性布局)，RelativeLayout(相对布局)，TableLayout(表格布局)...
仿京东Android左右滑动商品分类列表实现
左右分类布局一般会用到`LinearLayout`、`RelativeLayout`或者`ConstraintLayout`等布局管理器。 3. **ListView的使用**：`ListView`是Android中常用的组件，用于展示滚动列表。在本案例中，左侧的分类列表很可能会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值