App노자

[Jetpack Compose] AnimatedVisibility

앱의노예 — Mon, 19 Aug 2024 22:01:49 +0900

1. Animation API란?

Jetpack Compose에서 제공하는 Animation API를 이용하면 사용자 인터페이스에

화면 전환, 크기 변화, 색상 변화 등 다양한 애니메이션 효과를 쉽게 추가할 수 있다

Animation API는 여러 클래스와 함수로 구성되며 주요 Animation API들은 크게

상태 기반 애니메이션과 트랜지션 기반 애니메이션으로 나눌 수 있다

https://developer.android.com/develop/ui/compose/animation/introduction

Compose의 애니메이션 | Jetpack Compose | Android Developers

Compose의 애니메이션은 사용하기 쉬우며 앱에서 훌륭한 상호작용을 제공합니다.

developer.android.com

2. AnimatedVisibility

@Composable
fun AnimatedVisibilityExample() {
    var isVisible by remember { mutableStateOf(true) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { isVisible = !isVisible }) {
            Text("Toggle Visibility")
        }

        Spacer(modifier = Modifier.height(16.dp))

        AnimatedVisibility(
            visible = isVisible,
            enter = fadeIn(animationSpec = tween(durationMillis = 500)),
            exit = fadeOut(animationSpec = tween(durationMillis = 500))
        ) {
            Text("Hello, Jetpack Compose!")
        }
    }
}

AnimatedVisibility는 특정 UI 요소의 가시성을 컨트롤하면서 애니메이션을 적용하는 데 사용되는 API이다

컴포넌트가 갑자기 나타나거나 사라지는 대신 AnimatedVisibility 컴포저블을 이용해

좀 더 자연스러운 UI작성이 가능하다

예를 들어, 사용자 인터페이스 요소가 화면에 서서히 나타나거나 화면에서 사라질 수 있으며

수직, 수평 위로 이동하면서 나타나거나 사라질 수도 있고 확장하거나 줄어들면서 나타나거나 사라질 수도 있다

AnimatedVisibility의 visible 속성을 통해 요소의 가시성을 제어하며,

enter와 exit 애니메이션을 사용하여 요소가 나타나고 사라질 때의 애니메이션 효과를 지정한다

이 외에도 다음과 같은 애니메이션 효과를 사용할 수 있다

expandHorizontally(): 수평으로 자르는 기법을 이용해 컴포저블을 표시한다

애니메이션을 시작하기 전 최초에 표시할 컴포저블의 정도를 옵션으로 제어할 수 있다

(컴포저블이 왼쪽에서 오른쪽으로 가로 방향으로 확장되면서 나타나도록 하는 애니메이션)

expandVertically(): 수직으로 자르는 기법을 이용해 컴포저블을 표시한다

애니메이션을 시작하기 전 최초에 표시할 컴포저블의 정도를 옵션으로 제어할 수 있다

(컴포저블이 위에서 아래로 세로 방향으로 확장되면서 나타나도록 하는 애니메이션)

expandIn(): 수직 및 수평으로 자르는 기법을 이용해 컴포저블을 표시한다

애니메이션을 시작하기 전 최초에 표시할 컴포저블의 정도를 옵션으로 제어할 수 있다

fadeIn(): 투명한 상태에서 불투명한 상태로 컴포저블을 뷰에 표시한다

초기 alpha값은 0에서 1.0 사이로 선언 가능하며 기본값은 0이다

fadeOut(): 불투명한 상태에서 투명한 상태로 컴포저블을 뷰에서 사라지게 한다

대상이 완전히 사라지기 전의 alpha값을 0에서 1.0 사이로 선언 가능하며 기본값은 0이다

scaleIn(): 확대(zoom in)한 것처럼 컴포저블이 뷰로 확장된다

기본적으로 컴포저블은 아무것도 없는 상태에서 전체 크기로 확장되지만, 초기 비율값을 0에서 1.0 사이의

