Android中将控件放到线性布局的任意位置（四）

1、 先来分析尝试下下

在Android中将控件放到线性布局的任意位置（三）中，我们学习了解了线性布局中常用属性layout_gravity和 orientation之间相“冲突”的地方，以及其为何会有这个“冲突”揣测。在其末尾，我们提出一个需求，详见上文。

1. 先用layout_gravity练练手

• 从前面几篇文章中，我们得出结论，当父布局中属性：android:orientation="vertical",子控件的属性：layout_gravity在竖直方向上是会失去作用的。
• 那么在这样的前提下，我们想让layout_gravity起作用，先把父布局android:orientation="vertical"更改为横向，再在子控件TextView中利用layout_gravity调整TextView的位置,一起看下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_gravity="bottom"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

看效果：

1.png

• 如果这个结果对你并不意外，那么说明上一篇文章里已经吃透了。我们似乎达到了目标，但是很显然，这样的情况是，尽管两个TextView一上一下，但是确实分列左右，而我们想要的不过是单纯的一个在顶部，一个在底部而已。而且一个显而易见的问题是，如果我们两个TextView都把宽度设置为match_parent，显然就会有问题了。

2. 那么用gravity属性来控制。

• 由于两个TextView的宽高都是wrap_content，也即是和内容(就是显示的字符串啦)一样大小，那么在TextView中是没有用gravity的必要的（该属性是控制自己空间内部“内容”的排布位置，如果控件大小（此次相当于父布局）和内容一样大，那么该属性就没有作用）。
• 这样看来，我们只能在外层的线性布局使用该属性，看代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_gravity="bottom"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

我们将orientation改为竖直方向，并在线性布局中设置android:gravity="bottom"
看效果：

2.png
这个结果你也应该预料到的，否则请细看前面三篇文章。（在zhiqian设置android:gravity="bottom"之前，两者从上到下，排在屏幕顶部的），现在效果是从上到下，排在底部。

• 那么我们发现，似乎想要第一个TextView排在屏幕顶部，第二个TextView排在屏幕底部是完成不了的，我们陷入僵局了……？！
• 办法必然是有的，不然我费什么话啊。

先认识认识layout_weight

• 看见了吗,layout开头，说明是对当前控件起作用的，一如layout_width,layout_height,layout_gravity等，都是对当前布局起作用。至于“weight”是重量……那么结合起来似布局的……比重？正确，看代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

效果：

3.png
就是酱紫，属性layout_weight就是布局在父布局所提供的空间中所占的比例，上面代码将父布局提供的空间（所有红色部分）以一比一平分，我们两个TextView宽度都是只有内容宽（包裹内容），并未占满屏幕（所以蓝色、灰色只占了屏幕从上到下的、与其内容宽的部分）。

• 那么现在的情况下，两个TextView的内容一个显示在顶部，一个显示在底部就简单多了：
  第一个已经在顶部显示了，只需修改第二个TextView就可以：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：

4.png
在上一步情况下，用gravity属性修改第二个TextView中内容的位置就OK了。

• 至此，我们似乎大功告成了。
• 但是……似乎，我们太大动干戈了，你看，为了将两个文本内容分别显示在屏幕顶部、底部，我们让蓝色和灰色各占了竖直方向一半的屏幕……过分了哈，在不改变TextView的高度的情况下（layoutweight属性，会让子控件在父布局orientation指定方向上，按比例分配父布局提供的全部空间，相当于改变了该方向上的宽度或者是高度）

正确的姿势是

废话不多，上代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
    <TextView
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00ff00"
        android:text="我就只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：

5.png
看，既然在父布局是竖直方向布局的情况下，我是不能通过子控件的gravity属性指定该子控件位置，那么我就依你的规则（从上到下排），在需要分别在顶部、底部显示内容的空间之间，添加一个占位置的空间，并让这个控件占满屏幕剩余空间就可以了。layout_weight属性有这么一个巧用：

巧用layout_weight属性，填满空白空间

• 用layout_weight属性填满空白空间，是基于这样的事实：
  当父布局（线性布局等具有方向性的布局）内的子控件，如上面所示的三个TextView，只有一个控件设置layout_weight属性时，该控件将默认“挤满”父布局所有空间，其他控件则根据自身设置属性来布局。
• 所以呢，出现上面的结果，就是这样的原因：
  1、 顶部、底部的TextView按照设置的android:layout_height="wrap_content"布局，而中间的TextView给上下两个TextView留下空间后，便将所有父布局剩余的（在父布局布局方向上的）空间全部占满，这样，它前后两个控件将分别列于屏幕的顶部和底部，同样，水平方向上我们可以：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一"
        android:textColor="#ffffff"
        android:textSize="25sp" />
    <TextView
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00ff00"
        android:text="只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：

6.png

• 为什么在底部呢，这个问题留给你，代码中有答案的。
  实际运用的时候，背景色是相同的（或者都没有），就可以了，上一下去掉背景的效果。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一"
        android:textSize="25sp" />
    <TextView
        android:gravity="center"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：

7.png

代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一"
        android:textSize="25sp" />
    <TextView
        android:gravity="center"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

8.png

我做了些小小的改动，大家可以结合图片代码，体会下这几篇文章我们所学得东西。如果你在线性布局中还有什么问题，欢迎留言讨论，我会尽我所能回答问题。
over.