這個程式碼研究室是 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 專案。
- 開啟 Android Studio (如果尚未開啟)。
- 如果 Android Studio 已開啟專案,請依序選取「File」>「New」>「New Project」。

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

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

- 在下一個「Create New Project」對話方塊中,設定下列參數,然後按一下「Finish」。
屬性 | 值 |
應用程式名稱 | AboutMe |
公司名稱 Android |
|
儲存地點 | 保留預設位置,或變更為偏好的目錄。 |
語言 | Kotlin |
最低 API 級別 | API 19:Android 4.4 (KitKat) |
這項專案將支援免安裝應用程式 | 請勿勾選這個核取方塊。 |
使用 AndroidX 構件 | 選取這個核取方塊。 |

Android Studio 需要一點時間產生專案檔案。
- 執行應用程式,空白畫面上會顯示「Hello World」字串。

「Empty Activity」範本會建立單一空白活動 Mainactivity.kt。範本也會建立名為 activity_main.xml 的版面配置檔案。版面配置檔案的根 ViewGroup 為 ConstraintLayout,且內容為單一 TextView。
在這項工作中,您要將產生的根 ViewGroup 變更為 LinearLayout。您也可以垂直排列 UI 元素。
查看群組
ViewGroup 是一種可包含「子項」檢視畫面的檢視畫面,也就是其他檢視畫面和檢視區塊群組。構成版面配置的檢視區塊會整理成檢視區塊階層,並以檢視區塊群組做為根目錄。
在 LinearLayout 檢視區塊群組中,UI 元素會水平或垂直排列。

變更根層級版面配置,使其使用 LinearLayout 檢視區塊群組:
- 選取「Project」>「Android」窗格。在
app/res/layout資料夾中,開啟activity_main.xml檔案。 - 選取「Text」分頁標籤,然後將根檢視區塊群組從
ConstraintLayout變更為LinearLayout。 - 移除
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
- 開啟
res/layout/activity_main.xml檔案 (如果檔案並未自動開啟的話)。 - 切換至「Text」分頁標籤
並檢查程式碼。程式碼的根檢視區塊群組為 LinearLayout。(檢視區塊群組 是包含其他檢視區塊的檢視區塊。)LinearLayout具有必要屬性layout_height、layout_width和orientation,預設為vertical。 - 切換至「設計」分頁標籤,開啟版面配置編輯器。
- 將文字檢視畫面從「Palette」窗格拖曳至設計編輯器。

