Kiến thức cơ bản về Kotlin cho Android 02.1: Bố cục tuyến tính bằng Layout Editor

Lớp học lập trình này thuộc khoá học Kiến thức cơ bản về Kotlin cho Android. Bạn sẽ nhận được nhiều giá trị nhất qua khoá học này nếu thực hiện các lớp học lập trình theo trình tự. Tất cả lớp học lập trình của khoá học đều được liệt kê trên trang đích của lớp học lập trình Kiến thức cơ bản về cách tạo ứng dụng Android bằng Kotlin.

Kiến thức bạn cần có

• Tạo một ứng dụng Android cơ bản bằng Kotlin.
• Chạy ứng dụng Android trên trình mô phỏng hoặc trên thiết bị.
• Kiến thức cơ bản về LinearLayout.
• Tạo một ứng dụng đơn giản sử dụng LinearLayout và TextView.

Kiến thức bạn sẽ học được

• Cách sử dụng View và ViewGroup.
• Cách sắp xếp các khung hiển thị trong Activity bằng cách sử dụng LinearLayout.
• Cách sử dụng ScrollView để hiển thị nội dung có thể cuộn.
• Cách thay đổi chế độ hiển thị của View.
• Cách tạo và sử dụng tài nguyên chuỗi và phương diện.
• Cách tạo bố cục tuyến tính bằng Layout Editor (Trình chỉnh sửa bố cục) của Android Studio.

Bạn sẽ thực hiện

• Tạo ứng dụng AboutMe.
• Thêm một TextView vào bố cục để hiển thị tên của bạn.
• Thêm một ImageView.
• Thêm một ScrollView để hiển thị văn bản có thể cuộn.

Trong ứng dụng AboutMe, bạn có thể giới thiệu những thông tin thú vị về bản thân hoặc tuỳ chỉnh ứng dụng cho bạn bè, người thân hoặc thú cưng. Ứng dụng này hiển thị một tên, nút DONE (XONG), hình ảnh ngôi sao và một số văn bản có thể cuộn.

Trong nhiệm vụ này, bạn sẽ tạo dự án AboutMe trong Android Studio.

1. Mở Android Studio nếu ứng dụng này chưa mở.
2. Nếu một dự án đã mở trong Android Studio, hãy chọn File > New > New Project (Tệp > Mới > Dự án mới).
   
   
   
3. Nếu chưa mở dự án nào, hãy chọn + Start a new Android Studio project (+ Bắt đầu một dự án Android Studio mới) trong hộp thoại Chào mừng bạn đến với Android Studio.
   
   
   
4. Trong hộp thoại Create New Project (Tạo dự án mới), trong thẻ Phone and Tablet (Điện thoại và máy tính bảng), hãy chọn mẫu Empty Activity (Hoạt động trống). Nhấp vào Tiếp theo.
   
   
   
5. Trong hộp thoại Create New Project (Tạo dự án mới) tiếp theo, hãy đặt các thông số sau rồi nhấp vào Finish (Hoàn tất).
   

Thuộc tính	Giá trị
Tên ứng dụng	AboutMe
Tên công ty Android	com.android.example.AboutMe (hoặc miền riêng của bạn)
Lưu vị trí	Giữ nguyên vị trí mặc định hoặc thay đổi thành thư mục bạn muốn.
Ngôn ngữ	Kotlin
Cấp độ API tối thiểu	API 19: Android 4.4 (KitKat)
Dự án này sẽ hỗ trợ ứng dụng tức thì	Bỏ chọn hộp đánh dấu này.
Sử dụng cấu phần phần mềm AndroidX	Chọn hộp đánh dấu này.

Android Studio sẽ mất một chút thời gian để tạo các tệp dự án.

6. Chạy ứng dụng. Bạn sẽ thấy chuỗi "Hello World" trên màn hình trống.
   

Mẫu Empty Activity (Hoạt động trống) tạo một hoạt động trống duy nhất, Mainactivity.kt. Mẫu này cũng tạo một tệp bố cục có tên là activity_main.xml. Tệp bố cục có ConstraintLayout làm ViewGroup gốc và có một TextView duy nhất làm nội dung.

Trong nhiệm vụ này, bạn sẽ thay đổi ViewGroup gốc được tạo thành LinearLayout. Bạn cũng sắp xếp các phần tử trên giao diện người dùng theo chiều dọc.

Xem các nhóm

