안드로이드 개발 기록

MVI 정리

tolylim — Wed, 6 Nov 2024 20:57:59 +0900

MVI 패턴이란?

단방향 데이터 흐름을 통해 상태를 관리하는 패턴

(일반적으로 단일 상태 사용!)

- Model : 상태 담당

- View : 사용자 이벤트를 Intent로 전달, 모델에서 받은 상태를 기반으로 화면 업데이트

- Intent : 사용자 액션이나 이벤트 정의, 사용자 이벤트를 받아 모델로 전달하여 상태 업데이트

단방향 동작

1. 이벤트 발생 (view -> intent)

2. 모델의 상태 변경 (intent -> model)

3. 변경된 상태로 Ui 업데이트 (model -> view)

어떻게 구현할까?

State : 상태는 가장 최신 값으로 유지할 수 있는 StateFlow

Event : 이벤트는 구독자가 없으면 무시할 필요가 있기 때문에 SharedFlow

Effect : 에러, 토스트와 같은 사이드이펙트는 한번만 보여주면 되기 때문에 Channel

⭐️ 이벤트를 처리할 때, 바로 뷰모델의 함수를 호출하는 것이 아니라 SharedFlow로 사용하는 이유는?

- 발생하는 이벤트의 구독자가 없다면 이벤트가 무시되어야함

- 여러개 뷰모델 사용할 경우에 각 이벤트 별로 뷰모델에서 처리할 동작이 다를수도 있기 때문에 BaseViewModel에서 flow로 처리

MVI 장점

- 앱 상태 예측 가능

- 단방향 데이터 흐름을 통해 상태 변화가 명확해져 상태 관리가 쉬움

- 상태를 필요로할 때 저장하고 다시 불러올 때 동일한 상태를 쉽게 재현할 수 있음

- 비동기 작업 시 성공과 실패 상태를 구분하여 상태를 명확하게 관리할 수 있음

MVI 단점

- 상태 기반 Ui를 위해 초기에 Intent, State 등 정의할 코드가 많음 -> 라이브러리로 해결 가능 ex) orbit, mavericks

- 상태는 불변 객체이기 때문에 상태가 변할 때 마다 객체가 새로 생성되기 때문에 메모리 사용량이 증가

-> 자주 변경되는 스크롤 위치 같은건 State에 포함시키기보다는 Ui 요소 내에서 관리

-> 자주 변경되는 값은 별도로 관리하거나 debounce로 업데이트 주기 줄이기

MVVM과 비교

- MVVM

- 여러 상태를 각각 독립적으로 StateFlow 형태로 가짐

- 여러 상태가 동시에 업데이트될 때 의도하지 않은 순서로 완료될 수 있고, 일관성 유지 어려움

- MVI :

- 단일 상태를 가짐. 여러개 값이 하나의 State로 이 객체의 최신값이 뷰에 반영됨

- 모든 이벤트가 인텐트로 시작되고 State로 완료되므로, 상태는 항상 특정 인텐트의 결과로 명확함

- 여러 이벤트가 동시에 발생해도 최종 상태만 뷰에 전달

MVI, 그래서 왜 사용하는걸까?

최근 리액트, 컴포즈 등 상태 기반 Ui 시스템이 대중화되면서 명확하고 예측 가능한 상태 관리가 중요해짐

비동기 작업에서 데이터 흐름에 따른 상태 업데이트를 명확하게 하기 위해 사용

Compose - Modifier (수정자)

tolylim — Fri, 1 Nov 2024 16:52:13 +0900

Modifier의 역할

- Composable의 크기, 레이아웃, 동작, 모양 변경

- 클릭, 스크롤, 드래그, 확대/축소, pull to refresh 등 상호작용

⭐️ Modifier 함수는 호출하는 순서에 따라 결과가 달라질 수 있기 때문에 순서에 신경써서 호출해야한다. ⭐️

자주 사용하는 Modifier 정리

size

- 기본적으로 컴포즈에서 제공하는 레이아웃은 하위요소의 크기에 맞춰짐(WrapContentSize)

