Android 入门之基本布局

1 篇文章 0 订阅
1 篇文章 0 订阅

Android 入门之基本布局和常用属性

一.LinearLayout (线性布局)

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"></LinearLayout>

其中 layout_width属性指的是布局的宽度,layout_height指的是布局的高度,orientation指的是布局方向。

  android:layout_width="match_parent"

match_parent指的是最大也就是铺满。

android:layout_width="wrap_content"

wrap_content指的是自适应

android:layout_width="45dp"
android:layout_height="45dp"

也可以根据自己的需求设置固定的长度或者宽度,单位常用dppx

android:orientation="horizontal"

horizontal为横向排布(这里就用imageView举例,比较直观)

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_blue_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_green_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_red_dark"/>
    </LinearLayout>

效果是这样的
在这里插入图片描述

android:orientation="vertical"

vertical为竖向排列

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_blue_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_green_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_red_dark"/>
    </LinearLayout>

效果是这样的
在这里插入图片描述
然后我们讲一下他的其他的常用属性,分别是

1.gravity居中方式

android:gravity="center"

center为布局居中

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_blue_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_green_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_red_dark"/>
    </LinearLayout>

当我们把 布局的高度和宽度全部设置为match_parent(最大),居中方式设置为center
在这里插入图片描述
然后还有 bottom(底部),center_horizontal(横向居中),center_vertical(竖向居中),right(居右)等可选属性,我就不一一举例了。

2.layout_gravity相对于父容器的居中方式
同样的可选属性也是center(居中),bottom(底部),center_horizontal(横向居中),center_vertical(竖向居中),right(居右)等可选属性

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:orientation="horizontal">
        <ImageView
            android:layout_width="85dp"
            android:layout_gravity=""
            android:layout_height="85dp"
            android:background="@android:color/holo_blue_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:background="@android:color/holo_green_dark"/>
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_red_dark"/>
    </LinearLayout>

我们删除LinearLayoutgravity属性后,为第三个imageView添加layout_gravity属性

 android:layout_gravity="center"

在这里插入图片描述
3.layout_weight权重

权重就是每个控件相对于父容器比例
设置权重的时候,想要控件在哪个方向按照权重划分,就要把那个方向的属性设置为0
例如想要设置横向权重划分的话
<ImageView android:layout_width="0dp" android:layout_height="85dp" android:layout_weight="3" android:background="@android:color/holo_blue_dark" />
竖向也是同样的操作,具体按照什么方向划分就要按照LinearLayoutorientation属性。

如果只有一个控件,那无论他的比例是几,他都会铺满父容器。例如

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="85dp"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_dark" />

       
    </LinearLayout>
android:layout_weight="1"

这里的layout_weight=1效果如下
在这里插入图片描述

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="85dp"
            android:layout_weight="3"
            android:background="@android:color/holo_blue_dark" />


    </LinearLayout>
 android:layout_weight="3"

这里的 android:layout_weight="3"效果还是一样的
在这里插入图片描述
如果有多个控件,就会按照权重去划分每个控件所占的空间

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="85dp"
            android:layout_weight="3"
            android:background="@android:color/holo_blue_dark" />
        <ImageView
            android:layout_width="0dp"
            android:layout_height="85dp"
            android:layout_weight="2"
            android:background="@android:color/holo_green_dark" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="85dp"
            android:layout_weight="1"
            android:layout_gravity="end"
            android:background="@android:color/holo_red_dark" />
    </LinearLayout>

在这里插入图片描述
二.FrameLayout(帧布局)
FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个组件!后续添加的控件会覆盖前一个!虽然默认会将控件放置在左上角,但是我们也可以通过layout_gravity属性,指定到其他的位置!
常用属性
android:foreground:*设置改帧布局容器的前景图像
android:foregroundGravity:设置前景图像显示的位置

 <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="@mipmap/ic_launcher"
        android:foregroundGravity="center">
    </FrameLayout>

在这里插入图片描述
但是需要注意一点

 <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="@mipmap/ic_launcher"
        android:foregroundGravity="center">
        <ImageView
            android:layout_width="185dp"
            android:layout_height="185dp"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark" />
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark" />
    </FrameLayout>

