devfest 2022 Compose Camp : Unit 3

devfest 2022 Compose Camp : Unit 3 발표 자료 PDF 파일입니다.
발표를 위한 파일이므로 description text를 대부분 뺀 자료입니다.

description이 필요한 경우 공개된 영상을 참고하시거나 구글 프레젠테이션 파일로 오픈해주시기 바랍니다.
https://docs.google.com/presentation/d/1Sdqi8vIEa5Mmdcqfoj3kZoiqwx0fMN96xKaTsGWBjv4/edit?usp=sharing

Transcript

1. This work is licensed under the Apache 2.0 License Compose Camp Android Basics with Compose: Display lists and use Material Design
2. This work is licensed under the Apache 2.0 License 황연진 Google Developer Student Clubs 숙명여자대학교 캠핑지기
3. This work is licensed under the Apache 2.0 License Unit3: Display lists and use Material Design
4. This work is licensed under the Apache 2.0 License
5. This work is licensed under the Apache 2.0 License Let’s Start!
6. More Kotlin fundamental This work is licensed under the Apache 2.0 License
7. This work is licensed under the Apache 2.0 License 제네릭 class FillInTheBlankQuestion( val questionText: String, val answer: String, val difficulty: String ) class TrueOrFalseQuestion( val questionText: String, val answer: Boolean, val difficulty: String ) class NumericQuestion( val questionText: String, val answer: Int, val difficulty: String )
8. This work is licensed under the Apache 2.0 License 제네릭 class FillInTheBlankQuestion( val questionText: String, val answer: String, val difficulty: String ) class TrueOrFalseQuestion( val questionText: String, val answer: Boolean, val difficulty: String ) class NumericQuestion( val questionText: String, val answer: Int, val difficulty: String )
9. This work is licensed under the Apache 2.0 License 제네릭?
10. This work is licensed under the Apache 2.0 License 제네릭
11. This work is licensed under the Apache 2.0 License 자리표시자?
12. This work is licensed under the Apache 2.0 License 제네릭
13. This work is licensed under the Apache 2.0 License 제네릭 class FillInTheBlankQuestion( val questionText: String, val answer: String, val difficulty: String ) class TrueOrFalseQuestion( val questionText: String, val answer: Boolean, val difficulty: String ) class NumericQuestion( val questionText: String, val answer: Int, val difficulty: String )
14. This work is licensed under the Apache 2.0 License 제네릭 class Question<T>( val questionText: String, val answer: T, val difficulty: String )
15. This work is licensed under the Apache 2.0 License 제네릭 fun main() { val question1 = Question<String>("___ 캠프", "compose", "medium") val question2 = Question<Boolean>("하늘은 초록색", false, "easy") val question3 = Question<Int>("보름은 몇 일인가?", 15, "hard") }
16. This work is licensed under the Apache 2.0 License 확장?
17. This work is licensed under the Apache 2.0 License 확장 속성
18. This work is licensed under the Apache 2.0 License 확장 속성 val Quiz.StudentProgress.progressText: String get() = "${answered} of ${total} answered"
19. This work is licensed under the Apache 2.0 License 확장 함수
20. This work is licensed under the Apache 2.0 License 확장 함수 fun Quiz.StudentProgress.printProgressBar() { repeat(Quiz.answered) { print("▓") } repeat(Quiz.total - Quiz.answered) { print("▒") } println() println(Quiz.progressText) }
21. This work is licensed under the Apache 2.0 License 범위 함수 .let() fun printQuiz() { println(question1.questionText) println(question1.answer) println(question1.difficulty) println(question2.questionText) println(question2.answer) println(question2.difficulty) println(question3.questionText) println(question3.answer) println(question3.difficulty) } fun printQuiz() { question1.let { println(it.questionText) println(it.answer) println(it.difficulty) } question2.let { println(it.questionText) println(it.answer) println(it.difficulty) } question3.let { println(it.questionText) println(it.answer) println(it.difficulty) } }
22. This work is licensed under the Apache 2.0 License 식별자 it? 변수명 -> it
23. This work is licensed under the Apache 2.0 License 범위 함수 .apply() val quiz = Quiz().apply { printQuiz() } Quiz().apply { printQuiz() }
24. This work is licensed under the Apache 2.0 License 배열
25. This work is licensed under the Apache 2.0 License 배열 val rockPlanets = arrayOf<String>("Mercury", "Venus", "Earth", "Mars")
26. This work is licensed under the Apache 2.0 License 배열 val rockPlanets = arrayOf("Mercury", "Venus", "Earth", "Mars")
27. This work is licensed under the Apache 2.0 License 배열
28. This work is licensed under the Apache 2.0 License 배열 val newSolarSystem = arrayOf("Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune") solarSystem[8] = "Pluto" Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: Index 8 out of bounds for length 8
29. This work is licensed under the Apache 2.0 License List Set Map 컬렉션
30. This work is licensed under the Apache 2.0 License 컬렉션 - 리스트
31. This work is licensed under the Apache 2.0 License 컬렉션 - 리스트 val rockPlanets = listOf<String>("Mercury", "Venus", "Earth", "Mars")
32. This work is licensed under the Apache 2.0 License 컬렉션 - 리스트 val rockPlanets = listOf("Mercury", "Venus", "Earth", "Mars")
33. This work is licensed under the Apache 2.0 License 컬렉션 - 리스트 배열 리스트
34. This work is licensed under the Apache 2.0 License MutableList? ‘가변의’
35. This work is licensed under the Apache 2.0 License MutableList List MutableList val solarSystem = ListOf("Mercury", "Venus", "Earth", "Mars") solarSystem.add("Pluto") //X solarSystem.add(3, "Theia") //X solarSystem[1] = "Future Moon" //X val solarSystem = mutableListOf("Mercury", "Venus", "Earth", "Mars") solarSystem.add("Pluto") solarSystem.add(3, "Theia") solarSystem[1] = "Future Moon"
36. This work is licensed under the Apache 2.0 License 컬렉션 - 세트
37. This work is licensed under the Apache 2.0 License 해시코드?
38. This work is licensed under the Apache 2.0 License 컬렉션 - 세트
39. This work is licensed under the Apache 2.0 License 컬렉션 - 세트 List보다 빠르지만 더 많은 메모리 사용
40. This work is licensed under the Apache 2.0 License 컬렉션 - 세트 println(myList.indexOf(5)) myList
41. This work is licensed under the Apache 2.0 License 컬렉션 - 세트 println(mySet.indexOf(5)) mySet
42. This work is licensed under the Apache 2.0 License 컬렉션 - 세트 …
43. This work is licensed under the Apache 2.0 License 컬렉션 - 맵
44. This work is licensed under the Apache 2.0 License 컬렉션 - 맵
45. Build a scrollable list This work is licensed under the Apache 2.0 License
46. This work is licensed under the Apache 2.0 License Card
47. This work is licensed under the Apache 2.0 License Card @Composable fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) { }
48. This work is licensed under the Apache 2.0 License Card @Composable fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) { Card(modifier = Modifier.padding(8.dp), elevation = 4.dp) { Column { } } }
49. This work is licensed under the Apache 2.0 License Card @Composable fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) { Card(modifier = Modifier.padding(8.dp), elevation = 4.dp) { Column { Image( painter = painterResource(affirmation.imageResourceId), contentDescription = stringResource(affirmation.stringResourceId), ) } } }
50. This work is licensed under the Apache 2.0 License Card @Composable fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) { Card(modifier = Modifier.padding(8.dp), elevation = 4.dp) { Column { Image( painter = painterResource(affirmation.imageResourceId), contentDescription = stringResource(affirmation.stringResourceId), modifier = Modifier .fillMaxWidth() .height(194.dp), contentScale = ContentScale.Crop ) } } }
51. This work is licensed under the Apache 2.0 License Card @Composable fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) { Card(modifier = Modifier.padding(8.dp), elevation = 4.dp) { Column { Image( painter = painterResource(affirmation.imageResourceId), contentDescription = stringResource(affirmation.stringResourceId), modifier = Modifier .fillMaxWidth() .height(194.dp), contentScale = ContentScale.Crop ) Text( text = stringResource(affirmation.stringResourceId), modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.h6 ) } } }
52. This work is licensed under the Apache 2.0 License LazyColumn
53. This work is licensed under the Apache 2.0 License LazyColumn을 이용한 List 생성 @Composable private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) { }
54. This work is licensed under the Apache 2.0 License LazyColumn을 이용한 List 생성 @Composable private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) { LazyColumn { items(affirmationList){ } } }
55. This work is licensed under the Apache 2.0 License LazyColumn을 이용한 List 생성 @Composable private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) { LazyColumn { items(affirmationList){ affirmation -> } } }
56. This work is licensed under the Apache 2.0 License LazyColumn을 이용한 List 생성 @Composable private fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) { LazyColumn { items(affirmationList){ affirmation -> AffirmationCard(affirmation) } } }
57. This work is licensed under the Apache 2.0 License LazyVerticalGrid
58. Build beautiful apps This work is licensed under the Apache 2.0 License
59. This work is licensed under the Apache 2.0 License Material Design?
60. This work is licensed under the Apache 2.0 License 어떤 앱을 사용 중이지?
61. This work is licensed under the Apache 2.0 License 상단 바 추가
62. This work is licensed under the Apache 2.0 License 상단 바 추가 image text Row Not Card!
63. This work is licensed under the Apache 2.0 License 상단 바 추가 @Composable fun WoofApp() { LazyColumn(modifier = Modifier.background(MaterialTheme.colors.background)) { items(dogs) { DogItem(dog = it) } } }
64. This work is licensed under the Apache 2.0 License 상단 바 추가 @Composable fun WoofApp() { Scaffold( ) { LazyColumn(modifier = Modifier.background(MaterialTheme.colors.background)) { items(dogs) { DogItem(dog = it) } } } }
65. This work is licensed under the Apache 2.0 License Scaffold?
66. This work is licensed under the Apache 2.0 License 상단 바 추가 @Composable fun WoofApp() { Scaffold( topBar = { WoofTopAppBar() } ) { LazyColumn(modifier = Modifier.background(MaterialTheme.colors.background)) { items(dogs) { DogItem(dog = it) } } } }
67. This work is licensed under the Apache 2.0 License 상단 바 추가 @Composable fun WoofApp() { Scaffold( topBar = { WoofTopAppBar() } ) { LazyColumn(modifier = Modifier.background(MaterialTheme.colors.background)) { items(dogs) { DogItem(dog = it) } } } }
68. This work is licensed under the Apache 2.0 License
69. This work is licensed under the Apache 2.0 License 더 펼치기 아이콘
70. This work is licensed under the Apache 2.0 License 더 펼치기 아이콘 @Composable private fun DogItemButton( expanded: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier ) { IconButton(onClick = onClick) { Icon( imageVector = Icons.Filled.ExpandMore, tint = MaterialTheme.colors.secondary, contentDescription = stringResource(R.string.expand_button_content_description) ) } }
71. This work is licensed under the Apache 2.0 License () -> Unit?
72. This work is licensed under the Apache 2.0 License () -> Unit? function type
73. This work is licensed under the Apache 2.0 License 더 펼치기 아이콘 @Composable private fun DogItemButton( expanded: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier ) { IconButton(onClick = onClick) { Icon( imageVector = Icons.Filled.ExpandMore, tint = MaterialTheme.colors.secondary, contentDescription = stringResource(R.string.expand_button_content_description) ) } }
74. This work is licensed under the Apache 2.0 License var expanded by remember { mutableStateOf(false) } card 더 펼치기 아이콘
75. This work is licensed under the Apache 2.0 License @Composable fun DogItem(dog: Dog, modifier: Modifier = Modifier) { var expanded by remember { mutableStateOf(false) } Card( … ) { Column( … ) { Row( modifier = Modifier .fillMaxWidth() .padding(8.dp) ) { DogIcon(dog.imageResourceId) DogInformation(dog.name, dog.age) Spacer(Modifier.weight(1f)) DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) } if (expanded) { DogHobby(dog.hobbies) } } } } 더 펼치기 아이콘
76. This work is licensed under the Apache 2.0 License @Composable fun DogItem(dog: Dog, modifier: Modifier = Modifier) { var expanded by remember { mutableStateOf(false) } Card( … ) { Column( … ) { Row( modifier = Modifier .fillMaxWidth() .padding(8.dp) ) { DogIcon(dog.imageResourceId) DogInformation(dog.name, dog.age) Spacer(Modifier.weight(1f)) DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) } if (expanded) { DogHobby(dog.hobbies) } } } } 더 펼치기 아이콘
77. This work is licensed under the Apache 2.0 License @Composable fun DogItem(dog: Dog, modifier: Modifier = Modifier) { var expanded by remember { mutableStateOf(false) } Card( … ) { Column( … ) { Row( modifier = Modifier .fillMaxWidth() .padding(8.dp) ) { DogIcon(dog.imageResourceId) DogInformation(dog.name, dog.age) Spacer(Modifier.weight(1f)) DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) } if (expanded) { DogHobby(dog.hobbies) } } } } 더 펼치기 아이콘
78. This work is licensed under the Apache 2.0 License 가중치?
79. This work is licensed under the Apache 2.0 License @Composable fun DogItem(dog: Dog, modifier: Modifier = Modifier) { var expanded by remember { mutableStateOf(false) } Card( … ) { Column( … ) { Row( modifier = Modifier .fillMaxWidth() .padding(8.dp) ) { DogIcon(dog.imageResourceId) DogInformation(dog.name, dog.age) Spacer(Modifier.weight(1f)) DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) } if (expanded) { DogHobby(dog.hobbies) } } } } 더 펼치기 아이콘
80. This work is licensed under the Apache 2.0 License 컴포저블 추가 Column
81. This work is licensed under the Apache 2.0 License @Composable fun DogItem(dog: Dog, modifier: Modifier = Modifier) { var expanded by remember { mutableStateOf(false) } Card( … ) { Column( … ) { Row( modifier = Modifier .fillMaxWidth() .padding(8.dp) ) { DogIcon(dog.imageResourceId) DogInformation(dog.name, dog.age) Spacer(Modifier.weight(1f)) DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) } if (expanded) { DogHobby(dog.hobbies) } } } } 컴포저블 추가
82. This work is licensed under the Apache 2.0 License @Composable fun DogItem(dog: Dog, modifier: Modifier = Modifier) { var expanded by remember { mutableStateOf(false) } Card( … ) { Column( … ) { Row( modifier = Modifier .fillMaxWidth() .padding(8.dp) ) { DogIcon(dog.imageResourceId) DogInformation(dog.name, dog.age) Spacer(Modifier.weight(1f)) DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) } if (expanded) { DogHobby(dog.hobbies) } } } } 버튼 클릭 이벤트
83. This work is licensed under the Apache 2.0 License 버튼 클릭 이벤트 DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) 속성
84. This work is licensed under the Apache 2.0 License 버튼 클릭 이벤트 DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) 현재의 expanded 상태를 저장한 변수
85. This work is licensed under the Apache 2.0 License 버튼 클릭 이벤트 DogItemButton( expanded = expanded, onClick = { expanded = !expanded }, ) True or False
86. This work is licensed under the Apache 2.0 License Learn More