Hình ảnh được tải lên firebase như thế nào

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách thêm hình ảnh vào ứng dụng bằng cách sử dụng

R.drawable.graphic 3 kết hợp.

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

• Kiến thức cơ bản về cách tạo và chạy ứng dụng trong Android Studio.
• Kiến thức cơ bản về cách thêm thành phần giao diện người dùng, chẳng hạn như thành phần kết hợp văn bản.

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

• Cách thêm ảnh hoặc hình ảnh vào ứng dụng Android.
• Cách dùng thành phần kết hợp

  R.drawable.graphic 3 để hiện hình ảnh trong ứng dụng.

• Các phương pháp hay nhất khi sử dụng tài nguyên

  R.drawable.graphic 5.

Sản phẩm bạn sẽ tạo ra

• Cải thiện ứng dụng Happy Birthday (Chúc mừng sinh nhật) để đưa vào hình ảnh.

Bạn cần có

• Máy tính đã cài đặt Android Studio.
• Ứng dụng từ lớp học lập trình Dựng ứng dụng đơn giản bằng thành phần kết hợp văn bản.

2. Xem video tập lập trình (Không bắt buộc)

Nếu bạn muốn xem một trong những người hướng dẫn của khoá học hoàn thành lớp học lập trình, hãy phát video bên dưới. Bước này là bước không bắt buộc. Bạn cũng có thể bỏ qua video này và bắt đầu tham gia lớp học lập trình ngay.

3. Thiết lập ứng dụng

Mở dự án Happy Birthday của bạn từ lớp học lập trình trước trên Android Studio.

Khi khởi chạy, ứng dụng sẽ có dạng như ảnh chụp màn hình này.

Thêm hình ảnh vào dự án

Trong nhiệm vụ này, bạn sẽ tải một hình ảnh xuống từ Internet rồi thêm hình ảnh đó vào ứng dụng Happy Birthday.

1. Mở hình ảnh cho ứng dụng thiệp sinh nhật qua đường liên kết này.
2. Nhấp vào Download (Tải xuống).

1. Nhấp chuột phải vào hình ảnh rồi lưu tệp trên máy tính dưới dạng

   R.drawable.graphic 6.

2. Ghi lại vị trí bạn đã lưu hình ảnh.

Ví dụ: bạn có thể đã lưu hình ảnh trong thư mục Downloads (Tệp đã tải xuống).

1. Trong Android Studio, hãy nhấp vào View (Xem) > Tool Windows (Cửa sổ công cụ) > Resource Manager (Trình quản lý tài nguyên) hoặc nhấp vào thẻ Resource Manager (Trình quản lý tài nguyên) ở bên cạnh cửa sổ Project (Dự án).

Lưu ý: Trình quản lý tài nguyên là cửa sổ công cụ cho phép bạn nhập, tạo, quản lý và sử dụng tài nguyên trong ứng dụng.

1. Nhấp vào + (Add resources to the module) (Thêm tài nguyên vào mô-đun) > Import Drawables (Nhập đối tượng có thể vẽ).

1. Trong trình duyệt tệp, hãy chọn tệp hình ảnh bạn đã tải xuống rồi nhấp vào Open (Mở).

Thao tác này sẽ mở hộp thoại Import Drawables (Nhập đối tượng có thể vẽ).

1. Android Studio sẽ cho thấy bản xem trước của hình ảnh đã tải xuống. Chọn Density (Mật độ) trên danh sách thả xuống của Qualifier Type (Loại bộ hạn định). Bạn sẽ tìm hiểu lý do cần làm việc này trong phần sau.

1. Chọn No Density (Không có mật độ) trên danh sách Value (Giá trị).

Thiết bị Android có nhiều loại kích thước màn hình (chẳng hạn như điện thoại, máy tính bảng, TV, v.v. ) và màn hình của chúng cũng có nhiều kích thước pixel. Tức là trong khi một thiết bị có kích thước 160 pixel mỗi inch vuông, thì một thiết bị khác lại đáp ứng 480 pixel trên cùng không gian đó. Nếu bạn không xem xét những biến thể này trong phần mật độ pixel thì có thể hệ thống sẽ điều chỉnh tỷ lệ hình ảnh của bạn. Việc này có thể khiến hình ảnh bị mờ, hình ảnh lớn chiếm nhiều dung lượng bộ nhớ hoặc hình ảnh sai kích thước.

