برای اینکه به کاربر جدید نشان دهید که چگونه میتواند بیشترین بهره را از اپلیکیشن شما ببرد، اطلاعات اولیه را در هنگام راهاندازی اپلیکیشن ارائه دهید. در اینجا چند نمونه از اطلاعات اولیه آورده شده است:
- اطلاعات دقیقی در مورد کانالهای موجود هنگام دسترسی اولیه کاربر به یک برنامه کانال ارائه دهید.
- به ویژگیهای قابل توجه در اپلیکیشن خود توجه کنید.
- هرگونه اقدام ضروری یا توصیهشده برای کاربران هنگام استفاده از برنامه برای اولین بار را شرح دهید.
کتابخانه androidx.leanback کلاس OnboardingSupportFragment را برای ارائه اطلاعات کاربر برای اولین بار ارائه میدهد. این راهنما نحوه استفاده از کلاس OnboardingSupportFragment را برای ارائه اطلاعات مقدماتی که هنگام اجرای اولیه برنامه نشان داده میشود، شرح میدهد.
OnboardingSupportFragment از بهترین شیوههای رابط کاربری تلویزیون برای ارائه اطلاعات به روشی استفاده میکند که با سبکهای رابط کاربری تلویزیون مطابقت داشته باشد و پیمایش آن در دستگاههای تلویزیون آسان باشد.
شکل ۱. یک نمونه از OnboardingSupportFragment .
OnboardingSupportFragment برای هر موردی مناسب نیست. وقتی نیاز به اضافه کردن عناصر رابط کاربری دارید که به ورودی کاربر نیاز دارند، مانند دکمهها و فیلدها، OnboardingSupportFragment استفاده نکنید. همچنین، از OnboardingSupportFragment برای کارهایی که کاربر مرتباً انجام میدهد استفاده نکنید. در نهایت، اگر نیاز به ارائه یک رابط کاربری چند صفحهای دارید که به ورودی کاربر نیاز دارد، استفاده از GuidedStepSupportFragment را در نظر بگیرید.
یک قطعه پشتیبانی از ورود به سیستم اضافه کنید
برای افزودن OnboardingSupportFragment به برنامه خود، کلاسی را پیادهسازی کنید که کلاس OnboardingSupportFragment را ارثبری کند. این قطعه کد را به یک اکتیویتی اضافه کنید، یا با استفاده از XML طرحبندی اکتیویتی یا به صورت برنامهنویسی. مطمئن شوید که اکتیویتی یا قطعه کد از تمی مشتق شده از Theme_Leanback_Onboarding استفاده میکند، همانطور که در بخش سفارشیسازی تمها توضیح داده شده است.
در متد onCreate() از activity اصلی برنامهتان، startActivity() را با یک Intent که به activity والد OnboardingSupportFragment شما اشاره میکند، فراخوانی کنید. این کار به شما کمک میکند تا OnboardingSupportFragment شما به محض شروع برنامه ظاهر شود.
برای اطمینان از اینکه OnboardingSupportFragment فقط در اولین باری که کاربر برنامه شما را اجرا میکند ظاهر میشود، از یک شیء SharedPreferences برای ردیابی اینکه آیا کاربر قبلاً OnboardingSupportFragment را مشاهده کرده است یا خیر، استفاده کنید. یک مقدار بولی تعریف کنید که وقتی کاربر مشاهده OnboardingSupportFragment را تمام کرد، به true تغییر کند. این مقدار را در متد onCreate() در فعالیت اصلی خود بررسی کنید و فقط در صورتی که مقدار false باشد، فعالیت والد OnboardingSupportFragment اجرا کنید.
مثال زیر یک override از onCreate() را نشان میدهد که مقدار SharedPreferences را بررسی میکند و اگر روی true تنظیم نشده باشد، startActivity() را برای نمایش OnboardingSupportFragment فراخوانی میکند:
کاتلین
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 تنظیم کنید:
کاتلین
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 ، باید صفحات Onboarding را تعریف کنید. هر صفحه میتواند دارای عنوان، توضیحات و چندین زیرنمایش باشد که میتوانند شامل تصاویر یا انیمیشن باشند.
شکل ۲. عناصر صفحهی OnboardingSupportFragment .
شکل ۲ یک صفحه نمونه را نشان میدهد که در آن، المانهای قابل تنظیم صفحه که OnboardingSupportFragment شما میتواند ارائه دهد، با استفاده از راهنماها مشخص شدهاند. المانهای صفحه عبارتند از:
- عنوان صفحه.
- توضیحات صفحه.
- نمای محتوای صفحه، در این مورد یک علامت تیک سبز ساده در یک کادر خاکستری. این نما اختیاری است. از این نما برای نمایش جزئیات صفحه استفاده کنید. برای مثال، میتوانید یک اسکرینشات اضافه کنید که ویژگی برنامهای که صفحه توصیف میکند را برجسته کند.
- نمای پسزمینه صفحه، در این مورد یک گرادیان آبی ساده. این نما همیشه پشت سایر نماهای صفحه رندر میشود. این نما اختیاری است.
- نمای پیشزمینه صفحه، در این مورد یک لوگو. این نما همیشه قبل از سایر نماهای صفحه رندر میشود. این نما اختیاری است.
اطلاعات صفحه را هنگام ایجاد یا اتصال OnboardingSupportFragment به اکتیویتی والد، مقداردهی اولیه کنید، زیرا سیستم هنگام ایجاد نمای فرگمنت، اطلاعات صفحه را درخواست میکند. میتوانید اطلاعات صفحه را در سازنده کلاس خود یا در override تابع onAttach() مقداردهی اولیه کنید.
هر یک از متدهای زیر را که اطلاعات صفحه را به سیستم ارائه میدهند، بازنویسی کنید:
-
getPageCount()تعداد صفحات موجود درOnboardingSupportFragmentشما را برمیگرداند. -
getPageTitle()عنوان مربوط به شماره صفحه درخواستی را برمیگرداند. -
getPageDescription()توضیحات مربوط به شماره صفحه درخواستی را برمیگرداند.
برای ارائه زیرنماهای اختیاری برای نمایش تصاویر یا انیمیشنها، هر یک از روشهای زیر را لغو کنید:
-
onCreateBackgroundView()یکViewکه شما ایجاد میکنید تا به عنوان background view عمل کند را برمیگرداند و در صورت عدم نیاز به background view، مقدار null را برمیگرداند. -
onCreateContentView()یکViewکه شما ایجاد میکنید تا به عنوان content view عمل کند را برمیگرداند و در صورت عدم نیاز به content view، مقدار null را برمیگرداند. -
onCreateForegroundView()یکViewکه شما ایجاد میکنید تا به عنوان نمای پیشزمینه عمل کند را برمیگرداند و در صورت عدم نیاز به نمای پیشزمینه، null را برمیگرداند.
سیستم، View ای را که شما ایجاد میکنید به طرحبندی صفحه اضافه میکند. مثال زیر متد onCreateContentView() را بازنویسی کرده و یک ImageView برمیگرداند:
کاتلین
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 به عنوان صفحه لوگوی خود نمایش دهید، تابع setLogoResourceId() را با شناسه Drawable خود در متد onCreate() از OnboardingSupportFragment خود فراخوانی کنید. سیستم Drawable به صورت محو نمایش میدهد و برای مدت کوتاهی نمایش میدهد، و سپس Drawable قبل از نمایش صفحه اول OnboardingSupportFragment شما، محو میکند.
اگر میخواهید یک انیمیشن سفارشی برای صفحه لوگوی خود ارائه دهید، به جای فراخوانی setLogoResourceId() ، متد onCreateLogoAnimation() را نادیده بگیرید و یک شیء Animator را که انیمیشن سفارشی شما را رندر میکند، برگردانید، همانطور که در مثال زیر نشان داده شده است:
کاتلین
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 ایجاد میکند که نمای محتوا را به صورت افقی مقیاسبندی میکند:
کاتلین
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 اضافه کنید و مجموعه را پخش کنید. مثال زیر از یک انیمیشن محو شدن برای حذف صفحه قبلی، بهروزرسانی تصویر نمای محتوا و از یک انیمیشن محو شدن برای نمایش صفحه بعدی استفاده میکند:
کاتلین
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 ، به نمای کلی انیمیشن ویژگی مراجعه کنید.
سفارشیسازی تمها
هرگونه پیادهسازی 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را برمیگرداند:کاتلین
override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
جاوا
@Override public int onProvideTheme() { return R.style.Theme_Leanback_Onboarding; }