当前位置: 首页 > news >正文

Android移动应用开发之六种布局

文章目录

  • LinearLayout
  • RelativeLayout
  • FrameLayout
  • TableLayout
  • GridLayout
  • ConstraintLayout
  • 参考

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设置权重(感觉和弹性盒子差不多)
在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述
简单来说,就是可以叠一起的布局

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>

在这里插入图片描述
可以看成类似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>

在这里插入图片描述
可以看成TableLayout升级版?

ConstraintLayout

约束布局
这个应该是最强的布局了
创建布局默认的就是这个了。

在这里插入图片描述
打开design模式,然后随便拖几个按钮进去
在这里插入图片描述

点击魔术棒建立约束。

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>

我们开个虚拟机运行一下:
在这里插入图片描述
只能说,差不太多,微调一下差不多就能用了。

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

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

参考

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

相关文章:

  • Nginx 学习笔记
  • 【027】mongoose V6.4之创建监听套接字fd
  • 《安富莱嵌入式周报》第283期:全开源逆向“爆破”硬件工具,Linux内核6.1将正式引入RUST语言,I3C培训教程,80款市场成熟的电感式位置传感器设计
  • 操作系统实验六 文件管理
  • Bert(Bidirectional Encoder Representations from Transformers)
  • oracle使用rman备份实现异机数据恢复
  • 巩固类和对象的知识点——牛客5道题目
  • 黄老板,给我来个亲笔签名,抽显卡~
  • 儿童头部保护玩具CPC认证亚马逊美国站CPC认证
  • CentOS Docker 安装 常用命令
  • C语言中宏定义的盲区有哪些?
  • springboot之redis缓存探索
  • 高并发系统架构设计之微服务篇: 秒杀系统下的服务拆分
  • jieba
  • 学术英语写作(更新中)
  • CSS中外联样式表代表的含义
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • laravel 用artisan创建自己的模板
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • React Native移动开发实战-3-实现页面间的数据传递
  • SAP云平台运行环境Cloud Foundry和Neo的区别
  • Spark VS Hadoop:两大大数据分析系统深度解读
  • uni-app项目数字滚动
  • 如何将自己的网站分享到QQ空间,微信,微博等等
  • 如何胜任知名企业的商业数据分析师?
  • 延迟脚本的方式
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • #微信小程序:微信小程序常见的配置传旨
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (附源码)springboot建达集团公司平台 毕业设计 141538
  • (详细版)Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models
  • (新)网络工程师考点串讲与真题详解
  • (转载)Linux 多线程条件变量同步
  • .net Application的目录
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .NET Core 通过 Ef Core 操作 Mysql
  • .net2005怎么读string形的xml,不是xml文件。
  • .NET学习全景图
  • .pyc文件是什么?
  • @Autowired 与@Resource的区别
  • @test注解_Spring 自定义注解你了解过吗?
  • []新浪博客如何插入代码(其他博客应该也可以)
  • [2021]Zookeeper getAcl命令未授权访问漏洞概述与解决
  • [28期] lamp兄弟连28期学员手册,请大家务必看一下
  • [ACM] hdu 1201 18岁生日
  • [Android]How to use FFmpeg to decode Android f...
  • [boost]使用boost::function和boost::bind产生的down机一例
  • [C++]C++类基本语法
  • [CakePHP] 在Controller中使用Helper
  • [CSS]CSS 字体属性
  • [Java性能剖析]Sun JDK基本性能剖析工具介绍
  • [LeetCode] NO. 387 First Unique Character in a String