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

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

必備知識

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

課程內容

  • 如何使用 ViewViewGroup
  • 如何使用 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 的版面配置檔案。版面配置檔案的根 ViewGroupConstraintLayout,且內容為單一 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_heightlayout_widthorientation,預設為 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_widthlayout_heighttextAlignment 核取方塊。這些屬性通常因每個檢視區塊而異,因此您不希望這些屬性成為樣式的一部分。
  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. 如要重新命名 ImageViewid,請在 "@+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。執行應用程式時,這個圖片會隨著文字向上捲動而移出畫面,不像星星會固定在畫面上。

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

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

Udacity 課程:

Android 開發人員說明文件:

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

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

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

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

回答問題

第 1 題

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

EditText

LinearLayout

TextView

Button

第 2 題

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

LinearLayout > TextViewTextViewImageView

ScrollView > LinearLayout > TextViewButtonButtonScrollView > TextView

TextView > TextViewImageViewScrollView

第 3 題

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

▢ True

▢ False

第 4 題

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

▢ True

▢ False

第 5 題

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

TextView

ImageView

Button

ScrollView

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

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