طراحی صفحه درباره ما به سبک متریال دیزاین

طراحی متریال دیزاین آموزش اندروید استودیو درباره ما

سطح آموزش: #متوسط

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

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

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

 

 

برایِ طراحی یک اکتیویتی به اسمِ AboutUsActivity و متناظر با اون یک لایه به اسم activity_about_us ایجاد می‌کنیم.

سپس در build.gradle مقادیر زیر رو اضافه میکنیم.

حالا به سراغِ activity_about_us.xml برید و کدهایِ زیر رو قرار بدید.

کد

تصاویر که در drawableها اضافه شده رو داخلِ گیت‌هاب گذاشتم. میتونید از این لینک هر کودوم رو خواستید استفاده کنید.

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

کد

رشته‌های متنی رو در string من به شکلِ زیر قرار دادم:

اکتیویتی چیزِ خاصی نداره. فقط یک ضربدر پیش‌بینی کردم که با انتخابش floating action button به حالت اول برمیگرده.

کد

توضیحات

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

لایه‌ xml ما از سه بخش تشکیل شده. بخشِ اول که بالایِ صفحه قرار داره و همیشه ثابت هست. من برایِ این بخش یک تصویر پس زمینه و یک متن با قابلیت اسکرول در نظر گرفتم که توضیحاتِ درباره ما رو میشه اونجا گذاشت.

بخش‌هایِ بعدی در پایینِ بخش اول قرار دارن و با زدنِ floating action button یکی ظاهر و دیگری غیب میشه. برایِ طراحی دو لایه با ID‌هایِ زیر داریم:

توجه کنید این دو ID رو به هیچ‌وجه تغییر ندید. طراخی‌ لایه‌ها رو داخلِ layout‌هایی که این IDها رو دارن انجام میدید. این دو لایه میتونن هرچیزی که از ViewGroup ارث می‌بره باشن. مثلا من اینجا LinearLayout استفاده کردم. شما میتونید FrameLayout یا RelativeLayout یا هرچیزِ دیگه استفاده کنید.

یک دیدگاه برای “طراحی صفحه درباره ما به سبک متریال دیزاین

پاسخ دهید

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