Android學習三UI之Layout

Android，有個特點，就是特別漂亮，我們能看到的稱之為：UI（User Interface），使用者介面

今天一起學習UI的布局Layout，學過幾天Java基礎的應該對Java裡的GUI編程有所瞭解，裡面有一個設計模式：Observer，觀察者。對設計模式感興趣的朋友，本人推薦一本書：《Head First 設計模式》

Android裡的 UI開發有所不同，一個最明顯的特點就是：android把布局、控制項都寫著了設定檔檔案裡，代碼簡化了。

廢話少說，我們開始第一個例子，依然參考文檔：http://developer.android.com/guide/topics/ui/declaring-layout.html和

http://developer.android.com/resources/tutorials/views/index.html

Declaring Layout

Hello Views

馬士兵老師教育我們：不穿二手鞋

其實學習android有這麼一份內建的文檔加上Eclipse足以

我們先看一個頁面

如何聲明(Declaring )布局：

1,Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.2,Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

第一步：在xml檔案中申明UI元素

第二步：在運行時執行個體化布局元素

開啟Eclipse，建立一個android project ：layout01

代開main.xml設定檔，有兩種視圖：1，圖形化 2，文本

圖形化的支援拖拽，但是我沒用習慣，還是選擇箭頭所指的的那個視圖

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><TextView      android:id="@+id/my_textView"    android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="@string/hello"    /></LinearLayout>

這裡預設聲明了一個線性布局：LinearLayout，裡面放置了一個TextView文字框，id是“my_textView”

裡面標籤的含義待會再說，這裡反正完成了第一步

開始第二步：執行個體化

package com.zph;import android.app.Activity;import android.os.Bundle;public class LinearLayoutActivity extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);    }}

在回調方法onCreate()中進行執行個體化配置好的布局元素

先前main.xml中一些元素（文檔中稱之為:Attributes）

這些元素的含義和用法我不打算說明，也實在是說明不過來。不過有一個辦法，用Eclipse的代碼提示功能：

把滑鼠放到需要瞭解的地方，按下快速鍵:alt+/，就會有提示，按下F2可以讓畫面停住

就是這麼簡單，後面的英文自己如果不會問Google

這裡就提一點：ID的表示，Android裡表示一個ID是用固定表示方法的：@+id/IDNameID

要具有唯一性，為什麼要有ID呢？主要是為了後面程式中要去的控制項打下基礎，沒ID就沒辦法拿到這些控制項，。舉個例子，我們現在要拿到這個TextView，並寫入“good
night”，可以這樣寫：

        TextView myTextView = (TextView)findViewById(R.id.my_textView);        myTextView.setText("good night");

ID在相對布局RelativeLayout中重要性更為明顯。

在android的API文檔中對這些標籤的描述更為詳盡：

前面只是說了LinearLayout，Android的布局有很多種：http://developer.android.com/guide/topics/ui/layout-objects.html

幾種重要的視圖組

對於每種布局，都有這麼幾個要點

1,Layout parameters 布局參數

文檔裡給了一個圖

我還沒完全看明白，直接粘貼過來

Note that every LayoutParams subclass has its own syntax for setting values. Each child element must define LayoutParams that are appropriate for its parent, though it may also define different LayoutParams for its own children

所有的視圖都要包含：寬度和高度

All view groups include a width and height (layout_width and layout_height), and each view is required to define them. Many LayoutParams also include optional margins and borders.

文檔裡給出了兩個經常用到的參數：

wrap_content ：tells your view to size itself to the dimensions required by its contentfill_parent (renamed match_parent in API Level 8)： tells your view to become as big as its parent view group will allow.

稍微解釋一下：wrap_content，大小能包含住內容就可以了；fill_parent，填滿父視圖

2，Layout Position 布局位置

3， Size, Padding and Margins 大小、填充和邊距