ViewGroup là một thành phần hiển thị có thể chứa các thành phần hiển thị con, là các thành phần hiển thị và nhóm thành phần hiển thị khác. Các khung hiển thị tạo nên một bố cục được sắp xếp dưới dạng một hệ phân cấp khung hiển thị với một nhóm khung hiển thị làm gốc.

Trong nhóm khung hiển thị LinearLayout, các phần tử trên giao diện người dùng được sắp xếp theo chiều ngang hoặc chiều dọc.

Thay đổi bố cục gốc để sử dụng nhóm khung hiển thị LinearLayout:

1. Chọn ngăn Project (Dự án) > Android. Trong thư mục app/res/layout , hãy mở tệp activity_main.xml.
2. Chọn thẻ Text (Văn bản) rồi thay đổi nhóm khung hiển thị gốc từ ConstraintLayout thành LinearLayout.
3. Xoá TextView. Trong phần tử LinearLayout, hãy thêm thuộc tính android:orientation rồi đặt thuộc tính đó thành vertical.

Trước:

<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>

Sau:

<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>

Layout Editor là một công cụ thiết kế trực quan trong Android Studio. Thay vì viết mã XML theo cách thủ công để tạo bố cục cho ứng dụng, bạn có thể dùng Layout Editor để kéo các phần tử trên giao diện người dùng vào trình chỉnh sửa thiết kế.

Để xem Layout Editor, hãy nhấp vào thẻ Design (Thiết kế). Ảnh chụp màn hình bên dưới cho thấy các phần của Layout Editor.

Trình chỉnh sửa thiết kế: Hiển thị hình ảnh đại diện cho bố cục màn hình của bạn ở chế độ xem thiết kế, chế độ xem bản vẽ hoặc cả hai. Trình chỉnh sửa thiết kế là phần chính của Layout Editor.

Thanh công cụ: Cung cấp các nút để điều chỉnh hình dáng bố cục trong trình chỉnh sửa thiết kế và thay đổi một số thuộc tính bố cục. Ví dụ: để thay đổi chế độ hiển thị bố cục trong trình chỉnh sửa thiết kế, hãy sử dụng trình đơn thả xuống Chọn bề mặt thiết kế :

• Sử dụng Design (Thiết kế) để xem trước bố cục trong thế giới thực.
• Sử dụng Bản vẽ để chỉ xem các đường viền của mỗi thành phần hiển thị.
• Sử dụng chế độ Thiết kế + Bản vẽ để xem cả hai màn hình cạnh nhau.

Bảng chế độ xem: Cung cấp danh sách các thành phần hiển thị và nhóm thành phần hiển thị mà bạn có thể kéo vào bố cục hoặc vào ngăn Cây thành phần.

Attributes (Thuộc tính): Hiển thị các thuộc tính cho khung hiển thị hoặc nhóm khung hiển thị hiện được chọn. Để chuyển đổi giữa danh sách đầy đủ các thuộc tính và các thuộc tính thường dùng, hãy sử dụng biểu tượng ở đầu ngăn.

Cây thành phần: Hiển thị hệ phân cấp bố cục dưới dạng một cây khung hiển thị. Component Tree (Cây thành phần) rất hữu ích khi bạn có các khung hiển thị nhỏ, bị ẩn hoặc chồng chéo mà bạn không thể chọn trong trình chỉnh sửa thiết kế.

Bước 1: Thêm một TextView

1. Mở tệp res/layout/activity_main.xml nếu tệp này chưa được mở.
2. Chuyển sang thẻ Text (Văn bản) rồi kiểm tra mã. Mã này có LinearLayout làm nhóm khung hiển thị gốc. (Nhóm thành phần hiển thị là những thành phần hiển thị chứa các thành phần hiển thị khác.)
   
   LinearLayout có các thuộc tính bắt buộc là layout_height, layout_width và orientation, theo mặc định là vertical.
3. Chuyển sang thẻ Thiết kế để mở Layout Editor.

Lưu ý: Thẻ Thiết kế và thẻ Văn bản cho thấy cùng một bố cục, chỉ khác nhau về cách hiển thị. Nội dung bạn chỉnh sửa trong một thẻ sẽ được phản ánh trong thẻ còn lại.

4. Kéo một khung hiển thị văn bản từ ngăn Palette (Bảng khung hiển thị) vào trình chỉnh sửa thiết kế.
   
   
   
