처음 사용하는 사용자에게 앱 소개

Compose를 사용하여 더 효과적으로 빌드
Android TV OS용 Jetpack Compose를 사용하여 최소한의 코드로 멋진 UI를 만드세요.
<ph type="x-smartling-placeholder"></ph> TV용 Compose → 를 통해 개인정보처리방침을 정의할 수 있습니다.

처음 사용하는 사용자에게 앱을 최대한 활용하는 방법을 보여주려면 앱 시작 시 온보딩 정보 온보딩 예시 있습니다.

  • 사용자가 이용할 수 있는 채널에 대한 자세한 정보를 제시 채널 앱에 먼저 액세스해야 합니다.
  • 앱에서 주목할 만한 기능을 알립니다.
  • 사용자가 취해야 할 필수 조치나 권장 단계를 설명합니다. 할 수도 있습니다.

androidx.leanback 라이브러리OnboardingSupportFragment 수업: 첫 번째 사용자 정보를 표시합니다. 이 가이드에서는 발표할 클래스 OnboardingSupportFragment개 앱이 처음으로 실행될 때 표시되는 소개 정보입니다. 있습니다.

OnboardingSupportFragment에서 TV UI 사용 TV UI 스타일과 일치하는 방식으로 정보를 표시하기 위한 권장사항 TV 기기에서 쉽게 탐색할 수 있습니다.

그림 1. 예시 OnboardingSupportFragment

OnboardingSupportFragment는 모든 사용 사례에 적합하지 않습니다. 다음을 포함해야 하는 경우 OnboardingSupportFragment를 사용하지 마세요. 버튼, 필드와 같이 사용자 입력이 필요한 UI 요소 또한 사용자가 실행할 작업에 OnboardingSupportFragment를 사용하지 마세요. 정기적으로 개선해야 합니다 마지막으로, 다중 페이지 UI를 표시해야 하는 경우 삽입하려면 GuidedStepSupportFragment

OnboardingSupportFragment 추가하기

OnboardingSupportFragment 추가 앱에 추가하고 OnboardingSupportFragment 클래스 추가 액티비티의 레이아웃 XML을 사용하거나 이 프래그먼트를 액티비티에 추가합니다. 설정할 수 있습니다. 활동이나 활동이 프래그먼트는 Theme_Leanback_Onboarding, 테마 맞춤설정 섹션에 설명된 대로 변경합니다.

다음의 onCreate() 메서드에서 앱의 기본 활동, startActivity() 다음을 가리키는 Intent 포함 OnboardingSupportFragment의 상위 활동입니다. 이렇게 하면 OnboardingSupportFragment이(가) 다음으로 표시됩니다. 바로 시작할 수 있습니다.

광고가 OnboardingSupportFragment는 사용자가 앱을 처음 시작할 때 객체 SharedPreferences개 사용자가 이미 광고를 본 적이 있는지 OnboardingSupportFragment 불리언 정의 사용자가 콘텐츠 조회를 마치면 true로 변경되는 값입니다. OnboardingSupportFragment 확인 기본 활동의 onCreate() 메서드를 호출하고 다음의 경우 OnboardingSupportFragment 부모 활동 값이 false입니다.

다음 예는 다음을 확인하는 onCreate()의 재정의를 보여줍니다. SharedPreferences 값이며 true로 설정되지 않은 경우 startActivity()를 사용하여 OnboardingSupportFragment를 표시합니다.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    PreferenceManager.getDefaultSharedPreferences(this).apply {
        // Check if we need to display our OnboardingSupportFragment
        if (!getBoolean(MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
            // The user hasn't seen the OnboardingSupportFragment yet, so show it
            startActivity(Intent(this@OnboardingActivity, OnboardingActivity::class.java))
        }
    }
}

자바

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    SharedPreferences sharedPreferences =
            PreferenceManager.getDefaultSharedPreferences(this);
    // Check if we need to display our OnboardingSupportFragment
    if (!sharedPreferences.getBoolean(
            MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
        // The user hasn't seen the OnboardingSupportFragment yet, so show it
        startActivity(new Intent(this, OnboardingActivity.class));
    }
}

사용자가 OnboardingSupportFragment, 확인함으로 표시 SharedPreferences 객체 사용 이렇게 하려면 onFinishFragment() OnboardingSupportFragment에서 SharedPreferences 설정 값을 true로 설정합니다.

Kotlin

override fun onFinishFragment() {
    super.onFinishFragment()
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    PreferenceManager.getDefaultSharedPreferences(context).edit().apply {
        putBoolean(COMPLETED_ONBOARDING_PREF_NAME, true)
        apply()
    }
}

자바