부동소수점 값으로 지정할 수 있다

scaleOut(): 컴포저블을 전체 크기에서 지정한 대상 비율까지 줄인 뒤 사라지게 한다

대상 비율의 기본값은 0이며, 0에서 1.0 사이의 부동소수점 값으로 설정할 수 있다

shrinkHorizontally(): 컴포저블은 수평 경계선까지 축소된 후 슬라이드하며 사라진다

대상 폭과 슬라이드 방향을 설정할 수 있다

shrinkVertically(): 컴포저블은 수직 경계선까지 축소된 후 슬라이드하며 사라진다

대상 폭과 슬라이드 방향을 설정할 수 있다

shrinkOut(): 컴포저블은 수직/수평 경계선까지 축소된 뒤 슬라이드하며 사라진다

slideInHorizontally(): 컴포저블은 수평축을 따라 슬라이드하며 표시된다

슬라이드 방향과 슬라이드를 시작할 오프셋을 지정할 수 있다

slideInVertically(): 컴포저블은 수직축을 따라 슬라이드하며 표시된다

슬라이드 방향과 슬라이드를 시작할 오프셋을 지정할 수 있다

slideIn(): 컴포저블이 초기 오프셋 값으로 지정한 각도에서 슬라이드하며 표시된다

slideOut(): 컴포저블이 대상 오프셋 값으로 지정한 각도로 슬라이드하며 사라진다

slideOutHorizontally(): 컴포저블은 수평축을 따라 슬라이드하며 사라진다

슬라이드 방향과 슬라이드를 종료할 오프셋을 지정할 수 있다

slideOutVertically(): 컴포저블은 수직축을 따라 슬라이드하며 사라진다 슬라이드 방향과 슬라이드를 종료할 오프셋을 지정할 수 있다

https://developer.android.com/develop/ui/compose/animation/composables-modifiers

애니메이션 수정자 및 컴포저블 | Jetpack Compose | Android Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 애니메이션 수정자 및 컴포저블 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Compose에는 일반적인

developer.android.com

3. AnimationSpec

AnimatedVisibility(
    visible = isVisible.value,
    enter = tween(
        durationMillis = 500,
        delayMillis = 100 // 애니메이션 시작 전 지연 시간
    ),
    exit = tween(
        durationMillis = 500,
        delayMillis = 100 // 애니메이션 시작 전 지연 시간
    )
) {
    // 애니메이션 효과가 적용될 내용
}

AnimationSpec을 사용하면 애니메이션의 유지 시간, 시작 지연, 스프링, 튕김 효과, 반복, 애니메이션 Easing을 포함한 여러 애니메이션 동작의 측면을 설정할 수 있다

Row, Column 및 다른 컨테이너 컴포저블과 마찬가지로, AnimatedVisibility도 고유한 스코프를 갖으며

이 스코프 안에서 애니메이션에 대한 추가 함수에 접근할 수 있다

tween() 함수를 호출하여 AnimationSpec의 인스턴스를 생성하고, 이를 애니메이션 효과 함수의 파라미터로 전달하여 사용할 수 있다

durationMillis(): 애니메이션이 완료되는 데 걸리는 시간입니다. 밀리초(ms) 단위로 설정한다

delayMillis(): 애니메이션이 시작되기 전에 기다리는 시간입니다. 밀리초(ms) 단위로 설정한다

easing(): 애니메이션의 속도를 제어하는 함수로, 애니메이션이 어떻게 가속하거나 감속할지를 결정한다

repeatable(): 애니메이션을 반복할 수 있도록 설정할 수 있으며, 반복 횟수와 방향을 지정할 수 있다

4. Easing

val animationSpec = tween(
    durationMillis = 500,
    easing = FastOutSlowInEasing
)

AnimatedVisibility(
    visible = isVisible.value,
    enter = animationSpec,
    exit = animationSpec
) {
    // 애니메이션 효과가 적용될 내용
}