5. Lưu ý ngăn Component Tree (Cây thành phần). Khung hiển thị văn bản mới được đặt làm phần tử con của nhóm khung hiển thị mẹ, tức là LinearLayout.
   
   
6. Mở ngăn Thuộc tính (nếu ngăn này chưa mở). (Để mở ngăn này, hãy nhấp đúp vào TextView vừa thêm trong trình chỉnh sửa thiết kế.)
7. Đặt các thuộc tính sau trong ngăn Thuộc tính:

Thuộc tính	Giá trị
Mã nhận dạng	name_text
văn bản	Đặt tên cho nhóm là tên của bạn. (Một trong các trường text (văn bản) cho thấy biểu tượng cờ lê để cho biết trường đó dành cho không gian tên tools. Vùng chứa tên không có biểu tượng cờ lê là dành cho không gian tên android – đây là trường văn bản mà bạn muốn.)
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Trung tâm

Bước 2: Tạo tài nguyên chuỗi

Trong Component Tree (Cây thành phần), bên cạnh TextView,, bạn sẽ thấy biểu tượng cảnh báo . Để xem văn bản cảnh báo, hãy nhấp vào biểu tượng hoặc di chuột lên biểu tượng đó, như trong ảnh chụp màn hình bên dưới.

Để giải quyết cảnh báo này, hãy tạo một tài nguyên chuỗi:

1. Trong ngăn Attributes (Thuộc tính), hãy nhấp vào biểu tượng ba dấu chấm bên cạnh thuộc tính text (văn bản) mà bạn đặt thành tên của bạn. Trình chỉnh sửa tài nguyên sẽ mở ra.
   
   
   
2. Trong hộp thoại Tài nguyên, hãy chọn Thêm tài nguyên mới > Giá trị chuỗi mới.
3. Trong hộp thoại New String Value Resource (Tài nguyên giá trị chuỗi mới), hãy đặt trường Resource name (Tên tài nguyên) thành name. Đặt trường Resource value (Giá trị tài nguyên) thành tên của riêng bạn. Nhấp vào OK. Lưu ý rằng cảnh báo đã biến mất.
   
   
   
4. Mở tệp res/values/strings.xml và tìm tài nguyên chuỗi mới tạo có tên là name.

<string name="name">Aleks Haecky</string>

Bước 3: Tạo một tài nguyên phương diện

Bạn vừa thêm một tài nguyên bằng trình chỉnh sửa tài nguyên. Bạn cũng có thể trích xuất tài nguyên trong trình chỉnh sửa mã XML để tạo tài nguyên mới:

1. Trong tệp activity_main.xml, hãy chuyển sang thẻ Text (Văn bản).
2. Trên dòng textSize, hãy nhấp vào số (20sp) rồi nhập Alt+Enter (Option+Enter trên máy Mac). Chọn Trích xuất tài nguyên kích thước trong trình đơn bật lên.
3. Trong hộp thoại Extract Resource (Trích xuất tài nguyên), hãy nhập text_size vào trường Resource name (Tên tài nguyên). Nhấp vào OK.
   
   
   
4. Mở tệp res/values/dimens.xml để xem đoạn mã được tạo sau đây:

<dimen name="text_size">20sp</dimen>

Lưu ý: Nếu tệp dimens.xml chưa có trong thư mục res/values, Android Studio sẽ tạo tệp này.

5. Mở tệp MainActivity.kt và tìm mã sau ở cuối hàm onCreate():

setContentView(R.layout.activity_main)

Hàm setContentView() kết nối tệp bố cục với Activity. Tệp tài nguyên bố cục được chỉ định là R.layout.activity_main:

• R là một tham chiếu đến tài nguyên. Đây là một lớp được tạo tự động, có định nghĩa cho tất cả tài nguyên trong ứng dụng của bạn.
• layout.activity_main cho biết tài nguyên là một bố cục có tên là activity_main.

6. Chạy ứng dụng. Một TextView có tên của bạn sẽ xuất hiện.
   
   

Khi bạn nhìn vào màn hình ứng dụng, tên của bạn sẽ được đẩy lên đầu màn hình, vì vậy, giờ đây bạn sẽ thêm khoảng đệm và lề.

Khoảng đệm so với lề

Khoảng đệm là khoảng trống bên trong ranh giới của một khung hiển thị hoặc phần tử. Đó là khoảng cách giữa các cạnh của khung hiển thị và nội dung của khung hiển thị, như minh hoạ trong hình bên dưới.

Kích thước của một thành phần hiển thị bao gồm cả khoảng đệm. Sau đây là các thuộc tính khoảng đệm thường dùng:

• android:padding chỉ định khoảng đệm cho cả 4 cạnh của khung hiển thị.
• android:paddingTop chỉ định khoảng đệm cho cạnh trên.
• android:paddingBottom chỉ định khoảng đệm cho cạnh dưới.
• android:paddingStart chỉ định khoảng đệm cho cạnh "bắt đầu" của khung hiển thị.
• android:paddingEnd chỉ định khoảng đệm cho cạnh "kết thúc" của khung hiển thị.
• android:paddingLeft chỉ định khoảng đệm cho cạnh trái.
• android:paddingRight chỉ định khoảng đệm cho cạnh bên phải.

Lề là khoảng trống được thêm vào bên ngoài đường viền của khung hiển thị. Đây là khoảng trống từ cạnh của khung hiển thị đến khung hiển thị mẹ, như minh hoạ trong hình trên. Sau đây là các thuộc tính lề thường dùng:

• android:layout_margin chỉ định một lề cho cả 4 cạnh của khung hiển thị.
• android:layout_marginBottom chỉ định khoảng trống bên ngoài phía dưới cùng của khung hiển thị này.
• android:layout_marginStart chỉ định khoảng trống bên ngoài phía "bắt đầu" của khung hiển thị này.
• android:layout_marginEnd chỉ định khoảng trống ở phía cuối của khung hiển thị này.
• android:layout_marginLeft chỉ định khoảng trống ở bên trái của khung hiển thị này.
• android:layout_marginRight chỉ định khoảng trống ở bên phải khung hiển thị này.

Phải/trái so với bắt đầu/kết thúc

"Phải" và "trái" luôn chỉ phía bên phải và bên trái của màn hình, cho dù ứng dụng của bạn sử dụng luồng từ trái sang phải (LTR) hay luồng từ phải sang trái (RTL). "Bắt đầu" và "kết thúc" luôn đề cập đến điểm bắt đầu và kết thúc của quy trình:

• Đối với luồng LTR, start = left và end=right.
• Đối với luồng RTL, start=right và end=left.

Nếu ứng dụng của bạn nhắm đến API cấp 17 (Android 4.2) trở lên:

• Sử dụng "start" và "end" thay vì "left" và "right".
• Ví dụ: android:layout_marginLeft sẽ trở thành android:layout_marginStart để hỗ trợ các ngôn ngữ từ phải sang trái.

Nếu bạn muốn ứng dụng của mình hoạt động với các phiên bản thấp hơn Android 4.2; tức là nếu targetSdkVersion hoặc minSdkVersion của ứng dụng là 16 trở xuống:

• Thêm "start" ("bắt đầu") và "end" ("kết thúc") ngoài "left" ("trái") và "right" ("phải").
• Ví dụ: sử dụng cả android:paddingLeft và android:paddingStart.

Bước 1: Thêm khoảng đệm

Để tạo khoảng trống giữa tên của bạn và cạnh trên của chế độ xem văn bản name, hãy thêm khoảng đệm trên cùng.

1. Mở tệp activity_main.xml trong thẻ Design (Thiết kế).
2. Trong Component Tree (Cây thành phần) hoặc trong trình chỉnh sửa thiết kế, hãy nhấp vào khung hiển thị văn bản để mở ngăn Attributes (Thuộc tính).
3. Ở đầu ngăn Thuộc tính, hãy nhấp vào biểu tượng mũi tên kép để xem tất cả thuộc tính có sẵn.
4. Tìm Khoảng đệm, mở rộng khoảng đệm rồi nhấp vào biểu tượng ba dấu chấm ... bên cạnh thuộc tính trên cùng. Hộp thoại Resources (Tài nguyên) sẽ xuất hiện.
5. Trong hộp thoại Tài nguyên, hãy chọn Thêm tài nguyên mới > Giá trị kích thước mới.
6. Trong hộp thoại New Dimension Value Resource (Tài nguyên giá trị phương diện mới), hãy tạo một tài nguyên dimen mới có tên là small_padding với giá trị là 8dp.
   
   Chữ viết tắt dp là viết tắt của độc lập với mật độ. Nếu bạn muốn một phần tử trên giao diện người dùng có cùng kích thước trên các màn hình có mật độ khác nhau, hãy sử dụng dp làm đơn vị đo lường. Tuy nhiên, khi chỉ định kích thước văn bản, hãy luôn sử dụng sp (pixel có thể mở rộng).
7. Nhấp vào OK.

