Kiến thức cơ bản về Kotlin cho Android 01.2: Cấu trúc cơ bản của ứng dụng

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.

Giới thiệu

Đến thời điểm này, bạn đã thiết lập mọi thứ và Android Studio đã tạo nhiều mã cho bạn. Trước khi sửa đổi tất cả mã đó, bạn cần biết những gì mình vừa tạo và cách điều hướng các tệp nguồn của một ứng dụng Android.

Trong lớp học lập trình này, bạn sẽ tìm hiểu thêm về các thành phần chính của một ứng dụng Android và thêm tính tương tác đơn giản vào một ứng dụng có nút.

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

• Cách cài đặt và mở Android Studio.
• Cách tạo một dự án ứng dụng mới.
• Cách chạy ứng dụng trên trình mô phỏng hoặc thiết bị thực.

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

• Cách chỉnh sửa tệp bố cục của ứng dụng.
• Cách tạo một ứng dụng có hành vi tương tác.
• Rất nhiều thuật ngữ mới. Hãy xem Bảng thuật ngữ để biết nội dung giải thích dễ hiểu về các thuật ngữ và khái niệm.

Những việc bạn sẽ làm

• Khám phá tệp Kotlin MainActivity và tệp bố cục của hoạt động.
• Chỉnh sửa bố cục của hoạt động trong XML.
• Thêm một phần tử Button vào bố cục của hoạt động.
• Trích xuất các chuỗi được mã hoá cứng vào một tệp tài nguyên chuỗi.
• Triển khai các phương thức trình xử lý lượt nhấp để hiển thị thông báo trên màn hình khi người dùng nhấn vào một Button.

Trong lớp học lập trình này, bạn sẽ tạo một dự án ứng dụng mới có tên là DiceRoller và thêm tính năng tương tác cơ bản bằng một nút. Mỗi khi người dùng nhấp vào nút này, giá trị của văn bản hiển thị sẽ thay đổi. Ứng dụng DiceRoller hoàn chỉnh cho lớp học lập trình này sẽ có dạng như sau:

Trong lớp học lập trình gần đây nhất, bạn đã tìm hiểu về các phần chính của một dự án ứng dụng, bao gồm cả thư mục java và res. Trong nhiệm vụ này, bạn sẽ tập trung vào 2 tệp quan trọng nhất tạo nên ứng dụng của mình: Tệp MainActivity Kotlin và tệp activity_main.xml bố cục.

Bước 1: Kiểm tra MainActivity

MainActivity là một ví dụ về Activity. Activity là một lớp Android cốt lõi vẽ giao diện người dùng (UI) của ứng dụng Android và nhận các sự kiện đầu vào. Khi ứng dụng của bạn chạy, ứng dụng sẽ chạy hoạt động được chỉ định trong tệp AndroidManifest.xml.

Nhiều ngôn ngữ lập trình xác định một phương thức chính để khởi động chương trình. Các ứng dụng Android không có phương thức chính. Thay vào đó, tệp AndroidManifest.xml cho biết rằng MainActivity sẽ được chạy khi người dùng nhấn vào biểu tượng trình chạy của ứng dụng. Để khởi chạy một hoạt động, hệ điều hành Android sẽ dùng thông tin trong tệp kê khai để thiết lập môi trường cho ứng dụng và tạo MainActivity. Sau đó, MainActivity sẽ lần lượt thiết lập một số thành phần.

Mỗi hoạt động đều có một tệp bố cục được liên kết. Hoạt động và bố cục được kết nối bằng một quy trình gọi là tăng cường bố cục. Khi hoạt động bắt đầu, các khung hiển thị được xác định trong tệp bố cục XML sẽ được chuyển thành (hoặc "mở rộng" thành) các đối tượng khung hiển thị Kotlin trong bộ nhớ. Sau khi điều này xảy ra, hoạt động có thể vẽ các đối tượng này lên màn hình và cũng có thể sửa đổi chúng một cách linh động.

1. Trong Android Studio, hãy chọn File > New > New Project (Tệp > Mới > Dự án mới) để tạo một dự án mới. Sử dụng Empty activity (Hoạt động trống) rồi nhấp vào Next (Tiếp theo).
2. Gọi dự án DiceRoller và xác minh tất cả các giá trị khác cho tên dự án và vị trí dự án. Đảm bảo bạn đã đánh dấu vào ô "Sử dụng cấu phần phần mềm AndroidX". Nhấp vào Hoàn tất.
   
   
   
