Android Kotlin 基礎知識 02.1:使用版面配置編輯器進行線性版面配置

這個程式碼研究室是 Android Kotlin 基礎知識課程的一部分。如果您按部就班完成程式碼研究室,就能充分體驗到本課程的價值。所有課程程式碼研究室都列在 Android Kotlin 基礎知識程式碼研究室到達網頁。

必備知識

  • 在 Kotlin 中建立基本 Android 應用程式。
  • 在模擬器或裝置上執行 Android 應用程式。
  • LinearLayout 的基本概念。
  • 建立使用 LinearLayout 和 TextView 的簡單應用程式。

課程內容

  • 如何使用 View 和 ViewGroup。
  • 如何使用 LinearLayout. 在 Activity 中排列檢視畫面
  • 如何使用 ScrollView 顯示可捲動的內容。
  • 如何變更 View 的瀏覽權限。
  • 如何建立及使用字串和維度資源。
  • 如何使用 Android Studio 的版面配置編輯器建立線性版面配置。

學習內容

  • 建立 AboutMe 應用程式。
  • 在版面配置中加入 TextView,顯示您的名稱。
  • 新增「ImageView.」
  • 新增 ScrollView,顯示可捲動的文字。

在 AboutMe 應用程式中,您可以展示有趣的個人資訊,也可以為朋友、家人或寵物自訂應用程式。這個應用程式會顯示名稱、完成按鈕、星號圖片和可捲動的文字。

在這項工作中,您會建立 AboutMe Android Studio 專案。

  1. 開啟 Android Studio (如果尚未開啟)。
  2. 如果 Android Studio 已開啟專案,請依序選取「File」>「New」>「New Project」。


  3. 如果尚未開啟專案,請在「Welcome to Android Studio」對話方塊中選取「+ Start a new Android Studio project」。


  4. 在「Create New Project」對話方塊的「Phone and Tablet」分頁中,選取「Empty Activity」範本。按一下「下一步」。


  5. 在下一個「Create New Project」對話方塊中,設定下列參數,然後按一下「Finish」。

屬性

值

應用程式名稱

AboutMe

公司名稱 Android

com.android.example.AboutMe (或您自己的網域)

儲存地點

保留預設位置,或變更為偏好的目錄。

語言

Kotlin

最低 API 級別

API 19:Android 4.4 (KitKat)

這項專案將支援免安裝應用程式

請勿勾選這個核取方塊。

使用 AndroidX 構件

選取這個核取方塊。

Android Studio 需要一點時間產生專案檔案。

  1. 執行應用程式,空白畫面上會顯示「Hello World」字串。

「Empty Activity」範本會建立單一空白活動 Mainactivity.kt。範本也會建立名為 activity_main.xml 的版面配置檔案。版面配置檔案的根 ViewGroup 為 ConstraintLayout,且內容為單一 TextView。

在這項工作中,您要將產生的根 ViewGroup 變更為 LinearLayout。您也可以垂直排列 UI 元素。

查看群組

ViewGroup 是一種可包含「子項」檢視畫面的檢視畫面,也就是其他檢視畫面和檢視區塊群組。構成版面配置的檢視區塊會整理成檢視區塊階層,並以檢視區塊群組做為根目錄。

在 LinearLayout 檢視區塊群組中,UI 元素會水平或垂直排列。

變更根層級版面配置,使其使用 LinearLayout 檢視區塊群組:

  1. 選取「Project」>「Android」窗格。在 app/res/layout 資料夾中,開啟 activity_main.xml 檔案。
  2. 選取「Text」分頁標籤,然後將根檢視區塊群組從 ConstraintLayout 變更為 LinearLayout。
  3. 移除 TextView。在 LinearLayout 元素中,新增 android:orientation 屬性並設為 vertical。

更新前:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

套用後:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

版面配置編輯器是 Android Studio 內建的視覺化設計工具,您可以使用版面配置編輯器,將 UI 元素拖曳至設計編輯器,而不必手動編寫 XML 程式碼來建構應用程式的版面配置。

如要查看版面配置編輯器,請按一下「Design」分頁標籤。下方的螢幕截圖顯示版面配置編輯器的各個部分。

設計編輯器:在設計檢視、藍圖檢視畫面或兩者中,顯示螢幕版面配置的示意圖。設計編輯器是版面配置編輯器的主要部分。

