Android原生开发皮毛系列-妙用RelativeLayout，构建大格局

如果阅读过小白关于LinearLayout布局的应用介绍，大家应该对于构建简单的行列布局有一定的了解了，那么Android原生中其他布局又应该是什么样的呢？今天，小白和大家分享一款值得入手的布局控件RelativeLayout。RelativeLayout叫做相对布局，它可以帮助我们构建更加玄妙的布局，瞬间提升整个APP的格局和逼格。就连最新的新宠ConstraintLayout其实也是RelativeLayout的升级翻版。

那么是什么让RelativeLayout拥有这样的能量呢？其实从它的名字相对布局中我们其实也能隐约感觉到一二。大名鼎鼎的爱因斯坦相对论已经说明了一切。就是相对的力量！相对究竟在布局中具有什么样的力量呢？让我们来看一下下面两个布局的示意图：

 

 

这是两个比较简单的布局的示意。这两个布局看起来很简单，但是真的不简单。至少对布局而言有着非同一般的意义。因为相对打破了平面二维的束缚，让我们可以在第三维度上驰骋。这是多出一维的力量，无形中的降维打击。

那么是时候让我们知道RelativeLayout的降维打击能力怎么来的吧！Let’s go！

我自军中坐，运筹帷幄

相对相对，什么相对什么，可以相对天，相对地，相对时间。那么RelativeLayout中让什么相对什么呢？首先我们已经有一顶军中帐，那就是RelativeLayout本身。那么什么相对RelativeLayout就简单了，就是RelativeLayout里面包含的子控件。让我们看看子控件究竟怎么在军中帷幄的。

主帅堂上坐

首先我们需要一个主帅主持大局，挥斥方遒。所以我们通常放在布局的最中间，如下图所示：

 

从上图中我们可以看到在目标子控件中设置android:layout_centerInParent为true就可以让我们的“主帅”目标子控件放置到屏幕的最中间即RelativeLayout的最中间。当然我们的主帅不务正业，喜欢跑到上面中间去，那么就可以使用android:layout_centerHorizontal，它的作用就是告诉军中帐，这个混账主帅要到上面最中间去了如下图所示，当然前提是没有其他人拉着这个主帅的情况下即没有其他约束条件的情况下。还有更离谱的是，遇到一个很二的主帅，要装将军微服，悄悄占了靠边中间的座位，就可以使用android:layout_centerVertical, 它就滚边去了。

 

所以如上图所示，layout_centerInParent，layout_centerHorizontal，layout_centerVertical这三个是控制子控件相对RelativeLayout（这里也可以指代为parent即爸爸），layout_centerHorizontal为水平居中，layout_centerVertical为垂直居中，而layout_centerInParent = layout_centerHorizontal + layout_centerVertical。

好了，我们处理完主帅，该安排将军们上场了。正所谓……

将军坐四方

现在主帅已经落座，那么将军们就可以陆陆续续在周围坐下来围坐一圈，通常将军们会围绕主帅上下左右相对而坐，如下图所示：

 

通过android:layout_alignParentTop，android:layout_alignParentBottom ，android:layout_alignParentRight，android:layout_alignParentLeft我们就可以在RelativeLayout布置四方阵法，分别由四位将军主持，拱卫主帅。当然我们这个时候就可以通过layout_centerHorizontal或layout_centerVertical让四位将军在各方居中而坐，表示尊重。

所以我们可以知道layout_alignParentTop，layout_alignParentBottom，layout_alignParentLeft，layout_alignParentRight就是控制子控件相对RelativeLayout上下左右四方布局，头对头，脚对脚。

好像还缺点啥？噢，还有小兵！小兵呢……

小兵在堂下

对，“小兵”在堂下。这又是什么情况？！先看看现场，如下图所示：

 

将军惊讶了一下小兵怎么跑到主帅面前去了，这厮也太会拍马屁了，真是拍马都不及啊！那么小兵究竟是怎么做到的呢？看一下好像小兵啥都没有做。再看一下小兵做了和主帅一样的事，真是不想当将军的兵不是好兵啊。可是就算这样，也不能让小兵跑去主帅面前吹风拍马吧。究竟怎么回事呢？其实是军中帐另有玄机。军中帐设置了高低位置，根据地位的尊崇，让地位低下的安排在堂下，这就有了小兵在堂下的玄虚。在RelativeLayout决绝地位尊崇的因素通常是顺序，谁在后出现谁就更受尊重。当然还有其他方法可以改变这种状态。