- 請注意「Component Tree」窗格。新的文字檢視畫面會做為父項檢視區塊群組 (即
LinearLayout) 的子項元素。
- 開啟「Attributes」(屬性) 窗格 (如果尚未開啟)。(如要開啟窗格,請在設計編輯器中按兩下新加入的
TextView。) - 在「屬性」窗格中設定下列屬性:
屬性 | 值 |
ID |
|
文字 | 設定為你的名稱。(其中一個文字欄位會顯示扳手圖示,表示該欄位適用於 |
textAppearance > textSize |
|
textAppearance > textColor |
|
textAppearance > textAlignment | 中心 |
步驟 2:建立字串資源
在「Component Tree」中,TextView, 旁邊會顯示警告圖示
。如要查看警告文字,請點選或指向該圖示,如下方螢幕截圖所示。

如要解決這則警告,請建立字串資源:
- 在「屬性」窗格中,按一下您設為名稱的「文字」屬性旁的三點圖示。資源編輯器隨即開啟。

- 在「Resources」對話方塊中,依序選取「Add new resource」>「New string Value」。
- 在「New String Value Resource」對話方塊中,將「Resource name」欄位設為
name。將「資源值」欄位設為您自己的名稱。按一下「確定」。請注意,警告訊息已消失。
- 開啟
res/values/strings.xml檔案,然後尋找名為name的新建立字串資源。
<string name="name">Aleks Haecky</string>步驟 3:建立維度資源
您剛才使用資源編輯器新增資源。您也可以在 XML 程式碼編輯器中擷取資源,建立新資源:
- 在
activity_main.xml檔案中,切換至「Text」分頁標籤。 - 在
textSize行中,按一下數字 (20sp) 並輸入Alt+Enter(Mac 上的Option+Enter)。從彈出式選單中選取「Extract dimension resource」。 - 在「Extract Resource」對話方塊中,於「Resource name」欄位輸入
text_size。按一下「確定」。
- 開啟
res/values/dimens.xml檔案,可看到下方的產生程式碼:
<dimen name="text_size">20sp</dimen>- 開啟
MainActivity.kt檔案,並在onCreate()函式的結尾尋找下列程式碼:
setContentView(R.layout.activity_main)setContentView() 函式會將版面配置檔案與 Activity 連線。指定的版面配置資源檔案為 R.layout.activity_main:
R是資源的參照。這是自動產生的類別,其中包含應用程式中所有資源的定義。layout.activity_main表示資源是名為activity_main的版面配置。
- 執行應用程式。系統會顯示含有您名稱的
TextView。
查看應用程式畫面時,您的名字會緊貼畫面頂端,因此現在要新增邊框間距和邊界。
邊框間距與外框間距
邊框間距是指檢視區塊或元素邊界內的空間。如下圖所示,這是檢視區塊邊緣與檢視區塊內容之間的空間。

檢視畫面大小包含邊框間距。以下是常用的邊框間距屬性:
android:padding會指定檢視畫面四個邊緣的邊框間距。android:paddingTop指定頂端邊緣的邊框間距。android:paddingBottom指定底邊的邊框間距。android:paddingStart:指定檢視區塊「起始」邊緣的邊框間距。android:paddingEnd:指定檢視區塊「結尾」邊緣的邊框間距。android:paddingLeft指定左側邊緣的邊框間距。android:paddingRight:指定右側邊緣的邊框間距。
邊界是指在檢視區塊邊框外新增的空間。如上圖所示,這是指檢視區塊邊緣到父項之間的空間。以下是常用的邊界屬性:
android:layout_margin會指定檢視區塊四個邊的邊界。android:layout_marginBottom指定這個檢視畫面底部的外部空間。android:layout_marginStart:指定這個檢視區塊「開頭」側邊的空間。android:layout_marginEnd會指定這個檢視區塊結尾側的空間。android:layout_marginLeft指定這個檢視畫面左側的空間。android:layout_marginRight:指定這個檢視畫面右側的空間。
步驟 1:新增邊框間距
如要在名稱和 name 文字檢視畫面的頂端邊緣之間加入間距,請新增頂端邊框間距。
- 在「設計」分頁中開啟
activity_main.xml檔案。 - 在「Component Tree」或設計編輯器中,按一下文字檢視區塊,開啟「Attributes」窗格。
- 在「屬性」窗格頂端,按一下雙箭頭圖示
,即可查看所有可用屬性。 - 搜尋「Padding」,展開該屬性,然後按一下「top」屬性旁的三點圖示 ...。系統會隨即顯示「Resources」對話方塊。
- 在「Resources」對話方塊中,依序選取「Add new resource」>「New dimen Value」。
- 在「New Dimension Value Resource」對話方塊中,建立名為
small_padding的新dimen資源,值為8dp。
dp 縮寫代表與密度無關。如要讓 UI 元素在不同密度的螢幕上呈現相同大小,請使用 dp 做為測量單位。不過,指定文字大小時,請一律使用 sp (可縮放像素)。 - 按一下「確定」。
步驟 2:新增邊界
如要將 name 文字檢視區塊從父項元素邊緣移開,請新增上邊界。
- 在「屬性」窗格中搜尋「邊界」,找出「Layout_Margin」。
- 展開「Layout_Margin」,然後點選「top」屬性旁的三點圖示 ...。
- 建立名為
layout_margin的新dimen資源,並設為16dp。按一下「確定」。
步驟 3:新增字型
如要讓 name 文字檢視區塊看起來更美觀,請使用 Android Roboto 字型。這個字型是支援程式庫的一部分,您會將字型新增為資源。
- 在「屬性」窗格中搜尋「fontFamily」。
- 在「fontFamily」欄位中,按一下下拉式箭頭 ,捲動至清單底部,然後選取「更多字型」。
- 在「Resources」對話方塊中,搜尋
rob並選擇「Roboto」。在「預覽」清單中選取「一般」。 - 選取「Add font to project」(新增字型至專案) 圓形按鈕。
- 按一下「確定」。

「res」資料夾現在有「font」資料夾,其中包含「roboto.ttf」字型檔案。@font/roboto 屬性會新增至 TextView。
步驟 4:擷取樣式
「樣式」是一組屬性,可指定檢視畫面的外觀和格式。樣式可包含字型顏色、字型大小、背景顏色、邊框間距、邊界和其他常見屬性。
您可以將 name 文字檢視區塊的格式設定擷取到樣式中,並在應用程式中將該樣式重複用於任意數量的檢視區塊。重複使用樣式可讓應用程式在有多個檢視區塊時,保持一致的外觀。使用樣式也能將這些常見屬性集中在一個位置。
- 在「Component Tree」 中,對
TextView按一下滑鼠右鍵,然後依序選取「Refactor」>「Extract Style」。 - 在「Extract Android Style」對話方塊中,取消勾選
layout_width、layout_height和textAlignment核取方塊。這些屬性通常因每個檢視區塊而異,因此您不希望這些屬性成為樣式的一部分。 - 在「樣式名稱」欄位中輸入
NameStyle。 - 按一下「確定」。

- 樣式也是資源,因此會儲存在
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>- 開啟
activity_main.xml並切換至「Text」分頁標籤。請注意,系統產生的樣式會以style="@style/NameStyle"形式用於文字檢視區塊。 - 執行應用程式,並注意
TextView周圍的字型和邊框間距變化。

大多數實際的 Android 應用程式都是由多個檢視區塊組合而成,可顯示圖片、文字,以及接受使用者以文字或點擊事件形式輸入的內容。在這項工作中,您要新增檢視區塊來顯示圖片。
ImageView 是用於顯示圖片資源的檢視區塊。舉例來說,ImageView 可以顯示 Bitmap 資源,例如 PNG、JPG、GIF 或 WebP 檔案,也可以顯示 Drawable 資源,例如向量繪圖。
Android 隨附圖片資源,例如範例圖示、虛擬人偶和背景。您將其中一個資源新增至應用程式。
- 在「Design」分頁中顯示版面配置檔案,然後將「Palette」窗格中的「ImageView」拖曳至「Component Tree」中的
name_text下方。「資源」 對話方塊隨即開啟。 - 如果尚未選取「Drawable」,請選取此項目。
- 展開「android」,捲動畫面,然後選取「btn_star_big_on」。黃色星星
。 - 按一下「確定」。

星號圖片會新增至你名稱下方的版面配置。由於您有直向LinearLayout,因此新增的檢視畫面會垂直對齊。
- 切換至「文字」分頁,查看產生的
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" />- 如要重新命名
ImageView的id,請在"@+id/imageView"上按一下滑鼠右鍵,然後依序選取「Refactor」>「Rename」。 - 在「Rename」對話方塊中,將
id設為@+id/star_image。按一下「重構」。
- 在「Design」分頁的「Component Tree」中,按一下
star_image旁邊的警告圖示
。這項警告是針對缺少的 contentDescription,螢幕閱讀器會使用這項屬性向使用者說明圖片。 - 在「屬性」窗格中,按一下
contentDescription屬性旁的 3 點圖示 ...。系統會開啟「資源」對話方塊。 - 在「Resources」對話方塊中,依序選取「Add new resource」>「New string Value」。將「資源名稱」欄位設為
yellow_star,並將「資源值」欄位設為Yellow star。按一下「確定」。 - 使用「屬性」窗格,在
yellow_star中新增16dp(即@dimen/layout_margin) 的上邊界,將星號圖片與名稱分開。 - 執行應用程式。您的名稱和星號圖片會顯示在應用程式的 UI 中。

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

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

步驟 1:新增包含 TextView 的 ScrollView
- 在「Design」分頁中開啟
activity_main.xml檔案。 - 將捲軸檢視區塊拖曳至設計編輯器或「Component Tree」,即可將其加入版面配置。將捲動檢視區塊放在星號圖片下方。
- 切換至「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 填滿畫面上其餘的可用空間。
- 在
ScrollView中新增id,並呼叫bio_scroll。在ScrollView中新增id,即可為 Android 系統提供檢視區塊的控制代碼,這樣一來,使用者旋轉裝置時,系統就能保留捲動位置。 - 在
ScrollView中,移除LinearLayout程式碼,因為應用程式只會有一個可捲動的檢視區塊 (即TextView)。 - 將
TextView從「Palette」拖曳至「Component Tree」。將TextView放在bio_scroll下方,做為bio_scroll的子項元素。
- 將新文字檢視區塊的 id 設為
bio_text。 - 接著,您要為新的文字檢視區塊新增樣式。在「屬性」窗格中,按一下「style」屬性旁邊的三點圖示 ...,開啟「資源」對話方塊。
- 在「Resources」對話方塊中,搜尋
NameStyle。從清單中選取NameStyle,然後按一下「OK」。文字檢視區塊現在會使用您在先前工作中建立的NameStyle樣式。
步驟 2:將簡介新增至新的 TextView
- 開啟
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>- 在
bio_text文字檢視區塊中,將text屬性的值設為包含簡介的bio字串資源。 - 如要讓
bio_text文字更容易閱讀,請在行間加入空格。使用lineSpacingMultiplier屬性,並指定1.2的值。
請注意,在設計編輯器中,bio文字會延伸至畫面側邊。如要修正這個問題,請將左側、開始、右側和結束邊框間距屬性新增至根LinearLayout。您不需要新增底部邊框間距,因為文字直接顯示在底部,可向使用者表示文字可捲動。 - 在根
LinearLayout中加入16dp的開始和結束邊框間距。 - 切換至「Text」分頁,擷取維度資源,並將其命名為
layout_padding。
- 執行應用程式,然後捲動瀏覽文字。

恭喜!
您已從頭開始建立完整的應用程式,而且看起來很棒!
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
開始下一個課程:
如要查看本課程其他程式碼研究室的連結,請參閱 Android Kotlin 基礎知識程式碼研究室登陸頁面。
