반응형 UI (태블릿 화면 대응)

[otter66]

코드를 이용한 반응형 UI 대응

다이얼로그 크기 변경 #468

반응형 UI를 위한 코드

class ResponsiveUiDialogSizeAdjuster {

    fun adjustSize(dialog: Dialog?, resources: Resources) {
        dialog ?: return
        when (isOverPhoneSize(resources)) {
            true -> adjustTabletDialogSize(dialog, resources)
            false -> adjustPhoneDialogSize(dialog, resources)
        }
    }

    private fun isOverPhoneSize(resources: Resources): Boolean =
        getDeviceDPValue(resources) >= DEVICE_TYPE_BOUNDARY

    private fun getDeviceDPValue(resources: Resources): Int =
        (resources.displayMetrics.widthPixels / resources.displayMetrics.density).roundToInt()

    private fun adjustPhoneDialogSize(dialog: Dialog, resources: Resources) {
        dialog.window?.apply {
            setLayout(
                (resources.displayMetrics.widthPixels * PHONE_DIALOG_WIDTH_RATIO).toInt(),
                ViewGroup.LayoutParams.WRAP_CONTENT,
            )
            setBackgroundDrawableResource(R.color.td_white)
        }
    }

    private fun adjustTabletDialogSize(dialog: Dialog, resources: Resources) {
        dialog.window?.apply {
            setLayout(
                dPToPixel(TABLET_DIALOG_WIDTH_DP, resources),
                ViewGroup.LayoutParams.WRAP_CONTENT,
            )
            setBackgroundDrawableResource(R.color.td_white)
        }
    }

    private fun dPToPixel(dp: Int, resources: Resources): Int =
        (dp * resources.displayMetrics.density).roundToInt()

    companion object {
        private const val PHONE_DIALOG_WIDTH_RATIO = 0.85
        private const val DEVICE_TYPE_BOUNDARY = 600
        private const val TABLET_DIALOG_WIDTH_DP = 400
    }
}

현재 TripDraw App은 가로 모드를 막아놨기 때문에 600dp를 기준으로 폰과 태블릿을 분기할수 있다.

• 핸드폰

핸드폰의 경우 화면 width의 0.85 비율로 사이즈를 조정하도록 하였다.

• 태블릿

태블릿의 경우 400dp 로 고정하여 다이얼로그를 보여주도록 조정하였다.

dimens를 이용한 반응형 UI 대응

감상 작성 화면의 사진 미리보기 크기 조절 #507

좌측이 핸드폰 크기이고 우측이 태블릿 화면이다.
공식문서를 따라 dimens.xml 파일을 화면 크기에 따라 분기 처리를 해주었다.

android/app/src/main/res/values-w600dp/dimens.xml
<resources>
    <!--    PostWritingActivity    -->
    <dimen name="post_wiring_activity_image_view_width">100dp</dimen>
    <dimen name="post_wiring_activity_image_delete_view_width">24dp</dimen>
</resources>


android/app/src/main/res/values/dimens.xml
<resources>
    <!--    PostWritingActivity    -->
    <dimen name="post_wiring_activity_image_view_width">56dp</dimen>
    <dimen name="post_wiring_activity_image_delete_view_width">16dp</dimen>
</resources>

각각의 화면에 맞춰 dimens 값을 지정해주었다.