وبلاگ - مطالب آموزشی

0
239
نحوه ساخت دکمه Swipe با سبک آی او اس در اندروید

نحوه ساخت دکمه Swipe با سبک آی او اس در اندروید

اگر حتی یک بار هم گوشی آیفونی را در دست گرفته باشید، با دکمه slide to unlock معروف آشنایی دارید.

blog_18342_1

هدف اصلی که پشت پرده این دکمه قرار دارد جلوگیری از باز شدن قفل گوشی به طور اتفاقی است، از طرفی ممکن است نیاز باشد تا در اپلیکیشن های موبایل نیز گزینه ای را در اختیار کاربر قرار دهید تا با استفاده از آن، کاربر یک اقدام قطعی را به تایید برساند. اپلیکیشن Uber چنین امکانی را در اختیار رانندگان می گذارد و با کشیدن این دکمه در اپلیکیشن آنها تمایل خود بابت آغاز یک سفر را به تایید می رسانند.

راه حل این کار نمایش صفحه ای به کاربر است که توسط آن یک عمل خاص را به تایید می رساند، اما این راه حل چندان جالب و تاثیرگذار نمی نماید. از این رو می خواهیم دکمه swipe را در اندروید پیاده سازی کنیم، کدهای نهایی این پروژه در GitHub قرار داده شده اند و در صورت تمایل می توانید نگاهی به آنها بیندازید.

blog_18342_2

شروع کار

یک پروژه جدید با ساختار Blank Activity در اندروید استودیو بسازید.

یک کلاس به نام SwipeButton که از کلاس Button اکستند شده است ساخته و قطعه کد زیر را به آن اضافه نمایید:

برای اینکه دکمه کار کند لازم است تا لیسنر onTouchEvent را مورد استفاده قرار دهید. در این لیسنر عملیات فشار بر روی دکمه، کشیدن و رها کردن آن ثبت می گردد، با افزودن کد زیر به کلاس SwipeButton تابع onTouchEvent را اورراید نمایید.

کد بالا سه مورد زیر را مدیریت می کند و در ادامه به این موارد با جزئیات پرداخته خواهد شد:

1. زمانی که کاربر برای بار اول دکمه را لمس می کند.

2. زمانی که کاربر دکمه را می کشد.

3. زمانی که کاربر دکمه را رها کرده (کشیدن را کامل کرده یا از وسط رها می کند).

1. زمانی که کاربر دکمه را لمس می کند

لازم است تا موارد زیر را به انجام برسانید:

1. مختصات X و Y از نقطه ای را که کاربر لمس کرده از آبجکت MotionEvent در فراخوانی onTouchEvent دریافت نمایید.

2. متن و رنگ دکمه را تغییر دهید.

کد موردنظر برای انجام این کار:

2. زمانی که کاربر دکمه را می کشد

لازم است اقدامات زیر در صورتی که کاربر دکمه را بکشد انجام شوند:

1. تغییر متن در صورت تمایل

2. نمایش یک افکت کشیدن با دستکاری گرادینت، زمانی که کاربر در حال کشیدن دکمه است

از linearGradient به منظور نمایش افکت کشیدن استفاده می شود که یک افکت گرادینت شامل سه رنگ می باشد. به محض اینکه کاربر دکمه را بکشد این گرادینت با حرکت از چپ به راست افکت موردنظر را ایجاد خواهد کرد.

3. زمانی که کاربر دکمه را رها می کند

زمانی که کاربر دکمه را رها می کند دو احتمال وجود خواهد داشت:

1. کاربر قبل از تایید اقدام موردنظر دکمه را رها کند، بدین معنا که عملیات رها کردن دکمه تا قبل از رسیدن به آستانه مورد نظر برای تایید عملیات صورت پذیرد.

2. کاربر پس از تایید عملیات دکمه را رها کند، بدین مفهوم که فاصله موردنظر طی شده است.

هر دوی این موارد در قطعه کد زیر پوشش داده شده اند:

چندین ویژگی مانند رنگ های گرادینت در حال حاضر هارد-کد شده اند و این مقادیر برای هر نمونه از دکمه ست خواهند شد و می توان توابع فراخوانی را برای زمانی که کاربر عملیات خاصی را با استفاده از دکمه به انجام می رساند ست کرد.

ست کردن ویژگی ها

ویژگی هایی که می توانید برای هر نمونه از SwipeButton سفارشی سازی کنید شامل موارد زیر می شوند:

– سه رنگ مربوط به گرادینت

– عرضی که توسط رنگ گرادینت دوم پوشش داده می شود

– کسری از فاصله ای از عرض دکمه که کاربر برای تایید اکشن باید تا آنجا را بکشد

– متنی که در صورت فشار یا کشیدن دکمه از سوی کاربر نمایش داده می شود

علاوه بر این شما می توانید گزینه ای را برای موارد زیر و اختصاص فراخوانی ها ارائه دهید:

– لمس و فشار دادن دکمه

– کشیدن دکمه تا میزانی که به منزله تایید عملیات تلقی شود

– رها کردن دکمه بدون تایید

به منظور تایید این ویژگی ها و فراخوانی ها یک کلاس دیگر بسازید و آن را انتزاعی کنید.

در این مرحله به یک setter در کلاس SwipeButton نیاز دارید که یک نمونه از این کلاس انتزاعی را معرفی کند. با استفاده از setter شما می توانید ویژگی ها و فراخوانی های موردنظر را ست کنید. در زیر کلاس SwipeButton را مشاهده می کنید که در آن تمامی ویژگی ها و فراخوانی هایی که از نمونه کلاس انتزاعی گرفته شده گنجانده شده است:

به منظور استفاده از SwipeButton در اکتیویتی یا فرگمنت، عناصر xml مربوطه را به لی اوت xml اضافه کنید:

به منظور تخصیص فراخوانی ها و سفارشی سازی ویژگی هایی مانند رنگ، قسمت زیر را به MainActivity خود اضافه کنید:

موارد استفاده

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

 

منبع:

http://www.sitepoint.com

این نوشته را به گوگل توصیه کنید :

بسته های آموزشی جذاب!بیشتر