Thêm hình ảnh vào ứng dụng Dice Roller

1. Trước khi bắt đầu

Trong lớp học lập trình này, bạn sẽ thêm hình ảnh xúc xắc vào ứng dụng Android Dice Roller (Đổ xúc xắc) mà bạn hiện có. Trước tiên, hãy nhớ hoàn thành lớp học lập trình trước về cách xây dựng nền tảng của ứng dụng này.

Thay vì hiện giá trị của lượt tung xúc xắc trong TextView, ứng dụng của bạn sẽ hiện hình ảnh xúc xắc thích hợp tương ứng với số mặt đã được tung. Đây sẽ là một trải nghiệm trực quan và nâng cao hơn mà ứng dụng của bạn có thể mang đến cho người dùng.

c7f0d42525da7431.png

Bạn được cung cấp một đường liên kết để tải hình ảnh mặt xúc xắc. Sau đó, bạn sẽ thêm các hình ảnh này dưới dạng tài nguyên trong ứng dụng. Để viết mã nhằm xác định hình ảnh xúc xắc được dùng, bạn sẽ sử dụng câu lệnh when trong Kotlin.

Điều kiện tiên quyết

  • Đã hoàn thành lớp học lập trình Tạo ứng dụng tương tác Dice Roller.
  • Có thể viết các câu lệnh luồng điều khiển (các câu lệnh if / else và when).
  • Có thể cập nhật giao diện người dùng của ứng dụng dựa trên hoạt động đầu vào của người dùng (sửa đổi tệp MainActivity.kt).
  • Có thể thêm trình nghe lượt nhấp (click listener) vào Button.
  • Có thể thêm tài nguyên hình ảnh vào ứng dụng Android.

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

  • Cách cập nhật ImageView trong khi ứng dụng đang chạy.
  • Cách tuỳ chỉnh hành vi của ứng dụng dựa trên nhiều điều kiện (sử dụng câu lệnh when).

Sản phẩm bạn sẽ xây dựng

  • Ứng dụng Android Dice Roller có một Button để tung xúc xắc và cập nhật hình ảnh trên màn hình.

Bạn cần có

  • Một máy tính đã cài đặt Android Studio.
  • Kết nối Internet để tải hình ảnh xúc xắc xuống.

2. Cập nhật bố cục cho ứng dụng

Trong nhiệm vụ này, bạn sẽ thay thế TextView trong bố cục bằng một ImageView cho thấy hình ảnh kết quả tung xúc xắc.

Mở ứng dụng Dice Roller

  1. Mở và chạy ứng dụng Dice Roller của lớp học lập trình trước trong Android Studio. Bạn có thể sử dụng mã giải pháp hoặc mã bạn đã tạo.

Ứng dụng trông như thế này.

2e8416293e597725.png

  1. Mở activity_main.xml (app > res > layout > activity_main.xml). Thao tác này sẽ mở ra Layout Editor (Trình chỉnh sửa bố cục).

Xoá TextView

  1. Trong Layout Editor (Trình chỉnh sửa bố cục), hãy chọn TextView trong Component Tree (Cây thành phần).

a6fc189dac34ee71.png

  1. Nhấp chuột phải rồi chọn Delete (Xoá) hoặc nhấn phím Delete.
  2. Tạm thời bỏ qua cảnh báo trên Button. Bạn sẽ khắc phục lỗi đó trong bước tiếp theo.

Thêm ImageView vào bố cục

  1. Kéo một ImageView từ Palette (Bảng chế độ xem) vào chế độ xem Design (Thiết kế) rồi định vị phía trên Button.

91f6e2be0a01fbf.png

  1. Trong hộp thoại Pick a Resource (Chọn một tài nguyên), hãy chọn avatars (hình đại diện) trong phần Sample data (Dữ liệu mẫu). Đây là hình ảnh tạm thời mà bạn sẽ sử dụng cho đến khi thêm hình ảnh xúc xắc trong nhiệm vụ tiếp theo.

824493e9927da401.png

  1. Nhấn OK. Chế độ xem Design (Thiết kế) của ứng dụng có dạng như sau.

