《第一行代码》第二版 学习总结5 四大布局简介

       最近利用下班时间，找了看什么书比较适合初学android的朋友，很多人推荐了这本书，于是就买了一本，感觉看书，思考，动手，再思考和总结这样过程还是很有必要的，于是就打算把自己学习的东西简单的总结一下；方便自己以后查找，也有利于学习的巩固。在这里首先要感谢一下书籍的作者——郭霖前辈。

       布局对于每一个应用来说都是不可或缺并且是至关重要的；本来应该早一点介绍一下；但是我把View的相关子类都放在了靠后的位置，其实和View相关的我们都会使用，但是会使用的深度都很浅显，比如一个TextView,你可以看看他的属性究竟有多少；但是让我们展现一个普通的大小颜色可调的文本却是很简单的事情。所以，这一块的内容可深可浅；如果你强在做业务；对这些布局控件不感兴趣；那么你还是应该好好研究一下业务逻辑；因为所有的控件和布局也只是类的继承关系而已；关于View的继承图就不放了。

1，四大布局

说到四大布局，我们的首先知道是哪四大布局，它们分别是：

• （1）线性布局
• （2）相对布局
• （3）帧布局
• （4）百分比布局（百分比相对布局，百分比帧布局）

      概念不多说，线性布局和相对布局顾名思义就可以了；帧布局默认都放在左上方；百分比布局为（2）（3）布局以及其中控件新增了百分比的属性（宽和高）

2，示例代码

本示例意在通过四种布局实现同一个显示效果的布局样图；具体代码如下：

MainActivity.java代码:

package com.hfut.operationonlayout;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    Intent intent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void openLinear(View view) {
        intent = new Intent(this, LinearLayoutActivity.class);
        startActivity(intent);
    }

    public void openRelative(View view) {
        intent = new Intent(this, RelativeLayoutActivity.class);
        startActivity(intent);
    }

    public void openFrame(View view) {
        intent = new Intent(this, FrameLayoutActivity.class);
        startActivity(intent);
    }

    public void openPercent(View view) {
        intent = new Intent(this, PercentLayoutActivity.class);
        startActivity(intent);
    }

}

LinearLayoutActivity.java代码：

package com.hfut.operationonlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class LinearLayoutActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
    }
}

RelativeLayoutActivity.java代码：

package com.hfut.operationonlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class RelativeLayoutActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_relative_layout);
    }
}

FrameLayoutActivity.java代码：

package com.hfut.operationonlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class FrameLayoutActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame_layout);
    }
}

PercentLayoutActivity.java代码：

package com.hfut.operationonlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class PercentLayoutActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_percent_layout);
    }
}

activity_main.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.hfut.operationonlayout.MainActivity">

    <Button
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="openLinear"
        android:text="打开线性布局" />

    <Button
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="openRelative"
        android:text="打开相对布局" />

    <Button
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="openFrame"
        android:text="打开帧布局" />

    <Button
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="openPercent"
        android:text="打开百分比布局" />

</LinearLayout>

activity_linear_layout.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.hfut.operationonlayout.LinearLayoutActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center_horizontal"
        android:text="下面是垂直的线性布局"
        android:textSize="20dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"
            android:textAllCaps="false" />

        <Button
            android:layout_gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"
            android:textAllCaps="false" />

        <Button
            android:layout_gravity="end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"
            android:textAllCaps="false" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_horizontal"
        android:text="下面是水平的线性布局"
        android:textSize="20dp" />

    <LinearLayout
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button4"
            android:textAllCaps="false" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button5"
            android:textAllCaps="false" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button6"
            android:textAllCaps="false" />

    </LinearLayout>

</LinearLayout>

activity_relative_layout.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hfut.operationonlayout.RelativeLayoutActivity">

    <TextView
        android:id="@+id/text"
        android:layout_marginTop="30dp"
        android:textSize="20dp"
        android:gravity="center_horizontal"
        android:text="下面是相对布局展示"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:id="@+id/rl_1"
       android:layout_below="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/but_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_2"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/but_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_3"
            android:layout_below="@id/but_2"
            android:layout_alignParentRight="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"
            android:textAllCaps="false" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_2"
        android:layout_below="@id/rl_1"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/but_4"
            android:layout_toLeftOf="@id/but_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button4"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_5"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button5"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_6"
           android:layout_toRightOf="@id/but_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button6"
            android:textAllCaps="false" />

    </RelativeLayout>

