Trang này được dịch bởi Cloud Translation API.

Tham số nội dung

Giới thiệu

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.

Bây giờ, chúng ta hãy tích hợp thành phần NewsCard vào màn hình chính.

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ập com.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