Android Compose 스터디 기록 03

 

 

Material Design

디지털 인터페이스를 만들기 위한 포괄적인 디자인 시스템

Color, Typography, Shape 등

@Composable
fun MaterialTheme(
	colors: Colors,
	typography: Typography,
	shapes: Shapes,
	content: @Composable () -> Unit
)

 

val customTextSelectionColors = TextSelectionColors(
           handleColor = colorResource(id = R.color.primary100),
           backgroundColor = Color(0xFF4286F4).copy(alpha = 0.4f)
)

CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
		BasicTextField(
					value = input,
	        onValueChange = { input = it },
		)
}

 

composable의 계층이 깊거나, 동일한 param을 여러 곳에서 사용해야 하는 경우 CompositionLocal을 통해서 암묵적으로 해당 값을 넘겨줄 수 있음

https://developer.android.com/jetpack/compose/compositionlocal?hl=ko

 

 

Animate*AsState

• animateColorAsState :: 색상값을 변경했을 때 이를 자연스럽게 표현하기 위한 state

Animating Visibility

• AnimatedVisibility :: composable이 보여지고 사라지는 과정을 애니메이션으로 표현
• slideInVertically
• animationSpec
  • tween
  • spring

Animating content size change

• animateContentSize :: composable 함수 내부에 사이즈가 변경되거나 컨텐츠가 변경될 경우 동적으로 사이즈 변화를 애니메이션으로 처리

Multiple value animation

• Transition

Repeated animation

• InfiniteTransition :: 계속해서 반복하는 애니메이션 처리

Gesture animation

• Animatable

 

NavController

→ Stateful

→ 앱의 화면과 각 화면 상태를 구성하는 Composable의 백스택 유지

• rememberNavController() 를 이용하여 navController 생성 가능

NavHost

→ NavHost는 NavController와 Navigation Graph 연결

→ 그래프의 시작경로로 필요

 

val navController = rememberNavController()

// 가장 상위 Composable에 등록
NavHost(
	navController = navController,
	startDestination = Screen.Overview.name,
	modifier = Modifier.padding(innerPadding)
) {
	composable(Screen.Overview.name) {
		Text(Screen.Overview.name)
	}
	composable(Screen.Accounts.name) {
		Text(Screen.Accounts.name) 
	}
}

 

 

val accountsName = Screen.Accounts.name

NavHost(
	navController = navController,
	startDestination = Screen.Overview.name,
	modifier = Modifier.padding(innerPadding)
) {
	composable(
		"$accountsName/{name}",
		arguments = listOf(
			navArgument("name") {
				type = NavType.StringType
			}
		),
		deepLinks = listOf(navDeepLink {
			uriPattern = "rally://$accountsName/{name}"
	}) { entry ->
			val accountName = entry.arguments?.getString("name")
			val account = UserData.getAccount(accountName)
			SingleAccountBody(account = account)
	}

	composable(Screen.Overview.name) {
		OverviewBody(
			onClickSeeAllBills = { navController.navigate(Bills.name) } //화면 이동
			onAccountClick = { name ->
				navController.navigate("${Accounts.name}/$name") //인수 전달과 함께 이동
			}
		}
	
	composable(Screen.Accounts.name) {
		AccountsBody(accounts = UserData.accounts) { name ->
			navController.navigate("Accounts/$name}")
		}
	}
	
	composable(Screen.Bills.name) {
		BillsBody(bills = Userdata.bills)
	}
	
}

 

 

 

xml에서 ComposeView를 위젯으로 사용할 수 있음

composeView.setContent {
	MaterialTheme {
		PlantDetailDescription()
	}
}

 

dimensionResource(R.dimen.-) 으로 R파일 내 생성한 값을 불러올 수 있음

 

Composable 생명주기

View가 윈도우에서 분리될 때마다 Composition를 삭제함

setViewCompositionStrategy(
	ViewCompositionStrategy.DisposeOnViewTreeLifecylceDestroyed
)
// Fragment가 Destroy될 때 Composition을 삭제하기 위해서 설정

 

val selectedItem = 
AndroidView(
	factory = { context ->
		CustomView(context).apply { // View setup }
	},
	update = { view ->
		// View 업데이트 로직 추가
		view.coordinator.selectedItem = selectedItem.value
	}
)
// 구성할 View를 얻기 위해서 한 번 호출됨
// factory 블록은 일회성으로 초기화하거나 속성 설정할 때 수행 가능
// update 블록은 재구성으로 인해 여러 번 UI thread에서도 실행될 수 있음