Bước 2: Thêm lề

Để di chuyển chế độ xem văn bản name ra khỏi cạnh của phần tử mẹ, hãy thêm một lề trên.

1. Trong ngăn Attributes (Thuộc tính), hãy tìm "margin" để tìm Layout_Margin.
2. Mở rộng Layout_Margin rồi nhấp vào biểu tượng dấu ba chấm ... bên cạnh thuộc tính top.
3. Tạo một tài nguyên dimen mới có tên là layout_margin và đặt tài nguyên đó thành 16dp. Nhấp vào Ok.

Bước 3: Thêm phông chữ

Để khung hiển thị văn bản name trông đẹp hơn, hãy sử dụng phông chữ Roboto của Android. Phông chữ này nằm trong thư viện hỗ trợ và bạn thêm phông chữ này dưới dạng tài nguyên.

1. Trong ngăn Attributes (Thuộc tính), hãy tìm "fontFamily".
2. Trong trường fontFamily, hãy nhấp vào mũi tên thả xuống, di chuyển xuống cuối danh sách rồi chọn More Fonts (Phông chữ khác).
3. Trong hộp thoại Tài nguyên, hãy tìm rob rồi chọn Roboto. Trong danh sách Preview (Xem trước), hãy chọn Regular (Thông thường).
4. Chọn nút chọn Add font to project (Thêm phông chữ vào dự án).
5. Nhấp vào OK.
   
   

Thư mục res hiện có một thư mục font chứa tệp phông chữ roboto.ttf. Thuộc tính @font/roboto được thêm vào TextView của bạn.

Bước 4: Trích xuất kiểu

Kiểu là một tập hợp các thuộc tính chỉ định giao diện và định dạng cho một khung hiển thị. Một kiểu có thể bao gồm màu phông chữ, kích thước phông chữ, màu nền, khoảng đệm, lề và các thuộc tính chung khác.

Bạn có thể trích xuất định dạng của chế độ xem văn bản name thành một kiểu và sử dụng lại kiểu đó cho bất kỳ số lượng chế độ xem nào trong ứng dụng của mình. Việc sử dụng lại một kiểu sẽ giúp ứng dụng của bạn có giao diện nhất quán khi bạn có nhiều chế độ xem. Việc sử dụng kiểu cũng giúp bạn lưu giữ các thuộc tính chung này ở một vị trí.

1. Nhấp chuột phải vào TextView trong Component Tree (Cây thành phần) rồi chọn Refactor > Extract Style (Tái cấu trúc > Trích xuất kiểu).
2. Trong hộp thoại Extract Android Style (Trích xuất kiểu Android), hãy bỏ chọn hộp layout_width, hộp layout_height và hộp textAlignment. Các thuộc tính này thường khác nhau đối với mỗi khung hiển thị, vì vậy bạn không muốn chúng thuộc về kiểu.
3. Trong trường Tên kiểu, hãy nhập NameStyle.
4. Nhấp vào OK.
   
   
   
5. Kiểu cũng là một tài nguyên, vì vậy, kiểu được lưu trong thư mục res/values/ trong tệp styles.xml. Mở styles.xml và kiểm tra mã được tạo cho kiểu NameStyle. Mã này sẽ có dạng tương tự như sau:

<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>

6. Mở activity_main.xml rồi chuyển sang thẻ Text (Văn bản). Xin lưu ý rằng kiểu được tạo đang được dùng trong khung hiển thị văn bản dưới dạng style="@style/NameStyle".
7. Chạy ứng dụng và nhận thấy những thay đổi về phông chữ và khoảng đệm xung quanh TextView.

Hầu hết các ứng dụng Android trong thế giới thực đều bao gồm sự kết hợp của các khung hiển thị để hiển thị hình ảnh, hiển thị văn bản và chấp nhận dữ liệu đầu vào từ người dùng dưới dạng văn bản hoặc sự kiện nhấp. Trong nhiệm vụ này, bạn sẽ thêm một khung hiển thị để hiển thị hình ảnh.

ImageView là một khung hiển thị để hiển thị tài nguyên hình ảnh. Ví dụ: ImageView có thể hiển thị các tài nguyên Bitmap như tệp PNG, JPG, GIF hoặc WebP, hoặc có thể hiển thị tài nguyên Drawable như bản vẽ vectơ.

Android có các tài nguyên hình ảnh đi kèm, chẳng hạn như biểu tượng, hình đại diện và hình nền mẫu. Bạn sẽ thêm một trong những tài nguyên này vào ứng dụng của mình.

