Tham số nội dung

Giới thiệu

Cập nhật NewsCard có nhiều tham số hơn

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.

  1. 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).
  2. 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ỏ”.

    Trình bổ trợ Figma với tham số “hình thu nhỏ” (thumbnail) đã thêm
  3. 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)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".

    Trình bổ trợ Figma với các tham số “headline”, “author” và “date” đã thêm
  4. 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.

    Trình bổ trợ Figma với cả ba lớp hình thu nhỏ được chọn

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ã.

  1. Mở trình bổ trợ Figma Relay (nếu chưa mở).

  2. Nhấp vào Chia sẻ với nhà phát triển.

  3. 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ẻ

  4. 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:

  1. 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).

    Cập nhật tuỳ chọn Gói giao diện người dùng trong trình đơn theo bối cảnh
  2. Nhấp vào Nút Tạo dự án để 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út tạo bản dựng trên thanh công cụ
  3. 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.
    Giao diện người dùng của ứng dụng có ba phần
    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.
  1. 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

  2. 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(...)
    ...
    
  3. Đố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))
            ...
        }
    }
    
  4. Đố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))
            }
        }
    }
    
  5. 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(...)
    ...
    
  6. Đố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))
            }
        }
    }
    
  7. Nhấp vào Nút Tạo dự án để 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):

    Xem trước NewsApp

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.