Ourday - Widget 반응형 UI 만들기

 

 ❤️ 내가 원하는 것 

사용자가 홈 화면에서 위젯 크기를 조절하면 자동으로 위젯 레이아웃이 변경된다.

좌, 우는 다른 기기라서 이게 기기 마다 dp 값은 달라지는 것 같다.

 

 ❤️ SizeMode 

Glance는 여러 가지 SizeMode ( Single | Exact | Reponsive ) 세 가지를 지원하는데, SizeMode.Single이 Default이다.

override val sizeMode: SizeMode = SizeMode.Single //default size

 

SizeMode.Single

위젯 메타데이터에 설정한 최소 크기 기준으로만 동작하고, 사용자가 위젯 크기를 조절해도 UI는 다시 안 만들어진다..
따라서 지정한 대로 그냥 고정된 콘텐츠를 보여준다고 보면 된다.

 

SizeMode.Exact 

SizeMode.Exact는 위젯 크기가 바뀔 때마다 Content() 함수가 다시 호출되고, 사용자가 사이즈를 조절하면 그 크기에 맞춰 콘텐츠를 매번 새로 그려준다.
다시 말해 딱 그 순간에 가능한 최대 크기로 다시 계산해서 보여주는 코드이다.

 

SizeMode.Responsive 

SizeMode.Responsive는 개발자가 직접 지원할 사이즈를 지정할 수 있다.
예를 들어서 100x100, 250x100 같은 식으로 정해두면, 시스템이 그 중 가장 잘 맞는 걸 골라서 보여주는 형식이다.

    companion object {
        private val SMALL_SQUARE = DpSize(100.dp, 100.dp)
        private val HORIZONTAL_RECTANGLE = DpSize(250.dp, 100.dp)
        private val BIG_SQUARE = DpSize(250.dp, 250.dp)
    }

이 방식은 Exact처럼 계속 UI를 새로 만드는 게 아니라, 딱 한 번만 호출해서 각 사이즈별로 캐싱해놓고 보여준다.
그래서 메모리에도 더 효율적이고, 크기 바뀔 때도 딱딱 잘 맞춰준다.

-> 개발자가 위젯 종류를 제한할 때 사용하면 좋을 것 같다.

 

---

 ❤️ 예시 코드 

class MinimiFirstWidget : GlanceAppWidget() {
	// 
    override val sizeMode: SizeMode = SizeMode.Exact

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        provideContent {
            MiniWidgetView(
                title = title,
                coupleBitmap = coupleBitmap,
                ddayText = ddayText,
            )
        }
    }

    @Composable
    private fun MiniWidgetView(
        title: String,
        coupleBitmap: Bitmap?,
        ddayText: String,
    ) {
        // 크기
        val size = LocalSize.current
        val width = size.width.value
        val height = size.height.value

        if (width.toInt() > 180) {
            // 큰 위젯
        } else if (height.toInt() > 130) {
            // 중간 위젯
        } else {
            // 작은 위젯
        }
    }
}

 

 ❤️ 출처 

https://developer.android.com/develop/ui/compose/glance/testing?hl=ko

Glance를 사용한 단위 테스트  |  Jetpack Compose  |  Android Developers