Khi bạn đổi kích thước hình ảnh thành kích thước lớn hơn quy cách mà hệ thống Android có thể xử lý, hệ thống sẽ báo lỗi hết dung lượng bộ nhớ. Đối với ảnh chụp và hình nền, chẳng hạn như hình ảnh hiện tại,

R.drawable.graphic 6, bạn nên đặt chúng vào thư mục

R.drawable.graphic 8 để ngừng hành vi đổi kích thước.

Để biết thêm thông tin về mật độ pixel, hãy xem nội dung Hỗ trợ nhiều mật độ pixel.

1. Nhấp vào Next (Tiếp theo).

1. Android Studio cho bạn thấy cấu trúc thư mục chứa hình ảnh. Hãy lưu ý thư mục

   R.drawable.graphic 8.

2. Nhấp vào Import (Nhập).

Android Studio tạo một thư mục

R.drawable.graphic 8 và đưa hình ảnh vào thư mục đó. Trong khung nhìn của dự án Android Studio, tên tài nguyên sẽ có dạng

val image = painterResource(R.drawable.androidparty) 1. Trong hệ thống tệp trên máy tính, Android Studio sẽ tạo một thư mục có tên

R.drawable.graphic 8.

Nếu hình ảnh được nhập thành công thì Android Studio sẽ thêm hình ảnh đó vào danh sách trong thẻ Drawable (Đối tượng có thể vẽ). Danh sách này bao gồm mọi hình ảnh và biểu tượng cho ứng dụng. Giờ đây, bạn có thể sử dụng hình ảnh này trong ứng dụng của mình.

1. Quay lại khung hiển thị của dự án, nhấp vào View > Tool Windows > Project (Khung hiển thị > Cửa sổ công cụ > Dự án) hoặc nhấp vào thẻ Project (Dự án) ở ngoài cùng bên trái.
2. Nhấp vào

   val image = painterResource(R.drawable.androidparty) 3 để xác nhận rằng hình ảnh đó nằm trong thư mục

   val image = painterResource(R.drawable.androidparty) 4.

4. Thêm thành phần kết hợp Image

Để hiện hình ảnh trong ứng dụng, bạn cần xác định vị trí hiện hình ảnh. Tương tự như khi sử dụng thành phần kết hợp

val image = painterResource(R.drawable.androidparty) 5 để hiển thị văn bản, bạn có thể dùng thành phần kết hợp

R.drawable.graphic 3 để hiển thị hình ảnh.

Trong nhiệm vụ này, bạn sẽ thêm một thành phần kết hợp

R.drawable.graphic 3 vào ứng dụng, đặt hình ảnh của thành phần đó thành hình ảnh bánh nướng nhỏ bạn đã tải xuống, sau đó đặt và điều chỉnh kích thước của hình ảnh sao cho vừa với màn hình.

Thêm hàm có thể kết hợp để thêm hình ảnh

1. Trong tệp

   val image = painterResource(R.drawable.androidparty) 8, hãy thêm hàm

   val image = painterResource(R.drawable.androidparty) 9 trước hàm

   Image( painter = image ) 0.

2. Truyền vào hàm

   val image = painterResource(R.drawable.androidparty) 9 hai tham số

   R.drawable.graphic 5: một tham số tên là

   Image( painter = image ) 3 cho lời chúc sinh nhật và tham số còn lại tên là

   Image( painter = image ) 4 cho chữ ký.

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { }

Tài nguyên trong Jetpack Compose

Tài nguyên (resource) là các tệp bổ sung và nội dung tĩnh mà mã của bạn sử dụng, chẳng hạn như bitmap, chuỗi giao diện người dùng, hướng dẫn về ảnh động, v.v. Để biết thêm thông tin về tài nguyên trong Android, hãy xem nội dung Tổng quan về tài nguyên ứng dụng.

