Android Kotlin Fundamentals 02.1: Bố cục tuyến tính bằng Layout Editor

Lớp học lập trình này nằm trong khóa học về Khái niệm cơ bản về Android Kotlin. Bạn sẽ nhận được nhiều giá trị nhất từ khóa học này nếu bạn làm việc qua các lớp học lập trình theo trình tự. Tất cả các lớp học lập trình trong khóa học đều có trên trang đích của các lớp học lập trình cơ bản về Android Kotlin.

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

• Tạo một ứng dụng Android cơ bản trong Kotlin.
• Chạy ứng dụng Android trên trình mô phỏng hoặc 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 làm việc với View và ViewGroup.
• Cách sắp xếp các chế độ xem trong Activity, 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 cũng như phương diện.
• Cách tạo bố cục tuyến tính bằng Layout Editor của Android Studio.

Bạn sẽ thực hiện

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

Trong ứng dụng Giới thiệu, bạn có thể giới thiệu thông tin thú vị về bản thân hoặc bạn có thể tùy chỉnh ứng dụng cho bạn bè, thành viên gia đình hoặc thú cưng. Ứng dụng này hiển thị tên, nút XONG, hình ảnh dấu sao và một số văn bản có thể cuộn.

Trong nhiệm vụ này, bạn tạo dự án Giới thiệu về Android Studio.

1. Mở Android Studio nếu ứng dụng này chưa mở.
2. Nếu dự án đã mở trong Android Studio, hãy chọn Tệp > Mới > Dự án mới.
   
   
   
3. Nếu bạn chưa mở một dự án, hãy chọn + Bắt đầu một dự án mới trong Android Studio trong hộp thoại Chào mừng bạn đến với Android Studio.
   
   
   
4. Trong hộp thoại Tạo dự án mới, trong thẻ Điện thoại và máy tính bảng, hãy chọn mẫu 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 đó và nhấp vào Finish (Hoàn tất).
   

Thuộc tính	Giá trị
Tên ứng dụng	Giới thiệu về tôi
Tên công ty trên Android	com.android.example.AboutMe (hoặc miền của riêng bạn)
Lưu vị trí	Rời khỏi vị trí mặc định hoặc thay đổi vị trí này thành thư mục bạn muốn sử dụng.
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ì	Xóa 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 chút thời gian để tạo các tệp dự án.

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

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

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

Xem nhóm

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

Trong nhóm chế độ xem LinearLayout, các phần tử 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 để bố cục sử dụng nhóm chế độ xem LinearLayout:

1. Chọn ngăn Dự án > Android. Trong thư mục app/res/layout , hãy mở tệp activity_main.xml.
2. Chọn thẻ Văn bản rồi thay đổi nhóm chế độ xem gốc từ ConstraintLayout thành LinearLayout.
3. Hãy xóa TextView. Trong phần tử LinearLayout, hãy thêm thuộc tính android:orientation và đặ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à công cụ thiết kế hình ảnh bên trong Android Studio. Thay vì viết mã XML theo cách thủ công để tạo bố cục của ứng dụng, bạn có thể sử dụng Layout Editor để kéo các thành phần 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ẻ 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ị bố cục hình ảnh của bố cục màn hình trong chế độ xem thiết kế, chế độ xem bản thiết kế 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 để định cấu hình giao diện của 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 cách hiển thị bố cục trong trình chỉnh sửa thiết kế, hãy dùng trình đơn thả xuống Chọn giao diện thiết kế :

• Sử dụng Thiết kế để xem trước bố cục trong thực tế.
• Sử dụng Blueprint để chỉ xem các đường viền cho mỗi chế độ xem.
• Hãy dùng Thiết kế + Bản thiết kế để xem cả hai màn hình cạnh nhau.

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