@Override
protected void onFinishFragment() {
    super.onFinishFragment();
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    SharedPreferences.Editor sharedPreferencesEditor =
            PreferenceManager.getDefaultSharedPreferences(getContext()).edit();
    sharedPreferencesEditor.putBoolean(
            COMPLETED_ONBOARDING_PREF_NAME, true);
    sharedPreferencesEditor.apply();
}

OnboardingSupportFragment 페이지 추가하기

OnboardingSupportFragment 순서가 지정된 일련의 페이지에 콘텐츠를 표시합니다. OnboardingSupportFragment의 경우 온보딩 페이지 각 페이지에는 제목, 설명, 여러 하위 뷰를 포함할 수 있습니다.

그림 2. OnboardingSupportFragment 페이지 요소.

그림 2는 맞춤설정 가능한 페이지를 나타내는 설명선이 표시된 페이지의 예를 보여줍니다. OnboardingSupportFragment 제공할 수 있습니다 이러한 페이지 요소는 다음 사항을 나타냅니다.

  1. 페이지 제목
  2. 페이지 설명
  3. 페이지 콘텐츠 뷰. 이 예에서는 회색 상자 안에 있는 단순한 녹색 체크표시입니다. 이 뷰는 선택사항입니다. 이 뷰를 사용하여 페이지 세부정보를 보여줍니다. 예를 들어 페이지에 설명된 앱 기능을 강조 표시하는 스크린샷을 포함합니다.
  4. 페이지 배경 뷰. 이 예에서는 단순한 파란색 그라데이션입니다. 현재 보기 항상 페이지의 다른 뷰 뒤에 렌더링됩니다. 이 뷰는 선택사항입니다.
  5. 페이지 전경 뷰. 이 예에서는 로고입니다. 이 뷰는 항상 페이지의 다른 모든 보기보다 앞에 표시됩니다. 이 뷰는 선택사항입니다.

페이지가 로드될 때 페이지 정보를 OnboardingSupportFragment이(가) 처음 생성됨 시스템 요청 페이지에 연결되어 있으므로 정보를 제공해야 합니다. 페이지 초기화 가능 클래스 생성자 또는 onAttach()

페이지 정보를 제공하는 다음 각 메서드를 재정의합니다. 시스템에 전달합니다.

선택적 하위 뷰를 제공하도록 다음 각 메서드를 재정의합니다. 이미지 또는 애니메이션을 표시할 수 있습니다.

  • onCreateBackgroundView()View를 반환합니다. 백그라운드 뷰로 작동하도록 만들거나 백그라운드 뷰가 필요하지 않은 경우 null입니다.
  • onCreateContentView()View를 반환합니다. 콘텐츠 뷰로 작동하도록 만들거나 콘텐츠 뷰가 필요하지 않은 경우 null입니다.
  • onCreateForegroundView()View를 반환합니다. 포그라운드 뷰 역할을 하도록 만들거나 포그라운드 뷰가 필요하지 않은 경우 null을 생성합니다.

시스템에서 개발자가 만든 View를 페이지에 추가합니다. 있습니다. 다음 예시는 onCreateContentView()를 실행하고 ImageView:

Kotlin

private lateinit var contentView: ImageView
...
override fun onCreateContentView(inflater: LayoutInflater?, container: ViewGroup?): View? {
    return ImageView(context).apply {
        scaleType = ImageView.ScaleType.CENTER_INSIDE
        setImageResource(R.drawable.onboarding_content_view)
        setPadding(0, 32, 0, 32)
        contentView = this
    }
}

자바

private ImageView contentView;
...
@Override
protected View onCreateContentView(LayoutInflater inflater, ViewGroup container) {
    contentView = new ImageView(getContext());
    contentView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    contentView.setImageResource(R.drawable.onboarding_content_view);
    contentView.setPadding(0, 32, 0, 32);
    return contentView;
}

초기 로고 화면 추가하기

OnboardingSupportFragment 기기를 시작할 수 있습니다 앱을 소개하는 로고 화면(선택사항)이 표시됩니다. 디스플레이에 Drawable 로고 화면으로 사용하려면 <ph type="x-smartling-placeholder">setLogoResourceId()</ph> Drawable의 ID로 바꿉니다. (onCreate()) OnboardingSupportFragment의 메서드를 참조하세요. 시스템이 페이드인되면서 Drawable하고 Drawable를 페이드 아웃합니다. OnboardingSupportFragment의 첫 페이지를 표시하기 전에

로고 화면에 맞춤 애니메이션을 제공하려는 경우 setLogoResourceId() 호출, 재정의 onCreateLogoAnimation()Animator 반환 객체를 반환합니다.

Kotlin

public override fun onCreateLogoAnimation(): Animator =
        AnimatorInflater.loadAnimator(context, R.animator.onboarding_logo_screen_animation)

자바

@Override
public Animator onCreateLogoAnimation() {
    return AnimatorInflater.loadAnimator(getContext(),
            R.animator.onboarding_logo_screen_animation);
}

