控件所占的空间和其 内容 所占空间的区别

• Android线性布局（即Linearlayout）是最简单的布局，初学Android时，想在线性布局中将控件放到想要的位置会遇到一些小麻烦，本文希望能解决自己遇到过的这些小麻烦。

关于控件的基本认识

• 我们平时经常接触的Linearlayout，TextView等所有放在layout文件夹下面的文件，以及文件中的控件，都有两个基本属性，一个是控件本身所占的空间，另一个是其给我们呈现的内容所在位置。我们不能把空间放到合适的位置，有时候就是因为没有很好区分这两个属性。我们平时以视图容器来讨论控件，这些控件就如一个大箱子，我们想要展现的图片或者文字则是装在箱子里的东西，问题在于我们可以用一个很大很大的箱子，仅仅是装一个篮球在里面，这似乎是问题的所在。

• 在布局文件中书写的控件，总有两个属性

image

• 上图是一个简单的Android布局，一个简单的线性布局中放了一个TextView，注意红框中的属性，那就是控件本身（容器）的宽高

• 第一个属性是控件的宽度android:layout_width，第二个是高度android:layout_height。等号后面是属性的取值，一般有三种取值

1. match_parent 填充自己父一层布局空间，简单理解就是外一层容器你给我多大，我就能多大

2. wrap_content 我的大小是根据我所装的东西的大小来的，简单理解就是呈现的内容多大，我就有多大

3. 固定值比如 48dp

• 上图外一层控件是Linearlayout，在其内放了一个TextView。根据上面讲解，图中代码内容既是，让Linearlayout 宽 高都充满父布局空间，又因为它本身就是最外层布局，那么其实就是充满整个手机屏幕，这就是Linearlayout所占的空间。那么它呈现的内容呢？其实在上图代码中，TextView这个控件算是Linearlayout的内容，就是他装的东西。对于TextView而言，其本身所占的空间宽度是充满父布局，也即是Linearlayout的宽度（和手机屏幕一样宽）,高度是“包裹”其内容，TextView的内容就是平时我们所见的文字，也即是 android:text="第一个TextView"

• 该属性，也就是对我们可见的“第一个TextView”是TextView的内容。你会发现，对于一个布局中的控件而言，它 在属于某一个控件（一般是常见的各种布局）的“内容”同时，它也会有自己“内容”，如上面我们讨论的TextView。

• 上面代码的表现效果为

image

• 为了让大家更好地认识控件本身所占空间，以及其内容（也就是我们所见到的文字或图片等）所在位置这两者区别，我们给以上两个控件增加一个属性，让他们现出原形。将最初代码更改为：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#ff0000">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第一个TextView"
        android:background="#0000ff"
        android:textColor="#ffffff"
       />
</LinearLayout>

• 对比之前代码，可以发现我们给Linearlayout和TextView分别添加了属性 android:background ,该属性可以让平时有个默认背景色的控件现出其所占空间（因为默认情况下所有控件都是一个颜色（并非是完全白色）），所以平时是很难看到控件实际占据的空间（即控件的大小）。我们给Linearlayout添加红色背景，给TextView添加蓝色背景，效果如图：

那个 控件 和 空间 傻傻分不清，嗯，这是搜狗输入法的锅，大家读的时候注意下，我发现很多地方都是错乱的……

image

• 如图，给两个控件添加背景色之后，我们可以清晰看到控件所占的空间，如前所述，前者充满屏幕，后者宽度充满屏幕（其实是父布局，即Linearlayout的宽度），高度是刚好“包裹”内容（即我们所见的文字，为分明，我将文字设为白色了（控件所占区域总是矩形））。

• 为更好说明“wrap_content”这一属性，我们将文字增加

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#ff0000">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView第一个TextView"
        android:background="#0000ff"
        android:textColor="#ffffff"
       />
</LinearLayout>

看看效果：

image

• 通过上面讲述，我想我们对控件所占的空间、其包含的内容的位置（空间）有了一定认识，结合图我们再来说明一下。Linearlayout所占的空间（即控件的大小）是宽 和 高都充满屏幕，即图中所有红色（其实包括了蓝色，只是蓝色把红色覆盖了，准确说蓝色控件是放在红色控件里面的控件），TextView所占的空间是蓝色部分。

• Linearlayout的“内容”是蓝色的Textview，而TextView也有自己的“内容”（白色文字区域）。控件有其本身所占空间，和其内容所占空间的区别，内容所占的空间是控件本身所占空间的子集（“内容”最多和控件本身一样大，更多可能是比控件本身小），如图中红色+蓝色是Linearlayout所占空间，而Linearlayout的内容只是蓝色部分；同样，textView所占空间是蓝色部分，而其内容是白色文字部分（看图三比较分明）。

• 有了以上认识，那么我们想要把内容呈现到我们想要的区域，比如我们把“第一个TextView”显示到屏幕右下角，根据之前我们的认知，必须

1. 用于显示“第一个TextView”的控件，即TextView必须占据右下角（也即是蓝色必须先到达右下角）
2. TextView想要占据右下角，控件TextView的外一层控件，即Linearlayout必须占据右下角（（这是因为TextView是“装在”Linearlayout里面的）也即是红色必须先到达右下角）
   结合图形我们易知，第二个条件已经达成，那么在此条件下，怎么利用属性 layout_gravity和属性 gravity达到我们目标呢，Android中将控件放到线性布局的任意位置（二)我们就就讲这两个属性。