Thuộc tính: Hiển thị các thuộc tính cho chế độ xem hoặc nhóm chế độ xem hiện được chọn. Để chuyển đổi giữa danh sách đầy đủ các thuộc tính và 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 cây chế độ xem. Cây thành phần hữu ích khi bạn có các chế độ xem nhỏ, ẩ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 Chế độ xem văn bản

1. Mở tệp res/layout/activity_main.xml nếu tệp chưa được mở.
2. Chuyển sang thẻ Văn bản và kiểm tra mã đó. Mã này có LinearLayout là nhóm chế độ xem gốc. (Nhóm chế độ xem là chế độ xem có chứa các chế độ xem khác.)
   
   LinearLayout có các thuộc tính bắt buộc 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 hiển thị cùng một bố cục, theo cách khác nhau. Những thay đổi bạn thực hiện trong một tab sẽ được phản ánh trong tab khác.

4. Kéo chế độ xem văn bản từ ngăn Palette vào trình chỉnh sửa thiết kế.
   
   
   
5. Lưu ý ngăn Cây thành phần. Chế độ xem văn bản mới được đặt làm phần tử con của nhóm chế độ xem gốc, tức là LinearLayout.
   
   
6. Mở ngăn Thuộc tính nếu chưa mở. (Để mở ngăn, hãy nhấp đúp vào TextView mới được thêm vào 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ị
giấy tờ tùy thân	name_text
văn bản	Đặt tên của bạn. (Một trong các trường văn bản hiển thị biểu tượng cờ lê cho biết đó là vùng chứa tên tools. Nội dung không có cờ lê là dành cho vùng chứa tên android—đây là trường text mà bạn muốn.)
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textText	Trung tâm

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

Trong 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 trỏ tới văn bản, như minh họa 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 Thuộc tính, nhấp vào ba dấu chấm bên cạnh thuộc tính văn bản mà bạn đặt cho tên của mình. Trình chỉnh sửa tài nguyên sẽ mở ra.
   
   
   
2. Trong hộp thoại Tài nguyên, chọn Thêm tài nguyên mới > Giá trị chuỗi mới.
3. Trong hộp thoại Tài nguyên chuỗi giá trị mới, hãy đặt trường Tên tài nguyên thành name. Đặt trường Giá trị tài nguyên thành tên của riêng bạn. Nhấp vào OK. Xin lưu ý rằng cảnh báo này đã biến mất.
   
   
   
4. Mở tệp res/values/strings.xml và tìm tài nguyên chuỗi mới được tạo có tên là name.

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

Bước 3: Tạo tài nguyên thứ nguyên

Bạn vừa thêm một tài nguyên bằng cách sử dụ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ẻ 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 thứ nguyên từ trình đơn bật lên.
3. Trong hộp thoại Trích xuất tài nguyên, hãy nhập text_size vào trường Tên tài nguyên. Nhấp vào OK.
   
   
   
4. Mở tệp res/values/dimens.xml để xem mã được tạo sau đây:

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

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

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à tham chiếu đến tài nguyên. Đây là một lớp được tạo tự động với cá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 rằng tài nguyên là một bố cục có tên activity_main.

6. Chạy ứng dụng của bạn. Một TextView có tên của bạn được hiển thị.
   
   

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

Khoảng đệm so với lợi nhuận

Khoảng đệm là không gian bên trong ranh giới của một chế độ xem hoặc phần tử. Đó là không gian giữa các cạnh của chế độ xem với nội dung của chế độ xem, như được minh họa trong hình bên dưới.

Kích thước của chế độ xem bao gồm 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ả bốn cạnh của chế độ xem.
• 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 "Start" cạnh của chế độ xem.
• android:paddingEnd chỉ định khoảng đệm cho cạnh "ending" cạnh của chế độ xem.
• android:paddingLeft chỉ định khoảng đệm cho cạnh bên trái.
• android:paddingRight chỉ định khoảng đệm cho cạnh phải.

Ranh giới là không gian được thêm ra ngoài đường biên của chế độ xem. Đó là khoảng cách từ cạnh của chế độ xem này đến chế độ xem mẹ, như minh họa trong hình trên. Sau đây là các thuộc tính lề thường dùng:

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

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

"Right" and "left" luôn đề cập đến bên phải và bên trái 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). "Start" và "end" luôn đề cập đến điểm bắt đầu và kết thúc của luồng:

• Đối với luồng LTR, hãy bắt đầu = left và end=right.
• Đối với quy trình RTL, hãy bắt đầu=phải và kết thúc=trái.

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ữ RTL.

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; nghĩa là, nếu targetSdkVersion hoặc minSdkVersion của ứng dụng là 16 trở xuống:

• Thêm "start" và end" ngoài "left" và "right".
• Ví dụ: sử dụng cả android:paddingLeft và android:paddingStart.

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

Để đặt 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ẻ Thiết kế.
2. Trong Cây thành phần hoặc trong trình chỉnh sửa thiết kế, hãy nhấp vào chế độ xem văn bản để mở ngăn 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 kiếm Khoảng đệm, mở rộng và 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 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 và gt; giá trị dimen mới.
6. Trong hộp thoại 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ị 8dp.
   
   Từ viết tắt dp là viết tắt của không phụ thuộc vào mật độ. Nếu bạn muốn một thành phần trên giao diện người dùng trông giống nhau trên các màn hình có nhiều mật độ, 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, 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 lề trên.

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

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

Để giao diện văn bản name trông đẹp hơn, hãy sử dụng phông chữ Android Roboto. Phông chữ này thuộc thư viện hỗ trợ và bạn thêm phông chữ đó làm tài nguyên.

1. Trong ngăn 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 kiếm rob và chọn Roboto. Trong danh sách Xem trước, hãy chọn Thông thường.
4. Chọn nút chọn 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 chế độ xem. 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 phổ biến khác.

Bạn có thể trích xuất định dạng Chế độ xem văn bản của name thành một kiểu và sử dụng lại kiểu đó cho nhiều chế độ xem trong ứng dụng của bạn. Việc sử dụng lại một kiểu sẽ giúp ứng dụng 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 cho phép bạn giữ lại các thuộc tính phổ biến này ở một vị trí.

1. Nhấp chuột phải vào TextView trong Cây thành phần và chọn Tái cấu trúc > Trích xuất kiểu.
2. Trong hộp thoại Trích xuất kiểu Android, hãy xóa hộp đánh dấu layout_width, hộp đánh dấu layout_height và hộp đánh dấu textAlignment. Những thuộc tính này thường khác nhau đối với từng chế độ xem, vì vậy, bạn không muốn chúng trở thành một phần của 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 vào thư mục res/values/ trong một tệp styles.xml. Mở styles.xml và kiểm tra mã được tạo cho kiểu NameStyle, sẽ trông giống 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 và chuyển sang thẻ Văn bản. Lưu ý rằng kiểu được tạo đang được sử dụng trong chế độ xem văn bản dưới dạng style="@style/NameStyle".
7. Chạy ứng dụng và nhận thấy các thay đổi trong phông chữ và khoảng đệm xung quanh TextView của bạn.

Hầu hết các ứng dụng Android thực tế đều bao gồm tổ hợp chế độ xem để 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 sự kiện văn bản hoặc sự kiện nhấp chuột. Trong việc cần làm này, bạn thêm một chế độ xem để hiển thị một hình ảnh.

ImageView là một chế độ xem để 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 tài nguyên Drawable như bản vẽ vectơ.

