آموزش Jetpack Compose در اندروید استودیو

سلام خدمت عزیزان کدایت ، امروز قصد داریم مفاهیم ابتدایی Jetpack Compose دراندروید را برای شما آموزش دهیم . ما مباحث  قبلی کلیاتی از جت پک کامپوز را برای شما عزیزان ارائه کردیم . امروز قصد داریم یکسری مفاهیم اولیه از جت پک در اندروید را برای شما آموزش دهیم .

مفاهیم اولیه در یادگیری Jetpack Compose دراندروید

امروز قصد دارم مفاهیم اولیه در رابطه با تکنولوژی جت پک کامپوز در اندروید را برای شما عزیزان آموزش دهیم . همانطور که میدانید ما در Jetpack Compose دراندروید UI یا همان رابط کاربری خودمون را در قسمت مربوط به کد های جاوا کد نویسی میکنیم . و مانند روش قبل از لایه XML برای طراحی خودمون استفاده نمیکنیم . این کار مزایای برای برنامه نویس اندروید دارد که همه ی آن ها را در مقاله جت پک کامپوز  خدمت شما عزیزان توضیح دادیم . از جمله یکی از مزایای این تکنولوژی کاهش بسیار چشم گیر مشکلات زمان خروجی گرفتن از برنامه میباشد . امروز بریم تا یکسری مفاهیم اولیه را یاد بگیریم .

Box :

همانطور که شما برنامه نویسان اندروید رویداد های رابط کاربری خودتون را طراحی میکنید در باید برای صفحه خود یک کادر درست کنید که ما درJetpack Compose دراندروید از Box ها استفاده میکنیم و میتوانیم برای هر کدام یک ارتفاع و عرض مشخصی قرار دهیم . و همچنین میتوانیم برای Box خودمون Background و بسیاری از کار های انجام دهیم . من برای اینکه بهتر یاد بگیرید نمونه کد های هم برای شما تهیه کردم . به عنوان مثال :

ما در نمونه کد بالا با استفاده از متد Modifier برای Box خودمون یک ارتفاع به اندازه 100 و همچنین با متد fillMaxWidth کلیه عرض را گرفتیم و همچنین رنگی دلخواه برای پس زمینه انتخاب کردیم  . ما همچنین میتوانستیم برای Box خودمون Padding , border و بسیار متد های دیگر نیز استفاده کنیم ولی برای آشنایی شما تا همین مقدار کافی دانستیم . و همچنین در  آکولاد های باز و بسته ای که مشاهده میکنید برای Box خودمون هر چیزی که مورد نیازمون هست مانند یه Text یا BUtton ,… قرار میدهیم .

Column ,Row:

ما برای نحوی چینش عناصر صفحه ی خودمون از Column یعنی اینکه این عناصر به صورت یک ستون و از Row نیز برای زمانی که بخواهیم عناصر صفحه ی خودمون را به صورت یک ردیف استفاده میکنیم . و به عنوان مثال :

ما در بخش با استفاده از Column یک چینش ستونی برای رویداد های خودمون انتخاب کردیم و همچنین گفتم که محتوای داخل Column در مرکز قرار گیرند و این با استفاده Modifier یک سایز حداکثر را انتخاب کردیم و Row نیز برای زمانی میباشد که بخواهیم محتوای ما در یک ردیف قرار بگیرند .

Button :

ایجاد دکمه در جت پک بسیار آسان هست به عنوان مثال :

در مثال بالا ما در قسمت onClick زمانی که رویداد کلیک انجام میشود عملیات مورد نظرمون انجام میشود . و با کمک Modifier برای Button خودمون ارتفاع و عرض و همچنین background انتخاب کردیم و در داخل Text که مشاهده میکنید برای نام دکمه ما میباشد .

Spacer :

برای ایجاد فاصله از Spacer استفاده میکنیم و در داخل آن میتوانیم میزان ارتفاعی که مورد نظرمون هست را قرار می دهیم

Image :

برای قرار دادن تصویر از متد Image استفاده میکنیم . پارامتر های که در این متد استفاده میشود . زیاد هستن ولی اولین پارامتر مربوط به painterResource  میباشد . که  باید تصویر خودمون رو مشخص میکنیم . پارامتر بعدی مربوط به توضیحاتی در بابت تصویر میباشد . و در مرحله بعد میتوانیم با کمک Modifier برای تصویرمون طول و عرض مشخص کنیم .  و همچنین میتوانیم با کمک متد  clip حاشیه تصاویرمون رو گرد میکنیم ورودی آن هم برحسب درصد میباشد. مثلا 10 درصد حاشیه آن را گرد کند . به مانند کد زیر :

ما در کد های بالا تونستیم یک عکس از پوشه drawable  انتخاب کنیم و یکسری تغییرات به روی آن اعمال کنیم . و به نمایش در بیاریم .این قالب نمایش تصاویر BItmap میباشد .  نمایش تصاویر SVG یا همون ویکتور نیز  تقریبا ما کد های بالا هستش و اما لازم هست که بدانید تصاویر ویکتور یا همان SVG تفاوتی که با تصاویر Bitmap دارند این هست که با افزایش سایز تصاویر Bitmap میزان کیفیت آن کاهش پیدا میکند ولی در تصاویر SVG اینگونه نمیباشد و کیفیت هیچ تغییری نمیکند .

و همچنین نکته دیگر این هست که ما باید تصاویر SVG را ایمپورت کنیم برای مثال در اندروید استودیو خودتون به مسیر File/New/Vector Asset  بروید و مانند تصویر زیر از قسمت Clip Art تصویر vector موردنظرتون را انتخاب کنید و نام دلخواه خودتون را روی آن قرار دهید . بعد از انتخاب آن این تصویر در پوشه Drawable ذخیره میشود .

تصاویر Vector

انتخاب تصاویر Vector در اندروید استودیو

 

و شما میتوانید مانند مثال زیر از آن استفاده کنید .

 

گرفتن تصویر از  شبکه درجت پک کامپوز اندروید چگونه میباشد ؟

واما یک قسمت بسیار مهم در مبحث تصاویر در Jetpack Compose دراندروید این هست که ممکن هست شما عزیزان نیاز داشته باشد که یکسری تصاویر از اینترنت و از یک URL دریافت کنید . برای این کار من به شما پیشنهاد میکنم که از کتابخانه Coil  استفاده کنید .این کتابخانه یکی از بهترین و همچنین بروز ترین کتابخانه در زمینه نمایش تصاویر از شبکه یا همان اینترنت به کمک یک URL میباشد . این کتابخانه زیر مجموعه ای از کتابخانه های Accompanist که درواقع نقش مکمل کتابخانه های جت پک کامپوز را دارد میباشد .

ابتدا ما باید کتابخانه Coil را به اندروید استودیو اضافه کنیم . برای اینکار در قسمت build.gradle(Module) و در  بخشdependencies کتابخانه زیر را اضافه کنید .

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

مجوز دسترسی به اینترنت

دریافت مجوز دسترسی به اینترنت در اندروید استودیو

بعد از این کار مانند کد زیر و با استفاده از URL موردنظرمون تصویر خودمون را به نمایش قرار میدهیم .

همانطور که مشاهده میکنید ما تونستیم با rememberCoilPainter تصویر مورد نظرمون که در آن URL بود را دریافت کنیم و به نمایش گذاریم.

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 6 میانگین: 5]
اشتراک‌گذاری

برنامه نویس موبایل، علاقه مند به سئو و وردپرس و تولید محتوا در زمینه برنامه نویسی اندروید

یک نظر

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

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