애니메이션 이징(Easing)은 애니메이션의 속도가 시간에 따라 어떻게 변화하는지를 정의하는 함수이다

Easing을 사용하면 애니메이션이 단순히 일정한 속도로 움직이는 것보다 더 자연스럽고 부드럽게 보이도록 만들 수 있다

Easing은 tween()를 이용해 지정하며 애니메이션의 시작, 중간, 끝 부분에서 속도를 가속하거나 감속하는 데 사용된다

LinearEasing(): 애니메이션이 일정한 속도로 진행된다

속도의 변화 없이 일정하게 움직이기 때문에 가장 단순한 형태의 Easing이다

FastOutSlowInEasing(): 애니메이션이 빠르게 시작하고 점점 느려지며 종료된다

자연스러운 감속 효과를 주어, UI 요소가 부드럽게 멈추는 느낌을 준다

EaseInEasing(): 애니메이션이 느리게 시작해서 점점 빠르게 진행된다

시작 부분이 부드럽고 끝부분으로 갈수록 속도가 빨라진다

EaseOutEasing(): 애니메이션이 빠르게 시작하고 점점 느려지며 종료된다

시작할 때 빠르고, 마무리할 때 부드럽게 멈춘다

EaseInOutEasing(): 애니메이션이 느리게 시작해서 중간에 가속되고, 다시 느려지면서 종료된다

부드러운 가속과 감속이 함께 발생한다

BounceEasing(): 애니메이션이 끝날 때 튕기는 효과를 준다.

공이 떨어졌다가 바닥에서 튕기는 것 같은 동작을 모방한 Easing이다

CubicBezierEasing(): 커스텀 베지어 곡선을 이용해 Easing 곡선을 직접 정의할 수 있다

네 개의 제어점을 통해 애니메이션의 속도 변화를 정밀하게 조정할 수 있습니다.

예시 easing = CubicBezierEasing(0.42f, 0.0f, 0.58f, 1.0f)

(여기서 숫자들은 베지어 곡선의 제어점)

LinearOutSlowInEasing(): 애니메이션이 일정한 속도로 시작한 후 느리게 종료된다

FastOutSlowInEasing과 비슷하지만, 시작 부분이 일정한 속도로 진행된다는 점이 다르다

FastOutLinearInEasing(): 애니메이션이 빠르게 시작하고, 그 후 일정한 속도로 종료된다

EaseInOutEasing과 반대의 속도 곡선을 갖는다

[Jetpack Compose] ConstraintLayout

앱의노예 — Sat, 3 Aug 2024 09:45:43 +0900

1. ConstraintLayout 이란?

ConstraintLayout(
    modifier = Modifier
        .size(300.dp)
        .background(Color.Gray)
) {

}

ConstraintLayout은 Compose에서 복잡한 레이아웃을 구성할 때 사용한다

XML 기반의 ConstraintLayout과 유사한 방식으로, 제트팩 컴포즈에서는 ConstraintLayout을 통해

화면 요소들을 상대적으로 배치할 수 있으며 다른 레이아웃 composable과

마찬가지로 ConstraintLayout은 하나의 modifier 파라미터를 호출할 수 있다

ConstraintLayout은 컴포저블 및 컴포즈의 다른 레이아웃들과 동일한 형태로 제공되며 위와 같은 방식으로 호출한다

https://developer.android.com/develop/ui/compose/layouts/constraintlayout

Compose의 ConstraintLayout | Jetpack Compose | Android Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Compose의 ConstraintLayout 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. ConstraintLayout은 화면에 다른 컴포

developer.android.com

2. 사용 방법

dependencies {
    implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
}

Jetpack Compose의 ConstraintLayout은 별도의 라이브러리로 제공된다

ConstraintLayout을 사용하기 위해 가장 먼저 build.gradle 파일에 위의 의존성을 추가한다

