Android常见的界面布局

news2024/9/23 5:21:58

目录

​前言

1.线性布局LinearLayout

2.相对布局RelativeLayout

3.表格布局TableLayout

 4.网格布局GridLayout

实现一个计算器界面

改Button按钮颜色

5.帧布局FrameLayout

前言

在Android应用程序中，界面是由布局和控件组成的。控件是功能单元，负责接受用户的输入或者展示信息。而布局就是框架，来组织和定位这些控件的位置。

我们先来简单了解一下Android中一些常见的布局

1.线性布局LinearLayout

线性布局内的子控件通常被指定为水平或者竖直排列。

常用属性

属性名称说明
android:orintation

设置布局内控件的排列顺序

（vertical为竖直，horiztal为水平）

android:layout_weight在布局内设置控件的权重，属性值可以直接写int值
android:layout_width设置布局或控件的宽度
android:layout_height设置布局或控件的高度
android:background设置布局或者控件的背景
android:gravity线性布局中，子容器相对于父容器所在的位置
  • 当layout_width为0时，layout_weight表示水平方向的宽度比例。
  • 当layout_height为0时，layout_weight表示竖直方向的高度比例。

竖直摆放：

<?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:id="@+id/btn1"
        android:text="按钮1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn2"
        android:text="按钮1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn3"
        android:text="按钮1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

 

我们将父容器的orintation改为horiatal就是水平布局

2.相对布局RelativeLayout

相对布局通过相对定位的方式来指定子控件的位置。

RelativeLayout以父容器或者其他子控件为参照物，来指定布局内子控件的位置。

在相对布局中，其子控件具备一些属性，用于指定子控件的位置，一般是多个一起使用，

相对布局中子控件的属性：

 根据父容器定位

<?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"
    android:layout_margin="40sp">

    <Button
        android:id="@+id/btn1"
        android:text="左上角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"/>


    <Button
        android:id="@+id/btn2"
        android:text="上居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"/>


    <Button
        android:id="@+id/btn3"
        android:text="右上角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"/>


    <Button
        android:id="@+id/btn4"
        android:text="左居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"/>


    <Button
        android:id="@+id/btn5"
        android:text="居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>



    <Button
        android:id="@+id/btn6"
        android:text="右居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>



    <Button
        android:id="@+id/btn7"
        android:text="左下角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"/>



    <Button
        android:id="@+id/btn8"
        android:text="下居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>


    <Button
        android:id="@+id/btn9"
        android:text="按钮9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

 

根据子控件来定位

 

<?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/target_btn"
        android:text="都以我为中心"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn_1"
        android:text="我在中心下面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
       android:layout_below="@+id/target_btn"
        android:layout_marginTop="40dp"
        android:layout_alignLeft="@+id/target_btn"/>

    <Button
        android:id="@+id/btn_2"
        android:text="我在中心上面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_above="@+id/target_btn"
        android:layout_marginBottom="40dp"
        android:layout_alignLeft="@+id/target_btn"/>

    <Button
        android:id="@+id/btn_3"
        android:text="我在中心左面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_alignBottom="@+id/target_btn"
       />
    
    <Button
        android:id="@+id/btn_4"
        android:text="我在中心右面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_alignTop="@+id/target_btn"
        android:layout_toRightOf="@+id/target_btn"
        android:layout_marginLeft="40dp"/>
</Relative

 

3.表格布局TableLayout

表格布局采用列、行的形式来管理控件，不需要明确声明其中有多少行和多少列，而是在通过在表格中添加TableRow布局或者控件来控制表格的行数，在TableRow布局中添加控件来控制表格的列数。

这种布局和后序讲的GridLayout的区别就是能够制定各列宽度不一样的表格，而网格布局只能制定列宽度一样的布局。

由于TableLayout继承于线性布局LinearLayout布局，所以表格布局支持线性布局的属性，此外，还有其他常用的属性：

