آموزش Jetpack Compose در اندروید به زبان کاتلین |جت پک کامپوز در اندروید

Jetpack Compose دراندروید یک کتابخانه‌ی UI تحت کاتلین برای توسعه‌ی اپلیکیشن‌های اندروید است که توسط شرکت گوگل توسعه داده شده است. این کتابخانه قابلیت‌هایی برای ساخت UI های شیءگرا و دایرکت بر روی کامپوننت‌ها را فراهم می‌کند. و از XML استفاده نمی‌کند.  کد Compose برای توصیف و ترسیم UI استفاده می‌شود. این روش این امکان را به توسعه‌دهندگان می‌دهد تا کدهای قابل خواندن‌تر و قابل توسعه‌تری را برای ساخت UI های اندروید ایجاد کنند. همچنین Jetpack Compose در اندروید از ویژگی‌هایی مانند hot-reloading و previewing نیز پشتیبانی می‌کند که به توسعه‌دهندگان کمک می‌کند که بتوانند به سرعت تغییرات خود را در UI را مشاهده کنند.

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

Jetpack Compose دراندروید چیست ؟

Jetpack Compose  یک UI Toolkit مدرن است .که اخیرا توسط گوگل راه اندازی شده است و برای ایجاد رابط کاربری بومی اندروید استفاده می شود. توسعه UI را با کد کمتر، Kotlin API و ابزارهای قدرتمند ساده و تسریع می کند.

مزایای jetpack compose در اندروید

از جمله مزایای Jetpack Compose :

Declarative:   شما به راحتی میتوانید  اجزای رابط کاربری خود را با فراخوانی برخی از توابع از پیش تعریف شده توصیف کنید
سازگار: سازگاری بالایی با View های اندروید ای دارد .
افزایش سرعت توسعه: قبل ها  توسعه دهندگان باید روی فایل XML و فایل Kotlin کار میکردند . ولی با کمک jetpack compose این کار آسان می شود و توسعه دهندگان فقط باید روی فایل های Kotlin کار کنند، به همین دلیل به توسعه دهندگان در افزایش سرعت توسعه کمک می کند.
مختصر و اصطلاحی :    Jetpack Compose رابط کاربری را با مزایایی که Kotlin به ارمغان می آورد ساخته است.
نگهداری آسان: به عنوان پایگاه کد هر برنامه کاربردی در یک فایل واحد وجود دارد. و مدیریت کد برنامه آسان می شود
نوشته شده در  کاتلین: برنامه ای که با استفاده از jetpack compose نوشته شده است .از 100% زبان برنامه نویسی Kotlin استفاده می کند.

مشکلاتی که با آمدن جت پک کامپوز رفع شده است ؟

هنگام نوشتن کد، ما روش های زیادی برای رسیدن به هدف های مختلف انتخاب می کنیم. و بعد از این کار ، این روش ها  را با توجه به نیاز خود در تابع اصلی خود مطابقت میدهیم . در اندروید هنگام ساخت هر نوع View  ای و تنظیم داده ها به آن ویو . اول از همه، ما آن view را با یک متغیر مقداردهی اولیه می کنیم و سپس داده ها را به آن ویو خاص اضافه می کنیم. این فرآیند اتصال عناصر UI با  View Model را Coupling  میگویند. وقتی کد ما تعداد زیادی Coupling  دارد، حفظ این کد دشوار می شود. بنابراین کوپلینگ می‌تواند گاهی اوقات به شما خطاهای Null Reference بدهد.

اگر ترجیح دهید از کاتلین برای نوشتن Component های  رابط کاربری خود و برای افزودن عملکرد استفاده کنیم، حفظ کدمان آسان تر خواهد شد. با استفاده از این روش تعداد کوپلینگ های داخل کد ما نیز کاهش می یابد.

مفاهیم اولیه در یادگیری جت پک کامپوز دراندروید

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

Box :

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

  Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color.Cyan)

        ) {

            }

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

Column ,Row:

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

            Column(horizontalAlignment
            = Alignment.CenterHorizontally
            ,modifier = Modifier.fillMaxSize()) {

            }
            Row(verticalAlignment = Alignment.CenterVertically
                ,modifier = Modifier.fillMaxSize()){
                
            }

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

Button :

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

Button(onClick = {
                  
                },modifier = Modifier.height(150.dp)
                    .width(50.dp).background(Color.Red)) {

                    Text(text = "Button1")
                }

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

Spacer :

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

Spacer(modifier = Modifier.height(30.dp))

Image :

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

Image(
                painter = painterResource(id = R.drawable.lab2),
                contentDescription = "Imagelaptop",
                Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .padding(16.dp)
                    .clip(RoundedCornerShape(10f))
            )

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

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

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

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

 Image(
                painter = painterResource(id = R.drawable.ic_baseline_laptop_mac_24),
                contentDescription = "Compute_svg",
                Modifier
                    .height(50.dp)
                    .width(50.dp)
                    .clip(RoundedCornerShape(10f))
                    .padding(5.dp)

            )

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

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

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

 implementation 'com.google.accompanist:accompanist-coil:0.12.0'

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

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

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

 val painter = rememberCoilPainter("https://picsum.photos/400/400")
            Image(
                painter = painter, contentDescription = "loadimage",
                modifier = Modifier.fillMaxWidth().height(400.dp)
                    .background(color = Color.DarkGray)
                    .clip(RoundedCornerShape(10f))
                    .padding(5.dp)
            )

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