当前位置:   article > 正文

Android布局_rescale margin

rescale margin

1、LinearLayout(线性布局)

1.1 orientation

布局中控件的排列方式。

horizontal : 水平排列
vertical : 竖直排列

1.2 weight

简单来说,就是权重,比例。

效果:

这里写图片描述

这里写图片描述

屏幕被平均分成了1:2。

这里需要注意的一点是,在设置weight的时候,看情况把width(或height)设置为0dp

有一点需要特别注意:就是当控件的尺寸设置为wrap_content时,需要特别注意content的长度。

这里写图片描述

这里第一个TextView的文本长度比第二个要多的多,虽然weight都是1,但是显示出来的效果,并不是1:1分配空间。

这里写图片描述

文本内容长度越多的,分配到的空间也就越多。

这里就涉及到了计算分配空间的公式:

T1:第一个TextView
T2:第二个TextView

T1宽度与T2宽度都是为:wrap_content的宽度

剩余空间 = (总宽度 - (T1宽度 + T2宽度))/2

T1最终宽度 = T1宽度 + 剩余空间
T2最终宽度 = T2宽度 + 剩余空间

1.3 gravity与layout_gravity

gravity : 布局的属性。假如属性为center,则该布局内的所有控件都将居中。

这里写图片描述
这里写图片描述

layout_gravity : 控件的属性。假如属性为bottom,则控件靠底部对其。

这里写图片描述

这里写图片描述

这里有一个问题,如果遇到该问题,考虑更换布局。

当 android:orientation=”vertical” 时, 只有水平方向的设置才起作用,垂直方向的设置不起作用。 即:leftrightcenter_horizontal 是生效的。
当android:orientation=”horizontal” 时, 只有垂直方向的设置才起作用,水平方向的设置不起作用。 即:topbottomcenter_vertical 是生效的。

此时我们的orientation是horizontal,当我们改变layout_gravity为right时。
这里写图片描述
这里写图片描述

紫色背景的TextView并没有像我们预期想象的那样,平行移动到最右,而是移动到最上边。

1.4 margin与padding

margin:控件属性,为控件距离布局边界的距离

margin所有属性这里写图片描述

margin属性测试:

这里写图片描述

这里写图片描述

padding:控件属性,控件中的内容距离控件边界的距离

padding所有属性:这里写图片描述

padding属性测试:

注意观察文本TextView的位置!

这里写图片描述

这里写图片描述

2、RelativeLayout(相对布局)

2.1 gravity与ignoreGravity

gravity:设置布局内组件的对其方式。

这里写图片描述

这里写图片描述

与LinearLayout的gravity不同的是,在RelativeLayout中两个控件会重合,而LinearLayout的控件会依次排列出来。

ignoreGravity:被该属性选中的组件,将不受gravity的控制。

这里写图片描述

这里写图片描述

2.2 layout_alignParent

layout_alignParent:根据父容器来定位。

layout_alignParent所有属性:这里写图片描述

layout_alignParent属性测试:

这里写图片描述

这里写图片描述

2.3 layout_align

layout_align:根据兄弟组件定位

layout_align所有属性:这里写图片描述

layout_align属性测试:

<?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:orientation="horizontal"
    >

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#3ac656"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#2358d4"
        android:layout_toLeftOf="@id/text1"
        android:layout_centerInParent="true"
    />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#de3210"
        android:layout_toRightOf="@id/text1"
        android:layout_centerVertical="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#c60d4a"
        android:layout_below="@id/text1"
        android:layout_centerHorizontal="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#fd3bf4c9"
        android:layout_above="@id/text1"
        android:layout_centerHorizontal="true"
        />

</RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

这里写图片描述

这里在做一个align_leftalign_toLeftOf 的区别。

align_left:将该控件的左边缘与给定ID控件的左边缘对齐(该控件默认位于父布局的上边)。

<?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:orientation="horizontal"
    >

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#3ac656"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#2358d4"
        android:layout_alignLeft="@id/text1"
    />


</RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

这里写图片描述

align_toLeftOf :将该控件的右边缘和给定ID的控件的左边缘对齐(默认是位于父布局的顶部)。

<?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:orientation="horizontal"
    >

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#3ac656"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:textSize="15dp"
        android:background="#2358d4"
        android:layout_toLeftOf="@id/text1"
    />


</RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

这里写图片描述

3、 GridLayout(网格布局)

3.1 rowCount与columnCount

rowCount : 设置行数
columnCount :设置列数

如果只设置这个属性,实践发现并没有什么用。如果想要组件平均分配空间的话,还需要加上layout_rowWeightlayout_columnWeight属性。

有一点值得注意的地方是,如果想变大一整行的比例,则只需要改变该行第一个组件中的rowWeight即可,但是如果想变小一整行的比例饿,则需要改变该行所有组件中的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="match_parent"
    android:rowCount="2"
    android:columnCount="3"
    >

    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="Button"
        />


</GridLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

这里写图片描述

3.2 layout_row与layout_column

layout_row : 设置行(从0开始计算,意思为0为第1行)

layout_column : 设置列(同理)

3.3 layout_rowSpan与layout_columnSpan

layout_rowSpan :横跨几行
layout_columnSpan:横跨几列

需要注意的是,如果想要组件占满横跨的行列,需要加上属性layout_gravity:”fill”。不过有时候又不需要设置emmm,不清楚。

<?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:rowCount="2"
    android:columnCount="3"
    >

    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        />
    <Button
        android:text="Button"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        />
    <Button
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:text="Button"
        />


</GridLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

这里写图片描述

4、 ConstraintLayout(约束布局)

关于 ConstraintLayout 的基本使用方法请参照郭神的博客:
http://blog.csdn.net/guolin_blog/article/details/53122387
(我懒,捂脸捂脸。)

还有两个布局,TableLayout(表格布局)FrameLayout(帧布局),不过用的很少,这里就不介绍了。(原谅我懒,捂脸捂脸)

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/270423
推荐阅读
相关标签
  

闽ICP备14008679号