Android UI设计的三种常见布局（LinearLayout、RelativeLayout、FrameLayout）

目录

LinearLayout

RelativeLayout

FrameLayout

LinearLayout（线性布局）

LinearLayout又称作线性布局，是一种非常常用的布局。

属性：

android:orientation该属性指定了排列方向，可以是vertical（垂直排列），也可以是horizontal（水平排列）。

match_parent:表示与父元素宽度（或长度）相同

wrap_content:自适应

fill_parent:是Android2.3版本以前的，作用与match_parent相同。

Layout_gravity:指定控件在布局中的对齐方式，使用时注意：当排列方式为vertical时只有水平方向上的排列方式才会生效即左、右、水平居中；

当排列方式为horizontal时只有垂直方向上的排列方式才会生效即上、下、垂直居中。

layout_weight：权重，按比例分配屏幕剩余宽度或高度。

[code]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <Button 
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        />
   <Button 
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        />
      <Button 
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        />
         <Button 
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        />
</LinearLayout>

嵌套：

[code]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
<LinearLayout    
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp"    
    >  
    <Button
    android:layout_width="match_parent"
    android:layout_height="match_parent"        
        />   
</LinearLayout>
<LinearLayout 
     android:layout_width="match_parent"
     android:layout_weight="2"
    android:layout_height="0dp" 
    android:orientation="horizontal">
    <LinearLayout 
     android:layout_width="0dp"
     android:layout_weight="1"
    android:layout_height="match_parent"
     android:orientation="vertical"  
        >
         <Button
       android:layout_width="match_parent"
     android:layout_weight="2"
    android:layout_height="0dp" 

        /> 
           <Button
       android:layout_width="match_parent"
     android:layout_weight="2"
    android:layout_height="0dp" 

        /> 
    </LinearLayout>
    <LinearLayout 
      android:layout_width="0dp"
     android:layout_weight="2"
    android:layout_height="match_parent"
        >
        <Button
       android:layout_width="match_parent"

    android:layout_height="match_parent" 

        /> 
    </LinearLayout>

    </LinearLayout>

</LinearLayout>

[code]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
   <LinearLayout
       android:layout_weight="1"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:orientation="horizontal">
       <TextView
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="match_parent"
           android:background="#00ffff"
           />
       <TextView
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="match_parent"
           android:background="#ff0000"
           />
       <TextView
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="match_parent"
           android:background="#ffff00"

           />
       <TextView
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="match_parent"
           android:background="#ccffcc"
           />

   </LinearLayout>
   <LinearLayout

       android:layout_width="match_parent"
       android:layout_weight="1"
       android:layout_height="0dp"
       android:orientation="vertical"
       >
       <TextView
           android:layout_width="match_parent"
           android:layout_weight="1"
           android:layout_height="0dp"
           android:background="#00ff00"
           />
       <TextView
           android:layout_width="match_parent"
           android:layout_weight="1"
           android:layout_height="0dp"
           android:background="#0fffff"
           />
       <TextView
           android:layout_width="match_parent"
           android:layout_weight="1"
           android:layout_height="0dp"
           android:background="#000fff"/>
       <TextView
           android:layout_width="match_parent"
           android:layout_weight="1"
           android:layout_height="0dp"
           android:background="#ff0fff"/>

   </LinearLayout>
</LinearLayout>

RelativeLayout（相对布局）

RelativeLayout：相对布局，默认位置左上角，组件可以重叠。

布局：

1、可以相对于父元素上下左右对齐，可以相对于父元素水平居中、 垂直居中、水平垂直同时居中。

2、可以相对于其他组件上下左右对齐

3、可以布局于其他组件的上方、下方、左边、右边

属性：

alignParentLeft Rignt bottom top相对父空间的上下左右

centerinparent centervertical centerhorizontal相对父空间的中心

toleftof torightof above below 相对后边跟的那个控件上下左右对齐

alignleft(@id/) aligntop alignbottom 相对于组件

alignbaseline:基准线对齐

[code]<?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">
<Button
    android:id="@+id/bt"
    android:layout_width="160dp"
    android:layout_height="160dp"
    android:layout_centerInParent="true"
    android:background="#ff0000"
    android:text="居中"
    android:textSize="30sp"
    />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:background="#00ff00"
        android:text="父左"
        android:textSize="15sp"
        />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#00ff00"
        android:text="父右"
        android:textSize="15sp"
        />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:background="#00ff00"
        android:text="父下左"
        android:textSize="15sp"
        />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="#00ff00"
        android:text="父下右"
        android:textSize="15sp"
        />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#00ff00"
        android:text="组件左"
        android:textSize="15sp"
        android:layout_above="@id/bt"
        android:layout_toLeftOf="@id/bt"
       />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#00ff00"
        android:text="组件左"
        android:textSize="15sp"
        android:layout_below="@id/bt"
        android:layout_toRightOf="@id/bt"
        />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#00ff00"
        android:text="组件正左下"
        android:textSize="15sp"
        android:layout_below="@id/bt"
        android:layout_alignLeft="@id/bt"
        />

    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#00ff00"
        android:text="组件正左"
        android:textSize="15sp"
        android:layout_alignTop="@id/bt"
        />
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#00ff00"
        android:text="组件正右上"
        android:textSize="15sp"
        android:layout_above="@id/bt"
        android:layout_alignRight="@id/bt"
        />
</RelativeLayout>

FrameLayout（帧布局）

组件的默认位置都是左上角，组件之间可以重叠。

可以设置上下左右的对齐、水平垂直居中、设置方式与线性布局相同。

[code]<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    android:layout_gravity="center"
    />
    <TextView
        android:layout_width="300dp"
        android:layout_height="360dp"
        android:background="#00ff00"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:background="#00ffff"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:background="#ffff00"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#d000ff"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#ffffff"
        android:layout_gravity="center"
        />
</FrameLayout>