@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(
        modifier = Modifier
            .size(300.dp)
            .background(Color.Gray)
    ) {
        //val text1 = createRef()
        val (box1, box2) = createRefs()

        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Red)
                .constrainAs(box1) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )

        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Green)
                .constrainAs(box2) {
                    start.linkTo(box1.end, margin = 8.dp)
                    top.linkTo(box1.bottom, margin = 8.dp)
                }
        )
    }
}

참조를 할당해서 제약을 추가한 코드이다

제약 조건이 존재하지 않으면 ConstraintLayout의 composable 자식은 콘텐츠 영역의 왼쪽 위 모서리에 배치된다

ConstraintLayout이 참조(createRef(), createRefs())를 통해 각 composable 요소를 식별하고,

이를 기반으로 제약 조건을 설정하기 때문에 제약을 받을 composable 요소에

제약 조건을 적용하기 전에 참조를 할당해야 한다

ConstraintLayout을 사용할 때, composable의 제약 조건은 주로 부모 ConstraintLayout 또는

다른 composable의 관계를 설정하는 형태로 정의된다

제약 조건의 작성 방법은 XML 문법과 유사하며 constrainAs의 후행 람다 안에서 linkTo 함수를 호출하여 선언한다

Annotation

[Jetpack Compose] DisposableEffect

앱의노예 — Sat, 27 Jul 2024 21:22:45 +0900

1. DisposableEffect란?

DisposableEffect는 Jetpack Compose에서 리소스 관리와 side effect 처리를 위해 제공되는 API이다

주로 컴포저블이 컴포지션에 추가되거나 제거될 때 수행해야 하는 작업을 정의하는 데 사용된다

컴포저블이 화면에 나타날 때 side effect를 시작하고, 화면에서 제거될 때 정리 작업을 수행되며

DisposableEffect는 블록 내에 여러 가지 작업이 있을 때 onDispose 절을 코드 블록의 마지막에 위치시켜야 한다

끝나는 지점을 명확히 인식할 수 있도록 하기 위함이며 그러지 않으면 IDE에 빌드 시간 오류가 발생할 수 있다

https://developer.android.com/develop/ui/compose/side-effects#disposableeffect

Compose의 부수 효과 | Jetpack Compose | Android Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Compose의 부수 효과 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 부수 효과는 구성 가능한 함수의 범

developer.android.com

2. 사용 방법

@Composable
fun testDisposableEffect() {
    DisposableEffect(Unit) {
        println("Effect started")

        onDispose {
            println("Effect disposed")
        }
    }
}

@Composable
fun MyComposable(data: String) {
    DisposableEffect(data) {
        // data값이 변경될 때마다 이 블록이 실행됩니다.
        println("DisposableEffect: $data")

        onDispose {
            // 기존의 효과를 정리하는 블록
            println("Dispose: $data")
        }
    }

    Text(text = data)
}

@Composable
fun MyScreen() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .myComposableEffect()
            .background(Color.Red)
    )
}


fun Modifier.myComposableEffect() = composed {
    DisposableEffect(Unit) {
        println("Effect started")

        onDispose {
            println("Effect disposed")
        }
    }
}

[Jetpack Compose] Modifier

앱의노예 — Sun, 7 Jan 2024 23:44:34 +0900

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier?hl=ko

[Jetpack Compose] Slot API

앱의노예 — Sat, 6 Jan 2024 19:46:06 +0900

1. Slot API란?

Composable 함수는 하나 이상의 Composable 함수를 호출할 수 있다

Jetpack Compose에서의 Slot API는 Composable 함수를 통해 사용자 정의 UI 컴포넌트에 Slot을 제공하여, 이 컴포넌트의 일부를 외부에서 정의할 수 있게 하는 패턴이다

하나의 Slot API는 하나 이상의 요소가 비어 있는 UI 템플릿이다

Composable이 호출될 때 파라미터로 전달되며 Compose 런타임 시스템이 UI를 렌더링 할 때 포함된다

Composable의 슬롯에 전달할 수 있는 람다 표현식을 이용해 작성하며

