3억 대가 넘는 Android 대형 화면 기기(태블릿, 오늘날 폴더블, ChromeOS 기기, 자동차 디스플레이, TV가 사용되고 있으며 계속해서 제공될 예정입니다 점점 늘어나는 모바일 사용자에게 최적의 사용자 경험을 제공하기 위해 대형 화면 기기의 다양성과 표준 휴대전화용 - 빌드 적응형 앱
적응형 앱이란 무엇인가요?
주로 앱 디스플레이의 변경사항에 따른 적응형 앱 재구성 레이아웃 앱 창의 크기가 변경됩니다. 그러나 적응형 앱은 탁자 또는 책 상태와 같은 폴더블 기기의 상태 변경 화면 밀도 및 글꼴 크기 변경을 제어할 수 있습니다
그냥 UI 요소가 늘어나거나 줄어드는 대신 창 크기, 적응형 앱이 레이아웃 구성요소를 대체하고 콘텐츠를 표시하거나 숨깁니다. 예를 들어 표준 휴대전화에서 적응형 앱은 하단 탐색 메뉴이지만 대형 화면에서는 탐색 레일입니다. 대형 화면에서는 적응형 앱은 창이 두 개인 목록-세부정보 레이아웃과 같이 더 많은 콘텐츠를 표시합니다. 의 작은 화면, 더 적은 콘텐츠 등 다양한 옵션이 있습니다
과거에는 빠르게 사라지고 휴대전화 중심이었던 과거에는 앱이 전체 화면으로 실행되었습니다. 오늘날 앱은 기기 화면과 관계없이 임의의 크기의 창에서 멀티 윈도우 모드 사용 있습니다. 사용자는 언제든지 창 크기를 변경할 수 있습니다. 따라서 단일 기기에서도 앱은 적응형이어야 합니다.
적응형 앱은 디자인과 구성에 관계없이 모든 기기에서 원활하게 작동합니다.
적응형 UI를 빌드해야 하는 이유
사용자는 앱이 모든 기기에서 원활하게 작동하기를 기대하며 향상된 기능을 제공합니다. 사용자가 멀티 윈도우 모드에서 멀티태스킹할 수 있도록 향상된 앱 환경과 생산성 향상을 경험했습니다.
표준 휴대전화에서 단일 태스크로 제한된 앱은 확장하는 사용자를 놓칩니다. AI를 개발할 것입니다.
Google Play
Google Play는 태블릿 및 폴더블에 특화된 앱 컬렉션을 제공하며 사용자가 고품질 앱을 발견할 수 있도록 지원하는 추천
Play에서 대형 화면에 최적화된 앱과 게임의 순위를 최적화하지 않은 앱 및 게임보다 더 높게 표시 있습니다. 순위는 대형 화면 앱 품질 가이드라인을 기반으로 합니다. 높음 순위를 지정하면 여러 기기를 통해 여러 기기에서 해당 동영상을 보고 대형 화면 전용 평점 및 리뷰를 사용할 수 있습니다.
Play 스토어의 대형 화면 품질 기준을 충족하지 않는 앱은 경고가 표시됩니다. 경고는 사용자에게 앱이 큰 화면 기기에서 제대로 작동하지 않을 수 있습니다.
적응형 앱을 빌드하여 Google Play에서 검색 가능성을 넓히고 앱을 다운로드할 수 있는 기기 수
시작하는 방법
계획에서부터 앱 개발 단계에 이르는 앱 개발의 모든 단계에서 배포할 수 있습니다 그래픽 디자이너에게 적응형 디자인에 관해 알리세요. 다음과 같이 앱 설계 관리 및 확장이 가능하고 즉시 사용할 수 있는 앱을 빌드하게 됩니다. 향후 폼 팩터 및 윈도잉 모드 지원
모든 디스플레이 크기와 구성을 지원하는 적응형 앱을 만들려면 다음 단계를 따르세요. 다음과 같습니다.
- 창 크기 클래스를 사용하여 레이아웃 결정
- Compose Material 3 적응형 라이브러리를 사용하여 빌드
- 터치 이외 입력 지원
- 모든 기기 유형에서 테스트
창 크기 클래스
앱 창 크기는 기기마다 또는 같을 때 다를 수 있음 기기에 배치해야 할 수 있습니다. 이는 앱이 전체 화면일 때도 마찬가지입니다. 기기 방향에 따라 다른 가로세로 비율이 생성됩니다. 포함 멀티 윈도우 모드, 앱 창 크기, 가로세로 비율, 방향을 기기 화면과 다릅니다.
적응형 앱은 결정 및 관리 문제를 단순화하고 일반화함 앱 창만 고려하여 창 크기, 가로세로 비율, 방향 설정 (앱 창이 전체 화면일 때도 작동합니다.)
창 크기 클래스는 앱 창을 소형, 중형 또는 창 너비 또는 높이에 따라 확장됩니다.
다음을 사용하여 앱의 WindowSizeClass를 계산합니다.
Compose의 currentWindowAdaptiveInfo() 최상위 함수
Material 3 적응형 라이브러리를 사용합니다. 이 함수는
WindowAdaptiveInfo - windowSizeClass를 포함합니다. 내 앱
창 크기 클래스가 변경될 때마다 업데이트를 수신합니다.
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
콘텐츠 창
활동의 레이아웃을 화면이라고도 합니다. 예를 들어 앱에는 홈 화면, 목록 화면, 항목 세부정보 화면이 있을 수 있습니다. 이 용어는 각 활동이 기기 화면을 채우는 것을 의미합니다.
하지만 확장 후 너비를 지원할 만큼 큰 기기 화면에서는 창 크기 클래스를 사용하면 여러 활동 화면이 동시에 화면에 표시될 수 있습니다. 창은 개별 활동의 콘텐츠 표시를 나타내는 더 정확한 용어입니다.
창 크기 클래스를 사용하면 표시할 콘텐츠 창 수를 결정할 수 있습니다. Material Design에 지정된 대로 여러 창 레이아웃을 사용합니다.
창은 탐색할 수 있습니다. 소형 및 중형 창 크기 클래스에서 앱은 단일 창, 대상으로 이동하면 하나의 창이 표시됩니다.
확장 창 크기 클래스에서 앱은 관련 콘텐츠를 여러 창에 표시할 수 있습니다. 목록-세부정보 레이아웃과 같은 창(pane)을 포함합니다. 두 창 표시 중 하나로 이동 두 개의 창 레이아웃을 사용합니다. 창 크기가 작게 또는 보통으로 변경되면 적응형 앱에는 하나의 창, 즉 탐색 대상, 목록 또는 확인할 수 있습니다.
|
<ph type="x-smartling-placeholder"> |
<ph type="x-smartling-placeholder"> |
Compose Material 3 적응형
적응형 앱을 빌드하는 현대적인 선언적 접근 방식인 Jetpack Compose 여러 레이아웃 파일의 복제와 유지관리 부담을 줄일 수 있습니다.
Compose Material 3 적응형 라이브러리에는 창 크기 클래스, 탐색 구성요소, 다중 창 레이아웃 폴더블 상태 및 힌지 위치. 예:
NavigationSuiteScaffold: 탐색 메뉴 간에 자동으로 전환합니다. 탐색 레일을 조정할 수 있습니다.ListDetailPaneScaffold: 목록-세부정보 표준 구현 레이아웃을 참고하세요.앱 창 크기에 맞게 레이아웃을 조정합니다. 다음의 목록과 세부정보를 제시합니다. 펼쳐진 창 크기에서 나란히 창에 있는 목록 항목 클래스만 볼 수 있지만 소형 및 중형 창 크기의 목록이나 세부정보만 표시됩니다. 있습니다.
SupportingPaneScaffold: 지원 창 표준 구현 레이아웃을 참고하세요.펼쳐진 창에 기본 콘텐츠 창 및 지원 창 표시 소형 및 중형 창 크기에서는 기본 콘텐츠 창만 표시 있습니다.
Compose Material 3 적응형 라이브러리는 적응형 앱 개발에 관한 것입니다.
구성 및 연속성
적응형 앱은 구성 변경 중에도 연속성을 유지합니다.
구성 변경은 앱 창의 크기를 조절할 때 발생합니다. 즉, 창의 상태가 화면 밀도 또는 글꼴이 변경되는 경우 이러한 문제가 발생할 수 있습니다.
기본적으로 구성 변경으로 인해 앱 활동과 모든 활동이 다시 생성됩니다.
손실될 수 있습니다 연속성을 유지하기 위해 적응형 앱은
활동의 onSaveInstanceState() 메서드 또는 ViewModel에서 호출할 수 없습니다.
상황
적응형 앱은 폴더블 기기의 상태 변화에 반응합니다. Posture 탁자 및 책 모드 포함
Jetpack WindowManager의 WindowInfoTracker 인터페이스를 사용하면 다음 작업을 할 수 있습니다.
기기의 DisplayFeature 객체 목록을 가져옵니다. 디스플레이
기능은 FoldingFeature.State이며, 이는 기기가
완전히 또는 반쯤 열려 있습니다.
Compose Material 3 적응형 라이브러리는
currentWindowAdaptiveInfo() 최상위 함수:
windowPosture를 포함하는 WindowAdaptiveInfo의 인스턴스입니다.
터치를 넘어선 입력
사용자는 외부 키보드, 트랙패드, 마우스, 스타일러스를 화면 기기 주변기기는 사용자 생산성, 입력 정밀도, 접근성 기능을 제공합니다 대부분의 ChromeOS 기기에는 키보드와 트랙패드가 내장되어 있습니다.
적응형 앱은 외부 입력 장치를 지원하지만 있습니다.
Jetpack Compose 1.7 이상: 키보드 탭 탐색 및 마우스 또는 트랙패드 클릭, 선택, 스크롤이 기본적으로 지원됩니다.
Jetpack
androidx.compose.material3라이브러리: 사용자가 작성할 수 있도록 지원합니다. 모든TextField구성요소에 삽입할 수 있습니다.단축키 도우미: Android 플랫폼 및 앱 키보드를 설정합니다. 사용자가 검색할 수 있는 바로 가기입니다. 앱의 단축키 게시 단축키 도우미에서
onProvideKeyboardShortcuts()창 콜백.
적응형 앱은 모든 크기의 폼 팩터를 완벽하게 지원하기 위해 있습니다.
적응형 앱을 테스트하는 방법
다양한 화면 및 창 크기와 다양한 기기 구성을 테스트하세요. 호스트 측 스크린샷과 Compose 미리보기를 사용하여 앱 레이아웃을 확인합니다. Android 스튜디오 에뮬레이터 및 Google 데이터 센터.
대형 화면 앱 품질 가이드라인
대형 화면 앱 품질 가이드라인을 따르면 적응형 앱이 제대로 작동합니다. 태블릿, 폴더블, ChromeOS 기기에서 사용할 수 있습니다. 가이드라인에는 를 사용하여 중요한 사용자 여정에서 앱 기능을 확인할 수 있습니다. 비록 가이드라인은 대형 화면에 중점을 두며 모든 화면 크기와 호환됩니다.
여러 구성
Compose 1.7 이상의 DeviceConfigurationOverride 인터페이스
를 사용하면 기기 구성의 다양한 측면을 재정의할 수 있습니다. API
어떤 기기에든 현지화된 방식으로 다양한 기기 구성을 시뮬레이션합니다.
구성 가능한 콘텐츠를 정의합니다. 예를 들어 한 번에 여러 개의
단일 기기에서 테스트 모음을 한 번 실행할 때 임의의 UI 크기
에뮬레이터입니다.
DeviceConfigurationOverride.then() 확장 함수를 사용하여 다음 작업을 할 수 있습니다.
여러 구성 매개변수(예: 글꼴 크기, 언어, 테마 및
동시에 사용할 수 있습니다.
호스트 측 스크린샷
호스트 측 스크린샷 테스트는 빠르고 확장 가능한 방법으로 앱 레이아웃 모양을 고려해야 합니다. 호스트 측 스크린샷을 사용하여 다양한 디스플레이 크기가 있습니다.
자세한 내용은 Compose 미리보기 스크린샷 테스트를 참고하세요.
Compose 미리보기
Compose 미리보기를 사용하면 Android의 디자인 보기에서 앱의 UI를 확인할 수 있습니다.
있습니다. 미리보기에는 @PreviewScreenSizes,
@PreviewFontScale, @PreviewLightDark: 컴포저블을 확인할 수 있습니다.
다양한 구성에서 사용할 수 있습니다. 미리보기와 상호작용할 수도 있습니다.
Android 스튜디오는 미리보기에서 다음과 같은 일반적인 사용성 문제도 강조 표시합니다. 피해야 할 수도 있습니다
자세한 내용은 컴포저블 미리보기로 UI 미리보기를 참고하세요.
에뮬레이터
Android 스튜디오에서는 다양한 레이아웃 크기를 테스트할 수 있는 다양한 에뮬레이터를 제공합니다.
- 크기 조절 가능한 에뮬레이터: 스마트폰, 태블릿 또는 폴더블 기기를 에뮬레이션하고 즉시 전환할 수 있습니다.
- Pixel Fold 에뮬레이터: Pixel Fold 대형 화면 폴더블 휴대전화 에뮬레이션
- Pixel Tablet 에뮬레이터: Pixel Tablet 대형 화면 기기 에뮬레이션
- 데스크톱 에뮬레이터: 자유 형식 창, 마우스 오버 및 단축키
원격 기기 스트리밍
Google 데이터 센터에서 호스팅되는 원격 Android 기기에 안전하게 연결하고 최신 Pixel 및 삼성 기기에서 앱을 다운로드할 수 있습니다. 앱 설치 및 디버그, 실행 ADB 명령어를 사용하고, 기기를 회전 및 접어서 앱이 다양한 기기에서 제대로 다양한 실제 기기를 보여 줍니다.
원격 기기 스트리밍은 Android 스튜디오에 통합되어 있습니다. 자세한 내용은 Firebase 기반 Android 기기 스트리밍을 참조하세요.
추가 리소스
- I/O 프레젠테이션: 적응형 Android 앱 빌드