Android移动应用开发指南之六种布局详解


Posted in Java/Android onSeptember 23, 2022

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"
    android:dividerPadding="200dp"
    >

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#ff0000"
        android:layout_weight="1"
        />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ff000000"
        />
    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#ffff00"
        android:layout_weight="1"
        />

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="00dp"
        android:layout_weight="1"
        android:background="#00ffff" />
</LinearLayout>

orientation设置排列方式

layout_weight设置权重(感觉和弹性盒子差不多)

Android移动应用开发指南之六种布局详解

RelativeLayout

顾名思义,相对元素布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="10dp"
    >
    <RelativeLayout
        android:id="@+id/rl1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff0000"
        android:layout_centerInParent="true"
        />
    <RelativeLayout
        android:layout_margin="0dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:layout_toLeftOf="@+id/rl1"
        />

</RelativeLayout>

Android移动应用开发指南之六种布局详解

FrameLayout

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

    <FrameLayout
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#ff0000"
        />
    <FrameLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#ffff00"
        android:foreground="@drawable/a"
        />

    <FrameLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#00ff00"/>

</FrameLayout>

Android移动应用开发指南之六种布局详解

简单来说,就是可以叠一起的布局

TableLayout

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

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第1个"
        />
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个"
            />
    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个"
            />
    </TableRow>

</TableLayout>

Android移动应用开发指南之六种布局详解

可以看成类似excel的表格一样的布局

通常结合< TableRow >一起使用

GridLayout

网格布局

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:columnCount="3"
    >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="1"
        android:text="第一个"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个"
        android:layout_columnSpan="3"
        />
</GridLayout>

Android移动应用开发指南之六种布局详解

可以看成TableLayout升级版?

ConstraintLayout

约束布局

这个应该是最强的布局了

创建布局默认的就是这个了。

Android移动应用开发指南之六种布局详解

打开design模式,然后随便拖几个按钮进去

Android移动应用开发指南之六种布局详解

点击魔术棒建立约束。

ok完成布局了。

代码也自动生成好了:

<?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">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="246dp"
        android:layout_marginTop="107dp"
        android:text="按钮"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="172dp"
        android:layout_marginBottom="125dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="115dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

我们开个虚拟机运行一下:

Android移动应用开发指南之六种布局详解

只能说,差不太多,微调一下差不多就能用了。

也能够设置各个组件的属性值颜色字体等等。

这用起来就像是墨刀一样。

参考

https://www.bilibili.com/video/BV1Jb4y187C4/?p=25&spm_id_from=pageDriver&vd_source=f57738ab6bbbbd5fe07aae2e1fa1280f

总结

到此这篇关于Android移动应用开发指南之六种布局的文章就介绍到这了,更多相关Android移动应用开发布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Java/Android 相关文章推荐
手把手教你用SpringBoot将文件打包成zip存放或导出
Jun 11 Java/Android
java Nio使用NioSocket客户端与服务端交互实现方式
Jun 15 Java/Android
SpringBoot集成Redis,并自定义对象序列化操作
Jun 22 Java/Android
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
Sep 25 Java/Android
利用Sharding-Jdbc进行分库分表的操作代码
Jan 22 Java/Android
Spring Boot 底层原理基础深度解析
Apr 03 Java/Android
Java中的继承、多态以及封装
Apr 11 Java/Android
Java Spring Lifecycle的使用
May 06 Java/Android
JAVA springCloud项目搭建流程
May 11 Java/Android
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
Jun 01 Java/Android
Spring Security动态权限的实现方法详解
Jun 16 Java/Android
Android学习之BottomSheetDialog组件的使用
Jun 21 Java/Android
Java中的Kafka为什么性能这么快及4大核心详析
Mybatis 一级缓存和二级缓存原理区别
Sep 23 #Java/Android
Java实现贪吃蛇游戏的示例代码
Sep 23 #Java/Android
Java获取字符串编码格式实现思路
Sep 23 #Java/Android
java获取一个文本文件的编码(格式)信息
Sep 23 #Java/Android
JDK8中String的intern()方法实例详细解读
Sep 23 #Java/Android
Spring boot实现上传文件到本地服务器
Aug 14 #Java/Android
You might like
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
详解Python中的分支和循环结构
2020/02/11 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
人民教师求职自荐信
2014/03/12 职场文书
男性健康日的活动方案
2014/08/18 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
保护校园环境倡议书
2015/04/28 职场文书
运动会通讯稿100字
2015/07/20 职场文书
高二数学教学反思
2016/02/18 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP