安卓布局简单归纳

article/2025/9/27 23:58:21

安卓布局

1.线性布局LinearLayout
2.表格布局TableLayout以及网格布局GridLayout
3.帧布局FrameLayout
4.相对布局RelativeLayout
5.Android2.0已经过时的绝对布局AbsoluteLayout
这里仅谈xml的实现、不涉及java实现
布局管理器及组件的常用共有属性:

属性作用
android:id="@+id/XXX"为当前的组件指定id,在JAVA中用该属性引用该空间
android:layout_width=“XXX”设置组件的宽度
android:layout_height =“XXX”设置组件的长度
android:background =“XXX”设置组件的背景
android:padding =“XXX”设置组件与文字之间的距离
layout_margin=“XXX”设置组件之间的距离

margin与padding都有方位词:

方位
Top顶部
Bottom底部
Left
Right

每个空间的必有属性:

android:layout_width="XXX"  //设置组件的宽度 
android:layout_height ="XXX" //设置组件的长度

线性布局LinearLayout

将开发者放入布局管理器中的组件进行水平或者竖直的排列,针对每行或每列只能放置一个空间且不会换行(意思是当组件排到页面边缘之外的时候也不会换行)。
在这里插入图片描述
线性布局管理器支持的属性值有两个:

属性作用
android:orientation=“XXX”设置排列方式horizontal、vertical
android:gravity="XXX设置对齐方式top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、center_vertical、center、fill、clip_vertical、clip_horizontal

其中android:gravity设置布局管理器内部组件对齐方式中的值可以用“|”拼接起来使用(Linux中称其为管道符号)
android:layout_gravity设置子元素在父布局中的位置子元素中无法设置gravity(浅谈与之区别)

方位
center_vertical垂直居中
fill_vertical纵向充满
center_horizontal横向居中
fill_horizontal横向充满
center居中
fill充满
clip_vertical超出部分纵向裁剪
clip_horizontal超出部分横向裁剪
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/linearLayout"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="bottom|right"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="底部向右" /></LinearLayout>

在这里插入图片描述
当即有LinearLayout且设置了orientation:horizontal又有子控件里设置了layout_gravity则左右方位词会失效
当即有LinearLayout且设置了orientation:vertical又有子控件里设置了layout_gravity则上下方位词会失效
不过应该可以通过代码的方式实现、此处之后在说。

	<TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:text="底部向右" /></LinearLayout>

在这里插入图片描述

表格布局TableLayout

表格布局就类似于表格,有行于列来放入组件。

  • TableLayout为布局管理器,直接在其中添加组件则该组件独占一行
  • TabRow为行,一个TabRow代表一行,也是一个容器
  • 在表格布局里无列的标签,但在行中每添加一个组件便多一行,列数以组件最多的行数来确定
  • 列可以隐藏也可以设为拉伸的状态用来填补空挡的位置,也可以收缩来适应表格匹配屏幕大小

TableLayout继承了LinearLayout,所有LinearLayout的XML属性TableLayout都支持
TableLayout布局管理器独有属性:

属性作用
android:collapseColumns设置被隐藏列的序列号,从0开始,多个序号之间用逗号隔开
android:shrinkColumns设置被收缩的列的序列号,从0开始,多个序号之间用逗号隔开,多余的文字会自动换行
android:stretchColumns设置被拉伸列的序列号,从0开始,多个序列号之间用逗号隔开

xml:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3" /></TableRow><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="4" /><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="5" /></TableRow></TableLayout>

在这里插入图片描述
设置隐藏列0,1

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:collapseColumns="0,1"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3" /></TableRow><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="4" /><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="5" /></TableRow></TableLayout>

在这里插入图片描述
设置拉伸列2

<TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3" />
</TableRow><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="4" /><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="5" /></TableRow>

在这里插入图片描述
设置收缩列2,其会自动换行

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:shrinkColumns="2"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3" /></TableRow><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="4" /><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="5" /><Buttonandroid:id="@+id/button6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="6666666666666666666666666" /></TableRow></TableLayout>

在这里插入图片描述
子控件可用的属性:

属性作用
android:layout_span跨列(指定所跨列数,被跨的位置不可以有控件,若有控件则另一个控件会被挤到另一列而不是覆盖)
android:layout_column设置控件占第几列(序号列从0开始

跨列:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3" /></TableRow><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="4" /><Buttonandroid:id="@+id/button5"android:layout_span="2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="5" /><Buttonandroid:id="@+id/button6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="6" /></TableRow></TableLayout>

在这里插入图片描述
控件占第2列:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="3" /></TableRow><TableRow android:layout_width="wrap_content"android:layout_height="wrap_content"><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_column="2"android:text="4" /></TableRow></TableLayout>

在这里插入图片描述

网格布局GridLayout

网格布局类似于表格布局(sdk最低为14),其最大的好处是可以在子控件中指定控件本身所在的行与列,设置模式类似于直角坐标系,行列号从0开始。行可以想成X列可以想成Y

子控件属性

属性作用
android:rowCount=""指定行号
android:columnCount=""指定的列号
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><Buttonandroid:id="@+id/button1"android:layout_row="0"android:layout_column="0"android:text="(0,0)" /><Buttonandroid:id="@+id/button2"android:layout_row="0"android:layout_column="1"android:text="(0,1)" /><Buttonandroid:id="@+id/button3"android:layout_row="1"android:layout_column="0"android:text="(1,0)" /><Buttonandroid:id="@+id/button4"android:layout_row="1"android:layout_column="1"android:text="(1,1)" /></GridLayout>

在这里插入图片描述
GridLayout可以不指定控件的宽高,因为在GridLayout中可以指定布局管理器中有多少行与多少列(也可以不指定,用子控件的属性决定,如android:layout_row与android:layout_column上例所示)
布局管理器中属性:

属性作用
android:rowCount=""设置行数
android:columnCount=""设置列数

此外还可以指定控件占得列数与行数(此处若不在布局管理器中设置行数与列数,则控件会排成一行):

属性作用
android:layout_columnSpan=""设置所占列数
android:layout_rowSpan=""设置所占行数

搭配android:layout_gravity可以铺满所在行与列(此处行与列可能有些冲突,慎用

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:rowCount="2"  android:columnCount="2"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><Buttonandroid:id="@+id/button1"android:layout_rowSpan="2"android:layout_gravity="fill"android:text="(0,0)" /><Buttonandroid:id="@+id/button2"android:text="(0,1)" /><Buttonandroid:id="@+id/button3"android:text="(1,0)" /><Buttonandroid:id="@+id/button4"android:text="(1,1)" /></GridLayout>

在这里插入图片描述

帧布局FrameLayout

每加入一个组件,都将创建一个空白区域称之为一帧,显示的对象都会被固定在左上角,我们不能够指定其显示的位置值能指定大概方位,控件与控件之间相互重叠、覆盖部分或全部覆盖(与控件的透明度有关)

FrameLayout布局管理器属性:

属性作用
android:foreground=""设置前景图片
android:foregroundGravity=""设置前景的位置

前景是不会被覆盖的

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"android:foreground="@drawable/ic_launcher"android:foregroundGravity="center"tools:context=".MainActivity" ><TextView android:layout_width="240dp"android:layout_height="240dp"android:background="#f00"android:layout_gravity="center"/><TextView android:layout_width="140dp"android:layout_height="140dp"android:background="#0f0"android:layout_gravity="center"/><TextView android:layout_width="40dp"android:layout_height="40dp"android:background="#00f"android:layout_gravity="center"/><TextView android:layout_width="20dp"android:layout_height="20dp"android:background="#f00"android:layout_gravity="center"/>
</FrameLayout>

在这里插入图片描述

相对布局RelativeLayout

相对布局就是按照组件的相对位置来进行布局,例如在某个组件的上边、下边、左边、或者右边。相对布局以id来确定控件,每个控件都建议都id
RelativeLayout布局管理器支持的属性:

属性作用
android:gravity=""设置子控件的对齐方式
android:ignoreGravity=""设置哪个组件不受gravity的影响

xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"android:gravity="bottom"android:ignoreGravity="@+id/e"tools:context=".MainActivity" ><TextViewandroid:id="@+id/q"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView1"/><TextViewandroid:id="@+id/w"android:layout_toRightOf="@+id/q"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView2"/><TextViewandroid:id="@+id/e"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView3"/>
</RelativeLayout>

在这里插入图片描述

子控件的属性:

属性作用
android:layout_below=""某组件的下方id
android:layout_above=""某组件的上方id
android:layout_toLeftOf=""某组件的左边id
android:layout_toRightOf=""某组件的右边id
android:layout_centerHorizontal=""水平居中boolean
android:layout_centerVertical=""垂直居中boolean
android:layout_centerInParent=""位于父布局正中间boolean

边界对齐:

属性作用
android:layout_alignBottom=""某组件的下边界id
android:layout_alignTop=""某组件的上边界id
android:layout_alignLeft=""某组件的左边界id
android:layout_alignRight=""某组件的右边界id
android:layout_alignParentBottom=""父布局地段对齐boolean
android:layout_alignParentTop=""父布局顶端对齐boolean
android:layout_alignParentLeft=""父布局左端对齐boolean
android:layout_alignParentRight=""父布局右端对齐boolean

父布局顶部对齐与父布局左边界对齐重叠
xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TextViewandroid:id="@+id/q"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="父布局顶部对齐"android:layout_alignParentTop="true"/><TextViewandroid:id="@+id/w"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="父布局底部对齐"android:layout_alignParentBottom="true"/><TextViewandroid:id="@+id/e"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="父布局右边界对齐"android:layout_alignParentRight="true"/><TextViewandroid:id="@+id/r"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="父布局左边界对齐"android:layout_alignParentLeft="true"/>
</RelativeLayout>

在这里插入图片描述

绝对布局AbsoluteLayout

绝对控制控件的位置,很单一
子控件支持的属性

属性作用单位
android:layout_x=""某组件x坐标dp
android:layout_y=""某组件y坐标dp

xml:

    <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TextViewandroid:id="@+id/q"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_x="45dp" android:layout_y="35dp"android:text="TextView"/></AbsoluteLayout>

在这里插入图片描述


http://chatgpt.dhexx.cn/article/WPorYaeo.shtml

相关文章

安卓layout布局三等分

关于android LinearLayout的比例布局&#xff0c;主要有以下三个属性需要设置&#xff1a; 1&#xff0c;android:layout_width&#xff0c;android:layout_height,android:layout_weight三个值 2&#xff0c;当为水平布局时&#xff0c;android:layout_height“0dp",当为…

安卓APP(3)——安卓布局控件

嵌入式之路&#xff0c;贵在日常点滴 ---阿杰在线送代码 目录 一、布局的种类 二、布局和页面的关系 三、显示一张美女图 控件的宽度和高度 四、布局背景颜色&#xff0c;背景图&#xff0c;显示两个美女 关于控件ID 五、常用布局之相对布局 RelativeLayout中子控件常…

安卓的相对布局与线性布局

一、安卓布局的种类 Android共有七大基本布局。 分别是&#xff1a;线性布局LinearLayout、表格布局TableLayout、相对布局RelativeLayout、帧布局FrameLayout、绝对布局AbsoluteLayout、网格布局GridLayout。约束布局ConstraintLayout。 其中&#xff0c;表格布局是线性布局的…

Android:布局

Android&#xff1a;布局 LinearLayoutRelativeLayoutFrameLayoutTableLayoutGridLayoutConstraintLayout LinearLayout <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_height"match_parent"android:layout_…

安卓六大布局之 线性布局(LinearLayout)

Android的界面是有布局和组件协同完成的&#xff0c;布局好比是建筑里的框架&#xff0c;而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列&#xff0c;就组成了用户所看见的界面。 Android的六大布局分别是 LinearLayout&#xff08;线性布局&#xff09;RelativeLayo…

Android-布局管理器

线性布局(Linearlayout) 属性 orientation 布局管理器内组件的排列方式(horizontal&#xff08;水平&#xff09;和vertical&#xff08;垂直&#xff09;&#xff0c;默认值为 horizontal.) layout_weight 权重 用于设置组件占父容器剩余空间的比例 la…

android 布局

android学习笔记&#xff08;一 android布局学习&#xff09; 转自http://blog.sina.com.cn/s/blog_61c62a960100ev3q.html (2009-09-20 20:50:44) 转载 标签&#xff1a; it 分类&#xff1a;android 最近痴迷上了android &#xff0c; 因为有java 语言的基础学起来自己感觉很…

安卓六大布局介绍

安卓六大布局 布局的介绍安卓六大布局 布局的介绍 用户使用安卓看到的应用界面&#xff0c;是通过布局和组件构成的&#xff0c;组件根据布局的格式排列&#xff0c;形成用户所看到的界面。 安卓六大布局 线性布局方式&#xff08;LinearLayout&#xff09; 按照垂直或者水平…

安卓线性布局

安卓线性布局 &#xff08;一&#xff09;界面与布局1、界面2、布局&#xff08;1&#xff09;UI容器&#xff08;2&#xff09;UI控件 (Control)&#xff08;3&#xff09;两种方式声明布局 &#xff08;二&#xff09;线性布局&#xff08;1&#xff09;常用属性 &#xff08…

安卓的常用布局看一篇就够了

目录 1-1 布局通用的属性 1-2 线性布局&#xff08;LinearLayout&#xff09; 1、常见属性&#xff1a; 2、线性布局的例子&#xff1a; 1-3 相对布局&#xff08;RelativeLayout&#xff09; 1、常见属性&#xff1a; 2、 相对布局的例子&#xff1a; 1-4 帧布局&a…

android布局技巧:创建高效布局

Android UI工具包提供了一些布局管理器&#xff0c;它们使用起来相当容易&#xff0c;而且&#xff0c;大多数的时候&#xff0c;你只需要使用它们最基本的特征来实现UI。 执着于基本特征的使用对于创建UI来说&#xff0c;往往不是最高效的。一个常见的例子就是滥用LinearLayo…

安卓7大基本布局

一&#xff1a;基础知识 1.Android七大基本布局分别是&#xff1a; LinearLayout(线性布局)、TableLayout(表格布局)、RelativeLayout(相对布局)、FrameLayout(层布局)、AbsoluteLayout(绝对布局)、GridLayout(网格布局)、ConstraintLayout(约束布局)。 2.七大基本布局的继承…

Android的六大基本布局

线性布局 LinearLayout相对布局 RelativeLayout表格布局 TableLayout绝对布局 AbsoluteLayout网格布局 GridLayout帧布局 FrameLayout 布局通用属性 属性名称功能描述android:id设置布局的标识android:layout_width设置布局的宽度android:layout_height设置布局的高度android:…

安卓布局详解:探索各种布局方式

文章目录 前言一、线性布局&#xff08;LinearLayout&#xff09;二、相对布局&#xff08;RelativeLayout&#xff09;三、帧布局&#xff08;FrameLayout&#xff09;四、表格布局&#xff08;TableLayout&#xff09;五、约束布局&#xff08;ConstraintLayout&#xff09;六…

微信小程序页面布局——上中下结构

小程序页面布局——上中下结构 内容简述 上中下结构&#xff1a;头脚固定中间滚动框 使用UI框架&#xff1a;Vant Weapp(引入安装参考) 为了方便&#xff0c;使用了less生成wxss&#xff0c;所以展示的是less代码&#xff0c;有需要可以看&#xff1a;https://www.jianshu.com…

微信小程序中的常用布局方式(总结)

参照Android开发&#xff0c;总结了微信小程序的常用的两种布局方式&#xff1a;1、线性布局&#xff08;横版、竖版&#xff09;。2、网格布局。 效果图如下&#xff1a; 一、网格布局 &#xff08;1&#xff09;固定Item个数的网格布局&#xff0c;主要用于功能模块入口展示…

微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局&#xff0c;是W3c在2009年提出的一种新的方案&#xff0c;可以简便&#xff0c;完整&#xff0c;响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐&#xff0c;方向以及顺序&#xff0c;甚至他们可以是动…

html的网格布局

网格布局 学习总结&#xff1a; 从7.19进入csdn夏令营后&#xff0c;感谢各位老师的辛苦讲解与发布任务&#xff0c;我对C1能力认证中web方面的知识有了极大的领会。学习过程中既温习了在校学习的知识&#xff0c;也学到了诸如网格布局&#xff0c;动画&#xff0c;less&#x…

网格布局(grid布局)

网格布局 他可以将页面分为多个网格&#xff0c;可以任意组合不同的网格 &#xff0c;做出各种各样的布局。 网格布局为二维性质的。 设置行、列间距 grid-row-gap:1rem ;行间距 ** grid-column-gap: 1rem ;列间距** ** grid-gap: 1rem;**设置行列间距 设置容器的列宽和与…

CSS布局—网格布局Grid(一)

CSS网格可以定义由行和列组成的二维布局&#xff0c;然后将元素放置到网格中。有些元素可能只占据网格的一个单元&#xff0c;另一些元素则可能占据多行或多列。网格的大小既可以精确定义&#xff0c;也可以根据自身内容自动计算。你既可以将元素精确地放置到网格某个位置&…