f9d5ee87018baee.png

  1. Trong Component Tree (Cây thành phần), bạn sẽ nhận thấy hai lỗi. Button không bị ràng buộc theo chiều dọc và ImageView không bị ràng buộc theo chiều dọc hay chiều ngang.

b8c3b83124c31ff.png

Button không bị ràng buộc theo chiều dọc vì bạn đã xoá TextView bên dưới vị trí ban đầu. Bây giờ, bạn cần định vị ImageView và Button bên dưới.

Đặt ImageView và Button vào vị trí

Bạn cần căn giữa ImageView theo chiều dọc trên màn hình, bất kể Button nằm ở đâu.

  1. Thêm các điều kiện ràng buộc theo chiều ngang vào ImageView. Nối phần bên trái của ImageView với cạnh trái của phần tử mẹ ConstraintLayout.
  2. Nối phần bên phải của ImageView với cạnh phải của phần tử mẹ. Thao tác này sẽ căn giữa ImageView theo chiều ngang trong phần tử mẹ.

9848bb6319e11777.png

  1. Thêm một điều kiện ràng buộc theo chiều dọc vào ImageView, kết nối phần trên của ImageView với phần trên của phần tử mẹ. ImageView sẽ trượt lên trên ConstraintLayout.

2d8d134e6292d48f.png

  1. Thêm một điều kiện ràng buộc theo chiều dọc vào Button, nối đầu của Button với đáy của ImageView. Button sẽ trượt xuống dưới ImageView.

b6d3dcee6c7a51fc.png

  1. Bây giờ, hãy chọn lại ImageView rồi thêm một điều kiện ràng buộc theo chiều dọc bằng cách nối phần đáy của ImageView với phần đáy của phần tử mẹ. Thao tác này sẽ căn giữa ImageView theo chiều dọc trong ConstraintLayout.

Tất cả cảnh báo về các điều kiện ràng buộc hiện đã biến mất.

Sau đó, chế độ xem Design (Thiết kế) sẽ trông như thế này, với ImageView ở giữa và Button ngay bên dưới.

1b05a6d2fd56459f.png

Bạn có thể thấy cảnh báo trên ImageView trong Component Tree (Cây thành phần) cho biết cần thêm nội dung mô tả vào ImageView. Hiện tại bạn không cần lo lắng về cảnh báo này vì lát nữa bạn sẽ đặt giá trị cho phần mô tả nội dung của ImageView dựa trên hình ảnh xúc xắc bạn đang hiện. Thay đổi này sẽ được thực hiện trong mã Kotlin.

3. Thêm hình ảnh xúc xắc

Trong nhiệm vụ này, bạn sẽ tải một số hình ảnh xúc xắc xuống rồi thêm chúng vào ứng dụng.

