Capacitor 앱에서 에지 투 에지 디스플레이를 구현하려고 하는가요? Capacitor는 에지 투 에지 디스플레이를 위해 공식적으로 지원합니다. 공식 adjustMarginsForEdgeToEdge config 옵션을 사용하여 플러그인이나 해킹이 필요하지 않습니다. adjustMarginsForEdgeToEdge 설정 옵션 - 그것은 단지 널리 문서화되지 않은 것입니다.
많은 개발자들은 Capacitor 앱에서 에지 투 에지 레이아웃에 어려움을 겪습니다. 특히 Android 15 이상을 대상으로 할 때. 그들은 종종 커스텀 플러그인이나 CSS 트릭을 사용하여 현대적인 에지 투 에지 모양을 달성하기 위해 recur. 그러나 더 나은, 네이티브 방법이 있습니다.
Edge-to-Edge Display는 무엇입니까?
Edge-to-edge display는 시스템 바(상태 바 및 네비게이션 바) 뒤에 앱 콘텐츠를 확장하여 더 몰입적이고 현대적인 UI 경험을 제공합니다. Android 15부터 Google은 모든 앱에 에지 투 에지 표준을 밀어붙입니다.
공식 솔루션: adjustMarginsForEdgeToEdge
Capacitor은 이 목적을 위해 adjustMarginsForEdgeToEdge 설정 옵션을 제공합니다. 이 옵션은 공식 Capacitor config 문서 에서 설명되어 있습니다. 그러나 그것은 쉽게 놓치기 쉽습니다.
설정 방법
__CAPGO_KEEP_0__ 또는 capacitor.config.ts 을 추가하세요. capacitor.config.json:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'My App',
webDir: 'dist',
android: {
adjustMarginsForEdgeToEdge: 'auto' // or 'force' or 'disable'
}
};
export default config;또는 JSON 형식으로:
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}구성 옵션
그것은 adjustMarginsForEdgeToEdge 옵션은 세 가지 값을 받습니다:
1. "auto" (권장)
adjustMarginsForEdgeToEdge: 'auto'그것이 하는 일: Android 15 이상과 windowOptOutEdgeToEdgeEnforcement 설정을 자동으로 확인하고
장치 및 구성에 따라 지능적으로 마진을 조정합니다. 어떤 경우에 적합한가요:
2. "force"
adjustMarginsForEdgeToEdge: 'force'대부분의 프로덕션 앱이 지원되는 장치에서 Edge-to-Edge를 유지하면서 오래된 Android 버전과 호환성을 유지하고 싶은 경우. 그것이 하는 일:
최적화된 대상: Android 모든 버전에서 edge-to-edge 동작을 원하는 앱.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'이 기능이 하는 일: 자동 마진 조정 완전히 비활성화.
최적화된 대상: edge-to-edge 동작을 수동으로 처리하거나 edge-to-edge 동작을 원하지 않는 앱.
주의: 현재 "disable" 는 기본값이지만 __CAPGO_KEEP_0__ 8에서 "auto" in Capacitor 8.
Android 15부터 Google은 edge-to-edge 디스플레이를 기본 동작으로 강제합니다. edge-to-edge 레이아웃을 적절하게 처리하지 않는 앱은 다음과 같은 UI 문제를 경험할 수 있습니다:
UI 문제
- 시스템 바 뒤에 숨겨진 콘텐츠
- 불편한 간격과 패딩
- 디바이스 간 일관되지 않은 디자인
- 나쁜 사용자 경험
공식 adjustMarginsForEdgeToEdge 설정을 사용하여 앱이 이러한 변경 사항을 적절하게 처리하도록 보장합니다. 사용자 정의 code 없이.
완전한 예제
현대 Capacitor 앱에 대한 완전한 예제 구성입니다.
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'My Awesome App',
webDir: 'www',
server: {
androidScheme: 'https'
},
android: {
// Enable edge-to-edge automatically on supported devices
adjustMarginsForEdgeToEdge: 'auto',
// Other Android config options...
backgroundColor: '#ffffff'
}
};
export default config;CSS 고려 사항
엣지 투 엣지 디스플레이를 사용할 때 안전 영역을 처리하기 위해 추가 CSS가 필요할 수 있습니다.
/* Add padding for system bars */
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Or use viewport-fit */
meta[name="viewport"] {
content: "width=device-width, initial-scale=1, viewport-fit=cover";
}설정 테스트
설정을 구성한 후 adjustMarginsForEdgeToEdge앱을 테스트 해보세요:
- Android 15 이상 장치 - 시스템 바를 올바르게 존중하는지 확인하세요
- 구형 Android 버전 - 이전 버전과 호환성을 유지하세요
- 다양한 화면 크기 - 장치 간 레이아웃이 작동하는지 확인하세요
- 라이트 및 다크 테마 - 두 가지 테마 모드를 테스트하세요
일반적인 실수
이용하지 마세요
이러한 경우에는 제 3 자 플러그인처럼 capacitor-edge-to-edge 또는 유사한 기능입니다. 네이티브 설정은 이 문제를 깨끗하게 처리합니다. 시스템 크롬에 대한 세부적인 제어가 필요하다면 adjustMarginsForEdgeToEdge, @capgo/capacitor-네비게이션 바 그리고 @capgo/홈 인디케이터 네이티브 설정을 대체하지 않고 그에 맞춰서 보완합니다.
자동 구현과 섞지 마세요
Capacitor를 사용하고 있다면 adjustMarginsForEdgeToEdge자동 구현과 섞이지 않도록 하세요. 자동으로 창의 여백을 처리하거나 CSS 트릭을 추가한 경우 제거하세요.
안전 영역 CSS를 잊지 마세요
설정은 여백 조정을 처리하지만, 콘텐츠 패딩을 위해 CSS 안정 영역 여백을 사용해야 합니다.
이동 가이드
현재 Edge-to-Edge에 대한 플러그인이나 트릭을 사용하고 있다면
- Edge-to-edge 디스플레이 Native Config을 위한 Capacitor Edge-to-edge Display Native Config Edge-to-edge 플러그인 제거
- Edge-to-edge 플러그인에서 의존성 제거 설정 옵션 추가
capacitor.config.ts - 설정 옵션을 프로젝트를 정리하고 다시 빌드
- 안드로이드 프로젝트를 정리하고 다시 빌드 정확하게 테스트
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open android목표 기기에서 테스트
Remember that Capacitor 8 will make "auto" __CAPGO_KEEP_0__ 8이 기본값이 될 것입니다. 준비를 위해:
- 테스트
"auto"지금 이유를 알기 위해 문제를 일찍 잡아라 - CSS를 업데이트하여 안전 영역을 올바르게 처리하기 위해
- 레이아웃을 검토하여 엣지-투-엣지 활성화된 장치에서
추가 리소스
결론
엣지-투-엣지 Capacitor에서 디스플레이는 플러그인, 해킹, 또는 복잡한 작업을 필요로 하지 않습니다. Capacitor에서 디스플레이는 플러그인, 해킹, 또는 복잡한 작업을 필요로 하지 않습니다. adjustMarginsForEdgeToEdge 설정 옵션은 공식적으로 지원되고 미래에 안전한 솔루션을 제공합니다.
시작하기 "auto" 대부분의 앱에서 장치에 대한 테스트를 철저히하고 적절한 안전 영역 CSS를 추가하세요. 앱은 Android 15 이상에 대한 최소 노력으로 준비되었습니다.
문제가 있거나 질문이 있으시면? Capacitor 커뮤니티와 공식 문서 __CAPGO_KEEP_0__ Without Plugins의 Edge-to-Edge Display에서 계속하기
Edge-to-Edge Display in Capacitor Without Plugins을 사용하고 계신가요?
Edge-to-Edge Display in __CAPGO_KEEP_0__ Without Plugins을 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고 있습니다. __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities와 연결하세요. Edge-to-Edge Display in Capacitor Without Plugins Edge-to-Edge Display in __CAPGO_KEEP_0__ Without Plugins Using @capgo/capacitor-live-activities Capacitor Edge to Edge Display Native Config를 위한 @capgo/capacitor-live-활동들에 대해 @capgo/capacitor-live-활동들 Capacitor Edge to Edge Display Native Config를 위한 구현 세부사항 @capgo/capacitor-live-활동들에 대해 Capacitor Edge to Edge Display Native Config를 위한 @capgo/capacitor-비디오 플레이어 Capacitor Edge to Edge Display Native Config를 위한 @capgo/capacitor-live-활동들에 대해 @capgo/capacitor-비디오 플레이어 Capacitor Edge to Edge Display Native Config를 위한 구현 세부사항 @capgo/capacitor-비디오 플레이어에 대해, 그리고 Capacitor Edge to Edge Display Native Config를 위한 @capgo/capacitor-네이티브 네비게이션 Capacitor Edge to Edge Display Native Config를 위한 @capgo/capacitor-live-활동들에 대해