- size를 이용하여 크기를 임의로 정할 수 있음

modifier = Modifier.size(width = 400.dp, height = 100.dp)

requiredSize

- 제약조건을 무시하고 크기를 정할 때 사용

- 상위요소 크기에 상관없이 설정 가능

 modifier = Modifier.requiredSize(150.dp)

widthIn/heightIn

- 최소/최대 크기를 설정할 때 사용

fillMax

- fillMaxHeight(), fillMaxWidth(), fillMaxSize()로 가득 채우는 용도로 사용

- fillMaxWidth(fraction = 0.5f) 처럼 파라미터로 0.0f ~ 1.0f로 비율을 사용해서 정의할 수 있음

modifier = Modifier.fillMaxWidth(0.5f)

paddingFromBaseline

- 텍스트 기준선에 padding 추가하기 위해 사용

modifier = Modifier.paddingFromBaseline(10.dp, 10.dp)

alignByBaseline

- Row() 내부에서 다른 컴포저블 함수들의 기준선 정렬

- Text가 있을때 서로 글꼴이 다를경우, 기준선이 맞지 않을수 있기 때문에 사용

statusBarsPadding/navigationBarsPadding

- scaffold의 innerPadding처럼 상단 상태바와 네비게이션바 패딩을 제외할 수 있음

background

- 배경을 정의

- [color, shape] 파라미터를 가진 background와 [brush, shape, alpha] 파라미터를 가진 background(그라데이션)가 있음

border

- 테두리를 정의

- width (너비), color(색상), shape(모양) 파라미터로 구성

 modifier = Modifier
            .border(
                width = 1.dp,
                color = Color.Blue,
                shape = RectangleShape 
            )

aspectRatio

- 컴포넌트 크기를 비율로 설정 가능

modifier = Modifier.aspectRatio(16f / 9f)

zIndex

- 0.0f ~ 1.0f로 설정하여 같은 부모 내에 있는 자식들 끼리 레이어 순위를 정할 수 있음

- 숫자가 클수록 높이 위치

offset

- x, y축으로 설정한 dp 값만큼 이동

clickable

- 클릭 효과

graphicsLayer

- 그래픽 효과 적용

- translation(이동), scale(확대/축소), rotation(회전) 설정 가능

modifier = Modifier.graphicsLayer {
    translationX = 10f
}

onGloballyPositioned

- 전역 포지션이 변경되었을 때 호출

- Composition이 완전히 끝났을 때 호출됨

- LayoutCoordinates로 다양한 포지션 정보 가져올 수 있음

  Modifier.onGloballyPositioned { coordinates ->
        coordinates.size // 사이즈
        coordinates.positionInWindow() // 윈도우에 상대적인 position
        coordinates.positionInRoot() // 컴포즈 최상위에 상대적인 position
        coordinates.providedAlignmentLines // 제공되는 정렬 라인
        coordinates.parentLayoutCoordinates // 부모에 해당하는 인스턴스
    }

then

두 변경자를 서로 연결하기 위함

[Kotlin] 확장 함수

tolylim — Wed, 31 Aug 2022 15:46:36 +0900

* 확장 함수란?

기존에 정의된 클래스에 함수를 추가하는 기능.

직접 만든 클래스가 아닌 다른 사람이 만든 클래스에는 함수를 추가하기 어렵기 때문에 확장 함수 사용.

어떤 클래스의 멤버 메소드인 것처럼 호출할 수 있지만, 실제로는 그 클래스의 밖에 선언된 함수

* 확장 함수 생성 방법

* 확장 함수 예시 (String)

String 확장 함수 예시

String 확장 함수 사용

-> String 클래스 내부를 직접 수정하지 않고, String 클래스에 lastChar라는 새로운 함수를 생성.

- receiver type (수취인 타입) : 확장 함수를 추가할 클래스. 확장 대상이 될 클래스 ex) String

- receiver object (수취인 객체) : receiver type이 가지고 있는 인스턴스 ex) this -> "kotlin"문구

