android基本布局之LinearLayout

LinearLayou称为线性布局，是android中很常用的布局，在UI设计中会经常遇到它，这里根据网上查的资料以及自己的体会做一个总结。

创建一个LayoutTest的project，一路finish，修改其中activity_main.xml的代码

activity_main.xml

<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:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>

效果如下图

图1

可以看到3个Button是垂直排列的，因为android:orientation的默认属性为vertical，想实现水平排列必须改写属性为horizontal，代码和效果如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button
1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button
3" /></LinearLayout>

图2

这里的3个Button为水平排列，所以宽度不能指定为match_parent，同理，垂直排列的时候高度不能指定为match_parent。

现在来看看android:layout_gravity属性，它规定了每个控件的对齐方式，代码和效果如下所示

<pre name="code" class="html"><pre name="code" class="html"><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:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="top" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Button 2" /> <Button android:id="@+id/button3"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:text="Button 3" /></LinearLayout>

图3

</pre><pre name="code" class="html">注意这里指定了LinearLayout的排列方向为默认，即vertical垂直方向，所以3个Butoon首先是垂直紧密排列（如上图1），然后按照指定的对齐方式开始对齐，具体对齐方式下面给出一张表

<strong>图4</strong>

<strong>
</strong>

那么如果排列方向改成水平想实现上图效果代码该如何修改呢

<pre name="code" class="html"><pre name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="top" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="Button
2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:text="Button 3" /></LinearLayout>

图5

注意这里后面2个的android:layout_gravity属性做了修改，因为在水平方向上只有垂直对齐的方式才会生效，如果第3个android:layout_gravity属性依旧为right，我们可以看看效果

<strong>图6</strong>

</pre><pre name="code" class="html">

接下来看看android:layout_weight属性，当设定了android:layout_weight属性后，控件的宽度将直接由它决定，与android:layout_width已经没有关系，所以通常android:layout_width会指定为0

<pre name="code" class="html"><pre name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <EditText android:id="@+id/input_message" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_weight="1" android:hint="Please type something"/> <Button android:id="@+id/confirm" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="confirm"/> </LinearLayout>

图7

</pre><pre name="code" class="html">我们可以看到EditText和Button大小一样，这是因为android:layout_weight属性值相同，如果想设计成特定比例，比如2:1，可以把android:layout_weight属性值设定成2和1即可

<strong>图8</strong>

<strong>
</strong>

如果在Button中不设定android:layout_weight属性的话，效果是怎样的呢

<pre name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Please type something"/>
<Button
android:id="@+id/confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="confirm"/>
</LinearLayout>

图9

这里只指定了EditText的android:layout_weight属性，Button仍然按照wrap_content来设定，这样剩下的空间将被EditText全部占满。