Android常见的界面布局

最新推荐文章于 2024-08-19 15:54:05 发布
最新推荐文章于 2024-08-19 15:54:05 发布
阅读量744 收藏 15
点赞数 21
分类专栏： Android学习 文章标签： android xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhyhgx/article/details/141291898
版权

目录

​前言

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的一些常见的控件。 

小猪同学hy
关注
  • 21
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
Android App界面的ListView布局实战演练
09-02
在Android开发中，ListView是一种非常常见的控件，用于展示大量数据列表。它的高效性和可滚动性使得它在创建用户界面时特别有用。本篇实战演练将深入探讨如何在Android App中实现ListView布局，并通过三种不同情况的...
android界面布局详解
06-27
在Android开发中，界面布局是构建用户界面的关键部分。它决定了应用中各个组件的位置和排列方式，从而影响用户体验。本文将深入探讨Android界面布局的各个方面。 1、用户界面及视图层次 Android用户界面主要由View...
Android常见界面布局
小菜鸡的小博客
01-14 7805
第2章 Android常见界面布局 第2章 Android常见界面布局2.1 View视图2.2 界面布局编写方式2.2.1 在XML文件中编写布局2.2.2 在Java代码中编写布局2.3 常见界面布局2.3.1 布局的通用性2.3.2 RelativeLayout相对布局2.3.3 LinearLayout线性布局2.3.4 TableLayout表格布局2.3.5 FrameLayout帧布局2.3.6 ConstraintLayout约束布局 2.1 View视图 An
第2章 Android常见界面布局
qq_51580006的博客
11-04 844
第二章
android常见界面布局,常见界面布局之TableLayout(表格布局)
weixin_32027491的博客
05-26 1430
1.什么是TableLayout(表格布局)TableLayout (表格布局)采用行、列的形式来管理控件，它不需要明确声明包含多少行、多少列，面是通过在TableLayout布局中添加TableRow布局或控件来控制表格的行数，可以在TableRow 布局中添加控件来控制表格的列数。在XML布局文件中定义表格布局的基本语法格式如下：属性－”属性值＂>UI控件UI控件TableLayout继...
CH2-Android常见界面布局
weixin_46227276的博客
02-25 5301
文章目录目标一、View视图二、界面布局编写方式2.1 在XML文件中编写布局2.2 在Java代码中编写布局三、界面布局的通用属性四、线性布局4.1 LinearLayout4.2 案例步骤4.3 实战演练—仿动物连连看游戏界面五、相对布局5.1 RelativeLayout5.2 实战演练—音乐播放器界面六、表格布局6.1 TableLayout6.2 实战演练—计算器界面七、帧布局7.1 帧布局FrameLayout7.2 实战演练—霓虹灯界面 目标 了解View与ViewGroup的简介，能够说出
Android常见界面布局(详细介绍)
热门推荐
振华OPPO的博客世界
04-21 2万+
一、View视图 所有的UI元素都是通过View与ViewGroup构建的，对于一个Android应用的用户界面来说，ViewGroup作为容器盛装界面中的控件，它可以包含普通的View控件，也可以包含ViewGroup。 二、界面布局编写方式 有两种界面布局方式，第一种是在XML文件中编写布局，最常用的也是这种；第二种是在java代码中编写布局，如图： 1、在XML文件中编写布局 UI界面...
移动应用开发-第2章Android常见界面布局
2302_78218660的博客
06-15 948
界面由布局和控件组成。
【Android】常见的界面布局
HR的博客
05-26 1237
常见的界面布局 View视图 Android所有的UI元素都是通过View和ViewGroup构建的，对于一个Android应用的用户界面来说，ViewGroup作为容器盛装界面的控件，它可以包含普通的View可见，也可以包含ViewGroup。减下来通过一个图描述假面真的ViewGroup布局和View可见的包含关系，如图1-1所示 图 1-1 需要注意的是:Android应用的每个界面的改元素必须有且只有一个ViewGroup容器 为了使用不同的界面风格，Android系统提供了五种常用的布局，分别
(2)Android常见界面布局
qq_31230999的博客
03-22 7483
文章目录2.1 View控件2.2 界面布局编写方式XML中编写Java中编写2.3 界面布局的通用属性android:idandroid:layout_width&&android:layout_heightandroid:backgroudandroid:layout_margin&&android:padding2.4 线性布局2.4.1 线性布局简介设置控件权重举例2.4.2 实战演练—仿动物连连看游戏界面themes.xmlactivity_main.xml2.5
android界面有几种布局各有什么特点,03-Android用户界面布局.ppt
weixin_42522374的博客
05-27 621
《03-Android用户界面布局.ppt》由会员分享，可在线阅读，更多相关《03-Android用户界面布局.ppt(36页珍藏版)》请在人人文库网上搜索。1、第2章 Android用户界面-3,本章学习目标,掌握各种界面布局的特点和使用方法,2.4 界面布局,布局管理器 为了更好地管理android应用的用户界面里的各种控件，android提供了布局管理器，通过使用布局管理器，android应...
android实现上下左右滑动界面布局
08-25
Android 实现上下左右滑动界面布局是 Android 开发中的一种常见需求，今天我们将详细介绍如何使用 ScrollView 和 HorizontalScrollView 实现上下左右滑动的界面布局。 首先，我们需要了解什么是 ScrollView 和 ...
android常见的布局
07-09
在Android应用开发中，布局（Layout）是构建用户界面的核心元素。它们决定了应用程序中的视图如何组织和排列，为用户提供了一种与应用交互的方式。以下是关于Android中常见布局的详细说明： 1. **线性布局...
MySQL数据库——表的CURD（Delete）
最新发布
m0_63596031的博客
08-19 87
truncate [table] table_name 注意：这个操作慎用 1.只能对整表操作，不能像DELETE一样针对部分数据操作； 2.实际上MySQL不对数据操作，所以比DELETE更快，但是TRUNCATE在删除数据的时候，并不经过真正的事务，所以无法回滚 3.会重置AUTO_INCREMENT项
Android笔试面试题AI答之Kotlin（10）
学无止境，止于至善
08-14 765
总的来说，Kotlin的可见性修饰符提供了比Java更加灵活和精细的控制方式，特别是在模块级访问权限和顶级元素的可见性方面。注意，上述映射解构的例子并非Kotlin的原生支持，而是利用了Kotlin的特性和函数式编程风格来实现的一种模拟。综上所述，Kotlin中的构造方法提供了灵活而强大的方式来初始化对象，但在使用时需要注意上述的注意事项以确保代码的正确性和健壮性。还可以应用于顶级函数、属性和对象声明，这在Java中是不可能的（Java中的顶级元素默认是包级私有的，但没有显式的。这些函数使得解构成为可能。
2024-08-16升级记录：使用Android RecyclerView控件显示列表型信息
sig321的专栏
08-16 697
在页面上使用RecyclerView实现一个列表型信息展示： 步骤如下： 二、添加单行显示的item布局文件 layout_gnss_counrty_item.xml 三、逻辑实现代码 实体类： Adapter类和ViewHolder类： 调用： 注意：一定要设置：LinearLayoutManager layoutManager = new LinearLayoutManager(this); mRecyclerView.setLayoutManager(layoutMan
wordpress二次开发 在Woocommerce相关产品中显示产品变体的方法
withkai44的博客
08-15 316
在Woocommerce中，相关产品的展示是一个很好的促销策略。但有时候，你可能希望在这些相关产品中显示产品的不同变体，以提供更多选择给客户。这段代码首先初始化了一个新的WP_Query对象来获取每个相关产品的所有变体。然后，在循环内，你可以按需自定义显示这些变体的代码。这意味着它获取了当前产品的ID，并调用了与之相关的产品。要显示这些相关产品的变体，你需要对这部分代码进行修改。接下来，你需要一个循环来显示每个相关产品的变体。在这个文件中，你可以看到相关产品是如何被调用的。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猪同学hy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值