Có các tài nguyên hình ảnh đi kèm với Android, chẳng hạn như biểu tượng mẫu, hình đại diện và hình nền. Bạn sẽ thêm một trong các 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ẻ Thiết kế, sau đó kéo một Chế độ xem hình ảnh từ ngăn Bảng màu xuống bên dưới name_text trong Cây thành phần. Hộp thoại Tài nguyên sẽ mở ra.
2. Chọn Có thể vẽ nếu mục này chưa được 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 dấu sao được thêm vào bố cục bên dưới tên của bạn. Vì bạn có LinearLayout dọc, nên các chế độ xem bạn thêm sẽ được căn chỉnh theo chiều dọc.
   
   
5. Chuyển sang thẻ Văn bản và xem mã ImageView đã tạo. Chiều rộng được đặt thành match_parent, do đó, chế độ xem sẽ rộng bằng phần tử mẹ của chế độ xem đó. Chiều cao được đặt thành wrap_content nên chế độ xem này sẽ cao bằng nội dung của chế độ xem đó. ImageView tham chiếu btn_star_big_on có thể vẽ.

<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 Tái cấu trúc và gt; Đổi tên.
7. Trong hộp thoại Đổi tên, hãy đặt id thành @+id/star_image. Nhấp vào Tái cấu trúc.
   
   
   

Mẹo: Tái cấu trúc và gt; Đổi tên sẽ đổi tên tất cả các lần xuất hiện của một thuộc tính hoặc tên biến trong dự án ứng dụng của bạn.

8. Trong thẻ Thiết kế, trong 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 dành cho contentDescription bị thiếu. Trình đọc màn hình sử dụng để mô tả hình ảnh cho người dùng.
9. 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 contentDescription. Hộp thoại Tài nguyên sẽ mở ra.
10. Trong hộp thoại Tài nguyên, 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. Hãy dùng ngăn Thuộc tính để thêm lề trên cùng 16dp (tức là @dimen/layout_margin) vào yellow_star, nhằm phân tách hình ảnh dấu sao với tên.
12. Chạy ứng dụng của bạn. Tên và hình ảnh ngôi sao của bạn sẽ được hiển thị trong giao diện người dùng của ứng dụng.
    
    

ScrollView là một nhóm chế độ xem cho phép người dùng cuộn để xem hệ phân cấp chế độ xem. Chế độ xem cuộn chỉ có thể chứa một chế độ xem khác hoặc nhóm chế độ xem, với tư cách là con. Chế độ xem con thường là LinearLayout. Bên trong LinearLayout, bạn có thể thêm các chế độ xem khác.

Hình ảnh sau đây cho thấy một ví dụ về ScrollView chứa LinearLayout có chứa một số chế độ xem khác.

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

Bước 1: Thêm Chế độ xem cuộn có chứa Chế độ xem văn bản

1. Mở tệp activity_main.xml trong thẻ Thiết kế.
2. Kéo chế độ xem cuộn vào bố cục bằng cách kéo chế độ xem đó vào trình chỉnh sửa thiết kế hoặc vào Cây thành phần. Đặt chế độ xem di chuyển bên dưới hình ảnh dấu sao.
3. Chuyển sang thẻ Văn bản để kiểm tra mã được 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 chế độ xem văn bản name_text và chế độ xem 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 có sẵn trên màn hình.

4. Thêm id vào ScrollView và gọi là bio_scroll. Khi bạn thêm id vào ScrollView, hệ thống Android sẽ xử lý chế độ xem để 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 xóa mã LinearLayout vì ứng dụng của bạn sẽ chỉ có một chế độ xem có thể cuộn, tức là TextView.
6. Kéo một TextView từ Palette ( dẫn vào Cây thành phần). Đặt TextView trong bio_scroll, dưới dạng một phần tử con của bio_scroll.
   
   
7. Đặt id [mã_nhận_dạng] của chế độ xem văn bản mới thành bio_text.
8. Tiếp theo, bạn thêm kiểu cho chế độ xem văn bản mới. Trong ngăn Thuộc tính, nhấp vào biểu tượng ba dấu chấm ... bên cạnh thuộc tính style để mở hộp thoại Resources.
9. Trong hộp thoại Tài nguyên, hãy tìm kiếm NameStyle. Chọn NameStyle trong danh sách, rồi nhấp vào OK. Chế độ xem văn bản hiện sử dụng kiểu NameStyle mà bạn đã tạo trong một tác vụ trước đó.
   
   