FrameLayout后面添加控件会覆盖住前面添加的控件
在这里插入图片描述
同样两个FrameLayout也会相互覆盖,后面添加的会覆盖住前面添加的

  <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="@mipmap/ic_launcher"
        android:foregroundGravity="center">
        <ImageView
            android:layout_width="185dp"
            android:layout_height="185dp"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark" />
        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark" />


    </FrameLayout>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="@android:color/holo_blue_dark"
        >
    </FrameLayout>

在这里插入图片描述
这里可以看到左上角的两个imageView也被覆盖住了

三.RelativeLayout(相对布局)
这个布局应该是最复杂的一个常用布局了,复杂是因为他的属性多。具体分类

自身属性gravity:这个属性和其他的布局一样

子控件属性 (相对于父容器)
layout alignParentLeft(左对齐)
layout_alignParentRight(右对齐)
layout_alignParentTop(顶部对齐)
layout _alignParentBottom (底部对齐)
layout_centerHorizontal(水平居中)
layout centerVertical(垂直居中)
layout_centerInParent(中间居中)

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_alignParentLeft="true"
            android:background="@android:color/holo_red_dark" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_alignParentRight="true"
            android:background="@android:color/holo_green_dark" />

        <ImageView
            android:layout_width="85dp"
            android:layout_centerVertical="true"
            android:layout_height="85dp"
            android:background="@android:color/black" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_centerHorizontal="true"
            android:background="@android:color/holo_blue_bright" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_alignParentTop="true"
            android:background="@android:color/holo_orange_dark" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_alignParentBottom="true"
            android:background="@android:color/holo_purple" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_centerInParent="true"
            android:background="@android:color/darker_gray" />
    </RelativeLayout>

在这里插入图片描述
其中
android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"
重叠所以会被覆盖,后面添加的会覆盖住前面添加的。

子控件属性 (相对于其他控件)

layout_toLeftof(参考组件的左边)
layout_toRightOf(参考组件的右边)
layout_above(参考组件的上方)
layout_below(参考组件的下方)
layout_alignTop(对齐参考组件的上边界)
layout alignBottom(对齐参考组件的下边界)
layout_alignLeft(对齐参考组件的左边界)
layout_alignRight(对齐参考组件的右边界)

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image"
            android:layout_width="85dp"
            android:layout_centerInParent="true"
            android:layout_height="85dp"
            android:background="@android:color/holo_red_dark" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_toLeftOf="@+id/image"
            android:background="@android:color/holo_green_dark" />

        <ImageView
            android:layout_width="85dp"
            android:layout_toRightOf="@+id/image"
            android:layout_height="85dp"
            android:background="@android:color/black" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_above="@+id/image"
            android:background="@android:color/holo_blue_bright" />

        <ImageView
            android:layout_width="85dp"
            android:layout_below="@+id/image"
            android:layout_height="85dp"
            android:background="@android:color/holo_orange_dark" />

        <ImageView
            android:layout_width="85dp"
            android:layout_alignTop="@+id/image"
            android:layout_height="85dp"
            android:background="@android:color/holo_purple" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_alignLeft="@+id/image"
            android:background="@android:color/darker_gray" />

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_alignRight="@+id/image"
            android:background="@android:color/holo_green_light" />
    </RelativeLayout>

在这里插入图片描述
其中android:layout_alignLeft="@+id/image"android:layout_alignRight="@+id/image"重合
因为分别参考了image的左边线和右边线,每个imageview的大小有事相同的

四.AbsoluteLayout(绝对布局)

这个布局相对来说比较简单,只有4个属性,都是子控件的

layout_width(宽度)
layout_height(高度)
layout_y(纵坐标)
layout_x(横坐标)

这个x,y分别指的是,距离左上角的距离,左上角为(0,0)。

<AbsoluteLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_x="160dp"
            android:layout_y="152dp"
            android:background="@android:color/holo_purple"></ImageView>

        <ImageView
            android:layout_width="85dp"
            android:layout_height="85dp"
            android:layout_x="160dp"
            android:layout_y="252dp"
            android:background="@android:color/holo_red_dark"></ImageView>
    </AbsoluteLayout>