属性名称说明
android:stretchColumns设置可拉伸的列。如：android:stretchColumns=“0”，表示第1列可以拉伸
android:shrinkColumns设置可收缩的列。如：android:shrinkColumns=“1,2”，表示第2、3列可以收缩
android:collapseColumns设置可以隐藏的列。如：android:collapseColumns=“0”，表示第1列可以隐藏

此外，表格布局中控件的常用属性：

属性名称说明
android:layout_column设置该控件显示的位置，如：android:layout_column="1"，表示在第2个位置显示
android:layout_span设置该控件占据第几列，默认为第1列

示例：

<?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:text="按钮1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"/>
        
        <Button
            android:text="按钮2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"/>
    </TableRow>
    
    <TableRow>
        <Button
            android:text="按钮3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"/>

        <Button
            android:text="按钮4"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_column="1"/>
    </TableRow>
    
    <TableRow>
        <Button
            android:text="按钮5"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_column="2"/>
    </TableRow>
</TableLayout>

 

 4.网格布局GridLayout

网格布局是android14.0引入的，使用它可以减少布局嵌套。

常见属性：

属性说明
android:columnCount设置最大列数
android:rowCount设置最大行数
android:orientationGridLayout中子元素的布局方向
android:alignmentModealignBounds：对齐子视图边界 alignMargins ：对齐子视距内容，默认值
android:columnOrderPreserved使列边界显示的顺序和列索引的顺序相同，默认是true
android:rowOrderPreserved使行边界显示的顺序和行索引的顺序相同，默认是true
android:useDefaultMargins没有指定视图的布局参数时使用默认的边距，默认值是false

 使用layout_columnSpan 、layout_rowSpan时要加上layout_gravity属性，否则没有效果；另外item在边缘时宽高计算会出现错误，需要我们手动设置宽高，否则达不到想要的效果。

GridLayout在API21时引入了android:layout_columnWeight和android:layout_rowWeight来解决平分问题。

实现一个计算器界面

<?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="wrap_content"
    android:columnCount="4"
    android:rowCount="9"
    android:orientation="horizontal">

    <TextView
        android:text="计算器"
        android:textSize="15sp"
        android:layout_columnSpan="4"
        android:layout_gravity="center"/>
    <TextView
        android:id="@+id/result"
        android:layout_gravity="fill"
        android:gravity="end"
        android:layout_columnSpan="4"
        android:text="0"
        android:background="#D5D4CF"
        android:textSize="50dp"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="%" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="CE" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="C"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="delete"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="1/x" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="x^2" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="x^(1/2)"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="÷"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="7" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="8" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="9"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="X"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="4" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="5" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="6"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="-"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="1" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="2" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="3"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="+"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="+/-" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="0" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="."/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="="/>

</GridLayout>

 

改Button按钮颜色

不过我们实际的计算器是没有那么明显的绿色的，那怎么改呢？

我们可以找到AndroidManifest.xml，在里找到以下主题。

Ctrl+鼠标左键进入themes.xml文件，将改写为：

Theme.MaterialComponents.DayNight.NoActionBar.Bridge

 

当我们返回我们的XML文件就会看到

5.帧布局FrameLayout

帧布局用于在屏幕上创建一块空白的区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。默认情况下，帧布局中的所有控件会与布局的左上角对齐。

2个特殊属性：

属性相关方法说明
android:foregroundsetForeground(Drawable)设置该帧布局容器的前景图像
android:foregroundGravitysetForeground(int)定义绘制前景图像的gravity属性
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_gravity="center"
    android:background="#FF33ffff" />
<TextView
    android:layout_width="240dp"
    android:layout_height="240dp"
    android:layout_gravity="center"
    android:background="#FF33ccff" />
<TextView
    android:layout_width="180dp"
    android:layout_height="180dp"
    android:layout_gravity="center"
    android:background="#FF3399ff" />
<TextView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_gravity="center"
    android:background="#FF3366ff" />
<TextView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_gravity="center"
    android:background="#FF3300ff" />
</FrameLayout>

总体来讲，FrameLayout由于定位的欠缺，导致它的应用场景也比较少，不过之后使用碎片的时候是可以使用到的。