Tải hình ảnh xúc xắc xuống

  1. Mở URL này để tải tệp zip hình ảnh xúc xắc xuống máy tính. Chờ quá trình tải xuống hoàn tất.
  2. Xác định vị trí của tệp trên máy tính (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
  3. Nhấp đúp vào tệp zip để giải nén. Thao tác này sẽ tạo ra một thư mục dice_images mới chứa 6 tệp hình ảnh xúc xắc, cho thấy các giá trị xúc xắc từ 1 đến 6.

43c95351759ada02.png

Thêm hình ảnh xúc xắc vào ứng dụng

  1. Trong Android Studio, hãy nhấp vào View > Tool Windows > Resource Manager (Xem > Cửa sổ công cụ > Trình quản lý tài nguyên) trong trình đơn hoặc nhấp vào thẻ Resource Manager (Trình quản lý tài nguyên) ở bên trái cửa sổ Project (Dự án).
  2. Nhấp vào biểu tượng dấu + bên dưới Resource Manager (Trình quản lý tài nguyên), chọn Import Drawables (Nhập đối tượng có thể vẽ). Thao tác này sẽ mở ra một trình duyệt tệp.

67186ea5d631bc8a.png

  1. Tìm và chọn 6 tệp hình ảnh xúc xắc. Bạn có thể chọn tệp đầu tiên, rồi chọn các tệp khác trong khi giữ phím Shift.
  2. Nhấp vào Open (Mở).
  3. Nhấp vào Next (Tiếp theo) rồi nhấp vào Import (Nhập) để xác nhận rằng bạn muốn nhập 6 tài nguyên này.

a45dff94a19e2722.png

a7ad66d623ac73c2.png

  1. Nếu tệp được nhập thành công, 6 hình ảnh sẽ xuất hiện trong Resource Manager (Trình quản lý tài nguyên) (app>res>drawable) cho ứng dụng.

ab68f82b385fc83e.png

Bạn làm tốt lắm! Trong nhiệm vụ tiếp theo, bạn sẽ sử dụng những hình ảnh này trong ứng dụng.

Lưu ý quan trọng! – Bạn có thể tham chiếu đến các hình ảnh này trong mã Kotlin nhờ mã nhận dạng tài nguyên (resource ID):

  • R.drawable.dice_1
  • R.drawable.dice_2
  • R.drawable.dice_3
  • R.drawable.dice_4
  • R.drawable.dice_5
  • R.drawable.dice_6

4. Sử dụng hình ảnh xúc xắc

Thay thế hình đại diện mẫu

  1. Trong Design Editor (Trình chỉnh sửa thiết kế), hãy chọn ImageView.
  2. Trong Attributes (Thuộc tính) trong phần Declared Attributes (Thuộc tính đã khai báo), tìm thuộc tính srcCompat của công cụ (được đặt thành hình đại diện).

Hãy nhớ rằng thuộc tính srcCompat của công cụ chỉ sử dụng hình ảnh bạn cung cấp trong chế độ xem Design của Android Studio. Chỉ nhà phát triển mới thấy hình ảnh này trong khi xây dựng ứng dụng. Hình ảnh này sẽ không xuất hiện khi bạn thực sự chạy ứng dụng trên trình mô phỏng hoặc trên thiết bị.

  1. Nhấp vào bản xem trước tí hon của hình đại diện. Thao tác này sẽ mở ra một hộp thoại chọn tài nguyên mới để sử dụng cho ImageView này.

d8a26941179b3bdf.png

  1. Chọn dice_1 có thể vẽ rồi nhấp OK.

Ồ! ImageView chiếm toàn bộ màn hình.

1072e9fdd637afd9.png

Tiếp theo, bạn sẽ điều chỉnh chiều rộng và chiều cao của ImageView để không che khuất Button.

  1. Trong cửa sổ Attributes (Thuộc tính) bên dưới Constraints Widget (Tiện ích điều kiện ràng buộc), hãy tìm các thuộc tính layout_width và layout_height. Các thuộc tính này hiện được đặt thành wrap_content, nghĩa là ImageView sẽ cao và rộng bằng nội dung (hình ảnh nguồn) bên trong.
  2. Thay vào đó, hãy đặt chiều rộng cố định là 160dp và chiều cao cố định là 200dp trên ImageView. Nhấn Enter.

ImageView hiện đã nhỏ đi nhiều.

9579582d8775e688.png

Bạn có thể thấy Button hơi quá gần với hình ảnh.

  1. Thêm khoảng cách 16dp từ nút tới lề trên bằng cách thiết lập lề trong Constraint Widget (Tiện ích điều kiện ràng buộc).

8c647d6ae28ef3a6.png

Sau khi chế độ xem Design (Thiết kế) được cập nhật, ứng dụng sẽ trông đẹp hơn nhiều!

b53f7379bfba8c27.png

Thay đổi hình ảnh xúc xắc khi nhấp vào nút

Bố cục đã được khắc phục, nhưng bạn cần cập nhật lớp MainActivity để sử dụng hình ảnh xúc xắc.

Hiện có một lỗi trong ứng dụng, trong tệp MainActivity.kt. Nếu cố chạy ứng dụng, bạn sẽ thấy lỗi bản dựng này:

aaecce207cb5fc7.png

Lý do là mã của bạn vẫn đang tham chiếu đến TextView mà bạn đã xoá khỏi bố cục.

  1. Mở MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)

Mã này tham chiếu đến R.id.textView, nhưng Android Studio không nhận ra.

3a923aa53fc3ba8a.png

  1. Trong phương thức rollDice(), hãy chọn mọi mã tham chiếu đến TextView rồi xoá mã đó.