페이지 애니메이션 맞춤설정하기

광고의 첫 페이지를 표시할 때 시스템은 기본 애니메이션을 OnboardingSupportFragment 및 사용자가 다른 페이지로 이동할 때 이러한 애니메이션은 다음과 같은 방법으로 맞춤설정할 수 있습니다. 에서 메서드를 재정의하면 OnboardingSupportFragment

첫 페이지에 나타나는 애니메이션을 맞춤설정하려면 재정의하다 onCreateEnterAnimation() Animator를 반환합니다. 다음 예에서는 콘텐츠 뷰의 크기를 조정하는 Animator를 만듭니다. 가로:

Kotlin

override fun onCreateEnterAnimation(): Animator =
    ObjectAnimator.ofFloat(contentView, View.SCALE_X, 0.2f, 1.0f)
            .setDuration(ANIMATION_DURATION)

자바

@Override
protected Animator onCreateEnterAnimation() {
    Animator startAnimator = ObjectAnimator.ofFloat(contentView,
            View.SCALE_X, 0.2f, 1.0f).setDuration(ANIMATION_DURATION);
    return startAnimator;
}

사용자가 다른 페이지로 이동할 때 사용되는 애니메이션을 맞춤설정하려면 재정의하다 onPageChanged() onPageChanged() 메서드에서 Animator 객체를 만듭니다. 이전 페이지를 삭제하고 다음 페이지를 표시하는 경우, AnimatorSet하고 세트를 재생합니다. 다음 예제는 페이드 아웃 애니메이션을 사용하여 이전 페이지를 삭제하고 콘텐츠 뷰 이미지를 구현하고, 페이드 인 애니메이션을 사용하여 다음 페이지를 표시합니다.

Kotlin

override fun onPageChanged(newPage: Int, previousPage: Int) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    val fadeOut = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 1.0f, 0.0f)
            .setDuration(ANIMATION_DURATION)
            .apply {
                addListener(object : AnimatorListenerAdapter() {

                    override fun onAnimationEnd(animation: Animator) {
                        mContentView.setImageResource(pageImages[newPage])
                    }
                })
            }
    // Create a fade-in animation for nextPage
    val fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f)
            .setDuration(ANIMATION_DURATION)
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet().apply {
        playSequentially(fadeOut, fadeIn)
        start()
    }
}

자바

@Override
protected void onPageChanged(final int newPage, int previousPage) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    Animator fadeOut = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 1.0f, 0.0f).setDuration(ANIMATION_DURATION);
    fadeOut.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mContentView.setImageResource(pageImages[newPage]);
        }
    });
    // Create a fade-in animation for nextPage
    Animator fadeIn = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 0.0f, 1.0f).setDuration(ANIMATION_DURATION);
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet set = new AnimatorSet();
    set.playSequentially(fadeOut, fadeIn);
    set.start();
}

생성 방법에 대한 자세한 내용은 객체 Animator개 및 AnimatorSet 객체. <ph type="x-smartling-placeholder"></ph> 속성 애니메이션 개요

테마 맞춤설정하기

모든 OnboardingSupportFragment 구현은 Theme_Leanback_Onboarding 테마 또는 Theme_Leanback_Onboarding에서 상속된 테마입니다. 다음과 같이 설정합니다. 다음 중 하나를 실행하여 OnboardingSupportFragment의 테마를 설정합니다.

  • OnboardingSupportFragment의 상위 활동이 선택합니다. 다음 예는 사용할 활동을 설정하는 방법을 보여줍니다. Theme_Leanback_Onboarding에 주석을 달 수 있습니다.
    <activity
       android:name=".OnboardingActivity"
       android:enabled="true"
       android:exported="true"
       android:theme="@style/Theme.Leanback.Onboarding">
    </activity>
    
  • 다음을 사용하여 상위 활동의 테마를 설정합니다. LeanbackOnboardingTheme_onboardingTheme 속성을 설정합니다. 이 속성을 다른 위치로 가리키세요. OnboardingSupportFragment에만 적용되는 맞춤 테마 객체입니다. 활동에서 이미 사용하지 않으려는 경우 다른 스타일 OnboardingSupportFragment개 할 수 있습니다.
  • 재정의 onProvideTheme()를 클릭하고 원하는 테마를 반환합니다. 이 방법은 다음과 같은 경우에 사용합니다. 여러 활동을 할 때 OnboardingSupportFragment 또는 상위 활동이 원하는 테마를 사용할 수 없는 경우에 발생합니다. 다음 예에서는 onProvideTheme()를 재정의하고 다음을 반환합니다. Theme_Leanback_Onboarding:

    Kotlin

    override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
    

    Java

    @Override
    public int onProvideTheme() {
       return R.style.Theme_Leanback_Onboarding;
    }