Giới thiệu
![Cập nhật NewsCard có nhiều tham số hơn](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?authuser=9&hl=vi)
Nội dung của hầu hết thiết kế giao diện người dùng là không tĩnh — các thiết kế này thay đổi tùy thuộc vào dữ liệu. Trong phần này, chúng tôi thêm dữ liệu vào thiết kế của mình thông qua các tham số nội dung. Tham số nội dung cho phép nhà thiết kế chỉ định phần dữ liệu nào sẽ được điền vào
Thêm tham số trong Figma
Hãy thêm tham số nội dung vào thành phần.
- Chuyển sang Figma. Trong NewsCardTutorial, hãy chọn lớp hình thu nhỏ trong biến thể hero-item (⌘ + nhấp chuột trên hình ảnh đối với máy Mac, hoặc Ctrl + nhấp chuột trên hình ảnh đối với Windows và Linux).
Trong trình bổ trợ Chuyển tiếp cho Figma (Relay for Figma), hãy nhấp vào dấu + rồi chọn
image-content
trong trình đơn thả xuống, sau đó đổi tên thành “hình thu nhỏ”.Chọn lớp văn bản dòng tiêu đề, hãy nhấp vào + và chọn
text-content
. Lặp lại các bước tương tự cho các lớp văn bản tác giả (author) và ngày (date) trong biến thể hero-item. Đặt tên tương ứng là "dòng tiêu đề", "tác giả" và "ngày".Nhấp vào tham số hình thu nhỏ trong trình bổ trợ. Hãy lưu ý rằng trong mỗi biến thể thành phần, lớp hình thu nhỏ sẽ là một hình ảnh và được chọn.
Vì ba lớp có cùng tên (“hình thu nhỏ”) và có cùng kiểu dữ liệu (nội dung hình ảnh), tham số nội dung đã được kết nối với kiểu dữ liệu đó trong cả ba biến thể. Có nghĩa là một tham số cung cấp cùng một dữ liệu cho nhiều biến thể. Điều này cũng đúng đối với các tham số tiêu đề, tác giả và ngày.
Lưu phiên bản đã đặt tên
Bây giờ, hãy đánh dấu phiên bản này là đã sẵn sàng để nhập vào mã.
Mở trình bổ trợ Figma Relay (nếu chưa mở).
Nhấp vào Chia sẻ với nhà phát triển.
Trên màn hình Chia sẻ với nhà phát triển, hãy nhập tên và nội dung mô tả cho phiên bản.
Tiêu đề ví dụ: Tham số đã thêm
Mô tả ví dụ: Đã thêm tham số nội dung vào thẻ
Nhấp vào Lưu.
Cập nhật thành phần trong Android Studio
Hãy cập nhật thành phần NewsCard:
Trong Android Studio, hãy đảm bảo rằng cửa sổ công cụ Dự án (Project) đang ở chế độ xem Android. Sau đó, nhấp chuột phải vào
app/ui-packages/news_card/
rồi nhấp vào Cập nhật Gói giao diện người dùng (Update UI Package).Nhấp vào
để tạo dự án. Thao tác này sẽ lấy Gói giao diện người dùng đã cập nhật và tạo phiên bản cập nhật của mã thành phần kết hợp.
Nếu nhìn vào
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
, bạn sẽ thấy các tham số nội dung mà chúng tôi thêm (thumbnail
,headline
,author
,date
) xuất hiện trong danh sách tham số của thành phần kết hợp.// View to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list * * This composable was generated from the UI package 'news_card'. * Generated code; don't edit directly. */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "" ) { ...
Tích hợp vào ứng dụng
Hãy xem lại ứng dụng của chúng ta với giao diện người dùng chưa sửa đổi. Ứng dụng này chứa danh sách các tin bài thông thường và danh sách các tin bài âm thanh. Đây là hai thành phần kết hợp mà chúng ta cần thêm thành phần NewsCard vào:
- Thành phần kết hợp PostListArticleStories sẽ chịu trách nhiệm về tin bài thông thường.
- Tham số postTop biểu thị tin bài hàng đầu.
- Tham số posts (bài đăng) đại diện cho phần còn lại của các tin bài.
- Thành phần kết hợp PostListAudioStories kết xuất các tin bài dạng âm thanh.
Trong
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, hãy thêm các nội dung nhập sau đây bên cạnh các dòng nhập khác ở gần phía trên cùng tệp: nhậpcom.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
Vẫn trong HomeScreen.kt, hãy cuộn xuống PostList ArticleStories.
@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories(...) @Composable fun Dialog(...) ...
Đối với postTop, hãy thay thế thành phần Văn bản (Text) bằng NewsCard mới nhập của chúng ta, bằng cách sử dụng thành phần hiển thị HeroItem.
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { Spacer(modifier = Modifier.size(12.dp)) NewsCard( thumbnail = painterResource(postTop.imageId), headline = postTop.title, author = postTop.metadata.author.name, date = postTop.metadata.date, view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
Đối với mỗi bài đăng, hãy thay thế thành phần Văn bản (Text) bằng NewsCard mới nhập bằng cách sử dụng thành phần hiển thị ArticleItem.
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { ... posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Chúng ta cũng có thể làm tương tự cho các tin bài âm thanh ở dưới cùng. Vẫn trong
HomeScreen.kt
, hãy di chuyển xuống PostListAudioStories, ở khoảng dòng 260.@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories(...) @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable fun Dialog(...) ...
Đối với mỗi bài đăng, hãy thay thế thành phần Văn bản (Text) bằng NewsCard mới nhập bằng cách sử dụng thành phần hiển thị AudioItem.
@Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { Column( horizontalAlignment = ..., modifier = ... ) { posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Nhấp vào
để tạo lại dự án và xem kết quả trong bản xem trước (chế độ xem chia đôi màn hình):
Bước tiếp theo
Tiếp theo, chúng ta sẽ thêm một số tính năng tương tác vào ứng dụng.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Thêm trình xử lý tương tác vào thiết kế
- Xử lý các biến thể thiết kế
- Chuyển đổi thiết kế thành mã trong Android Studio