콘텐츠 매개변수

소개

더 많은 매개변수로 NewsCard 업데이트

대부분의 UI 디자인의 콘텐츠는 정적 콘텐츠가 아니며 데이터에 따라 달라집니다. 이 섹션에서는 콘텐츠 매개변수를 통해 디자인에 데이터를 추가합니다. 이를 통해 디자이너는 디자인의 어떤 부분을 데이터로 채울지 지정할 수 있습니다.

Figma에서 매개변수 추가

구성요소에 콘텐츠 매개변수를 추가하겠습니다.

  1. Figma로 전환합니다. NewsCardTutorial의 hero-item 변형에서 thumbnail image 레이어를 선택합니다(이미지에서 Mac의 경우 ⌘ + 클릭 또는 Windows 및 Linux의 경우 Ctrl + 클릭).

  2. Figma용 Relay 플러그인에서 +를 클릭하고 드롭다운 메뉴에서 image-content를 선택한 후 이름을 'thumbnail'로 변경합니다.

    'thumbnail' 매개변수가 추가된 Figma 플러그인

  3. headline text 레이어를 선택하고 +를 클릭한 후 text-content를 선택합니다. hero-item 변형에서 author 텍스트 레이어와 date 텍스트 레이어에 동일한 단계를 반복합니다. 이름을 각각 'headline', 'author', 'date'로 지정합니다.

    'headline', 'author', 'date' 매개변수가 추가된 Figma 플러그인

  4. 플러그인에서 썸네일 매개변수를 클릭합니다. 모든 구성요소 변형에서 썸네일 레이어는 이미지이며 선택됩니다.

    레이어 3개의 이름이 동일하며('thumbnail') 데이터 유형이 동일하므로(image-content) 3개의 변형 모두에서 콘텐츠 매개변수가 연결됩니다. 즉, 매개변수 하나가 동일한 데이터를 여러 변형에 제공합니다. headline, author, date 매개변수도 마찬가지입니다.

    3개 썸네일 레이어가 모두 선택된 Figma 플러그인

이름이 지정된 버전 저장

이제 이 버전을 코드로 가져올 준비가 된 것으로 표시하겠습니다.

  1. Figma Relay 플러그인이 아직 열려 있지 않다면 엽니다.

  2. 개발자와 공유를 클릭합니다.

  3. 개발자와 공유 화면에서 버전의 이름과 설명을 입력합니다.

    제목 예: 추가된 매개변수

    설명 예: 카드에 콘텐츠 매개변수가 추가됨

  4. 저장을 클릭합니다.

Android 스튜디오에서 구성요소 업데이트

NewsCard 구성요소를 업데이트하겠습니다.

  1. Android 스튜디오에서 Project 도구 창이 Android 뷰에 있는지 확인합니다. 그런 다음 app/ui-packages/news_card/를 마우스 오른쪽 버튼으로 클릭하고 Update UI Package를 클릭합니다.

    컨텍스트 메뉴의 UI 패키지 업데이트 옵션

  2. Make Project 버튼를 클릭하여 프로젝트를 빌드합니다. 업데이트된 UI 패키지를 사용하여 업데이트된 버전의 컴포저블 코드가 생성됩니다.

    툴바의 빌드 버튼

  3. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt를 살펴보면 추가한 콘텐츠 매개변수(thumbnail, headline, author, date)가 컴포저블의 매개변수 목록에 표시되는 것을 확인할 수 있습니다.

    // 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 = ""
) {
...

앱에 통합

앱을 다시 살펴보겠습니다. 앱의 UI를 아직 수정하지 않았습니다. 일반 뉴스 기사 목록과 오디오 기사 목록이 포함되어 있습니다. 이 두 컴포저블에 NewsCard 구성요소를 추가해야 합니다.

  • PostListArticleStories 컴포저블은 일반 뉴스 기사를 담당합니다.
  • postTop 매개변수는 주요 뉴스를 나타냅니다.
  • post 매개변수는 나머지 뉴스를 나타냅니다.
  • PostListAudioStories 컴포저블은 오디오 뉴스 기사를 렌더링합니다.
    섹션 3개가 있는 앱 UI
    이제 NewsCard 구성요소를 홈 화면에 통합하겠습니다.

  1. app/java/com/example/hellonews/ui/home/HomeScreen.kt에서 파일 상단 근처의 다른 가져오기 줄 옆에 다음 가져오기를 추가합니다. com.example.hellonews.newscard.NewsCard 가져오기

    import com.example.hellonews.newscard.View

  2. HomeScreen.kt에서 PostListArticleStories까지 아래로 스크롤합니다.

    @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. postTop의 경우 HeroItem 뷰를 사용하여 Text 구성요소를 새로 가져온 NewsCard로 바꿉니다.

    @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. 각 post의 경우 ArticleItem 뷰를 사용하여 Text 구성요소를 새로 가져온 NewsCard로 바꿉니다.

    @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. 하단의 오디오 기사에도 동일하게 작업할 수 있습니다. HomeScreen.kt에서 260행 부근의 PostListAudioStories로 아래로 스크롤합니다.

    @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. 각 게시물의 경우 AudioItem 뷰를 사용하여 Text 구성요소를 새로 가져온 NewsCard로 바꿉니다.

    @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. Make Project 버튼를 클릭하여 프로젝트를 다시 빌드하고 미리보기(화면 분할 뷰)에서 결과를 확인합니다.

    NewsApp 미리보기

다음 단계

다음으로 앱에 몇 가지 상호작용을 추가합니다.