今天我們要介紹常用的元件以及各自的屬性。

• TextView
• ImageView
• Button
• EditText

筆者建議新手，先將程式碼複製貼上，再刪除某一行，去看看手機上的元件有什麼變化

TextView

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true" 
        android:background="@android:color/black"
        android:drawableLeft="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTint="@android:color/darker_gray"
        android:gravity="center"
        android:maxLength="11"
        android:singleLine="true"
        android:text="我是 TextView"
        android:textColor="@android:color/holo_red_light"
        android:textSize="26dp"
        android:textStyle="bold" />


</RelativeLayout>

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"  // 幫元件取的名稱
        android:layout_width="300dp" // 寬度
        android:layout_height="100dp" // 高度
        android:layout_centerInParent="true" // 放在 parent 的中間
        android:background="@android:color/black" // 背景圖案 or 顏色
        android:drawableLeft="@mipmap/ic_launcher" // 文字左側放一張圖
        android:drawablePadding="10dp" // 文字的該圖的間距
        android:drawableTint="@android:color/darker_gray" // 該圖改變的顏色
        android:gravity="center" // 元件內容在元件內部的位置
        android:maxLength="11" // 最大字數為 11
        android:singleLine="true" // 是否為單行內容
        android:text="我是 TextView" // 內容
        android:textColor="@android:color/holo_red_light" // 文字顏色
        android:textSize="26dp" // 文字大小
        android:textStyle="bold" /> // 文字字型

</RelativeLayout>

效果

ImageView

其他屬性大致和上述 TextView 相同，可以試試看

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@android:color/black" // 背景
        android:src="@drawable/abc_vector_test" /> // 圖片

</RelativeLayout>

Button

屬性大致和上述 TextView 相同，可以試試看

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@android:color/black"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="center"
        android:padding="10dp"
        android:text="我是 Button"
        android:textColor="@android:color/holo_blue_bright"
        android:textSize="26dp"
        android:textStyle="bold" />

</RelativeLayout>

EditText

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@android:color/black"
        android:digits="1234567890qwertyuiopasdfghjklzxcvbnm"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="center"
        android:hint="我是個提示"
        android:inputType="number"
        android:padding="10dp"
        android:textColor="@android:color/black"
        android:textColorHint="@android:color/holo_blue_bright"
        android:textSize="26dp"
        android:textStyle="bold" />

</RelativeLayout>

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"  // 對齊 parent 中心
        android:background="@android:color/black" // 背景 黑色
        android:digits="1234567890qwertyuiopasdfghjklzxcvbnm" // 只能輸入這些字元
        android:drawableLeft="@mipmap/ic_launcher" // 左側圖
        android:gravity="center" // 內容在元件的中心
        android:hint="我是個提示" // 未打字時，顯示的提示
        android:inputType="number" // 彈出的鍵盤格式
        android:padding="10dp" // 內容與元件邊框的間距
        android:textColor="@android:color/black" // 文字顏色
        android:textColorHint="@android:color/holo_blue_bright" // 提示文字的顏色
        android:textSize="26dp" // 字體大小
        android:textStyle="bold" /> // 字型

</RelativeLayout>

基本上用法大同小異

筆者認為，學習的時候，可以問自己希望呈現什麼效果，再上網查詢，或是歡迎留言討論。

接下來幾天我們要做兩件事情

• 學習如何用程式碼，動態改變這些元件的屬性。
• 學習較困難的元件。