// Update the TextView with the dice roll
val resultTextView: TextView = findViewById(R.id.textView)
resultTextView.text = dice.roll().toString()
  1. Vẫn trong rollDice(), tạo một biến mới tên là diceImage thuộc kiểu ImageView. Đặt giá trị cho biến đó bằng với ImageView của bố cục. Sử dụng phương thức findViewById() và truyền mã nhận dạng tài nguyên cho ImageView, R.id.imageView làm đối số nhập.
val diceImage: ImageView = findViewById(R.id.imageView)

Nếu bạn muốn biết cách tìm đúng mã nhận dạng tài nguyên của ImageView, hãy xem id ở đầu cửa sổ Attributes (Thuộc tính).

cbfc9d5e01a04e32.png

Khi bạn tham chiếu đến mã nhận dạng tài nguyên này trong mã Kotlin, hãy nhớ nhập đúng mã (chữ i thường, chữ V hoa, không có dấu cách). Nếu không, Android Studio sẽ báo lỗi.

  1. Thêm dòng mã này để kiểm tra xem bạn có thể cập nhật ImageView đúng cách khi nhấp vào nút hay không. Kết quả tung xúc xắc không phải lúc nào cũng là "2" mà chỉ sử dụng hình ảnh dice_2 cho mục đích thử nghiệm.
diceImage.setImageResource(R.drawable.dice_2)

Mã này gọi phương thức setImageResource() trên ImageView, truyền mã nhận dạng tài nguyên cho hình ảnh dice_2. Thao tác này sẽ cập nhật ImageView trên màn hình để cho thấy hình ảnh dice_2.

Phương thức rollDice() sẽ có dạng như sau:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}
  1. Chạy ứng dụng để xác minh rằng ứng dụng chạy không có lỗi. Ứng dụng sẽ khởi động với một màn hình trống, ngoại trừ nút Roll (Tung xúc xắc).

c29b50554a31d30f.png

Sau khi bạn nhấn vào nút, hình ảnh xúc xắc cho thấy giá trị 2 sẽ xuất hiện. Tuyệt!!

7df72d671b22853f.png

Bạn có thể thay đổi hình ảnh dựa trên thao tác nhấn nút! Bạn sắp đạt được mục tiêu rồi!

5. Hiện đúng hình ảnh xúc xắc dựa trên lượt tung xúc xắc

Rõ ràng kết quả xúc xắc không phải lúc nào cũng là 2. Sử dụng logic luồng điều khiển mà bạn đã học được trong lớp học lập trình Thêm hành vi có điều kiện cho các lượt tung xúc xắc để hình ảnh xúc xắc phù hợp sẽ xuất hiện trên màn hình tuỳ thuộc vào lượt tung xúc xắc ngẫu nhiên.

Trước khi bạn bắt đầu nhập mã, hãy định hình cách ứng dụng hoạt động bằng cách viết một số mã giả để mô tả điều sẽ xảy ra. Ví dụ:

Nếu người dùng tung xúc xắc ra 1, thì hiện hình ảnh dice_1.

Nếu người dùng tung xúc xắc ra 2, thì hiện hình ảnh dice_2.

v.v...

Bạn có thể viết mã giả trên bằng các câu lệnh if / else trong Kotlin dựa trên giá trị của lần tung xúc xắc.

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

Tuy nhiên, việc viết if / else cho mỗi trường hợp lại là một việc lặp đi lặp lại. Bạn cũng có thể biểu thị cùng một logic này theo cách đơn giản hơn bằng một câu lệnh when. Như thế sẽ ngắn gọn hơn (ít mã hơn)! Hãy sử dụng phương pháp này trong ứng dụng của bạn.

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

Cập nhật phương thức rollDice()

  1. Trong phương thức rollDice(), hãy xoá dòng mã sẽ đặt mã nhận dạng tài nguyên hình ảnh thành hình ảnh dice_2 mỗi lần.
diceImage.setImageResource(R.drawable.dice_2)
  1. Thay thế bằng câu lệnh when để cập nhật ImageView dựa trên giá trị diceRoll.
   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

Khi bạn thực hiện xong các thay đổi, phương thức rollDice() sẽ có dạng như sau.

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}
  1. Chạy ứng dụng. Việc nhấp vào nút Roll (Tung xúc xắc) sẽ thay đổi hình ảnh xúc xắc thành các giá trị khác ngoài 2. Ứng dụng hoạt động rồi!

