소개
![더 많은 매개변수로 NewsCard 업데이트](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?authuser=19&hl=ko)
대부분의 UI 디자인의 콘텐츠는 정적 콘텐츠가 아니며 데이터에 따라 달라집니다. 이 섹션에서는 콘텐츠 매개변수를 통해 디자인에 데이터를 추가합니다. 이를 통해 디자이너는 디자인의 어떤 부분을 데이터로 채울지 지정할 수 있습니다.
Figma에서 매개변수 추가
구성요소에 콘텐츠 매개변수를 추가하겠습니다.
- Figma로 전환합니다. NewsCardTutorial의 hero-item 변형에서 thumbnail image 레이어를 선택합니다(이미지에서 Mac의 경우 ⌘ + 클릭 또는 Windows 및 Linux의 경우 Ctrl + 클릭).
Figma용 Relay 플러그인에서 +를 클릭하고 드롭다운 메뉴에서
image-content
를 선택한 후 이름을 'thumbnail'로 변경합니다.headline text 레이어를 선택하고 +를 클릭한 후
text-content
를 선택합니다. hero-item 변형에서 author 텍스트 레이어와 date 텍스트 레이어에 동일한 단계를 반복합니다. 이름을 각각 'headline', 'author', 'date'로 지정합니다.플러그인에서 썸네일 매개변수를 클릭합니다. 모든 구성요소 변형에서 썸네일 레이어는 이미지이며 선택됩니다.
레이어 3개의 이름이 동일하며('thumbnail') 데이터 유형이 동일하므로(image-content) 3개의 변형 모두에서 콘텐츠 매개변수가 연결됩니다. 즉, 매개변수 하나가 동일한 데이터를 여러 변형에 제공합니다. headline, author, date 매개변수도 마찬가지입니다.
이름이 지정된 버전 저장
이제 이 버전을 코드로 가져올 준비가 된 것으로 표시하겠습니다.
Figma Relay 플러그인이 아직 열려 있지 않다면 엽니다.
개발자와 공유를 클릭합니다.
개발자와 공유 화면에서 버전의 이름과 설명을 입력합니다.
제목 예: 추가된 매개변수
설명 예: 카드에 콘텐츠 매개변수가 추가됨
저장을 클릭합니다.
Android 스튜디오에서 구성요소 업데이트
NewsCard 구성요소를 업데이트하겠습니다.
Android 스튜디오에서 Project 도구 창이 Android 뷰에 있는지 확인합니다. 그런 다음
app/ui-packages/news_card/
를 마우스 오른쪽 버튼으로 클릭하고 Update UI Package를 클릭합니다.를 클릭하여 프로젝트를 빌드합니다. 업데이트된 UI 패키지를 사용하여 업데이트된 버전의 컴포저블 코드가 생성됩니다.
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 컴포저블은 오디오 뉴스 기사를 렌더링합니다.
app/java/com/example/hellonews/ui/home/HomeScreen.kt
에서 파일 상단 근처의 다른 가져오기 줄 옆에 다음 가져오기를 추가합니다.com.example.hellonews.newscard.NewsCard
가져오기import com.example.hellonews.newscard.View
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(...) ...
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)) ... } }
각 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)) } } }
하단의 오디오 기사에도 동일하게 작업할 수 있습니다.
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(...) ...
각 게시물의 경우 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)) } } }
를 클릭하여 프로젝트를 다시 빌드하고 미리보기(화면 분할 뷰)에서 결과를 확인합니다.
다음 단계
다음으로 앱에 몇 가지 상호작용을 추가합니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- 설계에 상호작용 핸들러 추가
- 디자인 변형 처리
- Android 스튜디오에서 디자인을 코드로 변환