Android界面3种基本布局(LinearLayout、RelativeLayout、FrameLayout)

控件与布局的关系

一个丰富的界面是由很多个控件组成的，那么我们如何才能让各个控件都有条不紊地摆放在界面上，而不是乱糟糟的呢？
这就需要借助布局来实现了。布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出精美的界面。
当然，布局的内部除了放置控件外，也可以放置布局，通过多层布局的嵌套，我们就能够完成一些比较复杂的界面实现。

LinearLayout

LinearLayout又称作线性布局，这个布局会将它所包含的控件在线性方向上依次排列。

<?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="horizontal"
    tools:context=".MainActivity">

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button1"
        android:text="Relative Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button2"
        android:text="Frame Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

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

</LinearLayout> 

• LinearLayout垂直排列的效果。

<?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=".MainActivity">

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button1"
        android:text="Relative Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button2"
        android:text="Frame Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button3"
        android:text="Button 3"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout> 

• LinearLayout使用ayout_gravity属性对齐的效果。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button 3" />

</LinearLayout> 

RelativeLayout

RelativeLayout又称作相对布局，它可以通过相对定位的方式让控件出现在布局的任何位置。

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

    <Button  …
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button 1" />

    <Button  …
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button 2" />

    <Button …
        android:layout_centerInParent="true"
        android:text="Button 3" />

    <Button  …
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button 4" />

    <Button  …
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Button 5" />

</RelativeLayout> 

• 除了相对于父布局定位之外，RelativeLayout还允许相对于控件进行定位。

<?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=".RelativeActivity">

    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:layout_marginLeft="15dp"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/button2"
        android:layout_marginTop="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:text="Button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="Button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</RelativeLayout> 

FrameLayout

• FrameLayout又称作帧布局，这种布局没有丰富的定位方式，所有的控件都会默认摆放在布局的左上角。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        />

</FrameLayout> 

• 除了默认效果之外，还可以使用layout_gravity属性来指定控件在布局中的对齐方式，这和LinearLayout中的用法是相似的。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="This is TextView"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Button"
        />

</FrameLayout> 

<?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=".FrameActivity">

    <View
        android:background="@color/colorWhite"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="20dp"
        android:elevation="5dp"
        android:layout_width="match_parent"
        android:layout_height="400dp"/>

    <ImageView
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:elevation="6dp"
        android:src="@drawable/test"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

</FrameLayout> 

本文地址：https://blog.csdn.net/u010186280/article/details/109027148