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 相关文章推荐
SpringBoot2 参数管理实践之入参出参与校验的方式
Jun 16 Java/Android
使用feign服务调用添加Header参数
Jun 23 Java/Android
图解排序算法之希尔排序Java实现
Jun 26 Java/Android
Java 语言中Object 类和System 类详解
Jul 07 Java/Android
小程序与后端Java接口交互实现HelloWorld入门
Jul 09 Java/Android
关于springboot配置druid数据源不生效问题(踩坑记)
Sep 25 Java/Android
Java 在线考试云平台的实现
Nov 23 Java/Android
使用HttpSessionListener监听器实战
Mar 17 Java/Android
零基础学java之方法的定义与调用详解
Apr 10 Java/Android
Spring Boot配合PageHelper优化大表查询数据分页
Apr 20 Java/Android
tree shaking对打包体积优化及作用
Jul 07 Java/Android
Android实现获取短信验证码并自动填充
May 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
Puppet的一些技巧
2018/09/17 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python异常学习笔记
2015/02/03 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
python 通过exifread读取照片信息
2020/12/24 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
异常和异常类的概念
2014/09/12 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
酒吧总经理岗位职责
2013/12/10 职场文书
中秋寄语大全
2014/04/11 职场文书
工会主席事迹材料
2014/06/03 职场文书
司机工作自我鉴定
2014/09/19 职场文书
入党群众意见范文
2015/06/02 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android