Android常用布局（FrameLayout、LinearLayout、RelativeLayout）详解

很多开发者一听说android终端的屏幕尺寸五花八门，屏幕分辨率千奇百怪，就觉得android开发在屏幕适配方面是必定是一件头疼的事情。因为在android问世之前，广大开发者知道的ui解决方案大致分为两类：

1、在web开发中的css，一层一层的去层叠样式。
2、在ios开发中去计算每一个uiview的尺寸。

上面两种方案，无论哪种方案面对碎片化严重的android终端，那都是一场噩梦。好在android提供了另一套解决方案来应对严重的终端碎片化，这就是布局和9-patch。

这里想来说说布局，在android sdk刚刚问世的时候，android提供了absolutelayout，framelayout，linearlayout，relativelayout和tablelayout五大布局来应对终端碎片化问题。

但很快android发现absolutelayout是一个愚蠢的方案，在android 1.5系统中就不再支持此布局，剩下的四个布局中，tablelayout虽然依然被支持，但是由于fragment以及新的tablayout的出现，博主在此断言，tablelayout也命不久矣，被移除支持只是迟早的事儿。

所以，android的五大基本布局现在只剩下三个（这里说的是基本布局，在android support包里引入的新的布局不计入内），下面分别介绍一下这三个基本布局。

一、framelayout
framelayout应该是android系统中最简单的布局了，在framelayout中的元素，默认都是以framelayout控件的坐上顶点作为基准点，一层一层的重叠起来，后加进来的元素覆盖前面的元素。

下面先来一个演示，代码如下：

<framelayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
  <view
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#ff0000"/>
 
  <view
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#000000"/>
 
  <view
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_margin="100dp"
    android:background="#00ff00"/>
 
</framelayout>

运行结果如下：

在代码里，有三个view，而在运行结果上只能看到两个view，一个黑色和一个绿色。这是因为红色的view被黑色的view盖住了。

在framelayout中，通过android:layout_gravity属性去指定子元素的位置，下面调整一下上诉例子中的黑色view的位置，让红色的view显示出来，调整后的代码如下：

<view
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:layout_gravity="bottom|right"
  android:background="#000000"/>

　

可以看到上面代码里添加了android:layout_gravity属性，并且指定了两个值，一个为bottom，一个为right，表示这个view将被放到framelayout的右下角。运行结果如下图所示：

二、linearlayout
linearlayout是线性布局，它可以让它内部的元素按照指定方向依次排开。linearlayout的方向是通过android:orientation属性指定，并且可以通过android:gravity属性指定对其方式。

还是直接上段代码看看效果，代码如下：

<linearlayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:gravity="center">
 
  <view
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#ff0000"/>
 
  <view
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#000000"/>
 
  <view
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#00ff00"/>
</linearlayout>

在代码中，设置了linearlayout的方向为纵向，并且对其方式居中对齐，于是运行结果如下图所示：

除了android:orientation将设为vertical外，也可以设为horizontal。让linearlayout内部的元素横向排列，将上面例子中的android:orientation属性值改为horizontal后的运行结果，如下图所示：

三、relativelayout
relativelayout是基本布局里面最灵活，也是最复杂的布局，它内部的元素可以通过设定彼此之间的相对关系来决定布局，使用relativelayout时，推荐为其内部每个元素都设定id，下面依然通过一个列子来演示此布局的使用方法。代码如下：

<relativelayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
  <view android:id="@+id/red"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#ff0000"/>
 
  <view android:id="@+id/black"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_torightof="@id/red"
    android:layout_below="@id/red"
    android:background="#000000"/>
 
  <view android:id="@+id/green"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@id/black"
    android:layout_alignparentright="true"
    android:background="#00ff00"/>
 
  <view android:id="@+id/gray"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_centerinparent="true"
    android:background="#888888"/>
 
  <view android:id="@+id/orange"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_torightof="@id/green"
    android:layout_below="@id/gray"
    android:background="#ff8800"/>
</relativelayout>

先分析代码，可以看到每一个view都被设置了一个id值，分别为red，black，green，gray和orange。然后通过代码，可以看出black位于red的右边和下面，green位于black的下面并且右对齐其父元素（即relativelayout），gray居中对齐父元素（即relativelayout）， orange位于green的右边同时位于gray的下面，运行结果如图所示：

在此在归纳一下relativelayout中，与布局相关的属性：

android:layout_below：位于指定元素的下方
android:layout_above：位于指定元素的上方
android:layout_toleftof：位于指定元素的左侧
android:layout_torightof：位于指定元素的右侧
android:layout_centervertical：垂直居中对齐父元素
android:layout_centerhorizontal：水平居中对齐父元素
android:layout_centerinparent：居中对齐父元素
android:layout_alignparentright：与父元素右对齐
android:layout_alignparentleft：与父元素左对齐
android:layout_alignparenttop：与父元素上对齐
android:layout_alignparentbottom：与父元素下对齐
android:layout_alignright：与指定元素右对齐
android:layout_alignleft：与指定元素左对齐
android:layout_aligntop：与指定元素上对齐
android:layout_alignbottom：与指定元素下对齐
从android 4.2开始，也就是从api level 17开始，android增强了relativelayout，使其能够更好的应对并本地化这一需求，比如在有的国家，文字是从右往左阅读，这也就是所说的rtl。为了应对rtl，relativelayout又增加了以下属性：

android:layout_alignstart：与指定元素的开始位置对齐
android:layout_tostartof：位于指定元素的开始侧
android:layout_alignparentstart：与父元素与开始侧对齐
android:layout_alignend：与指定元素的结束始位置对齐
android:layout_toendof：位于指定元素的结束侧
android:layout_alignparentend：与指定元素的结束位置对齐
这里的开始和结束我们可以做如下理解：

开始：在从左到右阅读习惯的国家，开始侧等于左侧，tostartof的显示效果就等于toleftof。但是在从右往左阅读习惯的国家，那么开始侧就变成了右侧，tostartof的显示效果就等于了torightof。
结束：同上面对开始的理解一样，结束侧在从左到右阅读习惯的国家就是右侧，反之则在左侧。

原文链接：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。