تبلیغات

آموزش برنامه نویسی و ساخت ویجت شناور در اندروید + پروژه نمونه

آموزش برنامه نویسی و ساخت ویجت شناور در اندروید
به همراه پروژه نمونه
سورس کد در انتهای مطلب قرار دارد


ویجت شناور، یک یا چند View می‌باشد که می‌تواند روی صفحه‌ی نمایش، آزادانه و غیر وابسته به سایر عناصر، در هرجایی قرار گیرد! همچنین ممکن است قابلیت درگ کردن و انتقال دادن این ویو با تاچ کردن به این طرف و آن طرف نیز بری آن وجود داشته باشد!

کاربردهای مختلفی را می‌توان برای ویجت شناور عنوان کرد؛ از جمله زمانی که پیامی از مسنجرها دریافت می‌شود، ویجت باز شده تا اگر در جای دیگری باشید، به راحتی بتوانید پاسخ دهید! و اما حالا در این آموزش، مثال ما ساخت یک کنترل موزیک است که روی صفحه شناور شده و کاربر می‌تواند آن را به این طرف و آن طرف انتقال دهد و با استفاده از آن، موزیک خود را پخش کند. به صورت زیر:

1. ایجاد پروژه

ویوی شناور به خودی خود چیزی نیست! اما برای این که بتواند روی اپلیکیشن‌های دیگر و همه جا نمایش داده شود، باید دسترسی زیر را داشته باشد:

سپس، از یک بک‌گراند سرویس برای اضافه کردن ویجت شناور به view hierarchy یا سلسه‌ی ویوهای اسکرین فعلی اندروید استفاده می‌کنیم. بنابراین، این ویو، همیشه بالاتر از پنجره‌ی اپلیکیشن‌ها خواهد بود.

برای شروع کار، وارد اندروید استودیو شده و یک پروژه بسازید. سپس فایل اندروید منیسفت خود را به صورت زیر تکمیل کنید:

همانطور که می‌بینید، تنها یک دسترسی و یک سرویس را در این‌جا معرفی کرده‌ایم. این دسترسی، جزء دسترسی‌های خطرناک از اندروید مارشمالو به بعد نیست؛ اما نیاز به اجازه‌ی کاربر دارد؛ این اجازه از جای دیگری غیر از روش گرفتن دسترسی‌های خطرناک داده می‌شود؛ که در ادامه و موقع نوشتن کد اکتیویتی خواهیم گفت.


حالا یک Layout با نام «layout_floating_widget.xml» بسازید. در این Layout، ما ویو یا ویوهای شناور خود را قرار می‌دهیم تا با استفاده از آن، ویجت شناور خود را بسازیم:

نیازی به توضیح نیست و تنها یک طراحی ساده‌ای برای ویجت شناور موزیک پلیرمان می‌باشد که در ادامه از آن استفاده خواهیم کرد. البته شاید تنها مواردی که در طراحی بالا نیاز به توضیح دارند، این است که ما یک ویو با نام collapse_view و یک ویوی دیگر با نام expanded_container داریم:

  • collapse_view
    شامل یک آیکون + دکمه‌ی بستن ویجت می‌باشد.
  • expanded_container
    شامل دکمه‌های پخش موزیک و … می‌باشد.

به صورت پیشفرض، محتوای داخل collapse در حال نمایش است و کاربر با کلیک روی آیکون آن، محتوای expanded را مشاهده خواهد کرد و در نتیجه باید گفت که موقع کلیک روی collapse، ویوی expended باز می‌شود (به بیانی دیگر نمایش داده می‌شود) و موقع کلیک روی دکمه‌ی ضربدری (بستن) که داخل ویوی expended قرار دارد، expended بسته شده و collapse نمایش داده می‌شود! (اگر به گیف موجود در ابتدای مطلب دقت کنید، این توضیح را درک خواهید کرد.)

2. پیاده سازی سرویس و ویجت شناور

یک کلاس با نام  FloatingViewService.java که قرار است شامل کد سرویس معرفی شده در Manifest باشد را ساخته و آن را به صورت زیر تکمیل کنید:

قرار است به محض اجرای سرویس، ویجت شناور نمایش داده شود! بنابراین، کار نمایش را در داخل متد onCreate سرویس انجام می‌دهیم. (البته می‌توانید به گونه‌های دیگری عمل کرده و هیچکدام از این‌ها اجباری نیستند!)