Bạn phải luôn tách riêng các tài nguyên ứng dụng (chẳng hạn như hình ảnh và chuỗi) khỏi mã để có thể duy trì chúng một cách độc lập. Trong thời gian chạy, Android sử dụng tài nguyên phù hợp dựa trên cấu hình hiện tại. Ví dụ: bạn nên cung cấp bố cục khác của giao diện người dùng dựa trên kích thước màn hình hoặc các chuỗi khác dựa trên chế độ cài đặt ngôn ngữ.

Nhóm tài nguyên

Bạn nên luôn đặt mỗi loại tài nguyên trong một thư mục con cụ thể thuộc thư mục

Image( painter = image ) 5 của dự án. Ví dụ: sau đây là hệ phân cấp tệp của một dự án đơn giản:

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml

Như bạn có thể thấy trong ví dụ này, thư mục

Image( painter = image ) 5 chứa tất cả các tài nguyên trong thư mục con, bao gồm cả thư mục

val image = painterResource(R.drawable.androidparty) 4 cho tài nguyên hình ảnh, thư mục

Image( painter = image ) 8 cho biểu tượng trình chạy và thư mục

Image( painter = image ) 9 cho tài nguyên chuỗi. Để tìm hiểu thêm về cách sử dụng, định dạng và cú pháp đối với tài nguyên ứng dụng, hãy xem nội dung Tổng quan về các loại tài nguyên.

Truy cập tài nguyên

Jetpack Compose có thể giúp bạn truy cập vào các tài nguyên đã xác định trong dự án Android của mình. Bạn có thể truy cập tài nguyên bằng mã tài nguyên được tạo trong lớp

Image( painter = image, contentDescription = null ) 0 của dự án.

Lớp

Image( painter = image, contentDescription = null ) 0 là lớp do Android tự động tạo, có chứa mã nhận dạng của tất cả tài nguyên trong dự án. Trong hầu hết các trường hợp, mã tài nguyên sẽ giống tên tệp. Ví dụ: bạn có thể truy cập hình ảnh trong hệ phân cấp tệp trước đó bằng mã này:

R.drawable.graphic

Trong nhiệm vụ tiếp theo, bạn sẽ dùng hình ảnh (tệp

R.drawable.graphic 6) mà bạn đã thêm trong nhiệm vụ trước.

1. Trong hàm

   val image = painterResource(R.drawable.androidparty) 9, hãy khai báo một thuộc tính

   Image( painter = image, contentDescription = null ) 4 rồi đặt tên cho thuộc tính đó là

   Image( painter = image, contentDescription = null ) 5.

2. Gọi hàm

   Image( painter = image, contentDescription = null ) 6 bằng cách truyền vào tài nguyên

   Image( painter = image, contentDescription = null ) 7. Chỉ định giá trị trả về cho

   Image( painter = image, contentDescription = null ) 5.

val image = painterResource(R.drawable.androidparty)

Hàm

Image( painter = image, contentDescription = null ) 6 tải một tài nguyên hình ảnh có thể vẽ và lấy mã tài nguyên (

@Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } 0 trong trường hợp này) làm đối số.

1. Sau khi gọi hàm

   Image( painter = image, contentDescription = null ) 6, hãy thêm thành phần kết hợp

   R.drawable.graphic 3 rồi truyền vào

   Image( painter = image, contentDescription = null ) 5 làm đối số được đặt tên cho

   @Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } 4.

Image( painter = image )

Android Studio đưa ra lỗi có nội dung: "None of the following functions can be called with the arguments supplied" (Không gọi được hàm nào sau đây bằng các đối số đã cung cấp), các đối số này không khớp với hàm. Bạn có thể thấy lỗi này khi di chuột qua thành phần kết hợp

R.drawable.graphic 3. Nguyên nhân của lỗi này là do các đối số bạn đang truyền vào hàm có thể kết hợp

@Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } 6 không đủ và không khớp với chữ ký trong hàm. Trong bước tiếp theo, bạn sẽ sửa lỗi này.

Kiểm tra khả năng hỗ trợ tiếp cận của ứng dụng

Khi làm theo các phương pháp lập trình để hỗ trợ tiếp cận, bạn giúp tất cả người dùng của mình, bao gồm cả những người dùng khuyết tật, thao tác và tương tác với ứng dụng của bạn một cách dễ dàng hơn.