以上就是在android中几个常见的界面布局。

就先到这里了~

下期预告：android的一些常见的控件。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2050805.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++】深入探索类和对象：初始化列表及其static成员与友元

【C++】深入探索类和对象：初始化列表及其static成员与友元

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇 本章将分享C中类和对象最后章节“深入探索类和对象&#xff1a;初始化列表及其static成员与友元”&#xff0c;希望通过这几篇关于类和对象文…
阅读更多...
JavaScript 错误 - Throw 和 Try to Catch

JavaScript 错误 - Throw 和 Try to Catch

try 语句使您能够测试代码块中的错误。 catch 语句允许您处理错误。 throw 语句允许您创建自定义错误。 finally 使您能够执行代码&#xff0c;在 try 和 catch 之后&#xff0c;无论结果如何。 实例 在本例中&#xff0c;我们通过 adddlert 编写警告代码来故意制造了一个…
阅读更多...
实用库/函数之string的用法

实用库/函数之string的用法

目录 1.使用： 2.定义 3.访问（两种方式） （1）通过下标访问（像字符数组那样） （2）通过迭代器访问 4.常用函数 （1）operator+=:string的加法，将两个string直接拼接起来 （2）compare operator：两个string类型可以直接使用==、!=、<、<=、>、>=比较大…
阅读更多...
＜数据集＞红绿灯识别数据集＜目标检测＞

＜数据集＞红绿灯识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;7884张 标注数量(xml文件个数)&#xff1a;7884 标注数量(txt文件个数)&#xff1a;7884 标注类别数&#xff1a;3 标注类别名称&#xff1a;[light_green, light_red, light_yellow] 序号类别名称图片数框数1lig…
阅读更多...
数据结构与算法 - 分治

数据结构与算法 - 分治

一、概述 分治思想 将大问题划分为两个到多个子问题子问题可以继续拆分成更小的子问题&#xff0c;直到能简单求解如有必要&#xff0c;将子问题的解进行合并&#xff0c;得到原始问题的解 1. 二分查找 public static int binarySearch(int[] a, int target) {return recursi…
阅读更多...
遇到的几个iOS问题

遇到的几个iOS问题

1 unable to boot the simulator 跑模拟器的时候遇到这个报错&#xff0c; 解决方法 处理办法&#xff1a; 删除升级之前的模拟器缓存&#xff0c;重启模拟器。删除路径&#xff1a;~/Library/Developer/CoreSimulator/Cache 注意&#xff1a;后面可能还会复现这个报错&#x…
阅读更多...
计算机毕业设计选题推荐-养老院管理系统-Java/Python项目实战

计算机毕业设计选题推荐-养老院管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…
阅读更多...
vue2项目支持@用户的文本域，使用at-textarea实现

vue2项目支持@用户的文本域，使用at-textarea实现

vue2项目支持用户的文本域&#xff0c;使用at-textarea 第一步安装at-textarea npm install at-textarea第二步引入并注册 import AtTextarea from "at-textarea" components:{AtTextarea }第三步使用 <AtTextarea:AtList"AtList":AtConfig"{k…
阅读更多...
CData Drivers for Cosmos DB Crack

CData Drivers for Cosmos DB Crack

CData Drivers for Cosmos DB Crack　　 Key Features of CData Drivers for Cosmos DB: Multi-API Support: Compatibility with various Cosmos DB APIs, such as SQL, MongoDB, Cassandra, Gremlin, and Table, allows for data model flexibility. SQL Query Execution: A…
阅读更多...
Frida 的下载和安装

Frida 的下载和安装

首先要安装好 python 环境 安装 frida 和 工具包 pip install frida frida-tools 查看版本&#xff1a; frida --version 16.4.8 然后到 github 上下载对应 server &#xff08; 和frida 的版本一致 16.4.8&#xff09; Releases frida/frida (github.com) 查看手机或…
阅读更多...
计算机毕业设计选题推荐-高校实验室管理系统-Java/Python项目实战