3. Trong ngăn Project > Android (Dự án > Android), hãy mở rộng java > com.example.android.diceroller. Nhấp đúp vào MainActivity. Trình soạn thảo mã cho thấy mã trong MainActivity.
   
   
   
4. Bên dưới tên gói và câu lệnh nhập là phần khai báo lớp cho MainActivity. Lớp MainActivity mở rộng AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

AppCompatActivity là một lớp con của Activity, hỗ trợ tất cả các tính năng hiện đại của Android, đồng thời cung cấp khả năng tương thích ngược với các phiên bản Android cũ. Để ứng dụng của bạn có thể chạy trên nhiều thiết bị và tiếp cận nhiều người dùng nhất có thể, hãy luôn sử dụng AppCompatActivity.

5. Lưu ý phương thức onCreate(). Các hoạt động không sử dụng hàm khởi tạo để khởi tạo đối tượng. Thay vào đó, một loạt phương thức được xác định trước (gọi là "phương thức vòng đời") sẽ được gọi trong quá trình thiết lập hoạt động. Một trong những phương thức vòng đời đó là onCreate(). Bạn luôn ghi đè phương thức này trong ứng dụng của riêng mình. Bạn sẽ tìm hiểu thêm về các phương thức vòng đời trong một lớp học lập trình sau này.
   
   Trong onCreate(), bạn chỉ định bố cục được liên kết với hoạt động và tăng cường bố cục đó. Phương thức setContentView() thực hiện cả hai việc đó.
   

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

Phương thức setContentView() tham chiếu đến bố cục bằng cách sử dụng R.layout.activity_main, đây thực chất là một tham chiếu số nguyên. Lớp R được tạo khi bạn tạo ứng dụng. Lớp R bao gồm tất cả các thành phần của ứng dụng, kể cả nội dung của thư mục res.

Trong trường hợp này, R.layout.activity_main đề cập đến lớp R, thư mục layout và tệp bố cục activity_main.xml đã tạo. (Tài nguyên không bao gồm đuôi tệp.) Bạn sẽ tham chiếu đến nhiều tài nguyên của ứng dụng (bao gồm cả hình ảnh, chuỗi và các phần tử trong tệp bố cục) bằng cách sử dụng các tham chiếu tương tự trong lớp R.

Bước 2: Kiểm tra và khám phá tệp bố cục ứng dụng

Tất cả các hoạt động trong ứng dụng của bạn đều có một tệp bố cục được liên kết trong thư mục res/layout của ứng dụng. Tệp bố cục là một tệp XML thể hiện giao diện thực tế của một hoạt động. Tệp bố cục thực hiện việc này bằng cách xác định các thành phần hiển thị và xác định vị trí các thành phần hiển thị xuất hiện trên màn hình.

Chế độ xem là những thứ như văn bản, hình ảnh và nút mở rộng lớp View. Có nhiều loại khung hiển thị, bao gồm TextView, Button, ImageView và CheckBox.

Trong nhiệm vụ này, bạn sẽ kiểm tra và sửa đổi tệp bố cục ứng dụng.

1. Trong ngăn Project > Android (Dự án > Android), hãy mở rộng res > layout (tài nguyên > bố cục) rồi nhấp đúp vào activity_main.xml. Trình chỉnh sửa thiết kế bố cục sẽ mở ra. Android Studio có trình chỉnh sửa này, cho phép bạn tạo bố cục ứng dụng theo cách trực quan và xem trước thiết kế bố cục. Bạn có thể tìm hiểu thêm về trình chỉnh sửa thiết kế trong một lớp học lập trình sau này.
2. Để xem tệp bố cục dưới dạng XML, hãy nhấp vào thẻ Text (Văn bản) ở cuối cửa sổ.
   
   
   
3. Xoá tất cả mã XML hiện có trong trình chỉnh sửa bố cục. Bố cục mặc định mà bạn nhận được khi tạo một dự án mới là một điểm khởi đầu tốt nếu bạn đang làm việc với trình chỉnh sửa thiết kế của Android Studio. Trong bài học này, bạn sẽ làm việc với XML cơ bản để tạo một bố cục mới từ đầu.
4. Sao chép và dán mã này vào bố cục:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Bây giờ, hãy xem xét mã:

1. Phần tử gốc hoặc cấp cao nhất của bố cục là phần tử <LinearLayout>. Chế độ xem LinearLayout là một ViewGroup. Nhóm thành phần hiển thị là những vùng chứa lưu giữ các thành phần hiển thị khác và giúp chỉ định vị trí của các thành phần hiển thị trên màn hình.
   
   Tất cả các thành phần hiển thị và nhóm thành phần hiển thị mà bạn thêm vào bố cục đều được sắp xếp theo một hệ phân cấp thành phần hiển thị, trong đó phần tử XML trên cùng là gốc của hệ phân cấp đó. Khung hiển thị gốc có thể chứa các khung hiển thị và nhóm khung hiển thị khác, đồng thời các nhóm khung hiển thị được chứa có thể chứa các khung hiển thị và nhóm khung hiển thị khác. Khi ứng dụng của bạn chạy, hệ phân cấp thành phần hiển thị trong tệp bố cục XML sẽ trở thành một hệ phân cấp đối tượng khi bố cục được mở rộng. Trong trường hợp này, nhóm khung hiển thị gốc là một bố cục tuyến tính, giúp sắp xếp các khung hiển thị con theo tuyến tính, lần lượt (theo chiều dọc hoặc chiều ngang).
   
   Thư mục gốc mặc định mà bạn nhận được cho một dự án Android mới là ConstraintLayout, hoạt động hiệu quả khi phối hợp với trình chỉnh sửa thiết kế. Đối với ứng dụng này, bạn sử dụng một nhóm thành phần hiển thị LinearLayout, đơn giản hơn so với bố cục dựa trên ràng buộc. Bạn sẽ tìm hiểu thêm nhiều thông tin về nhóm khung hiển thị và bố cục ràng buộc trong bài học tiếp theo.
2. Trong thẻ LinearLayout, hãy lưu ý đến thuộc tính android:layout_width. Chiều rộng của LinearLayout này được đặt thành match parent, tức là có cùng chiều rộng với thành phần mẹ. Vì đây là khung hiển thị gốc, nên bố cục sẽ mở rộng ra toàn bộ chiều rộng của màn hình.
3. Lưu ý thuộc tính android:layout_height được đặt thành wrap_content. Thuộc tính này làm cho chiều cao của LinearLayout khớp với tổng chiều cao của tất cả các khung hiển thị có trong đó, hiện tại chỉ có TextView.
4. Kiểm tra phần tử <TextView>. TextView này (hiển thị văn bản) là thành phần trực quan duy nhất trong ứng dụng DiceRoller. Thuộc tính android:text chứa chuỗi thực tế cần hiển thị, trong trường hợp này là chuỗi "Hello World!"
5. Lưu ý các thuộc tính android:layout_width và android:layout_height trong phần tử <TextView>. Cả hai thuộc tính này đều được đặt thành wrap_content. Nội dung của khung hiển thị văn bản chính là văn bản, vì vậy, khung hiển thị sẽ chỉ chiếm không gian cần thiết cho văn bản.

Ứng dụng đổ xúc xắc sẽ không hữu ích nếu người dùng không thể đổ xúc xắc và xem kết quả. Để bắt đầu, hãy thêm một nút vào bố cục để tung xúc xắc và thêm văn bản cho biết giá trị xúc xắc mà người dùng tung được.

Bước 1: Thêm một nút vào bố cục

1. Thêm một phần tử Button vào bố cục bên dưới khung hiển thị văn bản bằng cách nhập <Button rồi nhấn phím Return. Một khối Button xuất hiện, kết thúc bằng /> và bao gồm các thuộc tính layout_width và layout_height.

<Button
   android:layout_width=""
   android:layout_height="" />

2. Đặt cả thuộc tính layout_width và layout_height thành "wrap_content". Với các giá trị này, nút có cùng chiều rộng và chiều cao với nhãn văn bản mà nút chứa.
3. Thêm một thuộc tính android:text vào nút và gán giá trị "Roll" cho thuộc tính đó. Phần tử Nút hiện có dạng như sau:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Đối với các khung hiển thị Button, thuộc tính text là nhãn của nút. Trong trình chỉnh sửa bố cục, thuộc tính này được đánh dấu bằng màu vàng, cho biết một mẹo hoặc cảnh báo. Trong trường hợp này, màu vàng được dùng để làm nổi bật vì chuỗi "Roll" được mã hoá cứng trong nhãn nút, nhưng chuỗi này phải là một tài nguyên. Bạn sẽ tìm hiểu về tài nguyên chuỗi trong phần tiếp theo.

Bước 2: Trích xuất tài nguyên chuỗi