</RelativeLayout>

activity_frame_layout.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hfut.operationonlayout.FrameLayoutActivity">

<TextView
    android:id="@+id/text"
    android:layout_marginTop="30dp"
    android:textSize="20dp"
    android:text="下面是帧布局展示"
    android:gravity="center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

    <FrameLayout
        android:layout_marginTop="50dp"
        android:id="@+id/fl_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_marginTop="10dp"
            android:id="@+id/but_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_2"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="70dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_3"
            android:layout_gravity="end"
            android:layout_marginTop="130dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"
            android:textAllCaps="false" />

    </FrameLayout>

    <FrameLayout
        android:layout_marginTop="250dp"
        android:id="@+id/fl_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_marginTop="10dp"
            android:id="@+id/but_4"
            android:layout_marginLeft="60dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button4"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_5"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button5"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/but_6"
            android:layout_marginRight="60dp"
           android:layout_gravity="end"
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button6"
            android:textAllCaps="false" />

    </FrameLayout>

</FrameLayout>

activity_percent_layout.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.hfut.operationonlayout.PercentLayoutActivity">

    <TextView
        android:layout_marginTop="30dp"
        android:id="@+id/text1"
        android:textSize="20dp"
        android:gravity="center_horizontal"
        android:text="下面是PercentRelativeLayout展示"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!--为了使用PercentRelativeLayout展示-->
    <android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/prl_1"
            android:layout_width="match_parent"
            app:layout_heightPercent="75%">

            <Button
                android:layout_marginTop="10dp"
                android:id="@+id/but_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button1"
                android:textAllCaps="false" />

            <Button
                android:id="@+id/but_2"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/but_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button2"
                android:textAllCaps="false" />

            <Button
                android:id="@+id/but_3"
               android:layout_alignParentEnd="true"
               android:layout_below="@id/but_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button3"
                android:textAllCaps="false" />


        </android.support.percent.PercentRelativeLayout>
        <android.support.percent.PercentRelativeLayout
            android:id="@+id/prl_2"
            android:layout_below="@id/prl_1"
            android:layout_width="match_parent"
            app:layout_heightPercent="25%">

            <Button
                android:id="@+id/but_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button1"
                android:textAllCaps="false" />

            <Button
                android:id="@+id/but_5"
                android:textSize="5dp"
                android:layout_centerInParent="true"
                app:layout_widthPercent="10%"
                app:layout_heightPercent="50%"
                android:text="Button2"
                android:textAllCaps="false" />

            <Button
                android:id="@+id/but_6"
                android:layout_alignParentEnd="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button3"
                android:textAllCaps="false" />

        </android.support.percent.PercentRelativeLayout>


    </android.support.percent.PercentRelativeLayout>


    <!--为了使用PercentFrameLayout展示-->

    <TextView
        android:layout_marginTop="10dp"
        android:id="@+id/text2"
        android:textSize="20dp"
        android:gravity="center_horizontal"
        android:text="下面是PercentRelativeLayout展示"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <android.support.percent.PercentFrameLayout
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <android.support.percent.PercentFrameLayout
            android:layout_width="match_parent"
            app:layout_heightPercent="75%">

        </android.support.percent.PercentFrameLayout>

        <android.support.percent.PercentFrameLayout
            android:layout_gravity="end"
            android:layout_width="match_parent"
            app:layout_heightPercent="75%">

        </android.support.percent.PercentFrameLayout>

    </android.support.percent.PercentFrameLayout>

</LinearLayout>

3，运行结果

第一步：运行程序                 

第二步：点击“打开线性布局”按钮         

第三步：返回，点击“打开相对布局”按钮  

第四步：返回，点击“打开帧布局”按钮

第五步：返回，点击“打开百分比布局”按钮

 

最后的百分比布局我只实现了PercentRelativeLayout布局，还有另一个PercentFrameLayout布局我没有实现；学习的同学可以举一反三学习一下；还有就是边距的细节我没有处理，更多的只是处理的按钮的相对位置。

总结：几大布局平时用的较多就是线性布局和相对布局以及两者的结合使用。其他的也不难理解，看一下，多尝试一下就明白了。

注：欢迎扫码关注