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 相关文章推荐
Java基于字符界面的简易收银台
Jun 26 Java/Android
浅谈Python魔法方法
Jun 28 Java/Android
死磕 java同步系列之synchronized解析
Jun 28 Java/Android
Java集成swagger文档组件
Jun 28 Java/Android
Java SSM配置文件案例详解
Aug 30 Java/Android
详解JAVA的控制语句
Nov 11 Java/Android
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
Dec 06 Java/Android
SpringBoot中HttpSessionListener的简单使用方式
Mar 17 Java/Android
Java 多线程协作作业之信号同步
May 11 Java/Android
Android Studio 计算器开发
May 20 Java/Android
springboot 全局异常处理和统一响应对象的处理方式
Jun 28 Java/Android
利用Java连接Hadoop进行编程
Jun 28 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
是否存在第一台收音机的说法
2021/03/01 无线电
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
用正则表达式替换图片地址img标签
2013/11/22 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
JS仿Base.js实现的继承示例
2017/04/07 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python绘制多个曲线的折线图
2020/03/23 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python实现与redis交互操作详解
2020/04/21 Python
大学生四年生活自我鉴定
2013/11/21 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
大学生团员个人总结
2015/02/14 职场文书
论文答辩开场白大全
2015/05/27 职场文书
黑白记忆观后感
2015/06/18 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
资产移交协议书
2016/03/24 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python