ec209952f84b81bd.png 32fc8979b1984e00.png

Tối ưu hoá mã

Nếu muốn viết mã súc tích hơn nữa, bạn có thể thay đổi mã như sau. Việc này không ảnh hưởng gì đến người dùng ứng dụng, nhưng mã sẽ ngắn hơn và ít lặp lại hơn.

Bạn có thể nhận thấy lệnh gọi tới diceImage.setImageResource() xuất hiện 6 lần trong câu lệnh when.

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

Điểm duy nhất thay đổi giữa mỗi trường hợp là mã nhận dạng tài nguyên được sử dụng. Tức là bạn có thể tạo một biến để lưu trữ và sử dụng mã nhận dạng tài nguyên. Sau đó, bạn có thể gọi diceImage.setImageResource() chỉ một lần trong mã rồi truyền vào đúng mã nhận dạng tài nguyên.

  1. Thay thế mã trên bằng mã sau.
val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

Có một khái niệm mới ở đây, đó là biểu thức when thực sự có thể trả về một giá trị. Với đoạn mã mới này, biểu thức when trả về đúng mã nhận dạng tài nguyên. Mã nhận dạng tài nguyên này sẽ được lưu trữ trong biến drawableResource. Sau đó, bạn có thể sử dụng biến đó để cập nhật tài nguyên hình ảnh được hiển thị.

  1. Xin lưu ý rằng when đang được gạch chân bằng màu đỏ. Nếu di chuột qua đó, bạn sẽ thấy thông báo lỗi: when' expression must be exhaustive, add necessary 'else' branch (biểu thức "when" phải đầy đủ, hãy thêm nhánh "else" cần thiết).

Lỗi này là do giá trị của biểu thức when được gán cho drawableResource, vì vậy when phải đầy đủ do phải xử lý tất cả trường hợp có thể để giá trị luôn được trả về, ngay cả khi bạn thay đổi sang xúc xắc 12 mặt. Android Studio đề xuất thêm một nhánh else. Bạn có thể khắc phục bằng cách thay đổi trường hợp 6 thành else. Các trường hợp từ 1 đến 5 đều giống nhau, nhưng mọi trường hợp khác bao gồm 6 đều do else xử lý.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   else -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)
  1. Chạy ứng dụng để đảm bảo ứng dụng vẫn hoạt động bình thường. Hãy nhớ kiểm tra đủ để đảm bảo bạn thấy tất cả số xuất hiện cùng với hình ảnh xúc xắc từ 1 đến 6.

Đặt thông tin mô tả nội dung thích hợp trên ImageView

Hiện tại bạn đã thay thế số khi tung xúc xắc bằng một hình ảnh, nhưng trình đọc màn hình không biết điểm số xúc xắc là bao nhiêu. Để khắc phục điều này, sau khi bạn cập nhật tài nguyên hình ảnh, hãy cập nhật thông tin mô tả nội dung của ImageView. Thông tin mô tả nội dung phải là văn bản mô tả nội dung hiện ra trong ImageView để trình đọc màn hình có thể diễn đạt được nội dung đó.

diceImage.contentDescription = diceRoll.toString()

Trình đọc màn hình có thể đọc thành tiếng thông tin mô tả nội dung này. Vì vậy, nếu hình ảnh của lượt tung xúc xắc "6" xuất hiện trên màn hình, thì thông tin mô tả nội dung sẽ được đọc thành tiếng là "6".

6. Áp dụng các phương pháp lập trình hay

Cải thiện trải nghiệm mở ứng dụng

Khi người dùng mở ứng dụng lần đầu tiên, ứng dụng có giao diện trống (ngoại trừ nút Roll (Tung xúc xắc)). Điều này có vẻ bất thường. Có thể người dùng sẽ không biết được điều gì sẽ xảy ra, vì vậy, hãy thay đổi giao diện người dùng để hiện một lượt tung xúc xắc ngẫu nhiên trong lần đầu khởi động ứng dụng và tạo Activity. Khi đó, người dùng sẽ dễ dàng hiểu ra rằng thao tác nhấn vào nút Roll (Tung xúc xắc) sẽ tạo ra một lượt tung xúc xắc.

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

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

    // Do a dice roll when the app starts
    rollDice()
}