Thay vì mã hoá cứng các chuỗi trong tệp bố cục hoặc tệp mã, bạn nên đưa tất cả các chuỗi của ứng dụng vào một tệp riêng biệt. Tệp này có tên là strings.xml và nằm trong số các tài nguyên của ứng dụng, trong thư mục res/values/.

Việc lưu trữ các chuỗi trong một tệp riêng biệt giúp bạn quản lý các chuỗi này dễ dàng hơn, đặc biệt là nếu bạn sử dụng các chuỗi này nhiều lần. Ngoài ra, tài nguyên chuỗi là bắt buộc để dịch và bản địa hoá ứng dụng, vì bạn cần tạo một tệp tài nguyên chuỗi cho mỗi ngôn ngữ.

Android Studio giúp bạn nhớ đặt các chuỗi vào một tệp tài nguyên bằng các gợi ý và cảnh báo.

1. Nhấp một lần vào chuỗi "Roll" trong thuộc tính android:text của thẻ <Button>.
2. Nhấn Alt+Enter (Option+Enter trong macOS) rồi chọn Trích xuất tài nguyên chuỗi trong trình đơn bật lên.
3. Nhập roll_label cho Tên tài nguyên.
4. Nhấp vào OK. Một tài nguyên chuỗi được tạo trong tệp res/values/string.xml và chuỗi trong phần tử Nút được thay thế bằng một tham chiếu đến tài nguyên đó:
   android:text="@string/roll_label"
5. Trong ngăn Project > Android (Dự án > Android), hãy mở rộng res > values (tài nguyên > giá trị), rồi nhấp đúp vào strings.xml để xem tài nguyên chuỗi trong tệp strings.xml:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Lưu ý: Ngoài chuỗi mà bạn vừa thêm, tệp strings.xml cũng bao gồm tên ứng dụng. Tên ứng dụng sẽ xuất hiện trong thanh ứng dụng ở đầu màn hình nếu bạn bắt đầu dự án ứng dụng bằng cách sử dụng Mẫu trống. Bạn có thể thay đổi tên ứng dụng bằng cách chỉnh sửa tài nguyên app_name.

Bước 3: Tạo kiểu và định vị khung hiển thị

Bố cục của bạn hiện chứa một khung hiển thị TextView và một khung hiển thị Button. Trong nhiệm vụ này, bạn sẽ sắp xếp các khung hiển thị trong nhóm khung hiển thị để trông hấp dẫn hơn.

1. Nhấp vào thẻ Thiết kế để xem trước bố cục. Hiện tại, cả hai khung hiển thị đều nằm cạnh nhau và được đẩy lên đầu màn hình.
   
   
   
2. Nhấp vào thẻ Text (Văn bản) để quay lại trình chỉnh sửa XML. Thêm thuộc tính android:orientation vào thẻ LinearLayout, sau đó gán giá trị "vertical" cho thuộc tính này. Phần tử <LinearLayout> giờ đây sẽ có dạng như sau:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

Nhóm khung hiển thị LinearLayout sẽ đặt các khung hiển thị mà nhóm này chứa lần lượt theo một đường thẳng, theo chiều ngang trong một hàng hoặc theo chiều dọc trong một ngăn xếp. Hướng ngang là hướng mặc định. Vì bạn muốn TextView xếp chồng lên Button, nên bạn hãy đặt hướng thành dọc. Thiết kế hiện sẽ có dạng như sau, với nút ở bên dưới văn bản:

3. Thêm thuộc tính android:layout_gravity vào cả TextView và Button, sau đó gán giá trị "center_horizontal" cho thuộc tính này. Thao tác này sẽ căn chỉnh cả hai khung hiển thị dọc theo tâm của trục ngang. Các phần tử TextView và Button giờ đây sẽ có dạng như sau:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. Thêm thuộc tính android:layout_gravity vào bố cục tuyến tính và gán giá trị "center_vertical" cho thuộc tính đó. Phần tử LinearLayout của bạn hiện sẽ có dạng như sau:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

Lưu ý: Nếu bạn thêm trọng lực center_vertical vào cả nút và thành phần hiển thị văn bản (thay vì center_horizontal), thì cả hai thành phần hiển thị đều được căn giữa theo chiều ngang và chiều dọc ở giữa bố cục. Tức là các khung hiển thị nằm chồng lên nhau.

Để căn giữa tất cả các phần tử con cùng một lúc, hãy sử dụng center_vertical trên phần tử mẹ (phần tử LinearLayout), như minh hoạ ở trên.

