آموزش ساخت سیمبل داینامیک: Material Outlined Text Field

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

نحوه کارکرد این سیمبل در اسکچ
نحوه کارکرد این سیمبل در اسکچ

قدم اول: ساخت Border

ما برای اینکه یه سیمبل داینامیک داشته باشیم نمیتونیم صرفا از Rectangle و Border Color استفاده کنیم. از Boolean Operationهای اسکچ قراره استفاده کنیم تا border رو بتونیم شبیه‌سازی کنیم.

یه مستطیل با رنگ دلخواه بکشید. طبق متریال شعاع گوشه مستطیل باید ۴ باشد.

یک مستطیل دیگه بکشید که از هر سمت ۲ پیکسل از قبلی کوچک تر باشه و شعاع گوشه‌هاش ۲ پیکسل باشه.

مستطیل کوچک‌تر رو انتخاب کنین و به تمام لبه‌ها پین کنیدش:

این دوتا رو از هم Subtract کنین.

الان شکلی دارید که دقیقا رفتاری شبیه به یه مستطیل عادی با border 2px داره:

شکلتون رو به یک سیمبل کنین.

قدم دوم: ایجاد برش لیبل

برای اینکه مارجین لیبل رو بتونیم داینامیک درست کنیم باید یه برش بالای مستطیلمون درست کنیم.و مثل قدم قبلی باید subtract کنیم. با این مشخصات:

  • Width: (همواره باید ۱۱ پیکسل از هر طرف فاصله داشته باشه(که تو این مورد میشه ۳۰۶ پیکسل
  • Height: 2px
  • Fixed height
  • Pin: Top, Left, Right

شکلمونو تست میکنیم:

قدم سوم: اضافه کردن لیبل و حاشیه بالا

اسکچ یه قابلیت خیلی باحال داره که باعث میشه شکل‌ها فاصلشون رو نسبت به نوشته‌ها توی یه سیمبل حفظ کنن.

که اینطوری کار میکنه:

توی سیمبل اول چون دایره ارتفاعش از نوشته کوتاه‌تره این واکنش رو نشون میده. توی سیمبل دوم چون بزرگ‌تره سر جاش میمونه.

حالا ما از این قابلیت استفاده میکنیم تا خط بالای تکست فیلدمون نسبت به اندازه لیبل واکنش نشون بده.

لیبلمون رو با این مشخصات میسازیم:

حالا میخوایم که border بالا رو کامل کنیم:

یه مستطیل با عرض زیاد (مثلا ۱۰۰۰) و ارتفاع ۲ پیکسل با فاصله ۵ پیکسل از لیبلمون میکشیم:

که اگه لیبلمون رو تغییر بدیم خط واکنش نشون میده:

قدم چهارم: حذف اضافه خط بالا

با یه لایه ماسک میتونیم اضافه خط بالا رو حذف کنیم:

تمام!

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


اگه سوالی داشتین کامنت بذارید اگه بتونم حتما کمک میکنم :)

منو میتونین توی توییتر و اینستاگرام دنبال کنین.