Android第三讲——五大布局(UI)

最新推荐文章于 2024-04-27 13:43:55 发布
最新推荐文章于 2024-04-27 13:43:55 发布
阅读量1k 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Went_Gone/article/details/47785007
版权

Android的五大布局

UI：View与ViewGroup对象建立的UI
ViewGroup是包含多个View与ViewGroup的容
器ViewGroup继承于View
嵌套层次不要超过10层，否则低运行效率

px像素
dp一英寸上存在160px 那么1dp=1px 一英寸/160，手机不同分辨率不同dp不同
sp 文字的大小跟dp一样，只用于文本的大小

LinearLayout(线性布局)
RelativeLayout(相对布局)
FrameLayout(帧布局)
TableLayout(表格布局)
AbsoluteLayout(绝对布局)
LinearLayout
RelativeLayout
FrameLayout
TableLayout
AbsoluteLayout

线性布局LinearLayout

只能是单列或者单行
没有设置orientation默认horizontal(水平)
vertical(垂直)
gravity:表示控件所处的位置

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button1"/>
</LinearLayout>

这里写图片描述
layout_gravity相对于父控件

     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_gravity="center_horizontal"/><!-- 表示此按钮处于相对于父控件的水平居中-->

layout_weight所占比重

 <Button
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_gravity="center_horizontal"/>

这里写图片描述

练习，写出如下布局：
这里写图片描述
1、

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

2、

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
</LinearLayout>

3、需要LinearLayout嵌套

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"/>
        </LinearLayout>
        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
    </LinearLayout>
</LinearLayout>

4、需要LinearLayout嵌套

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
        <Button
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="match_parent" />
    </LinearLayout>
</LinearLayout>

相对布局RelativeLayout

alignParentLeft Right Bottom Top相对父控件的上下左右
centerInParent centerVertical
centerHorizontal相对父控件的中心

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button3"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Button4"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Button5"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Button6"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button7"/>
</RelativeLayout>

如图：
这里写图片描述

toLeftOf toRightOf above below相对后边跟的id的控件的上下左右

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/button_1"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_1"
        android:text="Button3"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_1"
        android:text="Button4"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_1"
        android:text="Button5"/>
</RelativeLayout>

如图：
这里写图片描述

alignLeft alignRight alignBottom alignTop相对有空间的上下左右边对齐 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/button_1"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/button_1"
        android:text="Button4"/>
</RelativeLayout>

如图：
这里写图片描述
alignBaseline基准线对齐

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/button_1"
        android:text="Button2"/>
</RelativeLayout>

如图：
这里写图片描述

帧布局FrameLayout

visibility()属性;visible显示 invisible不显示但是占用位置 gone直接去掉
可以叠加.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        />
    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textAllCaps="false"
        android:text="@string/button2"/>
</FrameLayout>

这里写图片描述此时两个Button都可见 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:visibility="invisible"
        />
    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textAllCaps="false"
        android:text="@string/button2"/>
</FrameLayout>

这里写图片描述此时最下边的Button不可见，但是它还占用着位置

表格布局TableLayout

一般的：首先要有TableRow

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>
    </TableRow><TableRow>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"/>
</TableRow>
</TableLayout>

这里写图片描述
collapseColumns隐藏某一列
TableLayout内加入此句：0表示第一列，依次类推

android:collapseColumns="0"

这里写图片描述 此时隐藏了第一列。
shrinkColumns自动收缩某一列，防止其他列被挤出去

android:shrinkColumns="0"
<!--将Button1改为 -->
 <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1sfdsaaaaaaaaaaaaaadsffffffffff"/>

这里写图片描述
layout_span表示占几列

<!--在Button1中加入layout_span-->
<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            <!--"2"表示此Button占2列-->
            android:layout_span="2"
            android:text="Button1"/>

这里写图片描述 此时Button1占两列。

绝对布局AbsoluteLayout

·不推荐使用
直接随意拖拽。