有過B/S開發經驗的朋友對此應該不陌生，Android封裝了一系列的方法，可以擷取我們的Layout的這些參數。

通過尋找API，可以發現類View封裝了這些方法

這個類裡的東西比較多，凡是繼承View的類都有這些方法，像我們已經接觸的過的TextView、Button都是繼承View

我自己這寫著寫著都不知道自己在寫什麼了，還是直接通過一個例子來說明Layout吧

我們一起來實現這個例子：

Tab Layout

http://developer.android.com/resources/tutorials/views/hello-tabwidget.html

  建立一個project 命名為：HelloTabWidget，再建立三個Activity

因為這是Tab Layout ，所以設定檔只要有一個就可以了，不用在layout檔案夾為每個Activity建立xml檔案，在AndroidManifest檔案添加相應的activity 標記就可以了

還要在drawable檔案下需要建立三個設定檔

 還需要準備六張小圖片，這裡我從文檔中的例子裡直接複製下來了，都放到drawable檔案夾下面

開啟main.xml檔案

代碼如下：

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <LinearLayout        android:orientation="vertical"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:padding="5dp">        <TabWidget            android:id="@android:id/tabs"            android:layout_width="fill_parent"            android:layout_height="wrap_content" />        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:padding="5dp" />    </LinearLayout></TabHost>

開啟AndroidManifest.xml

在activity標籤加入一下代碼：

android:theme="@android:style/Theme.NoTitleBar"

最後我們開啟HelloTabWidgetActivity.java，這個類繼承的是TabActivity

加入以下代碼：

 Resources res = getResources(); // Resource object to get Drawables    TabHost tabHost = getTabHost();  // The activity TabHost    TabHost.TabSpec spec;  // Resusable TabSpec for each tab    Intent intent;  // Reusable Intent for each tab    // Create an Intent to launch an Activity for the tab (to be reused)    intent = new Intent().setClass(this, ArtistsActivity.class);    // Initialize a TabSpec for each tab and add it to the TabHost    spec = tabHost.newTabSpec("artists").setIndicator("Artists",                      res.getDrawable(R.drawable.ic_tab_artists))                  .setContent(intent);    tabHost.addTab(spec);    // Do the same for the other tabs    intent = new Intent().setClass(this, AlbumsActivity.class);    spec = tabHost.newTabSpec("albums").setIndicator("Albums",                      res.getDrawable(R.drawable.ic_tab_albums))                  .setContent(intent);    tabHost.addTab(spec);    intent = new Intent().setClass(this, SongsActivity.class);    spec = tabHost.newTabSpec("songs").setIndicator("Songs",                      res.getDrawable(R.drawable.ic_tab_songs))                  .setContent(intent);    tabHost.addTab(spec);    tabHost.setCurrentTab(2);

運行：

未完：出錯了

昨天晚上啟動並執行時候出錯了，原來是AndroidManifest.xml檔案裡的ArtistsActivity配置錯了，現在改過來了

代碼如下：

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"      android:versionCode="1"   package="com.zph"      android:versionName="1.0">    <uses-sdk android:minSdkVersion="10" />    <application android:icon="@drawable/icon" android:label="@string/app_name">       <activity android:name="com.zph.HelloTabWidgetActivity" android:label="@string/app_name"          android:theme="@android:style/Theme.NoTitleBar">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>        <activity android:label="@drawable/ic_tab_artists"        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"        android:name="com.zph.ArtistsActivity">        <intent-filter>        <category android:name="android.intent.category.TAB" />        </intent-filter>        </activity><activity android:name="com.zph.AlbumsActivity"android:label="@drawable/ic_tab_albums"><intent-filter>        <category android:name="android.intent.category.TAB" />        </intent-filter></activity><activity android:name="com.zph.SongsActivity"android:label="@drawable/ic_tab_songs"><intent-filter>        <category android:name="android.intent.category.TAB" />        </intent-filter></activity>    </application></manifest>

運行結果：