所以RelativeLayout天然不是一个二维布局容器，它是三维的，只是它做的比较隐蔽，我们不知道而已。所以不要想着让RelativeLayout给你顺序往下走，这不太现实。如果需要交错，那么我们需要付出更多努力才行。

好了，军中一游要到此结束了。等等，主帅有令要开个会……

沙场秋点兵

好嘛，主帅刚下令，急召各位将军军中议事，急急如律令。各位将军已到军中，各自安座。主帅摊开沙盘，各位将军纷纷起身上前，来到主帅身边。

众将议事

众将议事自然是围绕主帅而言的。不然，岂不是太不把主帅放眼里了，自古都是军中无戏言。所以众将也只能乖乖来到主帅身边，悉听教诲了，如下图所示：

 

如上图所示，将军跑到主帅身边去了。这个时候将军们是围绕主帅转的。所以这里就要使用到RelativeLayout另外一套相对属性，相对其他子控件。让将军相对主帅而不是仅相对军中帐。这时候就需要使用一套必胜法宝：android:layout_above， android:layout_below，android:layout_toRightOf， android:layout_toLeftOf。这套法宝告诉将军应该在谁那边，该站在那边。当然首先将军要学主帅通过layout_centerInParent向中间靠拢，然后通过margin控制将军具体应该靠多近。当然margin是可以负距离的，意思是比正常社交距离更近一步，别想叉了。

当然将军们发现他们是热脸贴了主帅的冷屁股。为什么？拿layout_toLeftOf来说，它本意是把控件置于参照控件的左边，翻译过来就是我的右边贴你左边。总有种热脸贴冷屁股的感觉。不过好用就是了。 当然聪明的将军发现也可以不贴你的冷屁股，所有就有了另一套法宝：layout_alignTop，layout_alignBottom，layout_alignLeft，layout_alignRight，意思是头对头，脚对脚对齐。这样就不会有热脸贴了冷屁股的尴尬了。

忘了，那个小兵呢？！哦哦，还在那里呢！

举案齐眉

当然，军中自古多故事。所以难免要花前月下，举案齐眉的。但是言情小说太难写了，饶了小白吧，直接layout_alignBaseline就完事了。

纵是马革裹尸还，不留身前身后名

虽千万人吾往矣。将军百战死，壮士十年归，将士的职责是保家卫国，守疆护土。终是沙场寒光冷冽，我们最希望依然是那份国泰民安。对于RelativeLayout也是。RelativeLayout也可以默默的布局守护。小白也很喜欢使用RelativeLayout构建底部弹窗，大体效果如下：

 

苟利国家生死以,岂因祸福避趋之。就留下一点仅供参考文献

`

<ListView
    android:id="@+id/book_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_alignParentBottom="true"
    android:background="@color/colorDarkGray">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@color/colorWhite">
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="120dp"
            android:src="@mipmap/ic_book1_round"/>

        <TextView
            android:layout_width="0dp"
            android:layout_weight="6"
            android:layout_height="match_parent"
            android:text="@string/book1_name"
            android:padding="@dimen/small_spacing"
            android:gravity="center"/>
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="作者：欧阳燊"
        android:paddingTop="@dimen/small_spacing"
        android:paddingBottom="@dimen/small_spacing"
        android:paddingLeft="@dimen/default_spacing"
        android:paddingRight="@dimen/default_spacing"
        android:textColor="@color/colorWhite" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="出版社：清华大学出版社"
        android:paddingTop="@dimen/small_spacing"
        android:paddingBottom="@dimen/small_spacing"
        android:paddingLeft="@dimen/default_spacing"
        android:paddingRight="@dimen/default_spacing"
        android:textColor="@color/colorWhite" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ISBN：9787302512608"
        android:paddingTop="@dimen/small_spacing"
        android:paddingBottom="@dimen/small_spacing"
        android:paddingLeft="@dimen/default_spacing"
        android:paddingRight="@dimen/default_spacing"
        android:textColor="@color/colorWhite" />

</LinearLayout>
复制代码

`

大丈夫当不拘小节

身为大丈夫应当不拘小节，这句话送给自己，也送个大家。对于RelativeLayout的应用，这真是一句至理名言。大丈夫真当不拘小节。同样RelativeLayout也不用细末。请不要使用Relative Layout去布局行列之间细微的格局，这是像LinearLayout等其他布局容器该干的事。大丈夫当不拘小节，RelativeLayout心胸当宽广，适合指点江山，挥斥方遒。所以尽量使用RelativeLayout布置大的格局，过于细致，反而影响性能。简单提一嘴，有资料显示RelativeLayout会二次测算控件空间因此拖慢性能，不算打小报告哦。