寶寶生活記錄 App (Day21 如何防止進入此畫面時跳出鍵盤與自訂背景的EditText)

DAY 21

以「寶寶聯絡簿」為例，適合 Android 初學者的學習筆記系列第 21 篇

寶寶生活記錄 App (Day21 如何防止進入此畫面時跳出鍵盤與自訂背景的EditText)

鐵人賽 android

2014-10-13 02:25:38

2483 瀏覽

今天終於要回到「寶寶生活記錄 App」。在 10 月 2 日時，我們幫這個 App 的選單 (Menu) 新增了 3 個選項：「新增寶寶」、「寶寶列表」和「寄信給開發者」，我們已經將「寄信給開發者」實作完成 (同時也了解了 Implicit Intent 的用法)，為了實作「新增寶寶」和「寶寶列表」，我們花了好幾天討論資料庫的存取，今天終於要開始討論「新增寶寶」的實作，我們先將使用者界面實作出來。

XML 檔 (activity_addbaby.xml) 的內容如下所示：

<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"
    android:paddingBottom="6dp"
    android:paddingLeft="7dp"
    android:paddingRight="7dp"
    android:id="@+id/rootview"
    android:paddingTop="5dp"
    android:background="#EBEBEB" >

    <!-- To prevent EditText from receiving focus -->
    <LinearLayout android:id="@+id/ll_dummy"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:layout_width="0px"
        android:layout_height="0px"
        android:orientation="vertical"
        android:layout_alignParentTop="true"
        />

    <LinearLayout android:id="@+id/ll_btns"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:weightSum="2">
        <Button android:id="@+id/btn_cancel"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="@string/cancel"
            android:layout_centerHorizontal="true"
            />
        <Button android:id="@+id/btn_complete"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="@string/complete"
            android:layout_centerHorizontal="true"
            />
    </LinearLayout>
    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/ll_btns"
        android:layout_alignParentTop="true">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!-- 寶寶大頭照 -->
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:weightSum="7"
                android:orientation="horizontal"
                android:paddingBottom="15dp"
                >
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="3"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#708090"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:text="@string/headshot"
                        />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="4"
                    android:orientation="horizontal"
                    android:layout_gravity="center_vertical">
                    <ImageView android:id="@+id/iv_headshot"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/defaultheadshot"
                        />
                </LinearLayout>
            </LinearLayout>
            <!-- 寶寶姓名 -->
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:weightSum="7"
                android:orientation="horizontal"
                android:paddingBottom="15dp"
                >
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="3"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#708090"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:text="@string/name"
                        />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="4"
                    android:orientation="horizontal"
                    android:layout_gravity="center_vertical">
                    <EditText android:id="@+id/et_name"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:textSize="20sp"
                        android:textColor="#000000"
                        android:inputType="text"
                        android:gravity="center_vertical"
                        android:background="@drawable/edittext_notfocus"
                        android:padding="5dp"
                        />
                </LinearLayout>
            </LinearLayout>
            <!-- 寶寶乳名 -->
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:weightSum="7"
                android:orientation="horizontal"
                android:paddingBottom="15dp"
                >
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="3"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#708090"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:text="@string/nickname"
                        />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="4"
                    android:orientation="horizontal"
                    android:layout_gravity="center_vertical">
                    <EditText android:id="@+id/et_nickname"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:textSize="20sp"
                        android:textColor="#000000"
                        android:inputType="text"
                        android:gravity="center_vertical"
                        android:background="@drawable/edittext_notfocus"
                        android:padding="5dp"
                        />
                </LinearLayout>
            </LinearLayout>
            <!-- 寶寶生日 -->
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:weightSum="7"
                android:orientation="horizontal"
                android:paddingBottom="15dp"
                >
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="3"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textColor="#708090"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:text="@string/birthday"
                        />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="4"
                    android:orientation="horizontal"
                    android:layout_gravity="center_vertical">
                    <Button android:id="@+id/btn_birthday"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:textSize="20sp"
                        android:textColor="#000000"
                        android:gravity="center"
                        android:layout_gravity="center"
                        />
                </LinearLayout>
            </LinearLayout>
            <!-- 寶寶性別 -->
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                >
                <RadioGroup android:id="@+id/rg_gender"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:orientation="horizontal"
                    android:gravity="center_horizontal"
                    >
                    <RadioButton android:id="@+id/rb_boy"
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:drawableRight="@drawable/boy"
                        android:checked="true"
                        android:layout_gravity="center"
                        android:paddingRight="30dp"
                        ></RadioButton>
                    <RadioButton android:id="@+id/rb_girl"
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:drawableRight="@drawable/girl"
                        android:layout_gravity="center"
                        ></RadioButton>
                </RadioGroup>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

關於這個 XML 檔，有兩個重點需要說明：

（一）如何防止進入此畫面時跳出鍵盤

在這份 XML 裡頭，由於我們有使用到 EditText，因此若沒有特別處理，這個 EditText 會取得焦點 (focus)，因此鍵盤就會跳出來，如何防止進入此畫面時跳出鍵盤呢？方法很簡單，只要在 XML 的開頭加上如下的程式碼就可以了：

<!-- To prevent EditText from receiving focus -->
<LinearLayout android:id="@+id/ll_dummy"
	android:focusable="true"
	android:focusableInTouchMode="true"
	android:layout_width="0px"
	android:layout_height="0px"
	android:orientation="vertical"
	android:layout_alignParentTop="true"
	/>

（二）EditText 自訂背景

雖然筆者並不是專業的美工人員，但自己實在不喜歡預設的 EditText，比較喜歡有著圓弧外框的 EditText，因此決定自訂背景，首先於 /Babylog/app/src/main/res 下建立一個名為 drawable 的資料夾，然後新增一個名為 edittext_notfocus.xml 的 XML 檔，內容如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<stroke android:width="1dip" android:color="#888888"/>
	<solid android:color="#DDDDDD" />
	<corners android:radius="7dip" />
</shape>

stroke 是外框的線，我們設定了線的寬度 (1dip) 和顏色 (#888888)，solid 則是框內的顏色，corners 則是設定四個角落的圓弧半徑。筆者另外還新增了另一個名為 edittext_focus.xml 的 XML 檔，只是把外框的顏色從 #888888 換成 #4fa5d5，當一個 EditText 取得焦點 (focus) 時 (使用者點擊該 EditText) 會把背景換成 edittext_focus.xml。

接著回到 activity_addbaby.xml，EditText 只需要利用 android:background 屬性就可以換成我們自訂的背景，如下所示：

<EditText android:id="@+id/et_name"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:textSize="20sp"
	android:textColor="#000000"
	android:inputType="text"
	android:gravity="center_vertical"
	android:background="@drawable/edittext_notfocus"
	android:padding="5dp"
	/>

最後對於 activity_addbaby.xml，讀者較陌生的應該只剩下 RadioGroup 和 RadioButton，這部分將留到日後再做說明。今天的最後我們來看一下 activity_addbaby.xml 在 Preview 子視窗所呈現的預覽結果：