Android
主页 > 软件编程 > Android >

Android studio六大基本布局介绍

2023-04-05 | 佚名 | 点击:

Android中常用的布局方式有以下几种:

 用的相对较多的是线性布局和相对布局。接下来重点演示这两种布局
其中,表格布局是线性布局的子类。网格布局是android 4.0后新增的布局。

(一)线性布局LinearLayout

线性布局中最重要的属性:orientation
horizontal(水平布局)和vertical(垂直布局)两种方式

属性名

效果图

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

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:background="@color/gray"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <LinearLayout

        android:layout_marginTop="20dp"

        android:layout_width="match_parent"

        android:orientation="horizontal"

        android:layout_height="wrap_content">

        <TextView

            android:text="权重1"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"/>

        <TextView

            android:text="权重2"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"/>

        <TextView

            android:text="权重3"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"/>

        <TextView

            android:text="权重4"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"/>

        <TextView

            android:text="权重5"

            android:layout_width="0dp"

            android:layout_weight="1"

            android:layout_height="wrap_content"/>

    </LinearLayout>

 

    <LinearLayout

        android:layout_marginTop="20dp"

        android:background="@color/teal_200"

        android:layout_width="match_parent"

        android:gravity="center"

        android:layout_height="wrap_content">

        <TextView

            android:text="第一个布局"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            />

    </LinearLayout>

    <LinearLayout

        android:background="@color/purple"

        android:layout_width="match_parent"

        android:gravity="center"

        android:layout_height="wrap_content">

        <TextView

            android:text="第二个布局"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            />

    </LinearLayout>

    <LinearLayout

        android:background="@color/teal"

        android:layout_width="match_parent"

        android:gravity="center"

        android:layout_height="wrap_content">

        <TextView

            android:text="第三个布局"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            />

    </LinearLayout>

</LinearLayout>

(二)相对布局RelativeLayout

属性:

相对于给定ID控件

相对于父组件

居中

指定移动像素

效果图

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

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:background="@color/gray"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

    <TextView

        android:gravity="center"

        android:background="@color/teal"

        android:text="text1"

        android:layout_width="50dp"

        android:layout_height="50dp"

        />

    <TextView

        android:id="@+id/tv_two"

        android:layout_alignParentBottom="true"

        android:gravity="center"

        android:background="@color/teal"

        android:text="text2"

        android:layout_width="50dp"

        android:layout_height="50dp"

        />

    <TextView

        android:layout_alignParentRight="true"

        android:gravity="center"

        android:background="@color/teal"

        android:text="text3"

        android:layout_width="50dp"

        android:layout_height="50dp"

        />

    <TextView

        android:layout_centerInParent="true"

        android:gravity="center"

        android:background="@color/teal"

        android:text="text5"

        android:layout_width="50dp"

        android:layout_height="50dp"

        />

    <TextView

        android:layout_above="@+id/tv_two"

        android:layout_alignParentRight="true"

        android:gravity="center"

        android:background="@color/teal"

        android:text="text4"

        android:layout_width="50dp"

        android:layout_height="50dp"

        />

</RelativeLayout>

(三)表格布局TableLayout

属性

三个常用属性

(四)帧布局FrameLayout

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

效果图

xml布局:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:background="@color/gray"

    android:layout_height="match_parent">

    <TextView

        android:background="#000000"

        android:layout_width="fill_parent"

        android:layout_height="180dp"/>

    <TextView

        android:background="#ffff00"

        android:layout_width="fill_parent"

        android:layout_height="130dp"/>

    <TextView

        android:background="#ff00ff"

        android:layout_width="fill_parent"

        android:layout_height="100dp"/>

    <TextView

        android:background="#00ffff"

        android:layout_width="fill_parent"

        android:layout_height="50dp"/>

</FrameLayout>

(五)绝对布局AbsoluteLayout

属性:

常用属性:

效果图

.xml布局

(六)网格布局GridLayout

和之前的TableLayout(表格布局) 有点类似,不过网格布局的好处是:

效果图

.xml布局:

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

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/GridLayout1"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:columnCount="4"

    android:orientation="horizontal"

    android:rowCount="6" >

    <TextView

        android:layout_columnSpan="4"

        android:layout_gravity="fill"

        android:layout_marginLeft="5dp"

        android:layout_marginRight="5dp"

        android:background="#15CBE3"

        android:text="0"

        android:textSize="50sp" />

 

    <Button

        android:layout_columnSpan="2"

        android:layout_gravity="fill"

        android:text="回退" />

 

    <Button

        android:layout_columnSpan="2"

        android:layout_gravity="fill"

        android:text="清空" />

 

    <Button android:text="1" />

 

    <Button android:text="2" />

 

    <Button android:text="3" />

    <Button android:text="+" />

 

 

    <Button android:text="4" />

 

    <Button android:text="5" />

 

    <Button android:text="6" />

    <Button android:text="-" />

 

 

    <Button android:text="7" />

 

    <Button android:text="8" />

 

    <Button android:text="9" />

    <Button android:text="*" />

 

 

    <Button android:text="0" />

    <Button android:text="." />

 

    <Button android:text="=" />

    <Button android:text="/" />

</GridLayout>

<GridLayout android:layout_width=“fill_parent”:网格布局宽度为填满屏幕

<GridLayout android:layout_height=“wrap_content”:网格布局高度为包裹内容

<GridLayout android:columnCount=“4”:网格布局设置 4 列

<GridLayout android:rowCount=“6”:网格布局设置 6 行

<GridLayout android:layout_columnSpan=“2”:清空和回退横跨两列

<GridLayout android:orientation=“horizontal”:网格布局设置为水平布局

原文链接:
相关文章
最新更新