ข้อมูลเบื้องต้น

เนื้อหาของการออกแบบ UI ส่วนใหญ่จะไม่คงที่ แต่จะมีการเปลี่ยนแปลงตาม ในส่วนนี้ เราจะเพิ่มข้อมูลในงานออกแบบของเราผ่านทางพารามิเตอร์เนื้อหา ให้นักออกแบบระบุได้ว่าควรเติมข้อมูลส่วนใดของการออกแบบ
เพิ่มพารามิเตอร์ใน Figma
มาเพิ่มพารามิเตอร์เนื้อหาลงในคอมโพเนนต์กัน
- เปลี่ยนไปใช้ Figma ใน NewsCardTutorial ให้เลือกเลเยอร์ภาพปกใน รูปแบบรายการหลัก (⌘ + คลิก Mac หรือ Ctrl + คลิก Windows และ Linux บน รูปภาพ)
ในปลั๊กอิน Relay for Figma ให้คลิก + และเลือก
image-content
ใน เมนูแบบเลื่อนลง แล้วเปลี่ยนชื่อเป็น "ภาพขนาดย่อ"เลือกเลเยอร์ข้อความบรรทัดแรก คลิก + แล้วเลือก
text-content
เกิดซ้ำ ขั้นตอนเดียวกันสำหรับเลเยอร์ข้อความ author และ date ในรายการหลัก รายละเอียดปลีกย่อย โดยตั้งชื่อว่า "headline" "author" และ "date" ตามลำดับคลิกพารามิเตอร์ภาพขนาดย่อในปลั๊กอิน โปรดสังเกตว่าในทุกๆ ตัวแปรคอมโพเนนต์ เลเยอร์ภาพขนาดย่อเป็นรูปภาพและถูกเลือก
เนื่องจากเลเยอร์ทั้ง 3 เลเยอร์มีชื่อเหมือนกัน ("ภาพขนาดย่อ") และเป็นข้อมูลเดียวกัน type (image-content) จะมีการเชื่อมโยงพารามิเตอร์เนื้อหากับพารามิเตอร์ดังกล่าวในทุกด้าน 3 ตัวแปร ซึ่งหมายความว่าพารามิเตอร์หนึ่งจะให้ข้อมูลเดียวกันแก่หลายๆ รายละเอียดปลีกย่อย เช่นเดียวกันกับพารามิเตอร์พาดหัว ผู้เขียน และวันที่
บันทึกเวอร์ชันที่มีชื่อ
เรามาทำเครื่องหมายเวอร์ชันนี้ว่าพร้อมนำเข้าไปยังโค้ดกัน
เปิดปลั๊กอิน Figma Relay หากยังไม่ได้เปิด
คลิกแชร์กับนักพัฒนาซอฟต์แวร์
ในหน้าจอแชร์กับนักพัฒนาซอฟต์แวร์ ให้ป้อนชื่อและคำอธิบายเวอร์ชัน
ตัวอย่างชื่อ: พารามิเตอร์ที่เพิ่ม
ตัวอย่างคำอธิบาย: เพิ่มพารามิเตอร์เนื้อหาลงในการ์ด
คลิกบันทึก
อัปเดตคอมโพเนนต์ใน Android Studio
มาอัปเดตคอมโพเนนต์ NewsCard กัน
ใน Android Studio ให้ตรวจสอบว่าหน้าต่างเครื่องมือโปรเจ็กต์อยู่ในมุมมอง Android จากนั้นคลิกขวา
app/ui-packages/news_card/
แล้วคลิก อัปเดต UI แพ็กเกจคลิก
เพื่อสร้างโปรเจ็กต์ การดำเนินการนี้จะ นำแพ็กเกจ UI ที่อัปเดตแล้วและสร้าง Composable เวอร์ชันอัปเดต โค้ด
ถ้าดูที่
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
คุณจะเห็นว่า พารามิเตอร์เนื้อหาที่เราเพิ่ม (thumbnail
,headline
,author
,date
) จะปรากฏในรายการพารามิเตอร์ของ Composable// 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 กัน โดยจะมีรายการ ทั้งข่าวทั่วไปและรายการเรื่องราวเสียง นี่คือ 2 สิ่งนี้ Composable ที่เราจะต้องเพิ่มคอมโพเนนต์ NewsCard ไปยัง
- PostListArticleStories ที่ Composable รับผิดชอบเกี่ยวกับข่าวปกติ เรื่องราว
- พารามิเตอร์ postTop แสดงเรื่องราวยอดนิยม
- พารามิเตอร์ posts จะแสดงเรื่องราวที่เหลือ
- PostListAudioStories จะแสดงเรื่องราวข่าวที่เป็นเสียง
วันที่ ตอนนี้เราจะมาผสานรวมคอมโพเนนต์ NewsCard ลงในหน้าจอหลักกัน
ใน
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 ให้แทนที่คอมโพเนนต์ Text ด้วยที่นำเข้าใหม่ NewsCard โดยใช้มุมมอง 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))
...
}
}สำหรับโพสต์แต่ละรายการ ให้แทนที่คอมโพเนนต์ข้อความด้วยที่นำเข้าใหม่ NewsCard โดยใช้มุมมอง 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))
}
}
}ซึ่งเราทำแบบเดียวกันนี้กับเรื่องราวเสียงได้ที่ด้านล่าง ยังเปิดอยู่
HomeScreen.kt
เลื่อนลงไปที่ PostListAudioStories ประมาณบรรทัดที่ 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(...)
...สำหรับแต่ละโพสต์ ให้แทนที่คอมโพเนนต์ Text ด้วยที่นำเข้าใหม่ของเรา NewsCard โดยใช้มุมมอง 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))
}
}
}คลิกที่
เพื่อสร้างโปรเจ็กต์อีกครั้งและดูผลลัพธ์ใน ตัวอย่าง (มุมมองหน้าจอแบบแยก)
ขั้นตอนถัดไป
ต่อไป เราจะเพิ่มการโต้ตอบลงในแอป
ไม่มีคำแนะนำในขณะนี้
ลองลงชื่อเข้าใช้บัญชี Google