TV 화면은 일반적으로 약 3m 떨어진 곳에서 볼 수 있으며 대부분의 화면보다 훨씬 더 큽니다. 다른 Android 구동 기기 디스플레이에 비해 TV 화면은 동일한 수준의 작은 기기 화면으로 사용할 수 있습니다. 이러한 요소를 사용하려면 유용하고 즐거운 사용자 환경을 제공하는 것이 중요합니다.
TV 레이아웃 테마 사용
Android 테마는 레이아웃을 맞춤설정할 수 있습니다. 테마를 사용하여 TV 기기에서 실행해야 합니다. 이 섹션에서는 사용할 테마를 설명합니다.
Leanback 테마
androidx.leanback 라이브러리에는 Theme.Leanback가 포함되어 있습니다. 이는 TV 활동을 위한 테마입니다.
일관성 있는 시각적 스타일을 제공합니다. 빌드된 모든 TV 앱에 이 테마 사용
AndroidX Leanback 클래스와
함께 패키징해야 합니다 다음 코드 샘플은 이 테마를
활동:
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
NoTitleBar 테마
제목 표시줄은 전화와 태블릿에서 Android 앱의 표준 사용자 인터페이스 요소이지만
TV 앱에 적합하지 않습니다. AndroidX Leanback 클래스를 사용하지 않는다면
NoTitleBar 테마를 TV 활동에 추가하여 제목 표시줄이 표시되지 않도록 합니다. 다음 코드 예
는 TV 앱 매니페스트에서 이 테마를 적용하여 제목 표시줄 표시를 삭제하는 방법을 보여줍니다.
<application> ... <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> ... </activity> </application>
AppCompat 테마
Android 모바일 앱에서는
AppCompatActivity
Theme.AppCompat 테마 중 하나와 함께 표시됩니다. 이 조합을 사용하면
드로어블 색조 조정과 같은 기능을 예로 들 수 있습니다. 만약
Android TV에서만 실행되는 앱을 개발하는 경우
AppCompatActivity - 이 기능을 사용 설정하는 기능을 이미 Google에서 사용할 수 있기 때문입니다.
Android TV 또는 관련 없음
Android 모바일과 Android TV 간에 공유되는 코드베이스로 앱을 빌드하는 경우
몇 가지 문제에 직면하게 될 수 있습니다. AppCompatActivity 외
AppCompat 위젯에서는 Theme.AppCompat를 사용해야 하지만
Leanback UI 도구 키트 프래그먼트는
FragmentActivity
및 Theme.Leanback
Android 모바일과 Android TV에 동일한 기본 활동을 사용해야 하거나
다음과 같은 AppCompat 위젯을 기반으로 한 맞춤 뷰
AppCompatImageView,
Theme.AppCompat.Leanback 테마 사용 이러한 테마를 사용하면
AppCompat에서 가져와서 Leanback 전용 값도 제공합니다.
다른 테마와 동일한 방식으로 Theme.AppCompat.Leanback 테마를 맞춤설정할 수 있습니다.
있습니다. 예를 들어
Leanback UI 도구 키트
OnboardingSupportFragment,
다음과 유사한 작업을 수행합니다.
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
기본 TV 레이아웃 빌드
TV 기기의 레이아웃은 사용 가능하고 적절하게 사용할 수 있도록 몇 가지 기본 가이드라인을 따라야 합니다. 큰 화면에 효과적일 것입니다. 다음 팁에 따라 TV 화면에 최적화된 레이아웃을 빌드하세요.
- 가로 방향 레이아웃 빌드. TV 화면은 언제나 가로 모드로 표시됩니다.
- 화면 왼쪽이나 오른쪽에 화면 탐색 컨트롤을 배치하고 만들 수 있습니다.
- 프래그먼트를 사용하여 섹션으로 나뉘는 UI를 만듭니다. 다음과 같은 뷰 그룹 사용
GridView(기존:ListView) 가로 화면 공간을 최대한 활용할 수 있습니다. - 다음과 같은 뷰 그룹 사용
RelativeLayout또는LinearLayout을 사용하여 뷰를 정렬합니다. 이 접근 방식을 사용하면 시스템이 뷰의 위치를 크기에 맞게 조정할 수 있습니다. 화면 정렬, 가로세로 비율, 픽셀 밀도 등입니다. - 레이아웃 컨트롤 사이에 충분한 여백을 두어서 UI가 어수선하지 않게 합니다.
오버스캔
TV 레이아웃은 TV 표준이 발전함에 따라 고유한 요구사항이 있습니다. 시청자에게 전체 화면 사진을 표시합니다. 이러한 이유로 TV 기기에서 앱의 외부 가장자리를 자를 수 있습니다. 전체 디스플레이가 채워지도록 합니다. 이 동작을 일반적으로 오버스캔
항상 사용자에게 표시되어야 하는 화면 요소는 오버스캔 방지 영역 내에 배치합니다. 영역입니다. 왼쪽과 오른쪽 가장자리에 48dp, 상단과 하단에 27dp의 여백 5% 추가 레이아웃의 가장자리는 레이아웃의 화면 요소가 오버스캔 방지 범위 내에 있도록 하는 데 도움이 됩니다. 영역입니다.
사용자가 직접 상호작용하지 않거나 클립하지 않는 백그라운드 화면 요소를 조정하지 않음 오버스캔 방지 영역으로 요소를 전달합니다. 이 접근 방식을 사용하면 백그라운드 화면 요소가 올바르게 표시되도록 할 수 있습니다. 표시됩니다.
다음 예는 백그라운드 요소와 중첩된 요소를 포함할 수 있는 루트 레이아웃을 보여줍니다. 하위 레이아웃은 여백이 5% 이고 오버스캔 방지 영역 내에 요소를 포함할 수 있습니다.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Screen elements that can render outside the overscan-safe area go here. --> <!-- Nested RelativeLayout with overscan-safe margin. --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="27dp" android:layout_marginBottom="27dp" android:layout_marginLeft="48dp" android:layout_marginRight="48dp"> <!-- Screen elements that need to be within the overscan-safe area go here. --> </RelativeLayout> </RelativeLayout>
주의:
AndroidX Leanback 클래스(예:
<ph type="x-smartling-placeholder">BrowseSupportFragment</ph>
또는 관련 위젯에 있을 수 있습니다.
사용 가능한 텍스트 및 컨트롤 빌드
다음 팁을 따르면 TV 앱의 텍스트와 컨트롤을 멀리서도 더 쉽게 볼 수 있습니다.
- 사용자가 쉽게 스캔할 수 있는 작은 덩어리로 텍스트를 나눕니다.
- 어두운 배경에 밝은 텍스트를 사용합니다. TV에서는 이 스타일이 읽기 쉽습니다.
- 얇은 글꼴 또는 획이 매우 좁거나 넓은 글꼴은 피합니다. 단순한 sans-serif 글꼴과 앤티앨리어싱을 사용하여 가독성을 높입니다.
- Android 표준 글꼴 크기를 사용합니다.
<TextView android:id="@+id/atext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:singleLine="true" android:textAppearance="?android:attr/textAppearanceMedium"/>
- 모든 뷰 위젯이 다른 사람에게 명확하게 표시될 수 있을 정도로 충분히 커야 합니다.
2.5미터(10피트) 떨어진 곳에 놓습니다. 이
이렇게 하는 가장 좋은 방법은 절대 크기 대신 레이아웃에 비례하는 크기를 사용하는 것입니다.
밀도 독립형 픽셀 (dp) 단위로 사용합니다. 예를 들어
픽셀 측정 대신
wrap_content를 사용하고 px 값 대신 dp 값을 사용하세요.
밀도 독립형 픽셀 및 더 큰 크기 처리를 위한 레이아웃 빌드에 관한 자세한 내용은 자세한 내용은 화면 호환성 참조 개요를 참조하세요.
TV 레이아웃 리소스 관리
다른 모든 Android 기기와 마찬가지로 TV는 화면 크기가 다양하며 해상도(720p, 1080p, 4K를 포함하되 이에 국한되지 않음)를 지원합니다. 앱이 다양한 화면 크기를 지원하는지 확인합니다.
화면 크기와 해상도에 따라 픽셀 밀도가 다릅니다. 인코더-디코더 아키텍처를 여러 화면 크기, 해상도, 픽셀 밀도에 걸쳐 UI를 테스트하려는 경우 밀도 독립형 픽셀 (dp)을 사용합니다. 다양한 TV 패널의 화면 픽셀 밀도 해결 방법은 아래에 설명되어 있습니다.
| 패널 해상도 | 화면 픽셀 밀도 |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
대형 화면에 맞게 레이아웃과 리소스를 최적화하는 방법에 관한 자세한 내용은 다음을 참고하세요. 화면 호환성 개요
피해야 할 레이아웃 패턴
작동하지 않는 레이아웃을 빌드하는 몇 가지 접근 방식이 있습니다. TV 기기에서도 잘 작동합니다. GCP 리소스 사용을 위한 TV 레이아웃을 개발할 때 피해야 할 부분도 있습니다
- 휴대전화 또는 태블릿 레이아웃 재사용: 태블릿 앱을 실행할 수 있습니다. 다른 Android 기기 폼 팩터용으로 빌드된 레이아웃은 TV 기기에 적합하며 TV에서 작동하려면 단순화해야 합니다.
ActionBar사용: 작업 모음을 사용하는 것이 좋습니다. 휴대전화와 태블릿에서는 TV 인터페이스에 적합하지 않습니다. 작업 모음 옵션 메뉴나 모든 풀다운 메뉴는 TV 앱의 경우 사용하지 않는 것이 좋습니다. 리모컨으로 이러한 메뉴를 탐색하기가 어려울 수도 있습니다.ViewPager사용: 화면 간에 슬라이드하는 것은 휴대전화나 태블릿에서 잘 작동할 수 있습니다. TV에서는 하려고 하지 마!
TV에 적합한 레이아웃 디자인에 관한 자세한 내용은 TV 디자인 가이드를 참조하세요.
큰 비트맵 처리
TV 기기는 다른 Android 기기와 마찬가지로 메모리 용량에 제한이 있습니다. GCP 콘솔에서 매우 고해상도 이미지가 포함된 앱 레이아웃을 사용하거나 작업에 많은 고해상도 이미지를 사용합니다. 메모리 제한에 빠르게 도달하고 메모리 오류를 일으킬 수 있습니다. 대부분의 경우 케이스인 경우 Glide 라이브러리를 사용하여 앱에서 비트맵을 가져오고 디코딩하고 표시할 수 있습니다. 자세한 내용은 비트맵을 사용할 때 최고의 성능을 발휘하려면 일반적인 Android 그래픽 권장사항
효과적인 광고 제공
거실 환경에서는 동영상 광고 솔루션을 사용하는 것이 좋습니다. 30초 이내에 닫을 수 있는 전체 화면 광고입니다. 기능 Android TV에서의 광고(예: 닫기 버튼, 클릭)는 터치가 아닌 D패드로 액세스할 수 있습니다.
Android TV는 웹 브라우저를 제공하지 않습니다. 광고에서 Google Play 스토어 콘텐츠로 리디렉션하거나 승인을 받아야 합니다.
참고: WebView 클래스를 사용할 수 있습니다.
소셜 미디어 서비스 로그인에 적합합니다.