چند روز پیش توی دریبل این شات رو گذاشتم. این یه سیمبل اسکچ هستش که تکست فیلد متریال رو شبیه‌سازی کرده بودم. نکته قابل توجه توی این سیمبل فاصله marginی هست که لیبل از کنار خودش توی حالت Focus داره و این مارجین با کم و زیاد شدن نوشته ثابت میمونه. حالا میخوام توضیح بدم که چجوری این سیمبل رو میتونین خودتون توی اسکچ بسازید.
ما برای اینکه یه سیمبل داینامیک داشته باشیم نمیتونیم صرفا از Rectangle و Border Color استفاده کنیم. از Boolean Operationهای اسکچ قراره استفاده کنیم تا border رو بتونیم شبیه‌سازی کنیم.
یه مستطیل با رنگ دلخواه بکشید. طبق متریال شعاع گوشه مستطیل باید ۴ باشد.
یک مستطیل دیگه بکشید که از هر سمت ۲ پیکسل از قبلی کوچک تر باشه و شعاع گوشه‌هاش ۲ پیکسل باشه.
مستطیل کوچک‌تر رو انتخاب کنین و به تمام لبه‌ها پین کنیدش:
این دوتا رو از هم Subtract کنین.
الان شکلی دارید که دقیقا رفتاری شبیه به یه مستطیل عادی با border 2px داره:
شکلتون رو به یک سیمبل کنین.
برای اینکه مارجین لیبل رو بتونیم داینامیک درست کنیم باید یه برش بالای مستطیلمون درست کنیم.و مثل قدم قبلی باید subtract کنیم. با این مشخصات:
شکلمونو تست میکنیم:
اسکچ یه قابلیت خیلی باحال داره که باعث میشه شکل‌ها فاصلشون رو نسبت به نوشته‌ها توی یه سیمبل حفظ کنن.
که اینطوری کار میکنه:
توی سیمبل اول چون دایره ارتفاعش از نوشته کوتاه‌تره این واکنش رو نشون میده. توی سیمبل دوم چون بزرگ‌تره سر جاش میمونه.
حالا ما از این قابلیت استفاده میکنیم تا خط بالای تکست فیلدمون نسبت به اندازه لیبل واکنش نشون بده.
لیبلمون رو با این مشخصات میسازیم:
حالا میخوایم که border بالا رو کامل کنیم:
یه مستطیل با عرض زیاد (مثلا ۱۰۰۰) و ارتفاع ۲ پیکسل با فاصله ۵ پیکسل از لیبلمون میکشیم:
که اگه لیبلمون رو تغییر بدیم خط واکنش نشون میده:
با یه لایه ماسک میتونیم اضافه خط بالا رو حذف کنیم:
هدف از این آموزش گفتن دو سه تا از قابلیت‌های باحال اسکچ بود. امیدوارم به دردتون خورده باشه.
اگه سوالی داشتین کامنت بذارید اگه بتونم حتما کمک میکنم :)
منو میتونین توی توییتر و اینستاگرام دنبال کنین.