E_WE
关注
专栏目录
Android五大布局
Ashely_evina的博客
03-10 2061
Android五大布局 Android的界面是有布局和组件协同完成的，布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。 Android的五大布局分别是LinearLayout（线性布局）、FrameLayout（单帧布局）、RelativeLayout（相对布局）、AbsoluteLayout（绝对布局，Android2.0中标注为已过期）和TableLayout（表格布局）。 android 线性布局（LinearLayout） 线性布局是程
UI布局——XAML六大布局区别和使用
魔法在吟歌
09-20 1409
XAML布局元素一，Grid：网格二，DockPanel：泊靠式面板三，StackPanel：栈式面板四，WrapPanel：自动折行面板（环绕面板）五，UniformGrid：均分布局六，Canvas：画布 ​ ​ 一，Grid：网格 作用： Grid面板是用于创建简单乃至复杂窗口布局的通用工具，自定义行和列的数量，宽和高来调整控件布局。 特点： （1）可以定义任意数量的行和列，布局要知道RowDefinitions（行）和ColumnDefinitions（列）， 现在要定义四行（RowDefiniti
Android的五大布局
徐明晓的博客
05-21 335
LinearLayout（线性布局）FrameLayout（帧布局）RelativeLayout（相对布局）TableLayout（表格布局）AbsoluteLayout(绝对布局) [1] 线性布局：LinearLayout 在一个方向上（垂直或者水平）对齐所有子元素，一个垂直列表中每一行都只有一个子元素，一个水平列表只是一列高度。 [2] 相对布局：RelativeLayout 根据布局中子控件会根据他们设置的参照控件和参数进行相对布局。参照控件可以是父控件，也可以是其他的子控件，但是被参照的空间必.
Android 五大布局
CSDN from 钟良坚
12-16 374
个人学习笔记
android constraintlayout垂直居中_Android Material Design控件使用——ConstraintLayout 约束布局
weixin_39645308的博客
11-20 906
本章节将分为两个模块给大家推送，觉得不错的可以关注下哦介绍Android ConstraintLayout是谷歌推出替代PrecentLayout的组件。支持相对布局、线性布局、帧布局，看来更像是FrameLayout 、LinearLayout、`RelativeLayout·三者的结合体，并且比这三者更强大的是实现了百分比布局。大家都知道安卓碎片严重，使用百分比适配，那么将彻底解决适配问题总结...
Android 之 四大组件、六大布局、五大存储
墨鱼菜鸡
07-11 2650
Android 之四大组件、六大布局、五大存储：https://blog.csdn.net/shenggaofei/article/details/52450668 Android 四大组件、五大存储、六大布局：https://blog.csdn.net/xiankog/article/details/81702119 Android四大基本组件介绍...
Android UI设计——布局方法
tuanzi11的博客
09-14 796
五大布局： Android中的UI界面元素是由View和ViewGroup对象建立的，ViewGroup继承于View LinearLayout–线性布局 RelativeLayout–相对布局 FrameLayout–帧布局 TableLayout–表格布局 AbsoluteLayout–绝对布局（Android不适用）（以
Android五大布局及自定义布局
旅途的乞讨者的博客
06-15 836
概念Android的界面是有布局和组件协同完成的，布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。Android的五大布局分别是LinearLayout（线性布局）、FrameLayout（单帧布局）、RelativeLayout（相对布局）、AbsoluteLayout（绝对布局）和TableLayout（表格布局）。
浅谈Android五大布局
03-28
NULL 博文链接：https://fireflylover.iteye.com/blog/1257576
android中五大布局,Android的五大布局
weixin_39522927的博客
05-26 207
Android有五大布局:1.RelativeLayout 相对布局2. LinearLayout 线性布局3. FrameLayout 帧布局4.TableLayout 表格布局 (被GridView代替)5.AbsoluteLayoutf 绝对布局(已经被谷歌废弃,几乎不会用到)1. RelativeLayout 相对布局相对布局RelativeLayout允许子元素指定它们相对于其父元素...
Android5种布局类型
最新发布
2401_84519960的博客
04-27 940
我这里整理了一份完整的学习思维以及Android开发知识大全PDF。当然实践出真知，即使有了学习线路也要注重实践，学习过的内容只有结合实操才算是真正的掌握。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
Android五大UI布局特性与应用场景
Android五大UI布局是Android开发中至关重要的组成部分，它们分别为LinearLayout、RelativeLayout、FrameLayout、GridLayout和AbsoluteLayout。这些布局各有其特有属性和应用场景，理解并掌握它们有助于提高UI设计的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值