Lưu ý: Android cung cấp nhiều công cụ cho người dùng. Ví dụ: TalkBack là trình đọc màn hình của Google có sẵn trên thiết bị Android. TalkBack đưa ra phản hồi bằng giọng nói cho người dùng, cho phép người dùng sử dụng thiết bị mà không cần nhìn vào màn hình. Để tìm hiểu thêm về khả năng hỗ trợ tiếp cận, hãy xem nội dung Xây dựng các ứng dụng dễ tiếp cận hơn.

Android Studio đưa ra các gợi ý và cảnh báo, giúp bạn xây dựng ứng dụng sao cho người dùng có thể tiếp cận dễ dàng hơn. Thông tin mô tả nội dung xác định mục đích của một thành phần trên giao diện người dùng, giúp ứng dụng dễ sử dụng hơn nhờ TalkBack.

Tuy nhiên, hình ảnh trong ứng dụng này chỉ được dùng cho mục đích trang trí. Thao tác thêm thông tin mô tả nội dung cho hình ảnh sẽ khiến người dùng khó sử dụng ứng dụng hơn qua TalkBack trong trường hợp cụ thể này. Thay vì viết thông tin mô tả nội dung thông báo cho người dùng, bạn có thể thiết lập đối số

@Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } 7 của hình ảnh là

@Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } 8 để TalkBack bỏ qua thành phần kết hợp

R.drawable.graphic 3.

• Trong thành phần kết hợp

  R.drawable.graphic 3, hãy thêm một đối số khác có tên

  @Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } 7 rồi thiết lập giá trị của đối số đó thành

  @Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } 8.

Image( painter = image, contentDescription = null )

Xem trước thành phần kết hợp R.drawable.graphic 3

Trong nhiệm vụ này, bạn xem trước thành phần kết hợp hình ảnh rồi chạy ứng dụng trên trình mô phỏng hoặc thiết bị.

1. Trong hàm

   Image( painter = image ) 0, hãy thay thế lệnh gọi hàm

   @Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) } } 5 bằng hàm

   val image = painterResource(R.drawable.androidparty) 9.

Hàm của bạn phải trông giống như đoạn mã sau:

@Preview(showBackground = false) @Composable fun BirthdayCardPreview() { HappyBirthdayTheme { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } }

1. Trong ngăn Design (Thiết kế), hãy nhấp vào
   
   Build & Refresh (Tạo và làm mới).

Xin lưu ý rằng bạn không thể thấy văn bản đó nữa vì hàm mới chỉ có thành phần kết hợp

R.drawable.graphic 3 chứ không phải thành phần kết hợp

val image = painterResource(R.drawable.androidparty) 5.

5. Thêm bố cục hộp

3 thành phần bố cục tiêu chuẩn, cơ bản trong Compose là các thành phần kết hợp

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) } } 9,

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 0 và

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 1. Bạn đã tìm hiểu về các thành phần kết hợp

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) } } 9,

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 0 trong các lớp học lập trình trước. Giờ đây, bạn sẽ có thể khám phá thêm về thành phần kết hợp

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 1.

Bố cục

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 1 là một trong những thành phần bố cục chuẩn trong Compose. Sử dụng bố cục

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 1 để xếp chồng các phần tử lên nhau. Bố cục

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 1 cũng cho phép bạn định cấu hình vị trí cụ thể của các phần tử có trong bố cục đó.

1. Trong hàm

   val image = painterResource(R.drawable.androidparty) 9, hãy thêm thành phần kết hợp

   @Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 1 xung quanh thành phần kết hợp

   R.drawable.graphic 3 như sau:

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) } }

1. Ở cuối thành phần kết hợp

   @Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } } 1, hãy gọi hàm

   @Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) } } 5 rồi truyền vào đó lời chúc sinh nhật cũng như chữ ký như sau:

@Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) BirthdayGreetingWithText(message = message, from = from) } }

1. Nhấp vào Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế) để xem bản xem trước mới cập nhật.

Bạn sẽ thấy văn bản và hình ảnh.

1. Để những thay đổi trên được phản ánh trong trình mô phỏng hoặc thiết bị, trong hàm

   setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 3, hãy thay thế lệnh gọi hàm

   @Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) } } 5 bằng hàm

   val image = painterResource(R.drawable.androidparty) 9.

