چگونه در اندروید یک اسلایدر معرفی برای برنامه خود بسازیم؟

چگونه در اندروید یک اسلایدر معرفی برای برنامه خود بسازیم؟

اضافه کردن اسلایدر خوش آمد گویی یا معرفی در واقع به این دلیل است که ما میتوانیم به درستی تمام کارهایی که برنامه ما میکند را نشان دهیم.در این مطلب آموزشی قرار است با هم یاد بگیریم که چگونه یک اسلایدر معرفی به برنامه خود اضافه کنیم و کاربر با جابجایی از روی چند اسلاید جذاب سپس شروع به کار با برنامه شما بکند.
برای نمایش و فهم بهتر این موضوع ما یک برنامه ساده شامل اسلایدر معرفی میسازیم که برای جابجایی از روی اسلاید ها شامل دکمه های next و skip میباشد همچنین میتوان با کشیدن انگشت خود روی صفحه ( swipe ) از اسلاید ها گذر کرد همچین نشان میدهیم که چگونه این اسلایدر را فقط برای بار اول اجرای برنامه نشان دهید.

 

×در صورت عدم مشاهده تصاویر، لطفا نرم افزار گذر از تحریم خود را فعال کنید.

 

شکل نهایی برنامه:
intro-slider-android-app-mobcollege

 

اکنون با ایجاد یک پروژه جدید آغاز میکنیم.

۱.ایجاد یک پروژه جدید در اندروید :

۱.در ابتدا نیاز است که یک پروژه جدید در اندروید بسازیم که قبلا آموزش آن در سایت قرار گرفته است.

۲.انتخاب رنگ ها:

انتخاب رنگ ها بستگی به شما دارد که بخواهید چه رنگ هایی در برنامه خود استفاده کنید و چگونه برنامه خود را طراحی کنید.

در این مثال ما برای اسلایدر ها یک تصویر بزرگ وسط صفحه و نوشته ای را در زیر آن قرار دادیم.در پایین اسلایدر ها هم چند نقطه قرار دادیم که به اندازه اسلایدر ها میباشد.

در تصویر زیر رنگ های را که در برنامه استفاده کردیم را مشاهده میکنید که برای هر اسلایدر ما نیاز به سه رنگ داریم یکی برای رنگ پس زمینه و دو رنگ دیگر برای نقطه های پایین صفحه برای زمان هایی که فعال و غیر فعال هستند.

color-intro-slider-aandroid-app
۲.فایل colors.xml که در مسیر res ⇒ values قرار دارد را باز کنید و کدهای زیر را در آن کپی کنید. در کدهای زیر شما میتوانید قسمت رنگ های مربوط به پس زمینه ( Screens background color ) , نقطه پایین اسلایدر زمانی که فعال ( dots active colors ) و غیر فعال ( dots inactive colors ) است را مشاهده کنید.

۳.فایل strings.xml که در مسیر res ⇒ values قرار دارد را باز کرده و کدهای زیر را در آن قرار دهیدکه این کدها مربوط به متن ها و عبارات استفاده شده در برنامه میباشند.

۴.فایل dimens.xml که در مسیر res ⇒ values را باز کرده و کد های زیر را در آن قرار دهید. این کدها برای فاصله ها و انداره های مورد نظر میباشند.

۵.همچنین مطمئن شوید که در فایل styles.xml کدهای زیر را وجود دارند تا از کرش ( crash ) کردن برنامه جلوگیری کنیم.

اسلایدرهای معرفی فقط باید یک بار زمانی که برنامه برای بار اول اجرا میشود نشان داده شوند.اگر کاربر برای بار دوم برنامه را باز کرد باید مستقیما وارد صفحه اصلی ( main screen ) برنامه بشود.برای  رسدن به این موضوع ما از SharedPreferences استفاده میکنیم تا متغیر boolean ای را ذخیره کنیم که مشخص میکند برنامه برای بار اول اجرا شده است.

۶.کلاسی با نام PrefManager.java ایجاد کنید و کدهای زیر را در آن قرار دهید.این کلاس برای SharedPreferences میباشد و با متد ()isFirstTimeLaunch مشخص میکنم که بار اول اجرای برنامه هست یا خیر که اگه مقدار true را برگرداند یعنی برنامه برای بار اول اجرا شده است.

۳.ایجاد اسلایدهای معرفی:

حالا نیاز داریم تا فایل مربوط Layout اسلایدرها را ایجاد کنیم که در این مثال ما چهار اسلایدر معرفی داریم بنابراین نیاز داریم تا چهار فایل Layout مجزا تعریف کنیم که Layout آن ها مشابه به هم است و فقط در رنگ , متن و عکس های استفاده شده در اسلایدر ها متفاوتند. همچنین شما میتوانید به جای چهار Layout مجزا از چهار Fragment مجزا استفاده کنید.

۷.حال در مسیر res ⇒ layouts چهار فایل Layout با نام های welcome_side2.xml , welcome_side1.xml , welcome_side3.xml و welcome_side4.xml ایجاد کنید و کدهای مربوط به هر کدام را در آن ها قرار دهید.

welcome_slide1.xml

welcome_slide2.xml

welcome_slide3.xml

welcome_slide4.xml

۸.اکنون نیاز است تا یک activity جدید برای برای اسلایدرها بسازیم تا آن ها نمایش دهیم برای این کار  از قسمت سمت چپ محیط برنامه نویسی اندروید استودیو بر روی app کلیک کرده و از قسمت New ⇒ Activity ⇒ Empty Activity یک activity جدید با نام WelcomeActivity ایجاد میکنیم.

۹.فایل activity_welcome.xml را باز میکنیم و کدهای زیر را در آن کپی میکنیم که در این کدها ما ViewPager را برای اسلایدرها و LinearLayout را برای دکمه های نقطه ای ( bottom dots ) که در پایین اسلایدر ها قرار داده بودیم و دکمه های Skip و Next اضافه کردیم.

۱۰.حال فایل WelcomeActivity.java  را باز کرده و کدهای زیر را در آن قرار میدهیم.در این جا ما باید مراقب چند چیز باشیم :

  • چک کردن اینکه آیا مرتبه اول اجرای برنامه است یا خیر که با استفاده از متد ()prefManager.isFirstTimeLaunch این کار را انجام میدهیم که اگر مقدار true را برگرداند MainActivity بعد از اسلایدر ساخته شده اجرا خواهد شد.

  • ایجاد یک منوی اعلان ( notification bar ) شفاف که بتوان رنگ های پس زمینه را به درستی نشان داد.
  • ایجاد یک PagerAdapter  برای  ViewPager و inflate کردن تمامی Layout های که ما قبلا ایجاد کردیم.
  • اضافه کردن click event listener برای دکمه های Skip و Next که اگر Next کلیک شد به اسلاید بعدی برود و اگر Skip کلیک شد main activity باز شود.

۱۱.در آخر هم فایل AndroidManifest.xml را باز میکنیم و WelcomeActivity را به عنوان صفحه اجرایی برنامه انتخاب میکنیم تا به عنوان صفحه ابتدایی این برنامه نشان داده شود.

خروجی برنامه :

slide1-intro-slider-android-app
slide2-intro-slider-android-app
slide3-intro-slider-android-app
slide4-intro-slider-android-app
main-intro-slider-android-app

تمام 🙂

مقاله های مرتبط :