창 크기 클래스는 효과적인 표시 영역 중단점의 집합입니다. 반응형/적응형 레이아웃을 디자인, 개발, 테스트합니다. 중단점 균형 고유한 사례에 맞게 앱을 최적화할 수 있는 유연성이 있습니다.
창 크기 클래스는 앱에서 사용할 수 있는 디스플레이 영역을 다음과 같이 분류합니다. 좁게, 중간 또는 확장입니다. 사용 가능한 너비와 높이로 분류됨 언제라도 앱의 창 크기가 클래스 - 하나는 너비용, 다른 하나는 높이용입니다. 사용 가능한 너비는 일반적으로 세로 스크롤이 보편적이기 때문에 사용 가능한 높이보다 중요하므로 너비 창 크기 클래스가 앱의 UI와 더 관련이 있을 가능성이 높습니다.
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_width.png?authuser=0000&hl=ko)
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_height.png?authuser=0000&hl=ko)
그림에 시각화된 것처럼 중단점을 사용하면 레이아웃에 관해 자세히 알아보겠습니다. 각 크기 클래스 중단점은 일반적인 기기 시나리오의 대부분의 사례를 나타내며 중단점 기반 레이아웃의 디자인을 고려할 때 유용한 참조 기준일 수 있습니다.
크기 클래스 | 중단점 | 기기 표현 |
---|---|---|
좁은 너비 | 너비 < 600dp | 세로 모드 휴대전화의 99.96% |
중간 너비 | 600dp ≤ 너비 < 840dp | 세로 모드 태블릿의 93.73%
세로 모드의 펼친 대형 내부 디스플레이 |
확장 후 너비 | 너비 ≥ 840dp | 가로 모드 태블릿의 97.22%
가로 모드의 가장 큰 펼친 내부 디스플레이 |
낮은 높이 | 높이 < 480dp | 가로 모드 휴대전화의 99.78% |
중간 높이 | 480dp ≤ 높이 < 900dp | 가로 모드 태블릿의 96.56%
세로 모드 휴대전화의 97.59% |
확장 후 높이 | 높이 ≥ 900dp | 세로 모드 태블릿의 94.25% |
크기 클래스를 실제 기기로 시각화하면 유용할 수 있지만 창 크기는 기기 화면의 크기에 의해 명시적으로 결정되지는 않습니다. 창문 크기 클래스는 isTablet 유형 로직용이 아닙니다. 대신 기간 크기 클래스는 애플리케이션에서 사용할 수 있는 창 크기에 따라 결정됩니다. 앱이 실행되는 기기의 유형과 관계없이 두 가지 중요한 의미:
실제 기기는 특정 창 크기 클래스를 보장하지 않습니다. 이 앱에서 사용할 수 있는 화면 공간이 앱의 화면 크기와 여러 가지 이유로 인해 휴대기기에서 화면 분할 모드를 사용하면 두 애플리케이션 간에 화면을 분할합니다. ChromeOS에서 Android 앱은 임의의 크기를 조절할 수 있는 자유 형식 창에 표시되어야 합니다. 폴더블에는 서로 다른 크기의 화면 두 개를 개별적으로 액세스할 수 있음 기기를 펼치거나 펼치면 됩니다.
창 크기 클래스는 앱의 전체 기간 동안 변경될 수 있습니다. 앱이 실행되는 동안 기기 방향이 변경되고 멀티태스킹이 가능하고 접기/펼치면 사용 가능한 화면 공간이 달라질 수 있습니다. 창 크기 클래스가 동적이며 앱의 UI가 변경할 수 있습니다
창 크기 클래스는 Material Design 레이아웃 안내를 참고하세요. 창 크기 클래스를 사용하여 애플리케이션 레이아웃을 대략적으로 결정하고, 예를 들어 특정 표준 레이아웃을 사용하여 추가 화면 공간이 필요합니다.
현재 상태를 계산하기 위해
WindowSizeClass
드림
사용
WindowSizeClass#compute()
Jetpack Compose에서 제공되는
WindowManager 라이브러리에 추가합니다. 다음 예를 참고하세요.
창 크기 클래스를 계산하고 창 크기 클래스를 계산할 때마다 업데이트를 수신하는 방법을 보여줍니다.
창 크기 클래스가 다음과 같이 변경됩니다.
Kotlin
class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. val container: ViewGroup = binding.container // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(object : View(this) { override fun onConfigurationChanged(newConfig: Configuration?) { super.onConfigurationChanged(newConfig) computeWindowSizeClasses() } }) computeWindowSizeClasses() } private fun computeWindowSizeClasses() { val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this) val width = metrics.bounds.width() val height = metrics.bounds.height() val density = resources.displayMetrics.density val windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass // COMPACT, MEDIUM, or EXPANDED val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass // Use widthWindowSizeClass and heightWindowSizeClass. } }
Java
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. ViewGroup container = binding.container; // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(new View(this) { @Override protected void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); computeWindowSizeClasses(); } }); computeWindowSizeClasses(); } private void computeWindowSizeClasses() { WindowMetrics metrics = WindowMetricsCalculator.getOrCreate() .computeCurrentWindowMetrics(this); int width = metrics.getBounds().width int height = metrics.getBounds().height() float density = getResources().getDisplayMetrics().density; WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass() // COMPACT, MEDIUM, or EXPANDED WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass() // Use widthWindowSizeClass and heightWindowSizeClass. } }
창 크기 클래스 테스트
레이아웃을 변경할 때 모든 창 크기에서 레이아웃 동작을 테스트합니다. 특히 소형, 중형 및 확장 중단점 너비에서 그렇습니다.
소형 화면을 위한 기존 레이아웃이 있는 경우 먼저 레이아웃을 최적화하세요. 를 사용합니다. 이 크기 클래스는 가장 많은 공간을 제공하기 때문입니다. 에서 확인하세요. 그런 다음 적합한 레이아웃을 중형 너비 크기 클래스 특수한 레이아웃을 추가하는 것이 좋습니다.
다음 단계
창 크기 클래스를 사용하여 반응형/적응형 광고를 만드는 방법을 자세히 알아보세요. 다음을 참고하세요.
Compose 기반 레이아웃: 다양한 화면 크기 지원
보기 기반 레이아웃: 보기가 포함된 반응형/적응형 디자인
모든 기기 및 화면 크기에서 멋진 앱을 만드는 요소에 관해 자세히 알아보려면 참조: