آموزش کتابخانه ی BubbleShowCase در اندروید

کتابخانه ی BubbleShowCase یک کتابخانه ی باحال و ساده است که با کاتلین نوشته شده است(البته در جاوا هم قابل استفاده است). شما به وسیله ی این کتابخانه می توانید یک پیام راهنمای کوچک کنار ویوهای برنامه ی خود بگذارید که به کاربر می گوید که ویوی مورد نظر چه کار می کند و در اصل به این شیوه نحوه ی کار با برنامه به کاربر آموزش داده می شود.

نمونه برنامه ی ساخته شده با این کتابخانه
نمونه برنامه ی ساخته شده با این کتابخانه




خب شروع کنیم!

اضافه کردن کتابخانه به پروژه هم که مثل آب خوردن است🥤(نوش جان) ! فقط کافیست خط زیر را به فایل گردل پروژه ی خود اضافه کنید:

implementation 'com.elconfidencial.bubbleshowcase:bubbleshowcase:v1.0'

نحوه ی استفاده:

اوّل با یک مثال ساده شروع می کنیم.

همان طور که در زیر می بینید ایجاد یک BubbleShowCase خیلی راحت است. برای این کار فقط نیاز به یک نمونه(instance) از اکتیویتی جاری و ویوی مورد نظر دارید.

BubbleShowCaseBuilder(this) //یک نمونه از اکتیویتی جاری
 .title("foo") //یک عنوان برای پیام راهنما
 .targetView(view) //ویویی که برای آن پیام راهنما قرار می دهید!
 .show() //نمایش پیام راهنما

توجّه: اگر ویویی به عنوان targetView قرار ندهید مشکلی پیش نمی آید و پیام راهنما در وسط صفحه قرار خواهد گرفت و به سمت هیچ ویویی اشاره نخواهد کرد.


شخصی سازی BubbleShowCase

بسیار خب! پس از یک مثال ساده که در آن با کلّیت کار آشنا شدیم حالا می خواهیم با امکانات بیشتر BubbleShowCase آشنا شویم. در زیر می توانید تمام پارامترهای ورودی آن را مشاهده کنید.

BubbleShowCaseBuilder(this) //Activity instance
.title("foo") //Any title for the bubble view
 .description("bar") //More detailed description
 .arrowPosition(BubbleShowCase.ArrowPosition.RIGHT) //شما می توانید جهت پیام راهنما را عوض کنید که باعث جابه جا شدن مکان پیام راهنما می شود
 .backgroundColor(Color.GREEN) //رنگ پس زمینه ی پیام راهنما
.textColor(Color.BLACK) //رنگ پیام راهنما
 .titleTextSize(17) //اندازه ی عنوان پیام راهنما(مقدار پیش فرض:16)ـ
 .descriptionTextSize(15) //اندازه ی متن توضیحات پیام راهنما(مقدار پیش فرض:14)ـ
 .image(imageDrawable) //عکس اصلی پیام راهنما
 .closeActionImage(CloseImageDrawable) //Custom close action image
 .showOnce("BUBBLE_SHOW_CASE_ID") //Id to show only once the BubbleShowCase
 .listener(listener(object : BubbleShowCaseListener{ //Listener for user actions
 override fun onTargetClick(bubbleShowCase: BubbleShowCase) {
 //وقتی که کاربر روی ویوی مورد نظر کلیک می کند.
 }
 override fun ActionImageClick(bubbleShowCase: BubbleShowCase) {
 //وقتی کاربر روی دکمه ی بستن کلیک می کند.
 }
 override fun onBubbleClick(bubbleShowCase: BubbleShowCase) {
 //وقتی کاربر روی پیام راهنما کلیک می کند.
 }
 override fun onBackgroundDimClick(bubbleShowCase: BubbleShowCase) {
 //وقتی کاربر در اطراف پیام راهنما و ویوی مورد نظر کلیک می کند
 }
 })
 .targetView(view) //ویویی که به پیام راهنما به آن اشاره می کند
 .show() //Display the ShowCase

توجّه: امکان قرار دادن بیش از یک جهت(position) وجود دارد. در این صورت پیام راهنما وسط صفحه قرار می گیرد. این مورد می تواند برای نشان دادن سوایپ(swipe) و یا یک حرکت اسکرول مانند به کار رود.

(الکی: ویرگول باید یه فکری به حال کدبلاکش بکنه😏)

زنجیره ی پیام های راهنما!

شما می توانید چندین پیام راهنما‌‌‌‌‌ را پشت سر هم نمایش دهید. در اصل شما باید چند آبجکت از کلاس BubbleShowCase بسازید(طبق مراحل بالا) و سپس مانند زیر آن‌هارا به طور زنجیروار نشان دهید.

BubbleShowCaseSequence()
 .addShowCase(firstShowCaseBuilder) //First BubbleShowCase to show
 .addShowCase(secondShowCaseBuilder) // This one will be showed when firstShowCase is dismissed
 .addShowCase(thirdShowCaseBuilder) // This one will be showed when secondShowCase is dismissed
 .show() //Display the ShowCaseSequence


لطفا 💓 و نظر یادتون نره!

سایر کتابخانه های اندروید را در این 👈 انتشارات ببینید. همچنین اگر دوست داشتید مرا در تلگرام دنبال کنید.

منبع 🚰