1. Hiển thị tệp bố cục Trong thẻ Design (Thiết kế), hãy kéo một ImageView từ ngăn Palette (Bảng khung hiển thị) xuống bên dưới name_text trong Component Tree (Cây thành phần). Hộp thoại Tài nguyên sẽ mở ra.
2. Chọn Drawable nếu bạn chưa chọn.
3. Mở rộng android, di chuyển rồi chọn btn_star_big_on. Đó là ngôi sao màu vàng .
4. Nhấp vào OK.
   
   
   
   Hình ảnh ngôi sao sẽ được thêm vào bố cục bên dưới tên của bạn. Vì bạn có một LinearLayout dọc, nên các khung hiển thị mà bạn thêm sẽ được căn chỉnh theo chiều dọc.
   
   
5. Chuyển sang thẻ Text (Văn bản) rồi xem mã ImageView đã tạo. Chiều rộng được đặt thành match_parent, nên thành phần hiển thị sẽ rộng bằng phần tử mẹ. Chiều cao được đặt thành wrap_content, nên khung hiển thị sẽ cao bằng nội dung của nó. ImageView tham chiếu đến đối tượng có thể vẽ 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" />

6. Để đổi tên id của ImageView, hãy nhấp chuột phải vào "@+id/imageView" rồi chọn Refactor > Rename (Tái cấu trúc > Đổi tên).
7. Trong hộp thoại Rename (Đổi tên), hãy đặt id thành @+id/star_image. Nhấp vào Refactor (Tái cấu trúc).
   
   
   

Lưu ý: Refactor > Rename (Tái cấu trúc > Đổi tên) sẽ đổi tên tất cả các lần xuất hiện của tên thuộc tính hoặc tên biến trong dự án ứng dụng của bạn.

8. Trong thẻ Design (Thiết kế), trong Component Tree (Cây thành phần), hãy nhấp vào biểu tượng cảnh báo bên cạnh star_image. Cảnh báo này là do thiếu contentDescription. Trình đọc màn hình sử dụng thuộc tính này để mô tả hình ảnh cho người dùng.
9. Trong ngăn Attributes (Thuộc tính), hãy nhấp vào biểu tượng ba dấu chấm ... bên cạnh thuộc tính contentDescription. Hộp thoại Resources (Tài nguyên) sẽ mở ra.
10. Trong hộp thoại Tài nguyên, hãy chọn Thêm tài nguyên mới > Giá trị chuỗi mới. Đặt trường Tên tài nguyên thành yellow_star và đặt trường Giá trị tài nguyên thành Yellow star. Nhấp vào OK.
11. Sử dụng ngăn Attributes (Thuộc tính) để thêm lề trên là 16dp (tức là @dimen/layout_margin) vào yellow_star, để tách hình ảnh ngôi sao khỏi tên.
12. Chạy ứng dụng. Tên của bạn và hình ảnh ngôi sao sẽ xuất hiện trong giao diện người dùng của ứng dụng.
    
    

ScrollView là một nhóm khung hiển thị cho phép cuộn hệ phân cấp khung hiển thị nằm trong đó. Khung hiển thị có thể cuộn chỉ có thể chứa một khung hiển thị khác (hay nhóm khung hiển thị) dưới dạng một khung hiển thị con. Thành phần hiển thị con thường là một LinearLayout. Bên trong LinearLayout, bạn có thể thêm các khung hiển thị khác.

Hình ảnh sau đây minh hoạ một ví dụ về ScrollView chứa LinearLayout chứa một số khung hiển thị khác.

Trong nhiệm vụ này, bạn sẽ thêm một ScrollView cho phép người dùng cuộn một khung hiển thị văn bản hiển thị tiểu sử ngắn. Nếu chỉ tạo một khung hiển thị có thể cuộn, bạn có thể đặt khung hiển thị đó trực tiếp vào ScrollView. Đây là việc bạn cần làm trong tác vụ này.

Bước 1: Thêm một ScrollView chứa một TextView

1. Mở tệp activity_main.xml trong thẻ Design (Thiết kế).
2. Kéo một khung hiển thị có thể cuộn vào bố cục bằng cách kéo khung hiển thị đó vào trình chỉnh sửa thiết kế hoặc vào Component Tree (Cây thành phần). Đặt khung hiển thị có thể cuộn bên dưới hình ảnh ngôi sao.
3. Chuyển sang thẻ Text (Văn bản) để kiểm tra mã đã tạo.