5. Để tăng kích thước của văn bản trong chế độ xem văn bản, hãy thêm thuộc tính android:textSize vào phần tử <TextView> với giá trị "30sp". Chữ viết tắt sp là viết tắt của pixel có thể mở rộng, đây là một đơn vị đo lường để định cỡ văn bản mà không phụ thuộc vào chất lượng màn hình của thiết bị. Phần tử TextView hiện sẽ có dạng như sau:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. Biên dịch và chạy ứng dụng của bạn.
   
   
   

Giờ đây, cả văn bản và nút đều được đặt ở vị trí phù hợp, đồng thời có văn bản lớn hơn trong khung hiển thị văn bản. Nút này chưa có chức năng nào, nên không có gì xảy ra khi bạn nhấp vào nút. Bạn sẽ làm việc đó ở bước tiếp theo.

Bước 4: Lấy một tham chiếu đến nút trong mã

Mã Kotlin trong MainActivity chịu trách nhiệm xác định các phần tương tác của ứng dụng, chẳng hạn như những gì xảy ra khi bạn nhấn vào một nút. Để viết một hàm thực thi khi người dùng nhấp vào nút, bạn cần lấy một tham chiếu đến đối tượng Nút trong bố cục được mở rộng trong MainActivity. Cách lấy một tham chiếu đến nút:

• Chỉ định mã nhận dạng cho Button trong tệp XML.
• Sử dụng phương thức findViewById() trong mã để lấy một tham chiếu đến View có mã nhận dạng cụ thể.

Sau khi có một tham chiếu đến khung hiển thị Button, bạn có thể gọi các phương thức trên khung hiển thị đó để thay đổi khung hiển thị một cách linh động khi ứng dụng chạy. Ví dụ: bạn có thể thêm một trình xử lý lượt nhấp để thực thi mã khi người dùng nhấn vào nút.

1. Mở tệp bố cục activity_main.xml (nếu chưa mở) rồi nhấp vào thẻ Text (Văn bản).
2. Thêm thuộc tính android:id vào nút và đặt tên cho nút (trong trường hợp này là "@+id/roll_button"). Phần tử <Button> của bạn hiện có dạng như sau:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Khi bạn tạo một mã nhận dạng cho một khung hiển thị trong tệp bố cục XML, Android Studio sẽ tạo một hằng số nguyên có tên của mã nhận dạng đó trong lớp R đã tạo. Vì vậy, nếu bạn đặt tên cho một khung hiển thị là roll_button, thì Android Studio sẽ tạo một hằng số nguyên có tên là roll_button trong lớp R. Tiền tố "@+id" cho tên mã nhận dạng cho trình biên dịch biết để thêm hằng số mã nhận dạng đó vào lớp R. Tất cả mã nhận dạng thành phần hiển thị trong tệp XML của bạn đều phải có tiền tố này.

3. Mở tệp MainActivity Kotlin. Bên trong onCreate(), sau setContentView(), hãy thêm dòng này:

val rollButton: Button = findViewById(R.id.roll_button)

Sử dụng phương thức findViewById() để lấy một giá trị tham chiếu View cho khung hiển thị mà bạn đã xác định trong lớp XML. Trong trường hợp này, bạn sẽ nhận được tham chiếu Button từ lớp R và mã nhận dạng roll_button, đồng thời chỉ định tham chiếu đó cho biến rollButton.

Lưu ý: Nếu nhập dòng này thay vì sao chép và dán, bạn sẽ thấy Android Studio cung cấp một gợi ý tự động hoàn thành cho tên mã nhận dạng ngay khi bạn bắt đầu nhập.

4. Lưu ý rằng Android Studio sẽ làm nổi bật lớp Button bằng màu đỏ và gạch chân lớp này để cho biết đây là một tham chiếu chưa được giải quyết và bạn cần nhập lớp này trước khi có thể sử dụng. Chú giải công cụ cho biết tên lớp đủ điều kiện cũng có thể xuất hiện:
   
   
   
5. Nhấn Alt+Enter (Option+Enter trên máy Mac) để chấp nhận tên lớp đủ điều kiện.

Lưu ý: Bạn có thể định cấu hình Android Studio để tự động thêm câu lệnh nhập cho các lớp nếu ý nghĩa không mơ hồ. Bảng cài đặt cho Editor > General > Auto Import (Trình chỉnh sửa > Chung > Tự động nhập) chỉ định cách xử lý các lệnh nhập.