* 특징

- 확장함수는 정적바인딩 된다.

- 이미 클래스 내부에 존재하는 클래스와 이름, 매개변수 타입, 매개변수 개수가 완벽하게 같은 함수는 무시된다.

(이런 경우는 확장함수 호출 시 확장함수의 내용을 호출하는 것이 아닌 멤버함수의 내용이 호출된다.)

- 확장함수는 멤버변수를 오버로딩 할 수 있다.

(이름은 같고 매개변수의 타입이나 개수가 다르면 확장함수와 멤버함수 구분이 가능하다.)

- 확장함수는 오버라이드 할 수 없다.

- 보일러 플레이트 코드를 줄일 수 있다.

- 확장 함수를 정의했어도 모든 곳에서 사용할 수는 없다. (import 했을 경우 사용 가능하다.)

* 정적 바인딩 vs 동적 바인딩

- 정적 바인딩 : 함수 호출 부분에 메모리 주소 값을 저장하는 작업이 컴파일 시간에 행해진다.

= 컴파일 이후로 값이 변경되지 않는다.

- 동적 바인딩 : 함수 호출 부분에 메모리 주소 값을 저장하는 작업이 컴파일 시간에 보류되다가 런타임에 행해진다.

= 실행 시점에 객체 타입에 따라 동적으로 호출될 대상 메소드를 결정한다.

* 상속 관계의 클래스에서 확장함수를 오버라이드 할 때

- 일반 멤버 함수는 오버라이드 가능

-> 런타임 시간에 함수의 메모리 주소가 결정된다.

-> click() 호출 시 ButtonClass 클래스의 함수가 실행된다.

-> ButtonClass()라는 객체를 따라간다.

= 동적 바인딩

- 확장 함수는 오버라이드 불가능

-> 컴파일 시간에 ViewClass의 메모리 주소로 결정된다.

-> showOff() 호출 시 ViewClass 클래스의 함수가 실행된다.

-> ViewClass라는 타입을 따라감

= 정적 바인딩

[안드로이드] 안으로 둥근 뷰 만들기 (Negative Corner Radius)

tolylim — Thu, 21 Jul 2022 15:17:27 +0900

안드로이드에서 테두리가 밖으로 둥근 뷰는 많이 만들어봤지만 안으로 둥근 뷰는 한번도 만들어 본 적이 없었다.

처음에는 사각형을 만든 후에 테두리에 흰색 원을 겹쳐서 만들어보았지만 그렇게 하면 뷰를 활용하기에 어려움이 있었다.

(ex) 그림자 효과를 넣을 수 없음, 배경색이 단색이 아닌 이미지나 그라데이션이 들어갈 경우 티가 남

찾아보니 안드로이드에 CornerTreament라는 것이 있는데 이것을 활용해서 쉽게 만들 수 있었다!

https://developer.android.com/reference/com/google/android/material/shape/CornerTreatment

CornerTreatment | Android Developers

CornerTreatment public class CornerTreatment extends Object java.lang.Object ↳ com.google.android.material.shape.CornerTreatment Known direct subclasses CutCornerTreatment A corner treatment which cuts or clips the original corner of a shape with a

developer.android.com

CornerTreatment의 getCornerPath를 오버라이드 해서 작업을 해준 후 View에 확장함수를 만들어서 background를 적용하듯이 사용하였다.

CornetTreatment의 getCornerPath와 View의 확장함수는 아래 블로그를 참고하여 구현하였다.

https://blog.stylingandroid.com/material-shape-cutting-corners/

Material Shape: Cutting Corners

One of the foundations of Material Design 2.0 is the ability to define shapes to reinforce the branding being applied to our apps. At first glance what we are able to control appears to be somewhat…

blog.stylingandroid.com

ConcaveRoundedCornerTreatment.kt

class ConcaveRoundedCornerTreatment : CornerTreatment() {