// 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>

Chiều cao và chiều rộng của ScrollView khớp với phần tử mẹ. Sau khi khung hiển thị văn bản name_text và khung hiển thị hình ảnh star_image đã sử dụng đủ không gian dọc để hiển thị nội dung, hệ thống Android sẽ bố trí ScrollView để lấp đầy phần không gian còn lại trên màn hình.

4. Thêm một id vào ScrollView và gọi bio_scroll. Việc thêm một id vào ScrollView sẽ cung cấp cho hệ thống Android một đối tượng xử lý cho khung hiển thị để khi người dùng xoay thiết bị, hệ thống sẽ giữ nguyên vị trí cuộn.
5. Bên trong ScrollView, hãy xoá mã LinearLayout vì ứng dụng của bạn sẽ chỉ có một khung hiển thị có thể cuộn – một TextView.
6. Kéo một TextView từ Palette (Bảng chế độ xem) sang Component Tree (Cây thành phần). Đặt TextView bên dưới bio_scroll, dưới dạng một phần tử con của bio_scroll.
   
   
7. Đặt id của khung hiển thị văn bản mới thành bio_text.
8. Tiếp theo, bạn sẽ thêm một kiểu cho thành phần hiển thị văn bản mới. Trong ngăn Thuộc tính, hãy nhấp vào biểu tượng ba dấu chấm ... bên cạnh thuộc tính kiểu để mở hộp thoại Tài nguyên.
9. Trong hộp thoại Resources (Tài nguyên), hãy tìm NameStyle. Chọn NameStyle trong danh sách rồi nhấp vào OK. Khung hiển thị văn bản hiện dùng kiểu NameStyle mà bạn đã tạo trong một nhiệm vụ trước đó.
   
   

Bước 2: Thêm tiểu sử của bạn vào TextView mới

1. Mở strings.xml, tạo một tài nguyên chuỗi có tên là bio rồi nhập một đoạn văn bản dài về bản thân hoặc về bất cứ điều gì bạn muốn.
   

Lưu ý:

• Sử dụng \n để biểu thị dấu ngắt dòng.
• Nếu dùng dấu nháy đơn, bạn phải thoát dấu nháy đơn bằng dấu gạch chéo ngược. Ví dụ:
  "You mustn\'t forget the backslash."
• Để in đậm văn bản, hãy dùng <b>...</b> và để in nghiêng văn bản, hãy dùng <i>...</i>. Ví dụ:
  "This text is <b>bold</b> and this text is <i>italics</i>."

Sau đây là một ví dụ về tiểu sử:

<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>

2. Trong khung hiển thị văn bản bio_text, hãy đặt giá trị của thuộc tính text thành tài nguyên chuỗi bio có chứa tiểu sử của bạn.
3. Để giúp văn bản bio_text dễ đọc hơn, hãy thêm khoảng cách giữa các dòng. Sử dụng thuộc tính lineSpacingMultiplier và đặt giá trị 1.2 cho thuộc tính đó.
   
   
   
   Lưu ý cách văn bản bio chạy dọc theo các cạnh bên của màn hình trong trình chỉnh sửa thiết kế. Để khắc phục vấn đề này, bạn có thể thêm các thuộc tính khoảng đệm bên trái, khoảng đệm bắt đầu, khoảng đệm bên phải và khoảng đệm kết thúc vào LinearLayout gốc. Bạn không cần thêm khoảng đệm dưới cùng, vì văn bản chạy ngay lên đến tín hiệu dưới cùng cho người dùng biết rằng văn bản có thể cuộn.
4. Thêm khoảng đệm bắt đầu và kết thúc là 16dp vào LinearLayout gốc.
5. Chuyển sang thẻ Text (Văn bản), trích xuất tài nguyên phương diện và đặt tên là layout_padding.
   
   

Lưu ý: Kể từ cấp độ API 17, hãy sử dụng "start" và "end" thay vì "left" và "right" cho khoảng đệm và lề để điều chỉnh ứng dụng cho các ngôn ngữ RTL như tiếng Ả Rập.

6. Chạy ứng dụng rồi cuộn qua văn bản.
   
   

Xin chúc mừng!

Bạn đã tạo một ứng dụng hoàn chỉnh từ đầu và ứng dụng đó trông rất đẹp!

Dự án Android Studio: AboutMe

Lưu ý: Tất cả thử thách lập trình đều không bắt buộc.