工具列: 提供各種按鈕,可在設計編輯器中設定版面配置的外觀,並變更部分版面配置屬性。舉例來說,如要在設計編輯器中變更版面配置的顯示方式,請使用「選取設計介面」 下拉式選單:

  • 使用「設計」預覽版面配置的實際效果。
  • 使用「藍圖」,即可只顯示每個檢視畫面的描繪外框。
  • 使用「設計 + 藍圖」並排查看這兩種顯示畫面。

「Palette」:提供檢視畫面和檢視區塊群組清單,可拖曳至版面配置或「Component Tree」窗格。

「屬性」:顯示目前所選檢視區塊或檢視區塊群組的屬性。如要在完整屬性清單和常用屬性之間切換,請使用窗格頂端的 圖示。

元件樹狀結構: 以檢視區塊樹狀結構的形式顯示版面配置階層。如果檢視區塊很小、隱藏或重疊,導致您無法在設計編輯器中選取,這時「Component Tree」就派上用場了。

步驟 1:新增 TextView

  1. 開啟 res/layout/activity_main.xml 檔案 (如果檔案並未自動開啟的話)。
  2. 切換至「Text」分頁標籤 並檢查程式碼。程式碼的根檢視區塊群組為 LinearLayout。(檢視區塊群組 是包含其他檢視區塊的檢視區塊。)

    LinearLayout 具有必要屬性 layout_height、layout_width 和 orientation,預設為 vertical。
  3. 切換至「設計」分頁標籤,開啟版面配置編輯器。
  1. 將文字檢視畫面從「Palette」窗格拖曳至設計編輯器。


  2. 請注意「Component Tree」窗格。新的文字檢視畫面會做為父項檢視區塊群組 (即 LinearLayout) 的子項元素。

  3. 開啟「Attributes」(屬性) 窗格 (如果尚未開啟)。(如要開啟窗格,請在設計編輯器中按兩下新加入的 TextView。)
  4. 在「屬性」窗格中設定下列屬性:

屬性

值

ID

name_text

文字

