iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
0
自我挑戰組

Android初學筆記系列 第 4

Day 4 - 使用者介面

今天我們就開始來實作一點東西囉,先從介面開始,目標是了解基本的XML介面檔,並新增一個輸入框和一個按鈕。

然而在開始之前,我們先介紹兩個簡單的設定「改變字體大小」和「顯示行數」,因為我覺得預設字體實在很小,若您也有同樣困擾的話可以先設定一下

  • 字體大小
    左上角 File -> Setting 會開出設定視窗(快速鍵Ctrl+Alt+S),並至 Editor -> Colors&Fonts -> Font ,而Default的值是不能改的,請選Save As輸入一個名字,底下的size那些就可以更改囉
    http://ithelp.ithome.com.tw/upload/images/20161219/20103849Dokh370eva.jpg

  • 顯示行數
    一樣在Settings ,左邊選擇 Editor -> General -> Appearance ,在右邊找到show line numbers並勾選
    http://ithelp.ithome.com.tw/upload/images/20161219/20103849fip8XxZfai.jpg


了解XML

我們開啟activity_main.xml檔案,中間會看到XML程式碼,下面可以切換Design或Text檢視,右邊有Preview可以即時預覽修改的結果。
http://ithelp.ithome.com.tw/upload/images/20161219/20103849m2icjyamD7.jpg

上面圖太小了,另外貼個code

1  <?xml version="1.0" encoding="utf-8"?>
2  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3      xmlns:tools="http://schemas.android.com/tools"
4      android:id="@+id/activity_main"
5      android:layout_width="match_parent"
6      android:layout_height="match_parent"
7      android:paddingBottom="@dimen/activity_vertical_margin"
8      android:paddingLeft="@dimen/activity_horizontal_margin"
9      android:paddingRight="@dimen/activity_horizontal_margin"
10     android:paddingTop="@dimen/activity_vertical_margin"
11     tools:context="ivankuo.com.myapplication.MainActivity">
12   
13     <TextView
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="Hello World!" />
17 </RelativeLayout>

檔案裡有兩個標籤為第2行的RelativeLayout第13行的TextView,RelativeLayout可以想成是一個容器,讓我們把各個元件放在裡面排版,目前放了一個TextView(第13~16行),我們透過這個TextView了解元件的XML寫法:

  • 第13行是元件名稱TextView
  • 第14行android:layout_width是元件的寬度,這邊用wrap_content表示依照元件的內容來動態決定寬度,如目前的寬度就是Hello World!這幾個字的總和
  • 第15行android:layout_height是元件的高度,以上三項(名稱、寬度、高度)是元件必須要有的屬性
  • 第16行android:text是要顯示的文字,後面的 /> 表示結尾

這樣就完成一個元件了,很簡單吧!您可以嘗試把第13行的TextView改成Button,就會看到文字區變成按鈕囉

接著我們看看第2行的RelativeLayout,通常一個介面的最外層都會是個Layout,並對畫面做一些基本設定

  • 第2~3行是元件名稱RelativeLayout,後面的xmlns:android和xmlns:tools是Android須用到的XML屬性
  • 第4行android:id是元件的id,後面會提到它的用途
  • 第5~6行是寬度和高度,這裡用match_parent是指跟上一層元件一樣寬高,然而我們已經在最外層了,所以就會跟螢幕一樣寬高
  • 第7~10行是一連串的android:padding,分為上下左右,而padding的用途是讓內容往內縮,所以您可以嘗試把第8行刪除,就會看到Layout的內容跟螢幕左邊的間距消失了。另外這邊的@dimen/activity_vertical_margin是資源檔的運用,將要內縮的維度寫在資源檔裡,您可以在專案資料夾res/values/dimens/dimens.xml看到這個值為16dp,而佈局就用@dimen/來取得值,這樣的好處是將維度統一管理,將來如果有多個頁面要同時改維度,只要改dimens裡的值就可以了
  • 第11行tools:context將介面檔和程式檔做連結
  • 第17行是RelativeLayout的尾標籤,表示在尾標籤之前(12~16行)都是要放在這個Layout裡的內容

以上是我們現有XML的說明


新增元件

今天的目標是要新增輸入框(EditText)和按鈕(Button),我們先加入一個Button如下圖,但此時會發現他怎麼把原來的文字蓋掉了勒
http://ithelp.ithome.com.tw/upload/images/20161219/20103849QVfmXiKjzT.jpg

這邊我們就要講到RelativeLayout(相對布局)的性質,他是用相對位置來擺放各個元件,若不指定則一律出現在左上,像我們目前的TextView和Button這樣,於是我們改一下內容:
http://ithelp.ithome.com.tw/upload/images/20161219/20103849QdotC1ZW0k.jpg
我們幫TextView加上了id,並在Button加上一行android:layout_below指定他要位於TextView下方,這樣就可以把兩個元件分開囉。除了below之外還有above, toLeftOf, toRightOf等等,可以看官方文件列出共有哪些屬性可用

這樣我們知道RelativeLayout的性質,也知道新增元件的方式了,我們就來完成今天的目標吧,將內容改成這樣:
http://ithelp.ithome.com.tw/upload/images/20161219/20103849QgmS9u5m07.jpg
我們新增了一個EditText寬度為200dp,位置在myTextView下面(第23行),再新增一個Button設置在myTextView下面(第29行)及myEditText右邊(第30行)


執行結果

http://ithelp.ithome.com.tw/upload/images/20170101/201038491U5lJBW1N8.png

這樣就完成今天的目標囉,我們有一個TextView顯示文字,一個EditText讓使用者輸入,以及一個按鈕。而目前點了都沒反應,明天我們就來練習用Java程式控制這些元件,讓使用者輸入的內容透過按鈕更新到畫面上

補個code方便大家取用,這裡沒有行數,因為本來貼code就沒有,上面那是我手動打上去的/images/emoticon/emoticon25.gif

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="ivankuo.com.myapplication.MainActivity">

    <TextView
        android:id="@+id/myTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <EditText
        android:id="@+id/myEditText"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/myTextView" />

    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/myTextView"
        android:layout_toRightOf="@+id/myEditText"
        android:text="OK" />
    
</RelativeLayout>

上一篇
Day 3 - 認識專案架構
下一篇
Day 5 - 元件操作
系列文
Android初學筆記30

尚未有邦友留言

立即登入留言