Capacitor 앱에서 edge-to-edge 디스플레이를 구현하려고 하는가요? 플러그인, 해킹, 또는 대안이 필요하지 않습니다. Capacitor는 edge-to-edge 디스플레이를 위한 공식 지원을 제공하고 있습니다. 단지 그것은 널리 알려지지 않은 설정 옵션입니다. adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__ 앱에서 edge-to-edge 레이아웃을 구현하는 개발자들은 특히 Android 15+ 버전을 대상으로 할 때 어려움을 겪습니다. 그들은 종종 모던한 edge-to-edge 디스플레이를 달성하기 위해 커스텀 플러그인이나 CSS 해킹을 사용합니다. 그러나 더 나은, 네이티브한 방법이 있습니다.
Many developers struggle with edge-to-edge layouts in Capacitor apps, especially when targeting Android 15+. They often resort to custom plugins or CSS hacks to achieve the modern edge-to-edge look. But there’s a better, native way.
Edge-to-edge 디스플레이는 시스템 바(상태 바 및 네비게이션 바)를 뒤로 확장하여 앱 콘텐츠를 더 몰입적이고 현대적인 UI 경험을 제공하는 기능입니다. Android 15 버전부터 Google은 모든 앱에 edge-to-edge를 표준으로 밀고 있습니다.
공식적인 해결책: adjustMarginsForEdgeToEdge
공식적인 해결책: adjustMarginsForEdgeToEdge
Capacitor은 이 목적을 위해 특별히 제공하는 구성 옵션입니다. 이에 대한 문서는 Capacitor 공식 구성 문서에 나와 있습니다. adjustMarginsForEdgeToEdge 설정 방법 official Capacitor config documentation또는
JSON 형식으로 다음과 같이 추가하세요.
설정 옵션 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;(권장)
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}__CAPGO_KEEP_0__
__CAPGO_KEEP_0__ adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__
1. "auto" __CAPGO_KEEP_0__
adjustMarginsForEdgeToEdge: 'auto'What it does: Android 15 이상 및 설정을 자동으로 확인합니다. windowOptOutEdgeToEdgeEnforcement __CAPGO_KEEP_0__
Best for: 대부분의 프로덕션 앱이 지원되는 기기에서 edge-to-edge를 유지하면서 오래된 Android 버전과 호환성을 유지하고 싶은 경우.
2. "force"
adjustMarginsForEdgeToEdge: 'force'What it does: Android 버전이나 다른 설정에 관계없이 edge-to-edge를 위한 margin 조정을 강제합니다.
Best for: 모든 지원하는 Android 버전에서 edge-to-edge 동작을 원하는 앱.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'What it does: 자동 margin 조정을 완전히 비활성화합니다.
Best for: __CAPGO_KEEP_0__에서 edge-to-edge 레이아웃을 수동으로 처리하거나 edge-to-edge 동작을 원하지 않는 앱입니다.
주의: 현재 "disable" __CAPGO_KEEP_0__ 8에서 기본값이지만 "auto" in Capacitor 8.
Android 15+에서 왜 이것이 중요합니까?
Android 15부터 Google은 edge-to-edge 디스플레이를 기본 동작으로 강제합니다. edge-to-edge 레이아웃을 적절하게 처리하지 않는 앱은 다음 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";
}설정 확인
설정을 완료한 후, 앱을 다음 장치에서 테스트하세요. adjustMarginsForEdgeToEdgeAndroid 15+ 장치
- - 시스템 바를 적절히 존중하는 콘텐츠가 올바르게 작동하는지 확인하세요. 구형 Android 버전
- - 이전 버전과 호환성을 보장하세요. - 이전 버전과 호환성을 보장하세요.
- 다양한 화면 크기 - 장치별로 레이아웃이 작동하는지 확인하세요
- 라이트 및 다크 테마 - 두 가지 테마 모드를 테스트하세요
일반적인 실수 피하기
이 기능을 위해 플러그인을 사용하지 마세요
You don’t need third-party plugins like capacitor-edge-to-edge __CAPGO_KEEP_0__
이 기능을 위해 플러그인을 사용하지 마세요. native config는 이 기능을 깨끗하게 처리합니다.
수동 구현과 혼합하지 마세요 adjustMarginsForEdgeToEdge이 기능을 사용하고 있다면
, 수동으로 창 인셋을 처리하거나 CSS를 추가하지 마세요. 수동으로 처리하거나 CSS를 추가한 경우 제거하세요.
__CAPGO_KEEP_0__
이동 가이드
현재 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" 테스트를 하세요
- 지금
"auto"이유를 빨리 잡기 위해 안전한 영역을 처리하기 위해 CSS를 업데이트하세요 - 에지 투 에지 활성화된 장치에서 레이아웃을 검토하세요 추가 리소스
- 공식 __CAPGO_KEEP_0__ 설정 문서 안드로이드 에지 투 에지 지침
__CAPGO_KEEP_0__
결론
Edge-to-edge display in Capacitor는 플러그인, 해킹, 또는 복잡한 대안 없이도 필요하지 않습니다. adjustMarginsForEdgeToEdge 설정 옵션은 공식적으로 지원되고 미래에 안전한 깨끗하고 원시적인 솔루션을 제공합니다.
대부분의 앱에서 시작하고, 장치별로 충분히 테스트하고, 적절한 안전 영역 CSS를 추가하세요. "auto" Android 15 이상으로 앱이 최소 노력으로 준비되도록 하세요.
문제가 발생하거나 질문이 있으시면? Capacitor 커뮤니티와 공식 문서 추가 도움이 필요하시면 좋은 자원입니다.