Bước 5: Thêm một trình xử lý lượt nhấp để hiển thị thông báo tạm thời

Trình xử lý lượt nhấp là một phương thức được gọi mỗi khi người dùng nhấp hoặc nhấn vào một phần tử có thể nhấp trên giao diện người dùng, chẳng hạn như một nút. Để tạo một trình xử lý lượt nhấp, bạn cần:

• Một phương thức thực hiện một số thao tác.
• Phương thức setOnClickHandler() kết nối Button với phương thức trình xử lý.

Trong nhiệm vụ này, bạn sẽ tạo một phương thức trình xử lý lượt nhấp để hiển thị Toast. (Thông báo ngắn là một thông báo xuất hiện trên màn hình trong một khoảng thời gian ngắn.) Bạn kết nối phương thức trình xử lý lượt nhấp với Button.

1. Trong lớp MainActivity sau onCreate(), hãy tạo một hàm riêng tư tên là rollDice().

private fun rollDice() {
  
}

2. Thêm dòng này vào phương thức rollDice() để hiển thị Toast khi rollDice() được gọi:

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Để tạo một thông báo ngắn, hãy gọi phương thức Toast.makeText(). Phương thức này yêu cầu 3 điều kiện:

• Một đối tượng Context. Đối tượng Context cho phép bạn giao tiếp và nhận thông tin về trạng thái hiện tại của hệ điều hành Android. Bạn cần một Context ở đây để đối tượng Toast có thể yêu cầu hệ điều hành hiển thị thông báo. Vì AppCompatActivity là một lớp con của Context, nên bạn chỉ cần sử dụng từ khoá this cho ngữ cảnh.
• Thông báo sẽ xuất hiện ở đây "button clicked".
• khoảng thời gian hiển thị thông báo. Phương thức show() ở cuối sẽ hiển thị thông báo.

3. Trong onCreate(), sau khi gọi findViewById(), hãy thêm dòng này để chỉ định rollDice() làm trình xử lý lượt nhấp cho đối tượng rollButton:

rollButton.setOnClickListener { rollDice() }

Định nghĩa đầy đủ về lớp MainActivity của bạn giờ đây có dạng như sau:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. Biên dịch và chạy ứng dụng của bạn. Mỗi lần bạn nhấn vào nút, một thông báo tạm thời sẽ xuất hiện.

Trong nhiệm vụ này, bạn sẽ sửa đổi phương thức rollDice() để thay đổi văn bản trong TextView. Đối với bước đầu tiên, bạn sẽ thay đổi văn bản đó từ "Hello World!" thành chuỗi "Dice Rolled!". Đối với bước thứ hai, bạn hiển thị một số ngẫu nhiên từ 1 đến 6.

Bước 1: Hiển thị một chuỗi

1. Mở activity_main.xml rồi thêm một mã nhận dạng vào TextView.

android:id="@+id/result_text"

2. Mở MainActivity. Trong phương thức rollDice(), hãy đánh dấu ghi chú vào dòng mã để hiển thị Toast.
3. Sử dụng phương thức findViewById() để lấy tham chiếu đến TextView theo mã nhận dạng của đối tượng này. Chỉ định tham chiếu cho một biến resultText.

val resultText: TextView = findViewById(R.id.result_text)

4. Chỉ định một chuỗi mới cho thuộc tính resultText.text để thay đổi văn bản hiển thị. Bạn có thể bỏ qua gợi ý trích xuất chuỗi đó thành một tài nguyên; đây chỉ là một chuỗi tạm thời.

resultText.text = "Dice Rolled!"

5. Biên dịch và chạy ứng dụng. Lưu ý rằng thao tác nhấn vào nút Roll (Đổ xúc xắc) hiện sẽ cập nhật TextView.

Bước 2: Hiển thị một số ngẫu nhiên

Cuối cùng, trong nhiệm vụ này, bạn sẽ thêm tính ngẫu nhiên vào lượt nhấp nút để mô phỏng việc đổ xúc xắc. Mỗi khi người dùng nhấp hoặc nhấn vào nút này, mã của bạn sẽ chọn một số ngẫu nhiên từ 1 đến 6 và cập nhật TextView. Nhiệm vụ tạo số ngẫu nhiên không dành riêng cho Android và bạn sẽ dùng lớp Random để thực hiện nhiệm vụ này.

1. Ở đầu phương thức rollDice(), hãy dùng phương thức Random.nextInt() để lấy một số ngẫu nhiên từ 1 đến 6:

val randomInt = Random().nextInt(6) + 1

2. Đặt thuộc tính text thành giá trị của số nguyên ngẫu nhiên, dưới dạng chuỗi:

resultText.text = randomInt.toString()

3. Biên dịch và chạy ứng dụng. Mỗi lần bạn nhấn vào nút Roll (Đổ xúc xắc), số trong khung hiển thị văn bản sẽ thay đổi.

Dự án Android Studio: DiceRoller

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

Thử thách: Thêm một nút thứ hai vào ứng dụng có nhãn "Count Up" (Đếm lên) xuất hiện ngay bên dưới nút Roll (Tung xúc xắc). Khi được nhấn, nút Count Up (Đếm lên) sẽ lấy giá trị hiện tại của chế độ xem văn bản kết quả, cộng thêm 1 và cập nhật chế độ xem văn bản. Đảm bảo bạn xử lý những trường hợp đặc biệt sau:

• Nếu khung hiển thị văn bản kết quả chưa chứa một số (tức là nếu khung hiển thị văn bản vẫn có chuỗi "Hello World" mặc định), hãy đặt văn bản kết quả thành 1.
• Nếu số lượng đã là 6, bạn không cần làm gì cả.

Lưu ý: Chuỗi trong các khung hiển thị TextView là một thực thể của lớp CharSequence. Để kiểm thử giá trị của biến này, bạn cần chuyển đổi giá trị đó thành một chuỗi:

resultText.text.toString()

Đoạn mã giải pháp cho thử thách lập trình

Dự án Android Studio: DiceRoller-challenge

Hoạt động

• MainActivity là một lớp con của AppCompatActivity, và AppCompatActivity lại là một lớp con của Activity. Activity là một lớp Android cốt lõi, chịu trách nhiệm vẽ giao diện người dùng của ứng dụng Android và nhận các sự kiện đầu vào.
• Tất cả các hoạt động đều có một tệp bố cục được liên kết, đó là một tệp XML trong tài nguyên của ứng dụng. Tệp bố cục được đặt tên theo hoạt động, ví dụ: activity_main.xml.
• Phương thức setContentView() trong MainActivity liên kết bố cục với hoạt động và tăng cường bố cục đó khi hoạt động được tạo.
• Tăng cường bố cục là một quy trình trong đó các thành phần hiển thị được xác định trong tệp bố cục XML sẽ được chuyển thành (hoặc "tăng cường" thành) các đối tượng thành phần hiển thị Kotlin trong bộ nhớ. Sau khi quá trình mở rộng bố cục diễn ra, Activity có thể vẽ các đối tượng này lên màn hình và sửa đổi chúng một cách linh hoạt.

Khung hiển thị

• Tất cả các phần tử trên giao diện người dùng trong bố cục ứng dụng đều là lớp con của lớp View và được gọi là khung hiển thị. TextView và Button là ví dụ về các khung hiển thị.
• Các phần tử View có thể được nhóm bên trong một ViewGroup. Một nhóm thành phần hiển thị đóng vai trò là vùng chứa cho các thành phần hiển thị hoặc các nhóm thành phần hiển thị khác trong đó. LinearLayout là một ví dụ về nhóm khung hiển thị sắp xếp các khung hiển thị theo tuyến tính.

Xem thuộc tính

• Các thuộc tính android:layout_width và android:layout_height cho biết trọng số và chiều cao của một khung hiển thị. Giá trị match_parent kéo dài khung hiển thị theo chiều rộng hoặc chiều cao của phần tử mẹ. Giá trị wrap_content sẽ thu nhỏ khung hiển thị để vừa với nội dung của khung hiển thị.
• Thuộc tính android:text cho biết văn bản mà một khung hiển thị sẽ hiển thị (nếu khung hiển thị đó hiển thị văn bản). Đối với các nút, android:text là nhãn nút.
• Thuộc tính android:orientation trong một nhóm khung hiển thị LinearLayout sắp xếp các phần tử khung hiển thị mà nhóm đó chứa. Giá trị horizontal sắp xếp các thành phần hiển thị từ trái sang phải. Giá trị vertical sắp xếp các khung hiển thị từ trên xuống dưới.
• Thuộc tính android:layout_gravity xác định vị trí của một khung hiển thị và tất cả các phần tử con của khung hiển thị đó.
• Thuộc tính android:textSize xác định kích thước của văn bản trong một chế độ xem văn bản. Kích thước văn bản được chỉ định bằng đơn vị sp (pixel có thể mở rộng). Bằng cách sử dụng đơn vị sp, bạn có thể điều chỉnh kích thước văn bản mà không phụ thuộc vào chất lượng màn hình của thiết bị.

