Skip to content

Latest commit

 

History

History
77 lines (54 loc) · 2.31 KB

2024.6.20.md

File metadata and controls

77 lines (54 loc) · 2.31 KB
Raw

Component

  • Text
  • Button
  • Modifier
  • Surface
  • Box
  • Row
  • Column
  • BoxWithConstraints
  • Image

각 컴포넌트의 사이즈는 modifier을 이용해서 설정해야 한다.

Surface와 Box의 차이점이 궁금했는데 다음과 같은 특징이 있다.

Text

text의 align을 설정하기 위해서(gravity) textAlign 이라는 속성을 이용해야 함. modifier 아님!

예시로 textAlign = TextAlign.Center 이렇게.

Surface

  • Material Design 스타일이다. (elevation, shape, color..)
  • XML의 MaterialCardView와 유사

Box

  • container의 역할
  • 정렬, 간격등을 정하기 유용함.

Row

가로로 배치하는 컴포넌트 테스트 해보니까 FlexBox처럼 유연하게 내려오지는 않음 만약 Row에 있는 아이템들의 align이 전부 일치하다면 verticalAlignment 속성을 이용하면 된다. -> 추가로 아이템의 align은 Modifier.align(Alignment.Top) 으로 설정 가능

horizontalArrangement 속성 중 SpaceBetween, SpaceAround, SpaceEvenly 들이 있는데 각 어떻게 사용될까

  • SpaceBetween은 컴포넌트들간의 간격을 동일하게 맞춰주고, 양 끝의 간격을 0으로 함
  • SpaceAround은 컴포넌트들간의 간격을 동일하게 맞춰주고, 양쪽 끝 컴포넌트와 레이아웃의 간격을 컴포넌트들간 간격의 절반으로 만든다. 즉 x.dp 만큼 간격이 되어 있다면 양 끝의 간격을 0.5x로 맞춤
  • SpaceEvenly은 컴포넌트들간의 간격을 동일하게 맞춰주고, 양 끝의 간격도 동일하게 맞춤

아마 주로 사용하게 될 것은 SpaceBetween, SpaceEvenly 가 아닐까 싶다.

Column

세로로 배치하는 컴포넌트 Row와 비슷

BoxWithConstraints

minWidth, minHeight, maxWidth, maxHeight 를 설정 및 값을 알 수 있음.

Iamge

png, jpg같은건 painter 속성을 이용

에시 ```painter = painterResource(id = R.drawable.~~)

벡터파일은 imageVector 속성을 사용

예시 ```imageVector = R.drawable.~~~

만약 url을 넣기 위해서는 coil라이브러리를 사용하면 된다.

방법 1. 구글이 추천하는 방식

val painter = rememberImagePainter(data = "url")
Image(
  painter = painter,
  contentDescription = "설명"
)

방법 2. 코일이 추천하는 방식

AsyncImage(
  model = "url",
  contentDescription = "설명"
)