Khối

setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 6 sẽ có dạng như đoạn mã sau:

setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } }

1. Chạy ứng dụng trên trình mô phỏng hoặc thiết bị.

Hãy lưu ý rằng hình ảnh rộng bằng màn hình ứng dụng nhưng được neo vào đầu màn hình. Cuối màn hình có nhiều khoảng trắng nên trông không thu hút lắm. Trong nhiệm vụ tiếp theo, bạn sẽ lấp đầy chiều rộng và chiều cao của màn hình rồi điều chỉnh tỷ lệ hình ảnh để lấp đầy toàn bộ màn hình.

6. Đặt và điều chỉnh tỷ lệ thành phần kết hợp Image

Trong nhiệm vụ này, bạn sẽ tạo hình ảnh toàn màn hình để làm đẹp ứng dụng. Hãy sử dụng các tham số

setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 7 và

setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 8 để thực hiện.

Phương thức sửa đổi

Phương thức sửa đổi được dùng để trang trí hoặc thêm hành vi vào thành phần trên giao diện người dùng Jetpack Compose. Ví dụ: bạn có thể thêm nền, khoảng đệm hoặc hành vi vào hàng, văn bản hoặc nút. Để thiết lập các giá trị này, thành phần kết hợp phải chấp nhận đối tượng sửa đổi làm tham số.

Trong một lớp học lập trình trước đó, bạn đã tìm hiểu về các đối tượng sửa đổi và sử dụng đối tượng sửa đổi khoảng đệm (Modifier.padding) để thêm không gian xung quanh thành phần kết hợp

val image = painterResource(R.drawable.androidparty) 5. Đối tượng sửa đổi có thể rất hữu ích và bạn sẽ thấy điều đó trong cả lộ trình này cũng như các lộ trình sắp tới.

Ví dụ: thành phần kết hợp

val image = painterResource(R.drawable.androidparty) 5 này có một đối số

setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 7 thay đổi màu nền thành xanh lục.

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 0

Bây giờ, bạn có thể thêm một đối số

setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 7 vào thành phần kết hợp

R.drawable.graphic 3.

1. Trong hàm

   val image = painterResource(R.drawable.androidparty) 9, hãy thêm một đối số có tên khác vào thành phần kết hợp

   R.drawable.graphic 3 gọi là

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 06 rồi thiết lập giá trị

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 07 cho thành phần đó.

Thao tác này sẽ thiết lập chiều cao của thành phần kết hợp thành chiều cao tối đa hiện có.

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 1

Nhập hàm

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 08 khi Android Studio nhắc.

1. Thêm hàm

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 09 vào phương thức sửa đổi.

Nếu phải sử dụng nhiều đối tượng sửa đổi cùng lúc thì bạn có thể xâu chuỗi các lệnh gọi đến đối tượng sửa đổi lại với nhau, như minh hoạ trong đoạn mã dưới đây:

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 2

Nhập hàm

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 10 khi Android Studio nhắc.

Điều chỉnh tỷ lệ nội dung

Bạn đã thêm hình ảnh vào ứng dụng cũng như đã điều chỉnh vị trí của hình ảnh. Giờ đây, bạn cần điều chỉnh loại tỷ lệ hình ảnh (cho biết cách định kích thước hình ảnh) để hình ảnh lấp đầy toàn màn hình.

Hiện có khá nhiều loại

setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 8. Bạn sử dụng tỷ lệ tham số

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 12 để điều chỉnh tỷ lệ hình ảnh một cách đồng nhất nhằm duy trì tỷ lệ khung hình sao cho chiều rộng và chiều cao của hình ảnh bằng hoặc lớn hơn kích thước tương ứng của màn hình, như minh hoạ trong hình ảnh dưới đây.

1. Thêm đối số có tên

   setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 8 vào hình ảnh.

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 3

1. Nhập thuộc tính

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 14 khi Android Studio nhắc.

Vậy là được khá nhiều mã rồi! Giờ là lúc xem trước thành quả của bạn.

Xem trước hình ảnh

• Nhấp vào Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế).

Hình ảnh chiếc bánh bây giờ sẽ lấp đầy toàn bộ màn hình như bạn có thể thấy trong ảnh chụp màn hình sau:

Chạy trên thiết bị

Chạy ứng dụng trên thiết bị hoặc trình mô phỏng.

Vậy là đã xử lý xong phần văn bản lời chúc và hình ảnh toàn màn hình!

7. Căn chỉnh văn bản và thêm khoảng đệm

Trong nhiệm vụ này, bạn đệm và căn chỉnh tin nhắn văn bản để làm đẹp thêm ứng dụng.

1. Trong tệp

   val image = painterResource(R.drawable.androidparty) 8, hãy di chuyển đến hàm

   @Composable fun BirthdayGreetingWithImage(message: String, from: String) { val image = painterResource(R.drawable.androidparty) //Step 3 create a box to overlap image and texts Box { Image( painter = image, contentDescription = null ) } } 5 rồi tìm lời chúc sinh nhật. Đây là thành phần kết hợp

   val image = painterResource(R.drawable.androidparty) 5 đầu tiên.

2. Thêm một đối số có tên

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 06 vào lời chúc sinh nhật rồi chỉ định giá trị

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 19 cho đối số đó. Thao tác này sẽ đặt chiều rộng của chiều tổng hợp thành chiều rộng tối đa hiện có.

3. Nối một hàm khác,

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 20 với

   setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 7. Thao tác này sẽ bao bọc và căn chỉnh thành phần kết hợp trên chiều rộng màn hình hiện có (hoặc chiều rộng mẹ).

4. Truyền một đối số

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 22 vào hàm

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 20. Thao tác này sẽ căn chỉnh thành phần kết hợp Text hoặc phần tử con với vị trí bắt đầu/đầu màn hình hoặc phần tử mẹ.

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 4

Thành phần kết hợp

val image = painterResource(R.drawable.androidparty) 5 lời chúc sẽ có dạng như đoạn mã sau:

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 5

Nhập thuộc tính

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 25 của gói

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 26.

Khoảng đệm

Một thành phần trên giao diện người dùng bao bọc nội dung. Để thành phần này không bao bọc quá chật, bạn có thể chỉ định số lượng khoảng đệm mỗi bên.

Khoảng đệm được dùng làm phương thức sửa đổi, tức là bạn có thể áp dụng khoảng đệm cho thành phần kết hợp bất kỳ. Đối với mỗi bên của thành phần kết hợp, phương thức sửa đổi

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 27 sẽ lấy đối số tùy chọn giúp xác định số lượng khoảng đệm.

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 6

1. Nối lệnh gọi hàm

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 28 với

   setContent { HappyBirthdayTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma") } } } 7 rồi truyền vào đó một đối số có tên

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 30 được thiết lập thành

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 31 và một đối số có tên

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 32 được thiết lập thành

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 31.

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 7

1. Nếu Android Studio không tự động nhập các gói này, hãy nhập theo cách thủ công như sau:

• MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 34

• MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 35

1. Nhấp vào Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế) rồi chú ý khoảng đệm ở vị trí trên cùng và vị trí bắt đầu lời chúc sinh nhật.

1. Tương tự như vậy, hãy căn chỉnh chữ ký với vị trí kết thúc màn hình. Ngoài ra, hãy thêm một khoảng đệm

   MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 31 vào vị trí bắt đầu và kết thúc của khoảng đệm đó.

MyProject/ src/ MyActivity.kt res/ drawable/ graphic.png mipmap/ icon.png values/ strings.xml 8

1. Nhấp vào Build & Refresh (Tạo và làm mới) trong ngăn Design (Thiết kế) rồi chú ý khoảng đệm và độ căn chỉnh của chữ ký.

Rất tốt! Bạn đã thêm một hình ảnh vào ứng dụng Happy Birthday, sử dụng đổi tượng sửa đổi để căn chỉnh văn bản, tuân theo các nguyên tắc hỗ trợ tiếp cận và giúp hoạt động dịch sang các ngôn ngữ khác trở nên dễ dàng hơn! Quan trọng hơn, bạn đã tạo xong ứng dụng Happy Birthday của riêng mình! Hãy chia sẻ thành phẩm của bạn lên mạng xã hội và dùng hashtag #AndroidBasics để chúng tôi xem được!