이를 통해 컴포넌트의 레이아웃이나 동작을 재사용할 수 있으며, 동시에 특정 부분은 개발자가 커스터마이즈할 수 있다

https://developer.android.com/codelabs/jetpack-compose-layouts?hl=ko#8

Compose의 기본 레이아웃 | Android Developers

이 Codelab에서는 Compose에서 즉시 제공되는 컴포저블과 수정자를 통해 실제 디자인을 구현하는 방법을 알아봅니다.

developer.android.com

3. 사용 방법

@Composable
fun CustomSlot(content: @Composable () -> Unit) {
    Card(modifier = Modifier.padding(16.dp)) {
        Box(modifier = Modifier.padding(16.dp)) {
            content() // 여기에 배치된다
        }
    }
}

@Composable
fun TestSlot() {
    CustomSlot {
        Text("Hello!")
    }
}

@Composable () -> Unit 람다를 통해 카드의 내용을 사용하는 측에서 정의 할수 있게 한다

이러한 방식으로 Slot API를 사용하면 UI 컴포넌트의 재사용성과 유연성을 높일 수 있으며, 사용자 정의 요구에 쉽게 대응할 수 있는 이점이 있다

[Jetpack Compose] CompositionLocal

앱의노예 — Fri, 5 Jan 2024 12:27:19 +0900

[Jetpack Compose] MutableState

앱의노예 — Thu, 4 Jan 2024 21:26:36 +0900

[Jetpack Compose] Composable 함수

앱의노예 — Wed, 3 Jan 2024 20:27:59 +0900

1. Composable 함수란?

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name")
}

Composable 함수는 Jetpack Compose로 사용자 인터페이스를 만들기 위해 사용하는 특수한 코틀린 함수이다.

@Composable Annotation을 이용하여 선언하며 Composable이 호출되면 앱 안에서

해당 영역이 이미지로 변환될 때 사용자에게 표시되고 동작되는 방식을 정의하는 데이터와 프로퍼티의 집합을 전달한다.

코틀린의 일반 함수와 같은 방식으로 결괏값은 반환하지 않으며, 런타임으로 사용자 인터페이스 요소를 전달하면

컴포즈 런타임 통해 렌더링 한다.

선언적 UI구성, 재사용성, 리엑티브 프로그래밍 등의 특징을 가지고 있으며 Stateful와 Stateless로 분류된다.

https://developer.android.com/codelabs/jetpack-compose-basics#0

Jetpack Compose 기초 | Android Developers

이 Codelab에서는 Compose의 기본사항을 알아봅니다.

developer.android.com

2. Stateful Composable과 Stateless Composable

Composable 함수는 Stateful Composable과 Stateless Composable로 분류된다

Stateful Composable은 내부적

Stateful은 앱 실행 중 변경할 수 있는 모든 값(텍스트 필드 문자열, 체크박스 상태 등)으로 정의된다

Stateful Composable

@Composable
fun Counter() {
    val count = remember { mutableStateOf(0) }

    Button(onClick = { count.value++ }) {
        Text("Clicked ${count.value} times")
    }
}

Stateful Composable은 자체적으로 하나 이상의 상태를 관리하는 컴포저블 함수이다

하나의 컴포저블 함수는 해당 컴포저블 함수 또는 컴포저블 함수가 호출한 컴포저블의 형태나 동작을 정의하는 상탯값을 저장할 수 있다

상탯값을 저장하려면 remember 키쿼드를 이용하고 mutableStateOf 함수를 호출한다

UI의 동적인 부분을 반영하고 자신의 상태에 대한 전체적인 제어권을 가지고 있다

상태가 내부적으로 캡슐화되어 있어 상태 관리 로직과 UI 렌더링이 같은 곳에 위치한다

Stateless Composable

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

