엣지 투 엣지 디스플레이를 Capacitor 앱에 구현하려고 하는가요? Capacitor는 엣지 투 엣지 디스플레이를 위한 공식 지원을 제공하고 있습니다. 단, 그것은 널리 알려진 것은 아닙니다. adjustMarginsForEdgeToEdge 엣지 투 엣지 디스플레이란 무엇인가요?
Capacitor는 엣지 투 엣지 디스플레이를 위한 공식적인 해결책을 제공합니다.
__CAPGO_KEEP_0__는 엣지 투 엣지 레이아웃을 위한 플러그인이나 CSS HACK을 사용하지 않고도 엣지 투 엣지 디스플레이를 구현할 수 있습니다.
엣지 투 엣지 디스플레이는 앱 콘텐츠가 시스템 바(상태 바 및 네비게이션 바) 뒤로 확장되도록 허용하여 더 몰입적이고 현대적인 UI 경험을 제공합니다. 안드로이드 15부터 시작하여, 구글은 모든 앱에 엣지 투 엣지 디스플레이를 표준으로 제시하고 있습니다.
엣지 투 엣지 디스플레이를 위한 공식적인 해결책은 adjustMarginsForEdgeToEdge 옵션입니다.
Capacitor는 엣지 투 엣지 디스플레이를 위한 공식적인 해결책을 제공합니다. adjustMarginsForEdgeToEdge configuration option specifically for this purpose. This is documented in the official Capacitor config 문서but it’s easy to miss.
How to Configure It
Add this to your capacitor.config.ts or 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;Capacitor live-update alternatives 비교
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Capacitor live-update alternatives 비교
Capacitor live-update alternatives 비교 adjustMarginsForEdgeToEdge Capacitor live-update alternatives 비교
1. "auto" Capacitor live-update alternatives 비교
adjustMarginsForEdgeToEdge: 'auto'Or in JSON format: Capacitor live-update alternatives 비교 자동으로 Android 15 이상을 확인하고 windowOptOutEdgeToEdgeEnforcement 설정에 따라 장치 및 구성에 따라 지능적으로 마진을 조정합니다.
추천: 대부분의 프로덕션 앱이 지원되는 장치에서 Edge-to-Edge를 유지하면서 오래된 Android 버전과 호환성을 유지하고 싶은 앱에 적합합니다.
2. "force"
adjustMarginsForEdgeToEdge: 'force'What it does: Edge-to-Edge를 지원하는 모든 Android 버전에서 Edge-to-Edge 동작을 원하는 앱에 적합합니다.
What it does: Edge-to-Edge 동작을 원하지 않는 앱에 적합합니다.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'What it does: Edge-to-Edge 레이아웃을 수동으로 처리하거나 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 문제를 겪을 수 있습니다.
시스템 바 뒤에 콘텐츠가 숨겨짐
- 어색한 간격 및 패딩
- 디바이스 간 일관성이 없는 외관
- 사용자 경험의 저하
- 공식
를 사용하여 이러한 변경 사항을 적절하게 처리할 수 있습니다. __CAPGO_KEEP_0__ 없이. 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 버전 - 이전 버전과 호환되도록 보장하세요.
- 다양한 화면 크기 - 다양한 기기에서 레이아웃이 작동하는지 확인하세요.
- 라이트 및 다크 테마 - 테마 모드 모두 테스트하세요.
일반적인 실수 피하기
이것을 위해 플러그인을 사용하지 마세요.
Capacitor에서 제공하는 native config을 사용하면 이와 같은 세세한 제어를 필요로 하지 않습니다. 시스템 창 크기를 세세하게 제어해야 하는 경우에만 third-party 플러그인을 사용하세요. capacitor-edge-to-edge @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-bar adjustMarginsForEdgeToEdge, @capgo/capacitor-navigation-bar @__CAPGO_KEEP_0__/home-indicator @capgo/home-indicator 수동 구현과 혼용하지 마세요.
@__CAPGO_KEEP_0__
만약 당신이 사용 중이라면 adjustMarginsForEdgeToEdge, 수동 윈도우 인셋 처리 또는 CSS 해킹을 제거하세요.
안전 영역 CSS를 잊지 마세요.
설정은 여백 조정에 대해 처리하지만, 올바른 콘텐츠 패딩을 위해 CSS 안정 영역 인셋을 사용해야 합니다.
이동 가이드
현재 Edge-to-Edge 플러그인 또는 해킹을 사용 중이라면:
- Edge-to-Edge 플러그인을 제거하세요 의존성에서
- 설정 옵션을 추가하세요 Android 프로젝트를 다시 빌드하세요
capacitor.config.ts - 이동 가이드 Edge-to-Edge 플러그인 또는 해킹을 제거하세요
- 정확하게 테스트하세요 목표 기기에서 테스트하세요
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open android미래를 대비하세요
Capacitor 8이 기본값이 될 것입니다. 준비를 위해: "auto" 현재로 테스트하세요
- 이제
"auto"이른 시일 내에 문제를 해결하기 위해 CSS를 업데이트하세요 - 안전 영역을 적절하게 처리하기 위해 레이아웃을 검토하세요
- 엣지 투 엣지 활성화된 기기에서 on edge-to-edge enabled devices
추가 리소스
결론
Capacitor 에서 Edge-to-Edge 디스플레이는 플러그인, 해킹, 또는 복잡한 작업을 필요로 하지 않습니다. adjustMarginsForEdgeToEdge 설정 옵션은 공식적으로 지원되고 미래에 안전한 깨끗한 네이티브 솔루션을 제공합니다.
시작하는 곳 "auto" 대부분의 앱에 대해, 장치에 대한 테스트를 철저히하고, 적절한 Safe Area CSS를 추가하세요.
앱은 Android 15 이상에 대한 준비가 되어 있으며, 최소한의 노력으로 준비가 됩니다. The Capacitor community and __CAPGO_KEEP_0__ 커뮤니티와 공식 문서 Edge-to-Edge Display를 사용하는 방법
Keep going from Edge-to-Edge Display in Capacitor Without Plugins
Edge-to-Edge Display를 사용하는 경우 Edge-to-Edge Display in Capacitor Without Plugins Edge-to-Edge Display를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고 연결하세요. Edge-to-Edge Display를 사용하여 네이티브 기능을 구현하는 데 사용하는 @capgo/capacitor-live-activities Edge-to-Edge Display를 사용하여 네이티브 기능을 구현하는 데 사용하는 @capgo/capacitor-live-activities Edge-to-Edge Display를 사용하여 네이티브 기능 구현의 구체적인 부분을 설명하는 @capgo/capacitor-live-activities Edge-to-Edge Display를 사용하여 네이티브 기능을 구현하는 데 사용하는 @capgo/capacitor-video-player Edge-to-Edge Display를 사용하여 네이티브 기능을 구현하는 데 사용하는 @capgo/capacitor-video-player Edge-to-Edge Display를 사용하여 네이티브 기능 구현의 구체적인 부분을 설명하는 @capgo/capacitor-video-player @capgo/capacitor-video-player capgo/capacitor-비디오 플레이어 구현 세부 사항에 대해 capgo/capacitor-네이티브 네비게이션 사용 capgo/capacitor-네이티브 네비게이션 사용하는 네이티브 기능