اما در اینجا، متد onCreaete را طبق شماره گزاری هایی که در کد انجام داده‌ام، به صورت زیر توضیح می‌دهم:

  1. محتوای فایل Layout مربوط به ویجت شناور خود را به داخل یک ویو و با استفاده از LayoutInflater تزریق می‌کنیم تا بعدا آن را به ویندوز منیجر اضافه کنیم.
  2. اطلاعات و ویژگی‌هایی که می‌خواهیم ویجتمان با آن ساخته شود را در متغیر params نگه می‌داریم!
    – این اطلاعات شامل اندازه، محل قرار گیری و … هستند.
  3. ویندوز منیجر خود سیستم را به فیلد windowsManager که در ابتدای کلاس تعریف کرده‌ایم نسبت می‌دهیم و سپس ویوی ویجت خود را به داخل آن اضافه می‌کنیم.
  4. دو ویوی collapse_view و expanded_container (که در بالا گفتیم) را از ویجت خود گرفته و درون متغیری قرار می‌دهیم تا بعدا یکی را ظاهر کرده و دیگری را غیب کنیم.
  5. رویداد کلیک ویوی exit_btn که در collapse_view قرار دارد را پیاده‌سازی کرده و از آن برای بستن ویجت یا خارج شدن از ویجت استفاده می‌کنیم.
    – توجه داشته باشید که برای خارج شدن از ویجت، سرویس را متوقف می‌کنیم و به داخل رویداد onDestroy سرویس رفته و در آنجا ویجت را از ویندوز منجر حذف می‌کنیم! بنابراین هم سرویس بسته خواهد شد و هم ویجت!
  6. در بخشهای 6 و 7 و 8، دکمه‌هایی که در ویوی expand قرار دارند و برای پخش موزیک و جلو عقب کردن آن مورد استفاده قرار می‌گیرند را پیاده‌سازی می‌کنیم.
    – البته فعلا چون هدف ما آموزش مدیا پلیر نیست و ساخت چنین سیستمی به خودی خود پیچیده است، تنها یک Toast ساده نمایش می‌دهیم و خودتان بعدا این قسمت‌ها را اگر خواستید با یک مدیاپلیر ساده تکمیل کنید.
  7. توضیح 6 را بخوانید.
  8. توضیح 6 را بخوانید.
  9.  از ویویی که داخل ویوی expand قرار دارد، برای رفتن به حالت collapse استفاده می‌کنیم و بنابراین این ویو را مخفی کرده و ویوی دیگر را ظاهر می‌کنیم. البته در مورد ظاهر کردن ویوی expand در ادامه خواهم گفت.
  10. ویجت را به کلی بسته و به اکتیویتی می‌رویم! چراکه اگر موزیک پلیرهای شناور را دیده باشید، به هنگام بازگشت به اکتیویتی از طریق ویجت شناور، ادامه‌ی موزیک در اکتیویتی پخش می‌شود! البته این کار را می‌توانید توسط سرویسی برای پخش صدا انجام دهید تا وابستگی از بین برود (می‌توانید از همین سرویس هم استفاده کنید!)
  11. در اینجا باید «درگ اند دراپ» یا به عبارتی انتقال ویجت شناور با کشیدن انگشت به این طرف و آن طرف بپردازیم! همچنین تصمیم گرفته‌ایم تا رفتن به حالت expand را نیز در اینجا انجام دهیم. بدین منظور، ما ریشه‌ای‌ترین ویویی که تمام کنترل‌ها را در بر دارد را انتخاب کرده و رویداد تاچ آن را پیاده‌سازی می‌کنیم.
    – توضیح این قسمت پیچیده است چرا که اعمال ریاضی برای این کار صورت می‌گیرد و من فقط بخش رفتن به حالت expand را توضیح می‌دهم.
    – از آن‌جایی که در حالت درگ کردن و زمان collapse بودن تنها ویوهای آیکون و بستن ویجت را داریم، بنابراین وقتی روی آیکون رویداد کلیک را تعریف می‌کردیم تا به جالت expand برود، در این صورت موقع درگ شدن هم به حالت expand می‌رفت که خیلی ناخوش‌آیند بود! بنابراین رفتن به حالت expand را در حالت درگ کردن و با بررسی اینکه در حال حرکت هستیم یا خیر انجام داده‌ایم. از اینرو، موقع رها کردن حالت تاچ (رویداد MotionEvent.ACTION_UP)، با برررسی این مورد می‌توانیم به حالت expand برویم! قبل از آن نیز بررسی می‌کنیم که آیا در حالت collapse قرار داریم یا خیر؟! چراکه تاج و درگ کردن روی حالت expand هم انجام می‌شود و از اینرو، ابتدا بررسی می‌کنیم و سپس این کار را انجام می‌دهیم.
    سایر موارد را خودتان بررسی کنید.

3. نهایی سازی پروژه و پیاده سازی اکتیویتی

کد زیر را در Layout مربوط به اکتیویتی خود وارد کنید:

چیز خاصی وجود ندارد! تنها یک دکمه برای باز کردن و ایجاد کردن ویجت شناور قرار داده‌ایم تا با کلیک روی آن، ویجت شناور برایمان ظاهر شده و اکتیویتی نیز بسته شود.


کد زیر را درون فایل MainActivity.java قرار دهید:

نکته
توجه داشته باشید که از نسخه‌ی مارشمالو به بعد، وقتی یک اپلیکیشنی بخواهد از این قابلیت استفاده کند، موقع باز شدن به تنظیمات انتقال داده خواهد شد و در آنجا بایستی این قابلیت را برای برنامه فعال کند! لذا از این رو، ما در این جا این امکان را برای نسخه‌های مختلف تفکیک کرده‌ایم.

تبلیغات
2 نظر
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس / مدیر فول کده

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده 2 دیدگاه