ساخت UI با Jetpack Compose – قسمت 1

ساخت UI با Jetpack Compose – قسمت 1

برای ساخت UI در اندروید چه راه هایی هست ؟ با xml بسازید یا به صورت کد بنویسید ، راه xml مسلما بسیار راحت تره ، اما جدیدا اندروید به تقلید از Apple ابزاری به اسم Compose رو معرفی کرده که باهاش می‌تونید UI رو به صورت کد ولی خیلی راحت ایجاد کنید ، در این مقاله ما چند مثال کوچک و یک سری کلیات از قضیه رو بررسی می‌کنیم و در سری های بعدی از این سری Compose به شرح و بسط اون می‌پردازیم .Android Composeبرای شروع با ملزومات پروژه آغاز می‌کنیم ، فایل gradle شما باید شامل موارد زیر باشه : https://gist.github.com/sasssass/fab9784b07fad1e8fc009bf748676a25 و https://gist.github.com/sasssass/067e8078f5ce0ee7ae7012b9b931bffc خب حالا چرا می‌گن بهش Compose ؟ در این ابزار ما از توابع composable (قابل ترکیب) استفاده می‌کنیم ، تو این توابع به جای اینکه از View هامون شئ بگیریم می‌آییم ویژگی هاشون رو (مثلا اگه TextView باشه متنشو) مشخص می‌کنیم و تابع مورد نظر اون View رو صدا می‌زنیم .نکته : برای استفاده از Compose (در تاریخی که این مقاله نوشته شده) باید نسخه Canary رو نصب کنید . در حین نصب این نسخه اگه به مشکل خوردید دو تا کار رو انجام بدید ، یکی JDK ورژن 11 رو نصب کنید و این JDK رو بهش بدید و مساله دیگه اینکه خودش بهتون میگه Gradle رو آپدیت کنیداین توابع با انوتیشن Composable مشخص می‌شن ، برای شروع یک پروژه خالی بسازید با یک اکتیویتی ساده ، حالا می‌خوایم یک TextView بندازیم توش ، به جای اینکه از setContentView استفاده کنیم و بهش layout پاس بدیم می‌آییم از تابع setContent استفاده می‌کنیم : https://gist.github.com/sasssass/f8f7a9c4ee17554f35673299ec695a25 حالا فرض کنید به صورت مستقیم نمی‌خوایم Text رو ایجاد کنیم بلکه با یک تابع واسطه قراره این کار رو بکنیم ، توابعی که برای ما عملیات ایجاد View رو در این ابزار انجام می‌دن با انوتیشنِ Composable مشخص می‌شن (اگه خودِ Text رو هم تعریفش رو داخل کتابخونه ببینید ، این انوتیشن رو داره) ، فرضا یک تابع می‌نویسیم که همین Hello World رو برامون چاپ کنه ، رو نمایش بده ، اما یک مساله دیگه رو هم بهش اضافه می‌کنیم ، فرض کنید نمی‌خوایم Run بگیریم تا خروجی رو ببینم و می‌خوایم یک Preview از قضیه رو کنار کد داشته باشیم ، برای این کار باید اون تابع رو با انوتیشن Preview مشخص کنیم : https://gist.github.com/sasssass/50a4fbd28a68c47c76be13637e96b986 و حالا کنار کدهامون این قسمت رو داریم :به ترتیبی که شما توابع Composable رو صدا بزنید به همون ترتیب لایه بندی تون انجام میشه ، یعنی اگه تابع B درون تابع A صدا زده بشه پس layout تابع B فرزند layout تابع A میشه ، نکته دیگه در مورد Arrange کردن View هاست ، فرضا سه Text پشت هم بنویسیم : https://gist.github.com/sasssass/b5c95d016878ebdaba22fddbb087ea50 خروجی بسیار کثیف خواهد شد :پس باید به نوعی ترتیب قرارگیری عناصر رو هم مشخص کرد ، با استفاده از تابع Column میشه View ها رو به ترتیب از بالا به پایین چید ، کمی کد رو کامل تر کنیم ، فرض کنید قصد دارید style ای هم بهش بدید ، مثلا یک padding ، همین طور فرض کنید نمی‌خوایم همش Text باشه ، می‌آییم یک Image هم اضافه می‌‎کنیم (ورودی اون خودش تابع imageResource خواهد بود) ، برای دادن style ها باید در ورودی توابع Composable مقادیری که می‌خواهیم رو مشخص کنیم : https://gist.github.com/sasssass/8c3907fc904ab852ecf0d738e79747f2 و خروجی :همچنین برای مقادیری مثل فونت ، سایز و … می‌تونید به تعریف تابع مورد نظرتون رجوع کنید ، مثلا اگه تعریف تابع Text رو ببینیم :حالا فرضا می‌خوایم رنگش رو آبی کنیم و یک پدینگ به خودِ Text هم بدیم ، همین طور می‌خوایم به عکسمون یک ارتفاع ثابت بدیم و ScaleType ش رو هم تغییر بدیم : https://gist.github.com/sasssass/e7cea332a66f1ae749d206e58015afd5 و خروجی :یادآوری : بالاتر گفتیم که برای style دادن از modifier استفاده می‌کنیم ، پس مسائلی مثل ارتفاع ، عرض ، پدینگ و … رو با این ابزار تغییر می‌دیمابزار Compose از قواعد متریال دیزاین پشتیبانی می‌کنه ، فرض کنید عکس بالا رو می‌خوایم دورش رو یه radius بندازیم ، تو xml من این کار رو با CardView انجام می‌دادم ولی اینجا با modifier و تابع clip : https://gist.github.com/sasssass/356cff09159da1bc72275765132c32d5 که خروجی ما میشه :همچنین برای style دادن به متون هم ویژگی های جالبی داره (تقریبا شاید اینجاها متوجه مزیت‌های Compose به XML بشید) : https://gist.github.com/sasssass/5de1bb15ff0fb857ab266da9252c8488 و خروجی به شکل زیبا و راحت به این صورت میشه :نکته : header از 1 تا 6 و body مقدار 1 و 2 می‌تونه باشهخب ، تو این مقاله یک ایده کلی از قضیه گرفتید ، در مقاله‌های سری بعد از این مجموعه ابزار Compose رو با تفضیل بیشتر و جزء به جزء تر بررسی می‌کنیم .من رو در لینکدین ، اینستاگرام و یوتیوب دنبال کنید 😊😊😊اگه دوست داشتید می‌تونید به صفحه Spotify و SoundCloud بنده هم برید و موسیقی های منو گوش بدید 😊😊😊

Author: admin

دیدگاهتان را بنویسید

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