Trong ScrollView, hãy thêm ImageView phía trên TextView. Khi bạn chạy ứng dụng, hình ảnh này (không giống như ngôi sao) sẽ cuộn ra khỏi chế độ xem khi văn bản cuộn lên.

Lưu ý: Khung hiển thị có thể cuộn chỉ có thể có một khung hiển thị con. Bạn phải gói 2 khung hiển thị có thể cuộn (ImageView và TextView) vào một LinearLayout.

• ViewGroup là một khung hiển thị có thể chứa các khung hiển thị khác. LinearLayout và ScrollView là các nhóm thành phần hiển thị.
• LinearLayout là một nhóm khung hiển thị sắp xếp các khung hiển thị con theo chiều ngang hoặc chiều dọc.
• Sử dụng ScrollView khi bạn cần hiển thị nội dung trên màn hình, chẳng hạn như văn bản dài hoặc một bộ sưu tập hình ảnh. Khung hiển thị có thể cuộn chỉ có thể chứa một khung hiển thị con. Nếu bạn muốn cuộn nhiều khung hiển thị, hãy thêm một ViewGroup (chẳng hạn như LinearLayout) vào ScrollView, rồi đặt các khung hiển thị cần cuộn vào bên trong ViewGroup đó.
• Layout Editor là một trình chỉnh sửa thiết kế trực quan trong Android Studio. Bạn có thể sử dụng Layout Editor để tạo bố cục cho ứng dụng bằng cách kéo các phần tử trên giao diện người dùng vào bố cục.
• Kiểu là một tập hợp các thuộc tính chỉ định giao diện của một khung hiển thị. Ví dụ: một kiểu có thể chỉ định màu phông chữ, kích thước phông chữ, màu nền, khoảng đệm và lề.
• Bạn có thể trích xuất và thu thập tất cả định dạng của một khung hiển thị vào một kiểu. Để ứng dụng của bạn có giao diện nhất quán, hãy dùng lại kiểu này cho các thành phần hiển thị khác.

Khoá học của Udacity:

• Phát triển ứng dụng Android bằng Kotlin

Tài liệu dành cho nhà phát triển Android:

• Bố cục
• ViewGroup
• View
• Bố cục tuyến tính
• ScrollView
• Hỗ trợ nhiều mật độ pixel (dp)
• Tạo giao diện người dùng bằng Layout Editor
• Tài liệu về Android Studio
• Kiểu và giao diện

Phần này liệt kê các bài tập về nhà cho học viên của lớp học lập trình này trong phạm vi khoá học có người hướng dẫn. Người hướng dẫn phải thực hiện các việc sau đây:

• Giao bài tập về nhà nếu cần.
• Trao đổi với học viên về cách nộp bài tập về nhà.
• Chấm điểm bài tập về nhà.

Người hướng dẫn có thể sử dụng các đề xuất này ít hoặc nhiều tuỳ ý và nên giao cho học viên bất kỳ bài tập về nhà nào khác mà họ cảm thấy phù hợp.

Nếu bạn đang tự học các lớp học lập trình, hãy sử dụng những bài tập về nhà này để kiểm tra kiến thức của mình.

Trả lời các câu hỏi sau

Câu hỏi 1

Mục nào sau đây là một nhóm khung hiển thị?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Câu hỏi 2

Hệ phân cấp khung hiển thị đã nêu nào sau đây là không hợp lệ?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

Câu hỏi 3

Kiểu là các tài nguyên đã được xác định trong styles.xml. Khi sử dụng kiểu, bạn có thể xác định màu sắc, phông chữ, kích thước văn bản cùng nhiều đặc điểm khác của một chế độ xem. Đúng hay sai?

▢ Đúng

▢ Sai

Câu hỏi 4

ScrollView là một nhóm thành phần hiển thị có thể chứa số lượng bất kỳ thành phần hiển thị hoặc nhóm thành phần hiển thị nào dưới dạng thành phần con. Đúng hay sai?

▢ Đúng

▢ Sai

Câu hỏi 5

Bạn có thể dùng thành phần nào trên giao diện người dùng để hiển thị hình ảnh trong ứng dụng?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Bắt đầu bài học tiếp theo: 2.2: Thêm hoạt động tương tác của người dùng

Để biết đường liên kết đến các lớp học lập trình khác trong khoá học này, hãy xem trang đích của lớp học lập trình Kiến thức cơ bản về cách tạo ứng dụng Android bằng Kotlin.