Android

    [Material] Color System (색상 알아보기)

    [Material] Color System (색상 알아보기)

    Material 디자인 색상 시스템은 개발하는 앱에 다양한 색상 테마를 적용할 수 있다. 개발자가 가장 어려워 하는 부분이 색상 팔레트 선택과 배치 문제일 것이다. 이런 문제는 조금 쉽게 해결할 수 있도록 Material에서는 제공하고 있다. Material에서 제공하는 기능과 도구를 간단하게 정리해보고자 한다. 색상 디자인 앱 개발 사전에 디자인 색상 배치를 할 때 색상과 어디에 사용되는 색상 배치인지 정리를 할 필요가 있다. 그럴 때 사용하는 요소 이름은 다음과 같다. primary : 색상은 앱의 화면과 구성요소에서 가장 자주 표시되는 색상. secondary : 색상은 앱을 강조하고 구분하는 데 사용. surface : 색상은 카드, 시트, 메뉴와 같은 구성요소의 표면에 적용. background..

    [Compose UI] LazyColumn (스크롤 가능한 Column)

    [Compose UI] LazyColumn (스크롤 가능한 Column)

    Jetpack Compose에서는 LazyColumn 컴포저블을 사용하여 스크롤 가능한 목록을 만들 수 있다. LazyColumn과 Column의 차이점은 Compose가 한 번에 모두 로드하므로 표시할 항목이 적은 경우 Column을 사용해야 한다는 것입니다. Column은 사전 정의된 또는 고정된 개수의 컴포저블만 보유할 수 있다. 하지만 LazyColumn은 콘텐츠를 추가할 수 있어 긴 목록의 경우 특히 목록의 길이를 알 수 없을 때 유용하게 사용할 수 있다. LazyColumn는 추가 코드 없이 기본적으로 스크롤도 제공하고 있다. 특히 LazyColumn은 화면에 보여지는 컴포저블만 추가하여 보여주는 방식이기에 많은 리스트를 보여줘야 하는 경우 최적화에 사용하기 용이하다. LazyColumn 함수..

    [Compose UI] Image (이미지 다루기)

    [Compose UI] Image (이미지 다루기)

    Image 함수 시그니처 @Composable fun Image( painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null ) 함수 파라미터 설명 painter - 이미지 정보 contentDescription - 이 이미지가 나타내는 것을 설명하기 위해 접근성 서비스에서 사용하는 텍스트. 이 이미지가 장식용으로 사용되지 않는 한 항상 제공되어야 하며 사용자가..

    [Compose UI] Card

    [Compose UI] Card

    Card는 단일 주제에 대한 컨텐츠를 담고 있는 Surface이다. 즉 Composable function이다. Card의 파라미터 다양한 파라미터를 활용하여 Card를 확장 및 꾸밀 수 있다. onClick - callback to be called when the card is clicked modifier - Modifier to be applied to the layout of the card. enabled - Controls the enabled state of the card. When false, this card will not be clickable shape - Defines the card's shape as well its shadow. A shadow is only display..

    [Compose] 생명주기 (Lifecycle)

    [Compose] 생명주기 (Lifecycle)

    안드로이드에서 XML을 통해 Acivitity, Fragment, View 등 UI를 구성할 때 생명주기(Lifecycle)을 고려하며 설계 및 구현을 하였고, 다른 개발자 분들도 동일할 것이다. 이와 동일하게 Compose도 생명주기를 가지고 있다. Compose는 @Composable 애노테이션을 이용하여 구성가능한 함수(Composable Function)를 만들 수 있다. 이 함수가 생명주기를 가지고 있으며 어떻게 관리해야 할지 고민이 필요한 부분이다. 컴포저블(Composable)의 생명주기 Jetpack Compose 에서 구성가능한 함수를 실행 할 때 빌드한 UI를 설명하는 녀석을 컴포지션(Composition)이라 한다. 생명주기의 각 상태에 대한 설명을 간단히 정리하고 넘어간다. 컴포저블..

    [Android/Testing] #10. Fragment Navigation Test

    [Android/Testing] #10. Fragment Navigation Test

    지난 글에서 Hilt를 사용한 프레그먼트 테스트를 위한 환경과 테스트 방법을 간단하게 알아보았다. 이번 글에서는 동일하게 프레그먼트 테스트를 진행하는데 Navigation을 사용하여 프레그먼트 간 인터렉션에 관한 테스트를 정리한다. 이번 테스트는 Unit Test가 아니라 인터렉션에 대한 테스트가 필요하기에 Integration Test로 테스트를 작성한다. 테스트 프레그먼트 네이게이션 테스트를 위한 프레그먼트는 총 3개로 구성되어 있다. MarsPhotoFragment AddMarsPhotoItemFragment ImagePickFragment 각 프레그먼트는 버튼으로 프레그먼트 간 이동 인터렉션이 발생한다. 우리가 중점적으로 테스트 하려는 부분이 이 인터렉션 부분이다. 이 글에서 Navigation,..