Chuỗi

• Thay vì mã hoá cứng các chuỗi trong bố cục, bạn nên sử dụng tài nguyên chuỗi.
• Tài nguyên chuỗi có trong tệp values/res/string.xml.
• Để trích xuất chuỗi, hãy sử dụng Alt+Enter (Option+Enter trên máy Mac). Chọn Trích xuất tài nguyên chuỗi trong trình đơn bật lên.

Sử dụng chế độ xem

• Để kết nối mã Kotlin với một khung hiển thị mà bạn đã xác định trong bố cục, bạn cần lấy một tham chiếu đến đối tượng khung hiển thị sau khi khung hiển thị được mở rộng. Chỉ định một mã nhận dạng (android:id) cho khung hiển thị trong bố cục, sau đó dùng phương thức findViewById() để lấy đối tượng khung hiển thị được liên kết.
• Khi bạn tạo một mã nhận dạng cho một khung hiển thị trong tệp bố cục XML, Android Studio sẽ tạo một hằng số nguyên có tên của mã nhận dạng đó trong lớp R đã tạo. Sau đó, bạn có thể sử dụng tham chiếu R.id đó trong phương thức findViewById().
• Bạn có thể đặt trực tiếp các thuộc tính của một đối tượng thành phần hiển thị trong mã Kotlin theo tên thuộc tính. Ví dụ: văn bản trong một thành phần hiển thị văn bản được xác định bằng thuộc tính android:text trong XML và được xác định bằng thuộc tính text trong Kotlin.
• Trình xử lý lượt nhấp là một phương thức được gọi khi người dùng nhấp hoặc nhấn vào một phần tử trên giao diện người dùng. Để đính kèm một phương thức xử lý lượt nhấp vào một khung hiển thị (chẳng hạn như nút), hãy sử dụng phương thức setOnClickListener().

Sử dụng thông báo dạng toast

Thông báo ngắn là một khung hiển thị cho người dùng thấy một thông báo đơn giản trong một cửa sổ nhỏ bật lên.

Để tạo một thông báo dạng toast, hãy gọi phương thức của nhà máy makeText() trên lớp Toast bằng 3 đối số:

• Bối cảnh của ứng dụng Activity
• Thông báo cần hiển thị, ví dụ: tài nguyên chuỗi
• Khoảng thời gian, ví dụ: Toast.LENGTH_SHORT

Để hiển thị thông báo ngắn, hãy gọi show().

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:

• Làm quen với Android Studio
• Bố cục
• View
• Button
• TextView
• Tổng quan về tài nguyên ứng dụng
• Tổng quan về sự kiện đầu vào
• findViewById()
• setOnClickListener()
• Context

Khác:

• Bảng chú giải các từ vựng và khái niệm

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.

Thay đổi ứng dụng

Mở ứng dụng DiceRoller. Thêm một nút có nhãn "Đặt lại" vào ứng dụng. Nút này sẽ xuất hiện ngay bên dưới nút Đổ xúc xắc. Hãy đặt nút đó để đặt lại khung hiển thị văn bản kết quả thành 0.

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

Câu hỏi 1

Phương thức nào trên Activity làm tăng cường bố cục của ứng dụng và làm xuất hiện các thành phần hiển thị dưới dạng đối tượng?

• onCreate()
• setClickListener()
• setContentView()
• show()

Câu hỏi 2

Bạn sử dụng thuộc tính khung hiển thị nào để thiết lập chiều rộng của một khung hiển thị sao cho khung đó sẽ điều chỉnh cho vừa với nội dung bên trong?

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

Gửi ứng dụng của bạn để được chấm điểm

Kiểm tra để đảm bảo ứng dụng có những đặc điểm sau:

• Bố cục ứng dụng phải có một khung hiển thị văn bản và hai nút.
• Mã của ứng dụng phải đặt hai trình xử lý lượt nhấp, mỗi trình xử lý cho một nút.
• Trình xử lý lượt nhấp đặt lại chế độ xem văn bản phải đặt thuộc tính văn bản thành 0.

Bắt đầu bài học tiếp theo: 1.3 Khả năng tương thích và tài nguyên hình ảnh

Để 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.