設定為你的名稱。(其中一個文字欄位會顯示扳手圖示,表示該欄位適用於 tools 命名空間。沒有扳手的那個是 android 命名空間,也就是您要的文字欄位。

textAppearance > textSize

20sp

textAppearance > textColor

@android:color/black

textAppearance > textAlignment

中心

步驟 2:建立字串資源

在「Component Tree」中,TextView, 旁邊會顯示警告圖示 。如要查看警告文字,請點選或指向該圖示,如下方螢幕截圖所示。

如要解決這則警告,請建立字串資源:

  1. 在「屬性」窗格中,按一下您設為名稱的「文字」屬性旁的三點圖示。資源編輯器隨即開啟。


  2. 在「Resources」對話方塊中,依序選取「Add new resource」>「New string Value」。
  3. 在「New String Value Resource」對話方塊中,將「Resource name」欄位設為 name。將「資源值」欄位設為您自己的名稱。按一下「確定」。請注意,警告訊息已消失。


  4. 開啟 res/values/strings.xml 檔案,然後尋找名為 name 的新建立字串資源。
<string name="name">Aleks Haecky</string>

步驟 3:建立維度資源

您剛才使用資源編輯器新增資源。您也可以在 XML 程式碼編輯器中擷取資源,建立新資源:

  1. 在 activity_main.xml 檔案中,切換至「Text」分頁標籤。
  2. 在 textSize 行中,按一下數字 (20sp) 並輸入 Alt+Enter (Mac 上的 Option+Enter)。從彈出式選單中選取「Extract dimension resource」。
  3. 在「Extract Resource」對話方塊中,於「Resource name」欄位輸入 text_size。按一下「確定」。


  4. 開啟 res/values/dimens.xml 檔案,可看到下方的產生程式碼:
<dimen name="text_size">20sp</dimen>
  1. 開啟 MainActivity.kt 檔案,並在 onCreate() 函式的結尾尋找下列程式碼:
setContentView(R.layout.activity_main)

setContentView() 函式會將版面配置檔案與 Activity 連線。指定的版面配置資源檔案為 R.layout.activity_main:

  • R 是資源的參照。這是自動產生的類別,其中包含應用程式中所有資源的定義。
  • layout.activity_main 表示資源是名為 activity_main 的版面配置。
  1. 執行應用程式。系統會顯示含有您名稱的 TextView。

查看應用程式畫面時,您的名字會緊貼畫面頂端,因此現在要新增邊框間距和邊界。

邊框間距與外框間距

邊框間距是指檢視區塊或元素邊界內的空間。如下圖所示,這是檢視區塊邊緣與檢視區塊內容之間的空間。

檢視畫面大小包含邊框間距。以下是常用的邊框間距屬性:

邊界是指在檢視區塊邊框外新增的空間。如上圖所示,這是指檢視區塊邊緣到父項之間的空間。以下是常用的邊界屬性:

步驟 1:新增邊框間距

如要在名稱和 name 文字檢視畫面的頂端邊緣之間加入間距,請新增頂端邊框間距。

  1. 在「設計」分頁中開啟 activity_main.xml 檔案。
  2. 在「Component Tree」或設計編輯器中,按一下文字檢視區塊,開啟「Attributes」窗格。
  3. 在「屬性」窗格頂端,按一下雙箭頭圖示 ,即可查看所有可用屬性。
  4. 搜尋「Padding」,展開該屬性,然後按一下「top」屬性旁的三點圖示 ...。系統會隨即顯示「Resources」對話方塊。
  5. 在「Resources」對話方塊中,依序選取「Add new resource」>「New dimen Value」。
  6. 在「New Dimension Value Resource」對話方塊中,建立名為 small_padding 的新 dimen 資源,值為 8dp。

    dp 縮寫代表與密度無關。如要讓 UI 元素在不同密度的螢幕上呈現相同大小,請使用 dp 做為測量單位。不過,指定文字大小時,請一律使用 sp (可縮放像素)。
  7. 按一下「確定」。

步驟 2:新增邊界

如要將 name 文字檢視區塊從父項元素邊緣移開,請新增上邊界。

  1. 在「屬性」窗格中搜尋「邊界」,找出「Layout_Margin」。
  2. 展開「Layout_Margin」,然後點選「top」屬性旁的三點圖示 ...。
  3. 建立名為 layout_margin 的新 dimen 資源,並設為 16dp。按一下「確定」。

步驟 3:新增字型

如要讓 name 文字檢視區塊看起來更美觀,請使用 Android Roboto 字型。這個字型是支援程式庫的一部分,您會將字型新增為資源。

  1. 在「屬性」窗格中搜尋「fontFamily」。
  2. 在「fontFamily」欄位中,按一下下拉式箭頭 ,捲動至清單底部,然後選取「更多字型」。
  3. 在「Resources」對話方塊中,搜尋 rob 並選擇「Roboto」。在「預覽」清單中選取「一般」。
  4. 選取「Add font to project」(新增字型至專案) 圓形按鈕。
  5. 按一下「確定」。

「res」資料夾現在有「font」資料夾,其中包含「roboto.ttf」字型檔案。@font/roboto 屬性會新增至 TextView。

步驟 4:擷取樣式

「樣式」是一組屬性,可指定檢視畫面的外觀和格式。樣式可包含字型顏色、字型大小、背景顏色、邊框間距、邊界和其他常見屬性。

您可以將 name 文字檢視區塊的格式設定擷取到樣式中,並在應用程式中將該樣式重複用於任意數量的檢視區塊。重複使用樣式可讓應用程式在有多個檢視區塊時,保持一致的外觀。使用樣式也能將這些常見屬性集中在一個位置。

  1. 在「Component Tree」 中,對 TextView 按一下滑鼠右鍵,然後依序選取「Refactor」>「Extract Style」。
  2. 在「Extract Android Style」對話方塊中,取消勾選 layout_width、layout_height 和 textAlignment 核取方塊。這些屬性通常因每個檢視區塊而異,因此您不希望這些屬性成為樣式的一部分。
  3. 在「樣式名稱」欄位中輸入 NameStyle。
  4. 按一下「確定」。


  5. 樣式也是資源,因此會儲存在 res/values/ 資料夾的 styles.xml 檔案中。開啟 styles.xml 並檢查 NameStyle 樣式的產生程式碼,看起來會類似這樣:
<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>
  1. 開啟 activity_main.xml 並切換至「Text」分頁標籤。請注意,系統產生的樣式會以 style="@style/NameStyle" 形式用於文字檢視區塊。
  2. 執行應用程式,並注意 TextView 周圍的字型和邊框間距變化。

大多數實際的 Android 應用程式都是由多個檢視區塊組合而成,可顯示圖片、文字,以及接受使用者以文字或點擊事件形式輸入的內容。在這項工作中,您要新增檢視區塊來顯示圖片。

ImageView 是用於顯示圖片資源的檢視區塊。舉例來說,ImageView 可以顯示 Bitmap 資源,例如 PNG、JPG、GIF 或 WebP 檔案,也可以顯示 Drawable 資源,例如向量繪圖。

Android 隨附圖片資源,例如範例圖示、虛擬人偶和背景。您將其中一個資源新增至應用程式。

  1. 在「Design」分頁中顯示版面配置檔案,然後將「Palette」窗格中的「ImageView」拖曳至「Component Tree」中的 name_text 下方。「資源」 對話方塊隨即開啟。
  2. 如果尚未選取「Drawable」,請選取此項目。
  3. 展開「android」,捲動畫面,然後選取「btn_star_big_on」。黃色星星 。
  4. 按一下「確定」。



    星號圖片會新增至你名稱下方的版面配置。由於您有直向 LinearLayout,因此新增的檢視畫面會垂直對齊。

  5. 切換至「文字」分頁,查看產生的 ImageView 程式碼。寬度設為 match_parent,因此檢視區塊的寬度會與父項元素相同。高度設為 wrap_content,因此檢視區塊的高度會與內容相同。ImageView 會參照 btn_star_big_on 可繪項目。
<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />
  1. 如要重新命名 ImageView 的 id,請在 "@+id/imageView" 上按一下滑鼠右鍵,然後依序選取「Refactor」>「Rename」。
  2. 在「Rename」對話方塊中,將 id 設為 @+id/star_image。按一下「重構」。


  1. 在「Design」分頁的「Component Tree」中,按一下 star_image 旁邊的警告圖示 。這項警告是針對缺少的 contentDescription,螢幕閱讀器會使用這項屬性向使用者說明圖片。
  2. 在「屬性」窗格中,按一下 contentDescription 屬性旁的 3 點圖示 ...。系統會開啟「資源」對話方塊。
  3. 在「Resources」對話方塊中,依序選取「Add new resource」>「New string Value」。將「資源名稱」欄位設為 yellow_star,並將「資源值」欄位設為 Yellow star。按一下「確定」。
  4. 使用「屬性」窗格,在 yellow_star 中新增 16dp (即 @dimen/layout_margin) 的上邊界,將星號圖片與名稱分開。
  5. 執行應用程式。您的名稱和星號圖片會顯示在應用程式的 UI 中。

ScrollView 是一種檢視區塊群組,可讓使用者捲動其中的檢視區塊階層。捲動檢視畫面只能包含另一個子項檢視畫面/檢視區塊群組。子項檢視畫面通常是 LinearLayout。您可以在 LinearLayout 中新增其他檢視畫面。

下圖顯示 ScrollView 的範例,其中包含 LinearLayout,而 LinearLayout 則包含其他多個檢視區塊。

這個捲動檢視區塊包含線性版面配置,其中含有其他多個檢視區塊。

在這項工作中,您將新增 ScrollView,讓使用者捲動顯示簡短傳記的文字檢視區塊。如果只有一個檢視區塊要設為可捲動,可以直接將該檢視區塊放入 ScrollView,這也是您在這項工作中執行的操作。

這個 ScrollView 包含單一 TextView

步驟 1:新增包含 TextView 的 ScrollView

  1. 在「Design」分頁中開啟 activity_main.xml 檔案。
  2. 將捲軸檢視區塊拖曳至設計編輯器或「Component Tree」,即可將其加入版面配置。將捲動檢視區塊放在星號圖片下方。
  3. 切換至「Text」分頁,檢查生成的程式碼。
// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ScrollView 的高度和寬度會與父項元素相符。name_text 文字檢視區塊和 star_image 圖片檢視區塊使用足夠的垂直空間顯示內容後,Android 系統會安排 ScrollView 填滿畫面上其餘的可用空間。

  1. 在 ScrollView 中新增 id,並呼叫 bio_scroll。在 ScrollView 中新增 id,即可為 Android 系統提供檢視區塊的控制代碼,這樣一來,使用者旋轉裝置時,系統就能保留捲動位置。
  2. 在 ScrollView 中,移除 LinearLayout 程式碼,因為應用程式只會有一個可捲動的檢視區塊 (即 TextView)。
  3. 將 TextView 從「Palette」拖曳至「Component Tree」。將 TextView 放在 bio_scroll 下方,做為 bio_scroll 的子項元素。

  4. 將新文字檢視區塊的 id 設為 bio_text。
  5. 接著,您要為新的文字檢視區塊新增樣式。在「屬性」窗格中,按一下「style」屬性旁邊的三點圖示 ...,開啟「資源」對話方塊。
  6. 在「Resources」對話方塊中,搜尋 NameStyle。從清單中選取 NameStyle,然後按一下「OK」。文字檢視區塊現在會使用您在先前工作中建立的 NameStyle 樣式。

步驟 2:將簡介新增至新的 TextView

  1. 開啟 strings.xml,建立名為 bio 的字串資源,然後輸入有關自己或任何您想說的長篇文字。

以下是簡介範例:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>
  1. 在 bio_text 文字檢視區塊中,將 text 屬性的值設為包含簡介的 bio 字串資源。
  2. 如要讓 bio_text 文字更容易閱讀,請在行間加入空格。使用 lineSpacingMultiplier 屬性,並指定 1.2 的值。



    請注意,在設計編輯器中,bio 文字會延伸至畫面側邊。如要修正這個問題,請將左側、開始、右側和結束邊框間距屬性新增至根 LinearLayout。您不需要新增底部邊框間距,因為文字直接顯示在底部,可向使用者表示文字可捲動。
  3. 在根 LinearLayout 中加入 16dp 的開始和結束邊框間距。
  4. 切換至「Text」分頁,擷取維度資源,並將其命名為 layout_padding。

  1. 執行應用程式,然後捲動瀏覽文字。

恭喜!

您已從頭開始建立完整的應用程式,而且看起來很棒!

Android Studio 專案:AboutMe

在 ScrollView 中,於 TextView 上方新增 ImageView。執行應用程式時,這個圖片會隨著文字向上捲動而移出畫面,不像星星會固定在畫面上。

提示:捲動檢視區塊只能有一個子項檢視區塊。您必須將兩個可捲動的檢視區塊 (ImageView 和 TextView) 包裝在 LinearLayout 中。

  • ViewGroup 是可包含其他檢視區塊的檢視區塊。「LinearLayout」和「ScrollView」是檢視區塊群組。
  • LinearLayout 是檢視區塊群組,可水平或垂直排列子項檢視區塊。
  • 如要在畫面上顯示內容 (例如長篇文字或圖片集),請使用 ScrollView。捲動檢視畫面只能包含一個子項檢視畫面。如要捲動多個檢視區塊,請新增 ViewGroup (例如 LinearLayout) 至 ScrollView,並將要捲動的檢視區塊放在該 ViewGroup 內。
  • 版面配置編輯器是 Android Studio 內建的視覺設計編輯器。您可以使用版面配置編輯器,將 UI 元素拖曳至版面配置,建構應用程式的版面配置。
  • 「樣式」是一組屬性,可指定檢視畫面的外觀。舉例來說,樣式可指定字型顏色、字型大小、背景顏色、邊框間距和邊界。
  • 您可以將檢視區塊的所有格式設定擷取並收集到樣式中。如要讓應用程式外觀一致,請重複使用其他檢視區塊的樣式。

Udacity 課程:

Android 開發人員說明文件:

本節列出的作業可由課程講師指派給學習本程式碼研究室的學員。講師可自由採取以下行動:

  • 視需要指派作業。
  • 告知學員如何繳交作業。
  • 為作業評分。

講師可以視需求使用全部或部分建議內容,也可以自由指派任何其他合適的作業。

如果您是自行學習本程式碼研究室,不妨利用這些作業驗收學習成果。

回答問題

第 1 題

下列何者為檢視區塊群組?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

第 2 題

以下所列出的檢視區塊階層,哪一個為無效?

▢ LinearLayout > TextView、TextView、ImageView

▢ ScrollView > LinearLayout > TextView、Button、Button、ScrollView > TextView

▢ TextView > TextView、ImageView、ScrollView

第 3 題

樣式是在 styles.xml 中定義的資源。使用樣式可定義檢視區塊的顏色、字型、文字大小等各種特質。下列敘述是否正確?

▢ True

▢ False

第 4 題

ScrollView 是檢視區塊群組,可包含任意數量的檢視區塊或檢視區塊群組做為子項。下列敘述是否正確?

▢ True

▢ False

第 5 題

您可以使用哪個 UI 元素在應用程式中顯示圖片?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

開始下一個課程:2.2:新增使用者互動

如要查看本課程其他程式碼研究室的連結,請參閱 Android Kotlin 基礎知識程式碼研究室登陸頁面。