    override fun getCornerPath(
        shapePath: ShapePath,
        angle: Float,
        interpolation: Float,
        radius: Float
    ) {
        val interpolatedRadius = radius * interpolation
        shapePath.reset(0f, interpolatedRadius, ANGLE_LEFT, ANGLE_LEFT - angle)
        shapePath.addArc(
            -interpolatedRadius,
            -interpolatedRadius,
            interpolatedRadius,
            interpolatedRadius,
            ANGLE_BOTTOM,
            -angle
        )
    }

    companion object {
        const val ANGLE_LEFT = 180f
        const val ANGLE_BOTTOM = 90f
    }
}

MainActivity.kt

package com.example.myapplication

import android.content.Context
import android.content.res.ColorStateList
import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.TypedValue
import android.view.View
import androidx.core.content.ContextCompat
import com.example.myapplication.databinding.ActivityMainBinding
import com.google.android.material.shape.MaterialShapeDrawable
import com.google.android.material.shape.ShapeAppearanceModel
import kotlin.math.roundToInt

private const val TYPE_LEFT = 0
private const val TYPE_RIGHT = 1

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val cornerSize = dp2px(20f, applicationContext)

        binding.view1.setShapeBackground(cornerSize, R.color.yellow, TYPE_LEFT)
        binding.view2.setShapeBackground(cornerSize, R.color.green, TYPE_RIGHT)
    }

    private fun dp2px(dp: Float, context: Context) = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP, dp, context.resources.displayMetrics
    )
}

private fun View.setShapeBackground(cornerSize: Float, color: Int, type: Int) {
    background = if(type == TYPE_LEFT) {
        MaterialShapeDrawable(
            ShapeAppearanceModel.builder()
                .setBottomLeftCornerSize(cornerSize)
                .setTopLeftCornerSize(cornerSize)
                .setTopLeftCorner(ConcaveRoundedCornerTreatment())
                .setBottomLeftCorner(ConcaveRoundedCornerTreatment())
                .build()
        ).apply {
            fillColor = ColorStateList.valueOf(
                ContextCompat.getColor(
                    context,
                    color
                )
            )
        }
    } else {
        MaterialShapeDrawable(
            ShapeAppearanceModel.builder()
                .setBottomRightCornerSize(cornerSize)
                .setTopRightCornerSize(cornerSize)
                .setTopRightCorner(ConcaveRoundedCornerTreatment())
                .setBottomRightCorner(ConcaveRoundedCornerTreatment())
                .build()
        ).apply {
            fillColor = ColorStateList.valueOf(
                ContextCompat.getColor(
                    context,
                    color
                )
            )
        }
    }
}

왼쪽에 위치한 노란색 뷰는 setBottomLeftCornerSize/setTopLeftCornerSize와 setBottomLeftCorner, setTopLeftCorner를 사용하여 왼쪽 위, 왼쪽 아래가 안으로 둥글게 구현하였고,

오른쪽에 위치한 초록색 뷰는 setBottomRightCornerSize/setTopRightCornerSize와 setBottomRightCorner, setTopRightCorner를 사용하여 오른쪽 위, 오른쪽 아래가 안으로 둥글게 구현하였다.

모든 테두리를 동일한 사이즈로 설정하려면 setAllCornerSizes를 사용하면 되고

모든 테두리를 안으로 둥글게 구현하려면 setAllCorners에 ConcaveRoundedCornerTreatment를 넣어주면 된다.

추가로 EdgeTreatment를 활용하여 모서리에 효과를 줄 수도 있다.

MaterialShapeDrawable(
    ShapeAppearanceModel.builder()
        .setBottomLeftCornerSize(cornerSize)
        .setTopLeftCornerSize(cornerSize)
        .setTopLeftCorner(ConcaveRoundedCornerTreatment())
        .setBottomLeftCorner(ConcaveRoundedCornerTreatment())
        .setTopEdge(TriangleEdgeTreatment(cornerSize, true))
        .setBottomEdge(TriangleEdgeTreatment(cornerSize, true))
        .build()
).apply {
    fillColor = ColorStateList.valueOf(
        ContextCompat.getColor(
            context,
            color
        )
    )
}