在这里插入图片描述
相对来说是不是很简单,这个布局虽然在以前来说是一个常用的布局,但是现在这个布局基本上已经废弃了,这个不是相对屏幕,而是绝对的。比如说一个屏幕宽度是分别是1920dp1080dp的,按照这个屏幕的尺寸设计了一套布局,换了另一个设备尺寸是1280dp800dp的,那么在宽度大于800和高度大于1200的部分就不会显示,所以说这个布局基本上不怎么使用了,了解一下就可以。

五.TableLayout(表格布局)

主要属性有:
android:collapseColumns:设置需要被隐藏的列的序号
android:shrinkColumns:设置允许被收缩的列的列序号
android:stretchColumns:设置运行被拉伸的列的列序号

以上这三个属性的列号都是从0开始算的,比如shrinkColunmns = “2”,对应的是第三列!
可以设置多个,用逗号隔开比如"0,2",如果是所有列都生效,则用"*"号即可
除了这三个常用属性,还有两个属性,分别就是跳格子以及合并单元格,这和HTML中的Table类似:

android:layout_column=“2”:表示的就是跳过第二个,直接显示到第三个格子处,从1开始算的!
android:layout_span=“4”:表示合并4个单元格,也就说这个组件占4个单元格

这个标签和HTML的一样就是一行
layout_width属性,默认是match_parent的,我们自己设置成其他的值也不会生效! 但是layout_height默认是wrap_content的,我们却可以自己设置大小。

  <TableLayout
        android:id="@+id/TableLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <TableRow>

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_red_dark"
                />

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_blue_bright"
                />

            <ImageView
                android:layout_width="85dp"
                android:background="@android:color/holo_green_light"
                android:layout_height="85dp"
                />

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_orange_dark"
                />

            <ImageView
                android:background="@android:color/black"
                android:layout_width="85dp"
                android:layout_height="85dp"
                />
        </TableRow>
    </TableLayout>

在这里插入图片描述
这是正常的效果图
1.android:collapseColumns(隐藏的列)

android:collapseColumns="0,2"

我们隐藏两列

<TableLayout
        android:id="@+id/TableLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="0,2" >

        <TableRow>

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_red_dark"
                />

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_blue_bright"
                />

            <ImageView
                android:layout_width="85dp"
                android:background="@android:color/holo_green_light"
                android:layout_height="85dp"
                />

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_orange_dark"
                />

            <ImageView
                android:background="@android:color/black"
                android:layout_width="85dp"
                android:layout_height="85dp"
                />
        </TableRow>
    </TableLayout>

效果如下
在这里插入图片描述
2.stretchColumns(可拉伸的列)

 android:stretchColumns="1"
 <TableLayout
        android:id="@+id/TableLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1" >

        <TableRow>

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_red_dark"
                />

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_blue_bright"
                />

            <ImageView
                android:layout_width="85dp"
                android:background="@android:color/holo_green_light"
                android:layout_height="85dp"
                />

            <ImageView
                android:layout_width="85dp"
                android:layout_height="85dp"
                android:background="@android:color/holo_orange_dark"
                />
        </TableRow>
    </TableLayout>

在这里插入图片描述
因为是0开始算的,所以第二列被拉伸了。

3.shrinkColumns(可收缩的列)

android:shrinkColumns="2"
<TableLayout
        android:id="@+id/TableLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="2" >

        <TableRow>

            <ImageView
                android:layout_width="115dp"
                android:layout_height="115dp"
                android:background="@android:color/holo_red_dark"
                />

            <ImageView
                android:layout_width="115dp"
                android:layout_height="115dp"
                android:background="@android:color/holo_blue_bright"
                />

            <ImageView
                android:layout_width="115dp"
                android:background="@android:color/holo_green_light"
                android:layout_height="115dp"
                />

            <ImageView
                android:layout_width="115dp"
                android:layout_height="115dp"
                android:background="@android:color/holo_orange_dark"
                />
        </TableRow>
    </TableLayout>

在这里插入图片描述
可以看到在所有imageview设置的宽度相同的时候,当一行中容器装不下的时候,设置了shrinkColumns属性的列就会被压缩。

常用的基本布局就是这些了,有不对的地方欢迎大家指出。

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

清风伴佳人

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

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

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

打赏作者

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

抵扣说明:

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

余额充值