Bước 2: Thêm tiểu sử vào Chế độ xem văn bản mới

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

Lưu ý:

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

Dưới đây là tiểu sử mẫu:

<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 chế độ xem 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 chứa tiểu sử của bạn.
3. Để 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ị cho thuộc tính này là 1.2.
   
   
   
   Hãy chú ý cách trong trình chỉnh sửa thiết kế, văn bản bio chạy hết cỡ đến các cạnh bên của màn hình. Để khắc phục vấn đề này, bạn có thể thêm các thuộc tính khoảng cách bên trái, đầu, phải và cuối 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 đến các 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 đầu và cuối của 16dp vào thư mục gốc LinearLayout.
5. Chuyển sang thẻ Văn bản, trích xuất tài nguyên thứ nguyên và đặt tên cho tài nguyên này 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 phù hợp với các ngôn ngữ từ phải sang trái như tiếng Ả Rập.

6. Chạy ứng dụng của bạn và di chuyể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à trông rất tuyệt!

Dự án Android Studio: Giới thiệu về tôi

Lưu ý: Bạn không bắt buộc phải lập trình.

Bên trong ScrollView, hãy thêm một ImageView ở trên TextView. Khi bạn chạy ứng dụng, hình ảnh này, không giống như dấu sao, cuộn ra khỏi chế độ xem khi văn bản cuộn lên.

Gợi ý: Chế độ xem cuộn chỉ được có một chế độ xem con. Bạn phải đưa hai chế độ xem có thể cuộn là ImageView và TextView vào LinearLayout.

• ViewGroup là chế độ xem có thể chứa các chế độ xem khác. LinearLayout và ScrollView là các nhóm chế độ xem.
• LinearLayout là một nhóm chế độ xem sắp xếp các chế độ xem 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 bộ sưu tập hình ảnh. Chế độ xem cuộn chỉ có thể chứa một chế độ xem con. Nếu bạn muốn di chuyển nhiều chế độ xem, hãy thêm một ViewGroup, chẳng hạn như LinearLayout vào ScrollView, và đặt các chế độ xem cần phải di chuyển bên trong ViewGroup đó.
• Layout Editor là trình chỉnh sửa thiết kế trực quan trong Android Studio. Bạn có thể dùng Layout Editor để xây dựng bố cục của ứng dụng bằng cách kéo các thành phần 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 cho một chế độ xem. Ví dụ: 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ả các định dạng của một chế độ xem thành một kiểu. Để ứng dụng có giao diện nhất quán, hãy sử dụng lại kiểu cho các chế độ xem khác.

Khóa học từ 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à có thể được giao cho học viên đang làm việc qua lớp học lập trình này trong khóa học do người hướng dẫn tổ chức. Người hướng dẫn có thể làm những việc sau:

• Giao bài tập về nhà nếu được yêu cầu.
• Trao đổi với học viên 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 những đề xuất này ít hay nhiều tùy ý. Do đó, họ có thể thoải mái giao 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ự mình làm việc qua lớp học lập trình này, hãy thoải mái sử dụng các bài tập về nhà này để kiểm tra kiến thức của bạn.

Trả lời những câu hỏi này

Câu hỏi 1

Nhóm nào sau đây là một nhóm chế độ xem?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Câu hỏi 2

Hệ phân cấp chế độ xem đã 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 chế độ xem có thể chứa số lượt xem hoặc nhóm chế độ xem bất kỳ dưới dạng nhóm con. Đúng hay sai?

▢ Đúng

▢ Sai

Câu hỏi 5

Có thể sử dụng phần tử giao diện người dùng nào để hiển thị hình ảnh trong ứng dụng của bạn?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Bắt đầu bài học tiếp theo: 2.2: Thêm khả nă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 khóa học này, hãy xem trang đích của các lớp học lập trình cơ bản về Android Kotlin.