android學習六（android中四種基本布局）

標籤：android   布局   android布局   android的布局   adnroid四大布局   

     前面學習了android中的基本組件的使用，這一篇，我將總結下android中布局的使用，詳細的看下面。

1.LinearLayout

   LinearLayoutyot又稱線性布局，是一種常用的布局，它又可以有水平方向的和垂直方向的布局方式。前面一篇博文基本使用的是線性布局中的垂直布局，這個垂直布局的的方式是有屬性android:orientation="vertical"控制的。如果把值指定為horizontal則控制項就會在水平方向上排列了。下面我進行實戰的操作吧。

建立一個android項目，項目名為UILayout，其他的基本採用預設的方式。

修改下布局檔案，代碼如下：

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

運行程式，結果如下：

可見三個按鈕都是自適應的大小，在垂直方向排列。

現在我們在修改下線性布局的的屬性值，修改後代碼如下：

<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"    <span style="color:#ff0000;">android:orientation="horizontal"</span>    >    <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 1"        />        <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 2"        />        <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 3"        />    </LinearLayout>

運行結果如：

如果不指定android:orientation的屬性值，則預設的方式就是horizontal，水平的。

注意：如果LinearLayout的相片順序是horizontal的，內部的控制項絕對不能將寬度指定為match_parent，因為這樣的話單獨一個控制項就會將整個水平方向佔滿，其他的控制項就沒的可放置的位置了。同樣如果LinearLayout的相片順序是vertical，內部的控制項就不能將高度指定為match_parent。

下面接觸幾個常用的控制項和布局的屬性

android:layout_gravity：用於指定控制項在布局中的對齊

android:gravity：是用於指定文字在控制項中的對齊

android:layout_gravity和android:gravity的可選值差不多，不過要注意，LinearLayout的排列方向是horizontal時，只有垂直方向的對齊才會生效因為此時水平方向上的長度是不固定的，每添加一個控制項，水平方向的長度都會改變，因而無法指定該方向的對齊。同樣的道理，LinearLayout的排列方向是vervitcal時，只有水平方向的對齊才會生效。

修改布局檔案，修改後代碼如下：

<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"    android:orientation="horizontal"    >    <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 1"        android:layout_gravity="top"        />        <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 2"        android:layout_gravity="center_horizontal"        />        <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 3"        android:layout_gravity="bottom"        />    </LinearLayout>

運行程式，結果如：

android:layout_weight：這個屬性允許我們使用比例的方式來指定控制項的大小，它在手機螢幕的適配方面可以起到非常重要的作用。

修改布局檔案如下：

<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"    android:orientation="horizontal"    >    <EditText         android:id="@+id/input_message"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:hint="type something"        />        <Button         android:id="@+id/send"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:text="Send"        />    </LinearLayout>

運行程式顯示如下：

看上面的代碼，EditText和Button的寬度都指定成了0，這裡使用了android：layout_weight屬性，此時的控制項的寬度不應該由andorid：layout_width來決定，這裡指定為0是一種比較規範的寫法。然後我們我們把EditText和Button的屬性android：layout_weight的值都設定為1，這表示EditText和Button將在水平方向平分寬度。

為什麼android：layout_weight屬性的值為1就會平分螢幕寬度？系統會把LinearLayout下所有控制項指定的layout_weight值相加，得到一個總值，然後每個控制項所佔的比例就是該控制項的layout_weight值除以算出來的總值。

下面在修改下布局的檔案，代碼如下：

<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"    android:orientation="horizontal"    >    <EditText         android:id="@+id/input_message"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:hint="type something"        />        <Button         android:id="@+id/send"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Send"        />    </LinearLayout>

這裡我們指定了EditText的android:layout_weight="1"屬性，並將Button的寬度改回wrap_content。這表示Button的寬度仍然按照wrap_content來計算，而EditText則會佔滿螢幕所有剩餘空間。

運行結果如下：

2.RelativeLayout相對布局

修改布局檔案，代碼如下：

<RelativeLayout 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"    >    <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 1"        android:layout_alignParentLeft="true"        android:layout_alignParentTop="true"        />            <Button         android:id="@+id/button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 2"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        />            <Button         android:id="@+id/button3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 3"        android:layout_centerInParent="true"        />            <Button         android:id="@+id/button4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 4"        android:layout_alignParentLeft="true"        android:layout_alignParentBottom="true"        />        <Button         android:id="@+id/button5"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 5"        android:layout_alignParentRight="true"        android:layout_alignParentBottom="true"        />            </RelativeLayout>

運行結果如下：

上面的相對布局都是相對父容器進行布局的，見名知意了。

下面在修改下布局檔案，讓控制項相對與控制項進行布局：

<RelativeLayout 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"    >         <Button         android:id="@+id/button3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 3"        android:layout_centerInParent="true"        />            <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 1"        android:layout_above="@id/button3"        android:layout_toLeftOf="@id/button3"        />            <Button         android:id="@+id/button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 2"        android:layout_above="@id/button3"        android:layout_toRightOf="@id/button3"        />                       <Button         android:id="@+id/button4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 4"        android:layout_below="@id/button3"        android:layout_toLeftOf="@id/button3"        />        <Button         android:id="@+id/button5"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button 5"        android:layout_below="@id/button3"        android:layout_toRightOf="@id/button3"        />            </RelativeLayout>

運行結果如下：

注意：當一個控制項去引用另一個控制項的id時，該控制項一定要定義在引用控制項的後面，不然會出現找不到id的情況。

3.FrameLayout

FrameLayout沒有任何的定位方式，所有的控制項都會擺放在布局的左上方。

修改布局檔案的代碼，代碼如下：

<FrameLayout 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"    >        <Button         android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button 1"        />       <ImageView         android:id="@+id/image_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/note1"        />        </FrameLayout>

運行結果如下：

4.TableLayout

TableLayout允許我們使用表格的方式來排列控制項，這種布局不是很常用。

修改布局檔案代碼如下：

<TableLayout 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"    >        <TableRow >        <TextView             android:layout_height="wrap_content"            android:text="Account:"            />        <EditText             android:id="@+id/account"            android:layout_height="wrap_content"            android:hint="Input your account"            />    </TableRow>        <TableRow >        <TextView             android:layout_height="wrap_content"            android:text="Password:"            />        <EditText             android:id="@+id/password"            android:layout_height="wrap_content"            android:inputType="textPassword"            />    </TableRow>        <TableRow >        <Button             android:id="@+id/login"            android:layout_height="wrap_content"            android:layout_span="2"            android:text="Login"            />    </TableRow>    </TableLayout>

TableLayout中每加入一個TableRow就表示在表格中添加了一列，然後在TableRow每加入一個控制項，就表示在該行中加入了一列，TableRow中的控制項是不能指定寬度的。
android:inputType="textPassword"屬性讓輸入框變成密碼輸入框

android:layout_span="2"屬性工作表示該控制項佔據兩列。

運行結果如下

看運行結果可以發現右邊有很多的空白處，介面不美觀，我們可以對第二列進行展開，使充滿右邊的空白地方，所以給TableLayout添加android:stretchColumns="1"屬性，值為1表示展開第二列，值為0表示展開第1列。

在運行程式如下，結果如下：

4中基本布局的使用就講解到這了，下面會講解自訂控制項。

轉載請註明：http://blog.csdn.net/j903829182/article/details/40663303

android學習六（android中四種基本布局）