ec209952f84b81bd.png

Nhận xét trên mã

Bạn có thể thêm nhận xét để mô tả những gì đang xảy ra trong đoạn mã đó.

Sau khi bạn đã thực hiện tất cả những thay đổi này, phương thức rollDice() của bạn sẽ trông giống như sau.

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
    // Create new Dice object with 6 sides and roll the dice
    val dice = Dice(6)
    val diceRoll = dice.roll()

    // Find the ImageView in the layout
    val diceImage: ImageView = findViewById(R.id.imageView)

    // Determine which drawable resource ID to use based on the dice roll
    val drawableResource = when (diceRoll) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    // Update the ImageView with the correct drawable resource ID
    diceImage.setImageResource(drawableResource)

    // Update the content description
    diceImage.contentDescription = diceRoll.toString()
}

Để có tệp MainActivity.kt đầy đủ, hãy xem mã giải pháp trên GitHub được liên kết trong bước tiếp theo.

Chúc mừng bạn đã hoàn tất ứng dụng Dice Roller! Bây giờ bạn có thể mang ứng dụng này ra chơi cùng bạn bè!

7. Mã giải pháp

Mã giải pháp cho lớp học lập trình này nằm trong dự án và mô-đun dưới đây.

Để lấy mã cho lớp học lập trình này và mở trong Android Studio, hãy làm theo các bước sau.

Lấy mã

  1. Nhấp vào URL được cung cấp. Thao tác này sẽ mở trang GitHub của dự án trong một trình duyệt.
  2. Trên trang GitHub của dự án, hãy nhấp vào nút Code (Mã), một hộp thoại sẽ xuất hiện.

5b0a76c50478a73f.png

  1. Trong hộp thoại này, hãy nhấp vào nút Download ZIP (Tải tệp ZIP xuống) để lưu dự án vào máy tính. Chờ quá trình tải xuống hoàn tất.
  2. Xác định vị trí của tệp trên máy tính (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
  3. Nhấp đúp vào tệp ZIP để giải nén. Thao tác này sẽ tạo một thư mục mới chứa các tệp dự án.

Mở dự án trong Android Studio

  1. Khởi động Android Studio.
  2. Trong cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào Open an existing Android Studio project (Mở một dự án hiện có trong Android Studio).

36cc44fcf0f89a1d.png

Lưu ý: Nếu Android Studio đã mở sẵn thì thay vào đó, hãy chọn tuỳ chọn sau đây trong trình đơn File > New > Import Project (Tệp > Mới > Nhập dự án).

21f3eec988dcfbe9.png

  1. Trong hộp thoại Import Project (Nhập dự án), hãy chuyển đến nơi chứa thư mục dự án đã giải nén (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
  2. Nhấp đúp vào thư mục dự án đó.
  3. Chờ Android Studio mở dự án.
  4. Nhấp vào nút Run (Chạy) 11c34fc5e516fb1c.png để xây dựng và chạy ứng dụng. Hãy đảm bảo ứng dụng được dựng như mong đợi.
  5. Duyệt qua các tệp dự án trong cửa sổ công cụ Project (Dự án) để xem cách ứng dụng được thiết lập.

8. Tóm tắt

  • Sử dụng setImageResource() để thay đổi hình ảnh xuất hiện trong một ImageView
  • Sử dụng các câu lệnh luồng điều khiển như biểu thức if / else hoặc biểu thức when để xử lý nhiều trường hợp trong ứng dụng, chẳng hạn như hiện hình ảnh tuỳ vào hoàn cảnh.

9. Tìm hiểu thêm

10. Tự thực hành

Thực hiện những việc sau:

  1. Thêm một viên xúc xắc khác vào ứng dụng sao cho nút Roll (Tung xúc xắc) cho ra 2 kết quả xúc xắc. Bạn sẽ cần bao nhiêu ImageViews trong bố cục? Điều này sẽ ảnh hưởng như thế nào đến mã MainActivity.kt?

Kiểm tra thành phẩm:

Sau khi hoàn thiện, ứng dụng của bạn phải không gặp lỗi nào khi chạy và cho thấy hai viên xúc xắc.