정의: Stateless Composable은 내부적으로 자체 상태를 유지하지 않는 컴포저블 함수입니다. 이들은 모든 필요한 데이터를 인자로 받아 UI를 렌더링합니다. 특징: 재사용성: 상태가 외부에서 관리되기 때문에, Stateless Composable은 더 재사용 가능하고 테스트하기 쉽습니다. 단순성: 내부 상태 관리가 없기 때문에, 구현이 단순해집니다.

Annotation

[일본 생활] 일본에서 혼인 신고하기 (번역본 첨부)

앱의노예 — Tue, 2 Jan 2024 21:00:00 +0900

1. 일본에 혼인 신고 (일본)

1. 기본증명서 (상세) + 번역본
2. 혼인관계증명서 (상세) + 번역본
3. 재류카드

아래는 지역에 따라 필요할 수도 있음
가족관계증명서, 여권, 도장

한국인이 별도로 준비해야 하는 부분을 적었고 나는 후쿠오카 중앙구약소에서 혼인신고를 했기 때문에

1,2,3만 필요했지만 인터넷에 여러 가지 글을 본 결과 조금씩 차이가 있었다

위에 서류들은 인터넷에서 출력하는 것보다는 영사관에서 출력받은 것이 안전하다는 말이 있어

영사관에 가서 발급받아서 제출하였고 여권 가족관계증명서 도장의 경우 다른 블로그 글들을 보면

후쿠오카 이외의 지역에서는 요구하는 곳도 있는 것 같고

이 밖에도 다른 것을 요구할 수도 있기에 자신이 사는 지역의 구약소에서 간단한 확인은 필요한 것 같다

일본인과 공동으로 해야 할 것은 혼인신고서이다

혼인신고서를 작성 시 어려운 내용이 있을 땐 구약소 직원 분께 물어보면서 작성하면 크게 어려움이 없을 거 같다

작성할 때 혼인 보증인 2명이 필요하며 혼인 신고일은 서류가 통과한 날이기 때문에 원하는 날이 있으면

그전에 한번 문의를 해서 확실하게 준비하는 것이 좋을 거 같다

2. 한국에 혼인 신고 (일본)

1. 수리증명서 + 번역본
2. 혼인신고서, 가족관계증명서, 혼인관계증명서 (영사관에서 받을 수 있음)
3. 한국인, 일본인 여권 사본
4. 도장

한국인은 해외에서 결혼 후에 3개월 이내에 국내에 신고하지 않으면 과태료가 발생한다고 한다

따라서 수리증명서는 일본에서 결혼 신고를 하면 후쿠오카 기준 하루정도 걸려 발급되는데

나오는 대로 최대한 빨리 하는 게 좋다고 생각한다

일본인 배우자 없이 혼자서 신고가 가능하며 신고를 하면 등록까지 일주일 안에 완료되는 거 같다

완료가 되면 혼인관계증명서에 일본인 배우자의 이름이 추가된다

가족관계증명서(家族関係証明書).docx

0.01MB

[Android] mutableState

앱의노예 — Mon, 1 Jan 2024 19:22:33 +0900

1. mutableState란?

var sLiderPosition by remember {
    mutableStateOf(20f)
}

MutableState는 상태 관리를 위한 핵심 개념 중 하나이다

상태 관리는 UI의 데이터가 시간에 따라 어떻게 변하는지, 그리고 이 데이터 변화가 UI에 어떻게 반영되는지를 처리하는 과정입니다. Compose는 리액티브 프로그래밍 모델을 사용하여, 데이터의 상태가 변경될 때 UI를 자동으로 업데이트합니다.

https://developer.android.com/codelabs/jetpack-compose-basics#0

Jetpack Compose 기초 | Android Developers

이 Codelab에서는 Compose의 기본사항을 알아봅니다.

developer.android.com

2. Stateful Composable과 Stateless Composable

Composable 함수는 Stateful Composable과 Stateless Composable로 분류된다

Stateful은 앱 실행 중 변경할 수 있는 모든 값(텍스트 필드 문자열, 체크박스 상태 등)으로 정의된다