這個程式碼研究室是 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 基礎知識程式碼研究室登陸頁面。