آموزش کار با Floating Action Button در متریال دیزاین

آموزش اندروید متریال دیزاین floating action button fab

سطح آموزش: #مقدماتی

قصد داریم در ادامه پروژه قبلی برای طراحی متریال Floating Action Button (به اختصار fab) رو به برنامه‌مون اضافه کنیم.

fab یک دایره کوچک در کنارِ صفحهست که برای بعضی از Actionها ازش استفاده میشه. نکته مهم تو استفاده از این المان‌های متریال اینه که نباید تویِ استفاده ازشون زیاده‌روی کرد. نباید سعی کنیم به زور تویِ برنامه‌مون ازشون استفاده کنیم. دلیل اینکه اینو میگم اینه که خودم وقتی اول با متریال آشنا شده بودم سعی داشتم هرچیزی که بلدم رو توی تمام برنامه‌ها استفاده کنم. نتیجه‌اش این می‌شد که کار کردن با برنامه سخت میشد.

در ابتدا نیاز داریم کتابخونه‌ی دیزاین رو به برنامه اضافه کنیم. بنابراین در ادامه آموزش‌های قبلی خط زیر رو هم به build.gradle اضافه میکنیم:

توجه کنید که اگر آموزش‌های قبل رو مطالعه نکردید و تنها قصد داریم این آموزش رو مطالعه کنید باید ۳ خط زیر رو به  gradle برنامه‌تون اضافه کنید:

همچنین نیاز دارید که تمِ متریال رو به برنامه اضافه کنید. برای این‌کار از بخشِ اولِ این آموزش استفاده کنید.

توجه کنید که ما تا حالا برای طراحی لایه اصلی‌مون از RelativeLayout استفاده کرده‌ام. در نسخه‌های جدیدتر برای لایه مادر layoutهایی مثلِ CoordinateLayout اومده که برای طراحی متریال مناسب‌تر هستن. ولی من نمیخوام الان واردِ بحث‌ِ لایه‌ها بشیم بنابراین موقتا مکان fab رو با dp مشخص میکنم. در آینده که مفصل به بحث طراحی لایه‌ها می‌پردازیم باز خواهیم گشت و به شکلی استانداردتر لایه‌هامون رو باز طراحی میکنیم.

فعلا با توجه به توضیحاتی که دادم در انتهای activity_main.xml کدهای زیر رو اضافه می‌کنیم.

فراموش نکنید یک نسخه دیگه از این فایل در پوشه layout-v21 هم داریم. کد رو به همین شکل به اون هم اضافه کنید.

به dimens.xml برید و مقدار زیر رو بهش اضافه کنید:

توجه کنید که این ۱۶dp رو گوگل به عنوان استاندارد معرفی کرده و ترجیحا نباید تغییر داد.

حالا کافیه داخلِ کد رفته و یک رویداد رو برای fab مون تعریف کنیم.

کدهای زیر رو به onCreateـه فایلِ MainActivity.java اضافه کنید.

کد

در آینده آموزشِ ساختِ یک صفحه “درباره ما”ی حرفه‌ای در اندروید با استفاده از floating action button رو قرار خواهم داد.

 

 

 

 

 

پاسخ دهید

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