布置使用者介面

今天想教大家簡單佈置一些按鈕和Label，首先在開發前，建議大家可以把Eclipse、模擬器、參考文件都先同時開好，這樣會比較方便，遇到不會用的method就查詢參考文件，編譯時也不用再等待模擬器開機。

其中參考文件的位置是放在你Android的android-sdk-windows\docs裡面(假設你沒有改資料夾的名稱)

然後開啟Index.html

你也可以上網來看這份參考文件，只不過沒網路的時候，還是得要有離線的資料才方便呢。(http://developer.android.com/index.html)

接下來就開始進入Eclipse嘍。

程式完成畫面

這次要教大家完成以下的介面布置：

按下按鈕1可以改變文字內容，按鈕2改變文字顏色，按鈕3改變文字背景顏色。

Main.xml

請大家自行建立一個專案，因為只是練習，名稱就隨意你來取，要布置我們的使用者介面，就需要到res\layout\main.xml來修改。

打開來後會看到如下的程式碼，大家可以把LinearLayout看作是一個容器，容器內裝了許多的控制項，LinearLayout的屬性中

android:orientation：設定容器內的控制項要垂直還是水平。Vertical為垂直，horizontal為水平。

android:layout_width：設定容器的寬度。fill_parent為填滿整個畫面，其他參數之後遇到再跟大家說明。

android:layout_height：設定容器的高度。

控制項TextView就是用來顯示在介面上的文字，其中的屬性

android:text：設定TextView的內容。@string/hello是到string.xml中找到hello的標籤，抓取裡面的文字來顯示；為何要將文字放在另一個xml中呢?因為這樣就可以很容易地作出多國語言的程式了。

<?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:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="@string/hello"     /> </LinearLayout>

要做出這次的介面，可以先判斷一下，三顆按鈕是以水平的方式擺放，而按鈕和Label是垂直的方式擺放；所以說，我們可以設定一個大的容器是Vertical，然後再設定一個小的容器是horizontal用來裝按鈕。

一個新的LinearLayout，第四行中的wrap_content意思是，設定高度會依照控制項的大小來變動。控制項越多，容器就會自動往下增大。

<LinearLayout     android:orientation="horizontal"     android:layout_width="fill_parent"     android:layout_height="wrap_content"         >         </LinearLayout>

其中，我們在裡面新增Button，Button屬性：

android:id：設定Button的id，寫程式的時候會使用這個id來呼叫用的，"@+id/clk1"就是他的設定方法，clk1為id。

<Button          android:id="@+id/clk1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="按鈕1"     />

請大家再自行複製兩個按鈕，變數分別設成clk2、clk3，text就設定按鈕2、按鈕3。這樣使用者介面就設定好嘍，大家可以在左下角看到有個Layout的標籤，看到自己設定好的畫面。

.java

接下來就來撰寫程式碼的部分嘍，由於Java剛學不久，可能解釋上會寫的不是很好，請見諒XD

打開src\tw.zero01.com\zero01.java (這個路徑不是每個人都一樣，根據建立專案時的Application name，和Package name)

開啟後會看到以下畫面，Android程式的起始點都是從onCreate開始，setContentView(R.layout.main); 可以設定顯示的layout，簡單來說，和以前使用new方法是不一樣的，物件都寫在main.xml之中。

我們先來宣告Button和TextView物件。

private Button click1,click2,click3;

private TextView tv1;

之後利用findViewById方法，來尋找該Button物件，畢竟原本物件就是放在main.xml中。click1=(Button)findViewById(R.id.clk1);

使用同樣方法也將其他物件都寫好吧。

之後可以用Ctrl+Shift+o來自動import程式要用的widget

import android.widget.Button;

import android.widget.TextView;

接著都將該宣告的弄好之後，就要來撰寫按鈕控制的程式碼嘍。使用setOnClickListener，讓按鈕可以實作(implement)自己(this)。

click1.setOnClickListener(this);

click2.setOnClickListener(this);

click3.setOnClickListener(this);

這時程式碼會出現小毛毛蟲，請點旁邊的小燈泡，選擇「讓’zero01’實作’OnClickListener’」，讓程式碼自動產生。

之後還要再新增實作的方法，只要到上面點小燈泡，一樣Eclipse可以幫你產生方法。

方法就會新增在下面。

之後請各位使用if來分辨是哪一顆按鈕被按下嘍。

if (v == click1){

            tv1.setText("Hello, Android");

        }

        if (v == click2){

            tv1.setTextColor(Color.BLUE);

        }

        if (v == click3){

            tv1.setBackgroundResource(R.color.green);

        }

其中tv1.setText("Hello, Android");是設定TextView的文字內容。

tv1.setTextColor(R.color.blue);是設定TextView的文字顏色。

tv1.setBackgroundResource(R.color.green);是設定TextView的背景顏色

那R.color.green又是什麼呢?請繼續往下看說明嘍。

請開啟res\values\strings.xml，然後新增以下程式碼

    <color name="green">#00ff00color>

在strings.xml的文件中，可以設定共用字串和顏色(其實顏色也可以另外放在color.xml)，共用字串的好處是，可以輕鬆製作多國語言。

現在程式碼已經撰寫完成了!恭喜XD

來編譯程式，執行看看嘍。

按下”按鈕1”

按下”按鈕2”

按下”按鈕3”

執行都順利吧!加油嘍，你已經開始踏入Android設計的大門了XD

第一次打Android的文章，有誤處還請指導><”

下一篇文章要再教大家使用EditText物件唷……待續!!