Android Summary

Android 布局知识点总结

Posted by SnowCrane on 2019-10-15

Android 布局

六大布局：

1、线性布局（LinearLayout）：按照垂直或者水平方向布局的组件

2、帧布局（FrameLayout）：组件从屏幕左上方布局组件

3、表格布局（TableLayout）：按照行列方式布局组件

4、绝对布局（AbsoluteLayout）：按照绝对坐标来布局组件

5、相对布局（RelativeLayout）：相对其它组件的布局方式

6、约束布局 （ConstraintLayout）：按照约束布局组件

1.线性布局

对于排列比较有规律的布局一般都用线性布局

android:gravity 用于指定父布局中的子控件在父布局中的位置
android:layout_gravity 用于指定控件在布局中的对齐方式

layout_weight 是linearlayout布局用于不同机型适配的一个技巧,比如下面这个布局：

linearlayout exp

首先是从最大的层次考虑，布局分为两大块，上层和下层。将下层的高度固定为50dp,然后上层用layout_weight 来瓜分剩下的部分。

上层：
linearlayout exp

下层：
linearlayout file

Code: 注意该类写法中0dp和layout_weight的配套使用

1
2
3
4
5
6
<!--d底部   -->
<LinearLayout
        android:layout_width="match_parent"
       ** android:layout_height="50dp"**
        android:orientation="horizontal">
</LinearLayout>
1
2
3
4
5
6
<LinearLayout  
        android:layout_width="match_parent"  
       ** android:layout_height="0dp"  **
        android:orientation="vertical"  
       ** android:layout_weight="1"**> 
</LinearLayout>

在上层布局的imageView和俩个TextView之间的关系也采用这种方式，固定imageView的大小为150dp,剩下的width用layout_weight 平分给两个TextView.

imageView的布局:

1
2
3
4
5
6
7
8
9
10
11
12

<LinearLayout
               ** android:layout_width="150dp"**
                android:layout_height="match_parent"
                android:gravity="center">

                <ImageView
                    android:id="@+id/addMemberDialogPhoto"
                    android:layout_width="98dp"
                    android:layout_height="107dp"
                    android:src="@mipmap/ic_launcher" />
            </LinearLayout>

两个TextView的布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<LinearLayout
    **android:layout_weight="1"**
    android:orientation="vertical"
   ** android:layout_width="0dp"**
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/addMemberDialogName"
        android:gravity="bottom"
        android:text="姓名：白鹤"
        android:textSize="27sp"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/addMemberDialogSex"
        android:gravity="center_vertical"
        android:layout_weight="1"
        android:textSize="27sp"
        android:text="性别：男"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

完整layout:
linearlayout file

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:layout_weight="1">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:gravity="center">

            <ImageView
                android:id="@+id/addMemberDialogPhoto"
                android:layout_width="98dp"
                android:layout_height="107dp"
                android:src="@mipmap/ic_launcher" />
        </LinearLayout>

        <LinearLayout
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent">
        <TextView
            android:id="@+id/addMemberDialogName"
            android:gravity="bottom"
            android:text="姓名：白鹤"
            android:textSize="27sp"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TextView
            android:id="@+id/addMemberDialogSex"
            android:gravity="center_vertical"
            android:layout_weight="1"
            android:textSize="27sp"
            android:text="性别：男"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="1">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:id="@+id/"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimaryDark"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textColor="#fff"
                    android:textSize="17sp"
                    android:text="查看"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimaryDark"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textColor="#fff"
                    android:textSize="17sp"
                    android:text="查看"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimaryDark"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textColor="#fff"
                    android:textSize="17sp"
                    android:text="查看"/>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="1">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimaryDark"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textColor="#fff"
                    android:textSize="17sp"
                    android:text="查看"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimaryDark"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textColor="#fff"
                    android:textSize="17sp"
                    android:text="查看"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimaryDark"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textColor="#fff"
                    android:textSize="17sp"
                    android:text="查看"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#836FFF"
        android:gravity="center"
        android:padding="5dp"
        android:textColor="#fff"
        android:textSize="17sp"
        android:text="查看"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#836FFF"
        android:padding="5dp"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="17sp"
        android:text="查看"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#836FFF"
        android:gravity="center"
        android:padding="5dp"
        android:textColor="#fff"
        android:textSize="17sp"
        android:text="删除"/>
</LinearLayout>
## 2.相对布局 相对于其他布局，定义当前布局的位置。

相对于父布局定位主要用到：
android:layout_alignParentLeft、 android:layout_alignParentTop、android:layout_alignParentRight、android:layout_alignParentButtom、android:layout_centerInParent

相对于其他控件进行定位主要用到：
android:layout_above、android:layout_below、android:layout_toLeftOf、android:layout_toRightOf 针对于其他控件(例子：@id/button3)所在的位置

当前控件和其他控件的边缘对齐(例子：@id/button3)所在的位置
android:layout_alignLeft、android:layout_alignRight、
android:layout_alignTop、android:layout_alignBottom.

3.帧布局

没有方便的定位方式，所有的控件都会默认摆放在布局的左上角。
FrameLayout Code

FrameLayout Layout
但是可以通过android：layout_gravity 来调整控件的位置。
FrameLayout Code

FrameLayout Code

layout_gravity 可以用 | 来叠加参数：
FrameLayout Code

FrameLayout Code

帧布局多用于和Fragment配合使用。

4.百分比布局

因为FrameLayout和RelativeLayout都不支持使用layout_weight的形式来实现比例划分大小，所以android引入了百分比布局—>PercentFrameLayout和PercentRelativeLayout这两个全新的布局。需要引入support库来使用这个布局。

compile 'com.android.support:percent:24.2.1'

使用的时候要注意xml文件上方是否定义了app的命名空间。
xmlns:app="http://schemas.android.com/apk/res-auto"
然后可以使用app：layout_widthPercent=“50%” 和app:layout_heightPercent=“50%” 来实现按照比例划分。

5.布局的复杂用法

1.include布局

可以在另外一个ｘｍｌ文件中使用include语句来复用其他布局文件

 <include layout="@layout/xxx"/>

###　２.自定义布局
使用完整的包名路径和类名来引入自定义的布局

<com.android.xxx.xxx.CustomView ... ></com.android.xxx.xxx.CustomView>

６.表格布局ＴａｂｌｅＬａｙｏｕｔ

７.绝对布局ＡｂｓｏｌｔｅＬａｙｏｕｔ

tips:
1.xml文件中的头部，里面有一句
xmlns:android=“http://schemas.android.com/apk/res/android” 是用于定义android的命名空间，之所以能使用android的前缀(比如android：layout_wight=1)就是因为这个道理。




FEATURED TAGS
Android Summary