Part4 Chapter4의 예제와 실습을 모두 담고 있습니다.
최종본과 비교해보세요.
part4-chapter4-3 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1: "androidx.constraintlayout:constraintlayout-compose:1.0.1" 의존성을 추가합시다.
-
단계 2: createRefs()를 이용해서 아래 박스들의 레퍼런스를 가져옵시다. createRefs는 여러개의 레퍼런스를 리턴하니 destruction으로 분해합시다. red, meganta, green, yellow 박스가 있습니다.
-
단계 3: constraintsAs 모디파이어를 추가하고 레퍼런스를 전달합시다. 후행 람다로 top, start, end, bottom 앵커를 지정하고 linkTo 호출합니다. 인자로는 parent의 앵커(top, start, end, bottom)을 전달해봅시다.
-
단계 4: linkTo의 키워드 인자 margin을 추가합시다.
-
단계 5: 마젠타 박스를 parent의 start와 end에 연결합시다.
-
단계 6: 그린 박스를 linkTo를 이용해서 정 가운데로 연결해봅시다.
-
단계 7: 앵커 메서드 linkTo 대신에 centerTo 함수를 사용해봅시다.
-
단계 8: 옐로 박스를 마젠타 박스 오른쪽 대각선 아래에 위치해봅시다. linkTo를 쓰고 인자로 parent 대신 그린 박스의 레퍼런스를 사용합시다.
part4-chapter4-4 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1: createRefFor로 레드, 마젠타, 그린, 옐로 박스를 위한 레퍼런스를 만듭니다. 파라미터 id로 레퍼런스의 이름을 적어 줍시다. eg. redBox
-
단계 2:
constrain을 열고 만들었던 레퍼런스를 인자로 넣읍시다. 레드, 마젠타, 그린, 옐로 박스 레퍼런스에 대해constrain을 적읍시다. 후행 람다의 내용은 기존에constrainAs에 적어둔 것을 참고합니다. -
단계 3:
ConstraintLayout내에서 생성한 레퍼런스와constrainAs모디파이어를 삭제합니다. -
단계 4: Box마다
layoutId를 설정합니다. 파라미터는ConstraintSet에 만든 레퍼런스의 id로 적어줍니다. -
단계 5: ConstraintLayout의 첫 인자로 ConstraintSet을 전달합니다.
part4-chapter4-5 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
createVerticalChain,createHorizontalChain를 이용해서 세 박스의 레퍼런스를 연결해봅시다. -
단계 2:
createHorizontalChain를 사용하고chainStyle키워드 파라미터를 추가합시다.ChainStyle.Packed,ChainStyle.Spread,ChainStyle.SpreadInside등을 지정해봅시다. -
단계 3: 세 박스의 top을 parent.top에 연결하고 각각 다른 마진을 줍시다.
-
단계 4:
createBottomBarrier로 배리어를 만듭시다. 이는 모든 박스들의 하단을 포함하는 배리어입니다. -
단계 5:
Text하나 만들고 top을 박스 베리어로 지정합니다. -
단계 6: 체이닝 방향이나 베리어 방향을 바꾸어 보며 다양하게 테스트해봅시다.
part4-chapter4-6 디렉토리를 Android Studio에서 오픈하세요.
- 단계 1: 아래의 Row 레이아웃을 ConstraintLayout로 바꾸어 봅시다.
part4-chapter4-7 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
drawLine을 사용해봅시다. 파라미터로 색상, 시작(Offset) 끝(Offset타입)을 받습니다. -
단계 2:
drawCircle을 사용해보세요. 색상, 반지름, 중앙(Offset) -
단계 3: 아래의 규칙으로 그려진 아이콘
Icons.Filled.Send를drawLine으로 변경해봅시다. ImageVector에서는 한붓 그리기 처럼 연속으로 그려집니다.moveTo로 2.01f, 21.0f로 이동한 후 거기에서 23.0f, 12.0f로 선이 그어지는 식입니다.
moveTo(2.01f, 21.0f)
lineTo(23.0f, 12.0f)
lineTo(2.01f, 3.0f)
lineTo(2.0f, 10.0f)
lineToRelative(15.0f, 2.0f)
lineToRelative(-15.0f, 2.0f)
close()part4-chapter4-8 디렉토리를 Android Studio에서 오픈하세요.
- 단계 1:
openDialog를 이용해 다이얼로그를 끌 수 있게 합니다. - 단계 2: "더하기" 버튼을 만들고
counter를 증가시킵니다. 다이얼로그도 끕니다. - 단계 3: "취소" 버튼을 만들고 다이얼로그를 끕니다.
- 단계 4: 타이틀을 만듭니다. "더하기" 정도로 해봅시다.
- 단계 5: 다이얼로그에서 설명할 문구를 출력합니다.
part4-chapter4-9 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1: 디스미스 처리를 합니다.
-
단계 2: 컬럼을 만들고 설명을 적어봅시다.
-
단계 3: 컬럼 안에 로우를 만들어 수평 방향으로 버튼을 배열합니다. 버튼은 +1, -1, 취소로 구성하겠습니다. +1은 counter를 증가시키고 -1은 감소, 취소는 다이얼로그를 닫습니다.
part4-chapter4-10 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
DropdownMenu를 만들고expanded를expandDropDownMenu로 등록합시다.onDismissRequest에 대해서는expandDropDownMenu를false로 바꿉니다. -
단계 2: 두개의
DropdownMenuItem을 등록합시다.onClick을 구현하고 내용물은Text로 채워봅시다.
part4-chapter4-11 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1: scaffoldState를 만들고 Scaffold에 설정합시다. scaffoldState를 만들기 위해
rememberScaffoldState를 사용합니다. -
단계 2: "더하기" 버튼을 만들어 봅시다. action에서 counter를 증가시킵시다.
-
단계 3: couroutineScope를 만듭시다.
rememberCoroutineScope를 사용합니다. -
단계 4: 버튼의 onClick에서
coroutineScope.launch를 사용합니다. -
단계 5: 스낵바를 사용하기 위해
scaffoldState.snackbarHostState.showSnackbar사용합니다.message에 카운터를 출력합시다.actionLabel를 "닫기"로 지정합시다.duration에SnackbarDuration.Short를 사용합니다.
part4-chapter4-12 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
Scaffold에scaffoldState를 설정합니다. -
단계 2:
bottomBar파라미터에BottomAppBar를 넣읍시다. 내용은 텍스트와 버튼을 넣어 봅시다. 버튼에는snackBar를 연동해 메시지를 출력합니다. -
단계 3: 더하기와 빼기 버튼을 추가로 만들고
MutableState만듭시다.Scaffold의content에Text를 넣어 카운터를 출력하게 합시다.
part4-chapter4-13 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1: remember를 이용해 상태를 만들고 평 값을 입력하면 제곱미터가 출력되도록 화면을 구성하시오. 평을 제곱미터로 바꾸기 위해서는 3.306을 곱하면 됩니다.
-
단계 2:
Composable함수를 만들고Column의 항목들을 옮기세요. 단 상태는 옮기지 말아야 합니다. 파라미터는 아래와 같이 구성합니다.pyeong: String, squareMeter: String, onPyeongChange: (String) -> Unit
part4-chapter4-14 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
Text를AnimatedVisibility로 감싸고visible을helloWorldVisible로 지정해봅시다. -
단계 2:
enter파라미터를 바꾸어봅시다.
예:
expandHorizontally()
scaleIn()
slideInHorizontally()
fadeIn()-
단계 3:
enter값을 덧셈으로 결합해봅시다.exit도 적절한 값을 설정해봅시다. -
단계 4:
backgroundColor를animateColorAsState로 변경하세요.
part4-chapter4-15 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
updateTransition수행하고targetState를isDarkMode로 설정합니다.transition으로 리턴을 받습니다. -
단계 2:
transition에 대해animateColor를 호출해backgroundColor를 받습니다. 배경색상을 만듭시다. false일 때 하얀 배경, true일 때 검은 배경. -
단계 3: 글자 색상을 만듭시다.
-
단계 4:
animateFloat를 호출해서 알파 값을 만듭시다. -
단계 5: 컬럼에 배경과 알파를 적용합시다.
-
단계 6: 라디오 버튼에 글자 색을 적용합시다.
-
단계 7: Crossfade를 이용해
isDarkMode가 참일 경우Row로 항목을 표현하고 거짓일 경우Column으로 표현해봅시다.
part4-chapter4-17 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
LaunchedEffect을 이용해서 스낵바를 이용해 봅시다. 파라미터에는scaffoldState.snackbarHostState를 전달합시다. "헬로 컴포즈"라고 출력합시다.LaunchedEffect는CouroutineScope를 만들기 때문에 스코프를 별도로 만들 필요는 없습니다. -
단계 2:
DisposableEffect를 호출하고 파리미터로lifecycleOwner를 전달합니다.LifecycleEventObserver를 상속받고 두 상태에 대해 로그를 남깁니다.Lifecycle.Event.ON_START,Lifecycle.Event.ON_STOP블록 내에서lifecycleOwner.lifecycle.addObserver로 옵저버를 추가하고 onDispose에서 옵저버를 제거합니다.
part4-chapter4-18 디렉토리를 Android Studio에서 오픈하세요.
-
단계 1:
Row를 만들고toDoData.text를 출력하고 완료를 체크하는 체크박스, 수정 버튼, 삭제 버튼을 만드세요. -
단계 2:
Crossfade를 통해isEditing을 따라 다른 UI를 보여줍니다.OutlinedTextField와 `Button을 넣어봅시다. -
단계 3:
LazyColumn으로toDoList를 표시합시다.key를toDoData의key를 사용합니다. -
단계 4:
onSubmit,onEdit,onToggle,onDelete를 만들어ToDo에 연결합니다.