计算机毕业设计选题推荐-高校实验室管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
CommunityToolkit.MVVM

CommunityToolkit.MVVM

前言 MVVM工具包&#xff0c;以前名为 Microsoft.Toolkit.Mvvm 由 Microsoft 维护和发布&#xff0c;是 .NET Foundation 的一部分。 支持&#xff1a;.NET Standard 2.0、 .NET Standard 2.1 和 .NET 6(UI Framework 不可知&#xff0c;基本使用没有问题/编译特性用不了) 注…
阅读更多...
C语言-写一函数,实现两个字符串的比较。即自己写一个strcmp函数,函数原型为 int strcmp(char *pl,char *p2)；

C语言-写一函数,实现两个字符串的比较。即自己写一个strcmp函数,函数原型为 int strcmp(char *pl,char *p2)；

题目要求&#xff1a; 17.写一函数,实现两个字符串的比较。即自己写一个strcmp函数,函数原型为 int strcmp(char *pl,char *p2); 设p1指向字符串s1&#xff0c;p2指向字符串s2。要求当s1s2时,返回值为0;若s1≠s2,返回它们二者第1个不同字符的 ASCI1码差值(如"BOY"与…
阅读更多...
微信小程序--28（npm包）

微信小程序--28（npm包）

目录 一、小程序对npm的支持与限制&#xff0c; 二、什么是Vant Weapp 三、安装Vant组件库 &#xff08;一&#xff09;通过npm安装 &#xff08;二&#xff09;构建npm包 &#xff08;三&#xff09;修改 app.json 一、小程序对npm的支持与限制&#xff0c; 小程序已经支…
阅读更多...
STM32标准库学习笔记-6.定时器-输入捕获

STM32标准库学习笔记-6.定时器-输入捕获

参考教程&#xff1a;【STM32入门教程-2023版 细致讲解 中文字幕】 定时器输入捕获 IC&#xff08;Input Capture&#xff09;输入捕获输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存到CCR中&#xff0c;可用于测量PWM波形的频率…
阅读更多...
一起看下halcon逻辑结构

一起看下halcon逻辑结构

halcon中结构包括顺序结构、分支结构、循环结构三种&#xff0c;不存在跳转的结构语句。 注意cntinue:结束本次循环,break跳出本次循环 选择结构&#xff1a; 1.if…end if 2.if…else…end if 3.if…elseif…elseif…end if 循环结构&#xff1a; 1.while()…endwhile …
阅读更多...
＜STC32G12K128入门第十二步＞STC32G低功耗设计

＜STC32G12K128入门第十二步＞STC32G低功耗设计

前言 本文主要讲STC32G的低功耗设计，包括软件设计和硬件设计。其中有软件有一个问题当时困扰了我几个小时。都是精华 一、STC32G低功耗硬件设计 STC32G的硬件设计思路，最基本的就是需要考虑使用低功耗的硬件，比如ldo或者dc-dc需要考虑他的静态功耗，最好选择ua级别的。然…
阅读更多...
【Hot100】LeetCode—206. 反转链表

【Hot100】LeetCode—206. 反转链表

目录 1- 思路递归法 2- 实现⭐206. 反转链表——题解思路 3- ACM 实现 原题连接&#xff1a;206. 反转链表 1- 思路 递归法 递归三部曲 ①终止条件&#xff1a;遇到 head null || head.nextnull 的时候②递归逻辑&#xff1a;定义 cur &#xff0c;cur 执行递归逻辑&#xff…
阅读更多...
调试模拟实现字符串相关函数（第二十八天）

调试模拟实现字符串相关函数（第二十八天）

assert与const的使用 常见的编程错误
阅读更多...
＜数据集＞商品条形码识别数据集＜目标检测＞

＜数据集＞商品条形码识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3748张 标注数量(xml文件个数)&#xff1a;3748 标注数量(txt文件个数)&#xff1a;3748 标注类别数&#xff1a;1 标注类别名称&#xff1a;[Barcode] 序号类别名称图片数框数1Barcode37484086 使用标注工具&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023