آموزش کار با Jetpack Compose در اندروید

در این آموزش یاد می گیرید که چگونه از  UI Framework جدید ، Jetpack Compose  که توسط تیم برنامه نویسی اندروید مانند کتاب آموزش آشپزی توسعه یافته است چگونه استفاده کنید.

نوآوری توسعه نرم افزار تلفن همراه ، اغلب در فراز و نشیب هایی بوده. این که آیا روند فعلی مربوط به ایمنی و پایداری زبان یا بهبود عملکرد پلتفرم است و همیشه مهم است که از trend ها پیروی کنیم ، زیرا برخی از آنها نحوه توسعه برنامه ها را به طور اساسی تغییر می دهد. یکی دو سال گذشته همه چیز در مورد ایجاد برنامه نویسی واکنش گرا منطق تجاری برنامه ها بوده است.

این بدان معناست که مردم از روش کلاسیک MVC/P (Model-View- Controller/Presenter) به روشی دیگر مانند MVVM (Model-View-ViewModel) که شما data streams ها را درون ViewModel به روز رسانی می کنید و UI با تغییر دوباره یا به روز رسانی بخش های رابط کاربری ((UI به تغییر واکنش نشان می دهد. این تغییر به این دلیل اتفاق افتاده است که برنامه نویسی اعلانی (declarative) کمتر مستعد خطا ، راحت تر آزمایش می شود زیرا بیشتر با مقادیر داده ها کار می کنید تا تعاملات.

MVVM با JetPack

با چنین روندی ، طبیعی است که ایجاد فریم ورک های (frameworks) رابط کاربری و ابزارهای اعلان ( declarative) کننده رابط کاربری به این سمت تغییر کرده باشد. مجموعه ابزارها و  فریمورک هایی (framework)  مانند React.js و Flutter روز به روز محبوبیت بیشتری پیدا کرده اند و این باعث شده است که سایر سیستم عامل ها با استفاده از همین رویکرد پیاده سازی شوند.

در Google I/O 2019  ، گوگل ابتدا Jetpack Compose را معرفی کرد. Jetpack Compose پاسخ گوگل به روند فریم ورک رابط کاربری (UI framework) اعلامی (declarative) است ، که تیم اندروید در حال توسعه آن است تا نحوه ایجاد رابط کاربری (UI) توسعه دهندگان را به طور اساسی تغییر دهد که کدها را آسان تر و سریع تر بنویسند که باعث می شود سرعت اجرا را بیشتر شود . این بخشی از مجموعه کتابخانه های Jetpack است و به همین دلیل باید با نسخه های پلتفرم سازگاری داشته باشد و نیازی به اجتناب از برخی ویژگی ها را ندارد زیرا از دستگاه های رده پایین یا نسخه های قدیمی تر Android را پشتیبانی می کند.

اگرچه هنوز Compose تازه معرفی شده است ، Compose در حال حاضر موج بزرگی را در جامعه اندرویدی ایجاد کرده است. اگر می خواهید از آخرین و جدیدترین خبر های فناوری به روز باشید ، ادامه مطلب را بخوانید!

در این آموزش ، شما با مفاهیم اولیه Jetpack Compose ، مانند توابع ترکیب پذیر (composable functions) ، تنظیم محتوا روی صفحه و به روز رسانی محتوا آشنا خواهید شد. پس از تسلط بر اصول اولیه ، می توانید از Jetpack Compose برای ساخت یک برنامه کتاب آشپزی استفاده کنید ، که یک فهرست مواد غذایی با طراحی مواد , با کارت‌ها , تصاویر و متن را نشان می‌دهد.

نکته : Compose به دلیل اینکه تازه معرفی شده است . نباید از آن در برنامه های درحال تولید استفاده کنید ، زیرا ممکن است کد تان بعدا تغییر کند و احتمالاً کد شما را خراب کند.

چرا از Jetpack Compose در ایجاد رابط کاربری استفاده بکنیم؟

قبل از نوشتن اولین برنامه خود با Compose ، توجه کنید که چرا تیم اندروید این کتابخانه را نوشته است.

کامپوز سه مزیت بزرگ نسبت به ساخت UI فعلی در Android دارد.

1. اعلامی(Declarative) است :

Jetpack Compose یک فریم ورک Framework) UI) اعلان کننده (declarative) است ، به این معنی است که شما دیدگاه خود را بدون اتکا به جهش و مفاهیم برنامه‌نویسی الزامی سنتی توصیف می‌کنید.

به عنوان مثال، با استفاده از جعبه‌ابزار رابط کاربری (UI toolkit) فعلی , شما معمولا ً از یک روش مثل () findViewById  برای رسیدن به نمایشی که می‌خواهید پنهان کنید استفاده می‌کنید , سپس () setVisibility را بر روی آن فراخوانی کنید .

در یک رابط کاربری(UI) اعلانی (declarative) ، شما در عوض UI را بصورت قابل مشاهده یا نامشخص توصیف می کنید و هنگامی که می خواهید ویژگی visibility را تغییر دهید کافیست کد UI را دوباره اجرا کنید.

بنابراین دیگر پس از ایجاد View ، مرجعی از آن دریافت نمی کنید. در عوض ، فقط کدی را که View را با پارامترهای مختلف ایجاد کرده دوباره اجرا کنید.

نکته : وقتی چیزی را به روزرسانی می کنید ،  Composeدر واقع کل نمای آن را بازسازی نمی کند. چون به اندازه کافی هوشمند است که فقط قسمتی را که باید تغییر کند را تغییر دهد.

2. مستقل است :

Compose کتابخانه ای است که به سیستم عامل وابسته نیست. این یک مزیت بزرگ برای برنامه نویسان است.

در حال حاضر ، اگر گوگل بخواهد کامپوننت(component)LinearLayout  را به روز رسانی کند ، باید نسخه جدیدی از سیستم عامل را منتشر کند. متأسفانه ، مسائل مربوط به fragmentation مانع استفاده بسیاری از افراد از آخرین نسخه های اندروید می شود.

این به این معنی است که تا سالها پس از انتشار و ارتقاء سطح علمی بیشتر افراد ، نمی توانید به دسترسی کاربران به ویژگی های جدید مجموعه ابزار واسط کاربری ( UI toolkit ) فعلی اعتماد کنید.

با Jetpack Compose ، توسعه دهندگان می توانند ویژگی های جدیدی را بدون تغییر نسخه سیستم عامل اضافه کنند. یعنی بدون در نظر گرفتن سیستم عامل دستگاه کاربر ، می توانید تغییرات را ایجاد وبه آن اعتماد کنید.

علاوه بر این ، برخلاف component LinearLayout ، انتشار نسخه های جدید Jetpack Compose برنامه های موجود را خراب نمی کند ، زیرا مگر اینکه بخواهید مجبور به ارتقاء به نسخه جدیدتر Jetpack Compose باشید . همچنین از مجموعه ابزار رابط کاربری (UI toolkit) موجود از اندروید استفاده نمی کند ، بنابراین یک شروع تازه است ، که فرصتی را برای رفع برخی از مشکلات قدیمی سلسله مراتب View رافراهم می کند. در حالی که به محض ارتقاء به نسخه جدید اندروید ، component LinearLayout ، که بخشی از سیستم عامل است ، نیز ارتقا یافته است و ممکن است تغییرات فاحشی در برنامه های وابسته به آن ایجاد شود.

3. ترکیب پذیر است (Composable) :

کتابخانه Compose به گونه ای ساخته شده است که می توانید رابط کاربری ((UI خود را در اجزای کوچک و قابل استفاده مجدد و نه در سطح Fragment یا Activity بسازید. این ترکیب پذیری (composability) ، باعث استفاده مجدد و افزایش خوانایی کد می شود.

اندروید بیش از ده سال است که فعال است و کد ایجاد رابط کاربری آن سن خود را نشان می دهد. کلاس View به تنهایی شامل بیش از ده هزار خط کد است! این تعداد کد زیاد قدیمی برای پشتیبانی است.

– برای شروع Jetpack Compose :

برای بهترین تجربه توسعه با Jetpack Compose ، باید آخرین نسخه Canary Android Studio Preview را بارگیری کنید. دلیل این امر این است که وقتی از Android Studio برای توسعه برنامه خود با Jetpack Compose استفاده می کنید ، می توانید از ویژگی های ویرایشگر هوشمند مانند الگوهای پروژه جدید و قابلیت پیش نمایش فوری رابط کاربری (UI) نوشتن خود بهره مند شوید. شما دو انتخاب دارید: Android Studio موجود خود را به نسخه Canary ارتقا دهید یا نسخه Canary را دانلود کنید.

برای تعویض به کانال Canary برای به روز رسانی‌ها، به باکس Check for Updates بروید و روی Configure در گوشه سمت چپ دیالوگ باکس کلیک کنید.

در مرحله بعد ، در قسمت پیکربندی صفحه تنظیمات ، کانال Canary را انتخاب کنید.

روی OK کلیک کنید و دوباره Check for Updates را بزنید. پیغامی برای نصب نسخه Canary Android Studio مشاهده خواهید کرد.

نسخه جدید را نصب کنید. می دانید که از نسخه Canary استفاده می کنید زیرا آیکون Android Studio زرد است.

اکنون که Android Studio نسخه Canary را نصب کرده اید ، وقت آن است که وارد Jetpack Compose شوید!

– راه اندازی و اجرا با Jetpack Compose :

یک پروژه بسازید و آن را در نسخه Canary Android Studio خود اجراکنید.

سپس یک صفحه سفید سفید با متن Hello World مشاهده خواهید کرد.

حالا فایل app/build.gradle را باز کرده و به قسمت dependencies نگاه کنید. چهار dependency جالب را مشاهده خواهید کرد:

def composeVersion = "1.0.0-alpha06"
...
implementation "androidx.compose.ui:ui:$composeVersion"
implementation "androidx.compose.foundation:foundation:$composeVersion"
implementation "androidx.ui:ui-tooling:$composeVersion"
implementation "androidx.compose.material:material:$composeVersion"

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

علاوه بر این وابستگی ها ، می توانید ببینید که Compose ، True  ست شده است در buildfeatures در بلاک  android  :

buildFeatures {
  compose true
}

اکنون که یاد گرفته اید برای پروژه اولیه Jetpack Compose به چه وابستگی هایی نیاز دارید ، می توانید دست به کار شوید.

– توضیحات بیشتر در مورد JetPack Compose :

از آنجا که Jetpack Compose یک روش برنامه نویسی برای ایجاد رابط کاربری قرار می دهد ، از هیچ XML استفاده نخواهید کرد. این به این معنی است که شما دیگر از متد () setContentView در کدتان استفاده نخواهید کرد ، در عوض از متد () setContent برای تنظیم رابط کاربری خود استفاده خواهید کرد.

برای انجام این کار ، MainActivity.kt را باز کرده و  به جای متد () setContentView عبارت زیر راجایگزین کنید:

setContent {
  Text("Hello, World!")
}

اطمینان حاصل کنید که وابستگی ها از پکیج androidx.compose وارد شده باشد.() setContent یک متد Kotlin در Activity است که یک @Composable را به عنوان پارامتر از نوع lambda  در نظر می گیرد. بعداً بیشتر با معنی@Composable آشنا خواهید شد.

علاوه بر متد setContent ()، متد دیگری در قطعه کد بالا وجود دارد: متد ()   Text.

در Jetpack Compose ، از روش هایی استفاده می کنید که با حاشیه نویسیComposable@ مشخص شده اند تا رابط کاربری خود را بسازید. اگر Command-Click روی Mac یا Control-click روی Windows را برروی متد () Text  را فشار دهید ، چیزی شبیه به این را مشاهده خواهید کرد:

@Composable
fun Text(
    ...
)

()Text در واقع متدی است که با حاشیه نویسیComposable مشخص شده است. حدس زده اید که

متد  Composable  Text() وظیفه ترسیم متن روی صفحه را بر عهده دارد. شما می توانید آن را به عنوان TextView  نسخه Compose در نظر بگیرید.

نکته : به طور معمول هنگام نامگذاری متد ها از روش camelCase استفاده می کنید. با این حال ، هنگام ایجاد composables ، نام متد را بزرگ می کنید ، بنابراین واضح است که در حال ساخت نمونه ای از composable هستید. مشابه نحوه عملکرد ویجت های Flutter یا عملکردهای Kotlin Coroutine مانند متد  ()Job  نامگذاری شده است.

دوبارهBuild  و Run کنید و  ()Text  را روی صفحه خواهید دید!

می توانید متن خود را با استفاده از TextStyle سفارشی (customize ) کنید. با جایگزین کردن ()Text

زیر ، آن را امتحان کنید:

Text ("Hello, World!", style = TextStyle(color = Color.Red))

بار دیگر ، بسته های مناسب androidx.ui را  importکنید.

دوبارهBuild  و Run کنید و خواهید دید که متن اکنون قرمز شده است.

هنگام استفاده از Jetpack Compose ، برای سفارشی (customize) سازی رابط کاربری () خود به جای استایل ها و ویژگی های XML از آرگومان های معمولی کد و متد Kotlin استفاده می کنید. شما در قسمت بعدی خود را در این مورد امتحان خواهید کرد.

ایجاد یک متد Composable

یکی از مهم ترین مزایای Jetpack Compose این است که شما رابط کاربری(UI ) خود را به صورت Modular  با تعداد زیادی عملکرد کوچک و استفاده نکردن از یک فایل XML برای هر Activity می سازید.

اکنون که با () Text آشنا شدید ، می توانید اولین متد Composable@ ایجاد کنید.

متد زیر را در زیر MainActivity اضافه کنید:

@Composable
fun Greeting() {
  Text("Hello, World!", style = TextStyle(color = Color.Red))
}

تبریک می گوییم ، شما تازه اولین Composable سفارشی خود را ایجاد کرده اید!

برای استفاده از آن ، فراخوانی ()Text در () setContent را با فراخوانی به () Greeting جایگزین کنید:

setContent {
  Greeting()
}

و زمانی کد را اجرا می کنید. مانند گذشته ، متن قرمز خیره کننده خود را خواهید دید!

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

با این حال ، یک نکته را باید در نظر داشت که شما فقط می توانید یک تابع Composable@ را از داخل یک تابع دیگرComposable@ فراخوانی کنید. در غیر این صورت ، برنامه شما به مشکل بر می خورد.

این شبیه به Kotlin Coroutines است ، جایی که فقط می توانید توابع تعلیق شده را از سایر توابع تعلیق شده یا coroutines فراخوانی کنید.

پیش نمایش یک Composable

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

Jetpack Compose دارای یک ابزار مشابه است.

اضافه کردن Preview@ در زیر @Composable و روی Greeting@ که قبلا تعریف کردید:

@Composable
@Preview
fun Greeting() {
  Text("Hello, World!", style = TextStyle(color = Color.Red))
}

پس از وارد کردن حاشیه نویسی ها (annotation) ، پیش نمایش Composable ها را در سمت راست صفحه مشاهده خواهید کرد.

هر بار که Composable را در پیش نمایش به روز رسانی می کنید ، برای مشاهده نمای به روز شده باید پروژه را یک بار build  کنید. فقط شما می توانید Composable هایی را که هیچ استدلالی ندارند ، در پیش نمایش ، نمایش دهید.

اکنون که می توانید اجزای (components) خود را در پیش نمایش ، نمایش دهید ، وقت آن است که نحوه کار با layout ها را بیاموزید.

استفاده از Composable در بیرون از  Composable دیگر:

داشتن تنها یک متن روی صفحه برنامه قابل توجه نیست . با این حال ، داشتن سه متن روی صفحه باید یک تجربه کاملاً جذاب را ایجاد کند! :]

برای نمایش سه متن () Text در () Greeting باید 3 بار متد Text() فراخوانی کنید :

Text("Hello, World!", style = TextStyle(color = Color.Red))
Text("Hello, Second World!", style = TextStyle(color = Color.Red))
Text("Hello, Third World!", style = TextStyle(color = Color.Red))

به نظر شما این ترکیب Composable چگونه به نظر می رسد؟ برنامه را دوباره اجرا کنید و در پنجره پیش نمایش نگاهی بی اندازید تا ببینید آیا نتایج با انتظارات شما مطابقت دارد یا خیر.

هیچ چیزی موقعیت قرارگیری کنترل های Text را کنترل نمی کند ، بنابراین همه آنها طوری روی هم قرار می گیرند که انگار در FrameLayout نمایش داده می شوند . خوشبختانه ، Jetpack Compose مجموعه بزرگی از Composable های Layout را ارائه می دهد.

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

استفاده از Column Composable

یک ستون را به عنوان یک LinearLayout با جهت عمودی در نظر بگیرید. به سادگی تمام ترکیبات فرزند خود را در یک ستون عمودی قرار می دهد.

متد ()Greeting  را برای قرار دادن سه () Text در یک ()Column به روزرسانی کنید:

@Composable
@Preview
fun Greeting() {
  Column {
    Text("Hello, World!", style = TextStyle(color = Color.Red))
    Text("Hello, Second World!", style = TextStyle(color = Color.Red))
    Text("Hello, Third World!", style = TextStyle(color = Color.Red))
  }
}

()Column  یک بلاک lambdaComposable می گیرد ، جایی که شما فرزندان Column را اعلام (declare ) می کنید.

در Greeting ( ) , شما سه کلاس را به عنوان این ستون‌ها اضافه می‌کنید . این الگو داشتن تابع composable یک lambda برای ایجاد توابع composable دیگر در jetpack Compose مشترک است . حتی ممکن است بگویید این چیزی است که کل ایده از آن تشکیل شده‌است .

برنامه را دوباره اجرا کنید و خواهید دید که اکنون سه متن را در یک ستون عمودی قرار داده اید. خیلی بهتر!

علاوه بر ()Column  ، می توانید از () Row  برای نمایش دادن متن ها  در یک ردیف افقی استفاده کنید. این شبیه به یک LinearLayout با جهت افقی است.

به جای ساختن متن های قرمز ساده ، می خواهید یک برنامه آشپزی به نام ComposableCookBook بسازید که لیستی از دستور العمل های خوشمزه را نمایش می دهد. این پروژه دارای یک دستور العمل از پیش تعریف شده است:

data class Recipe(
  @DrawableRes val imageResource: Int,
  val title: String,
  val ingredients: List<String>
)

طرز تهیه یک تصویر , یک لیستی از مواد اولیه است . این برنامه همچنین دارای لیست پیش فرض دستور العمل ها در Recipes.kt است. از این لیست دستور العمل ها برای ساختن برنامه کتاب آشپزی خود استفاده خواهید کرد.

ایجاد دستور العمل Composable

هدف شما این است که از Jetpack Compose استفاده کنید تا دستور العمل های برنامه ComposeCookbook بهتر به نظر برسد ، با ایجاد یک UI که هر دستور غذا را در یک کارت با تصویر دستور در بالای کارت و لیستی از مواد زیر آن نشان می دهد.

اولین قدم شما ایجاد یک composable  است که دستور العمل فردی را نشان می دهد .

روی بسته ComposableCookBook راست کلیک کرده و New -> New Kotlin File/Class را انتخاب کنید. سپس File را از لیست انتخاب کرده و نام RecipeCard را تایپ کنید. در نهایت ، به روش Composable ،() RecipeCard  را که در زیر نشان داده شده است ، اضافه کنید:

@Composable
fun RecipeCard(recipe: Recipe) {
  Text(recipe.title)
}

در حال حاضر ، این فقط عنوان دستور غذا را با استفاده از () Text نشان می دهد.

از آنجا که() RecipeCard  یک پارامتر می گیرد ، نمی توانید از Preview@ استفاده کنید. با این حال ، می توانید یک روش ترکیبی (Composable) دیگر ایجاد کنید که یک ()RecipeCard پیش فرض  را ارائه می دهد را اضافه کنید:

@Composable
@Preview
fun DefaultRecipeCard() {
  RecipeCard(defaultRecipes[0])
}

اکنون می توانید ()RecipeCard  را پیش نمایش کنید.

در مرحله بعد ، شما تصویری را به () RecipeCard ، بالای عنوان اضافه می کنید.

افزودن تصویر به RecipeCard

محتوای () RecipeCard را با موارد زیر جایگزین کنید:

// 1
val image = imageResource(recipe.imageResource)
// 2
Column(modifier = Modifier.fillMaxWidth()) {
  // 3
  Image(asset = image, contentScale = ContentScale.Crop, modifier = Modifier.fillMaxWidth().height(144.dp))
  Text(recipe.title)
}

اطمینان حاصل کنید که همه توابعی را که ممکن است به عنوان مرجع ناشناخته شده به رنگ قرمز علامت گذاری شوند را وارد کنید.انگار برای چنین تکه کد کوچکی ،جادویی رخ داده! سپس در صورت نیاز قسمت پیش نمایش (preview) را بازخوانی (refresh) کنید.

در اینجا یک تفکیک وجود دارد:

1. هر دستور غذا دارای یک منبع تصویر است که به Drawable اشاره می کند. به طور معمول ، می توانید drawable را روی ImageView تنظیم کنید یا از Context برای دریافت نمونه Drawable استفاده کنید.

در Jetpack Compose ، از مکانیسم متفاوتی برای بدست آوردن تصویر استفاده می کند. این خط به Jetpack Compose می گوید که یک تصویر را با استفاده از یک شناسه (id) از منبع drawable دریافت کند.

2. در مرحله بعد ، از  Column @Composable که قبلاً یاد گرفته اید استفاده می کنید تا محتویات کارت دستور خود را در یک طرح عمودی قرار دهید. در حالت ایده آل ، تصاویر مرتبط با دستور غذا باید عرض تصویر به صورت کامل باشند ، بنابراین از یک اصلاح کننده (Modifiers) استفاده می کنیم تا به این ستون بگوییم تا عرض تصویر را به صورت کامل درآور.

اصلاح کننده ها (Modifiers)  به شما امکان می دهند که رابط کاربری (UI) یک کامپوزیت را تنظیم کنید. در غیر از این سناریو ، شما از یک اصلاح کننده (Modifiers)  برای کنترل اندازه ستون استفاده می کنید.

می توانید از اصلاح کننده ها (Modifiers)  در موارد بیشتری استفاده کنید ، از جمله تغییر اندازه ی composable ها یا اعمال تغییر اندازه نسبت به ابعاد.

3. در نهایت ، شما از متد() Image برای نمایش تصویر استفاده می کنید و از تصویری که در اولین مرحله بازیابی کرده عبور کردین. درست مانند کلاس ImageView که می شناسید و دوست دارید ، می توانید مقیاس محتوا ، عرض و ارتفاع یک تصویر را تنظیم کنید. برای انجام این کار ، از  Modifier)) برای تنظیم عرض و ارتفاع تصویر و argumnet contentScale برای تنظیم مقیاس محتوا استفاده می کنید.

پیش نمایش را تازه کنید و خواهید دید که  recipe cardشما شروع به شکل گرفتن می کند!

این رامن (اسم غذا) بسیار خوشمزه به نظر می رسد – اما برای پخت آن به چه موادی نیاز دارید؟ برای کار بعدی خود ، یک لیست مواد غذایی تشکیل  دهید.

فهرست بندی مواد تشکیل دهنده

برای فهرست بندی مواد غذایی تشکیل دهنده ، از ()Text خود استفاده می کنید. از آنجا که قبلاً () Column را در مرحله قبل تعریف کرده اید ، افزودن اجزای آن آسان خواهد بود.

متن زیر را که عنوان دستور غذا را کشیده است ، در زیر اضافه کنید:

for (ingredient in recipe.ingredients) {
  Text(ingredient)
}

یکی از نکات جالب در مورد Jetpack Compose این است که می توانید از کد معمولی Kotlin برای بیان جزئیات رابط کاربری (UI) کمی پیچیده تر استفاده کنید.

در کد بالا ، از یک حلقه for برای فهرست تمام اجزای Text استفاده شده است. اگر رابط کاربری (UI) را بازسازی کنید ، تمام مواد تشکیل دهنده این غذای خوشمزه را در زیر عنوان مشاهده خواهید کرد. خیلی باحاله ، درسته؟ و نیازی به تعریف RecyclerView.Adapter یا هر ViewHolders ندارید!

این رامن خوشمزه به نظر می رسد ، اما recipe card به خودی خود بسیار مربع به نظر می رسد. در مرحله بعد ، گوشه های گرد را به recipe card اضافه می کنید تا زیبا تر شود.

گرد کردن گوشه های RecipeCard

استفاده از متد ()Surface  به شما این امکان را می دهد که گوشه های آیتم مورد خود را گرد کنید. محتویات موجود ()RecipeCard را با موارد زیر جایگزین کنید:

Surface(shape = RoundedCornerShape(8.dp), elevation = 8.dp) {
  val image = imageResource(recipe.imageResource)
  Column(modifier = Modifier.fillMaxWidth()) {
    Image(asset = image, contentScale = ContentScale.Crop, modifier = Modifier.fillMaxWidth().height(144.dp))
    Text(recipe.title)
    for (ingredient in recipe.ingredients) {
      Text("• $ingredient")
    }
  }
}

Surface () رسم اشکال و ارائه ارتفاع یک جزء (component) را مدیریت می کند برای recipe card استفاده شده است از یک ()Surface  با () RoundedCornerShape و ارتفاع 8 dp.

ساختار (Build) را تازه کنید اکنون پیش نمایش باید یک کارت گرد نشان دهد!

card در حال شکل گیری است ، اما دو چیز را از دست خواهد داد : جزئی از style اصلی کامپوننت عنوان و مقداری paddingبین عناصر (elements). که در مرحله بعد به آن رسیدگی خواهید شد.

بهبود ظاهر Recipe Card

با افزودن یک style متن در داخل دستور recipe  درمتد () Text شروع کنید:

Text(recipe.title, style = MaterialTheme.typography.h4)

در اینجا ، از پارامتر style برای استایل دادن به متن هدر خود با style پیش فرض Material Theme استفاده کنید.

افزودن Padding به Recipe Card

برای افزودن Padding به Recipe Card ، عنوان و جزئیات Text () را در یک () Column دیگر و modifier زیر را به کدتان اضافه کنید:

Column(modifier = Modifier.padding(16.dp)) {
  Text(recipe.title, style = MaterialTheme.typography.h4)
  for (ingredient in recipe.ingredients) {
    Text("• $ingredient")
  }
}

علاوه بر استفاده از اصلاح کننده ها برای کنترل عرض و ارتفاع ، می توانید از آنها برای افزودن padding@ به  Composables@ های مختلف نیز استفاده کنید.

بازسازی پیش نمایش شما باید یک Recipe Card زیبا ببینید:

Recipe Card شما اکنون عالی به نظر می رسد. زمان آن فرا رسیده است که به کاربران خود این امکان را بدهید تا فهرستی از Recipe های مورد علاقه خود تهیه کنند.

ایجاد لیستی از Recipe

به طور معمول ، برای تهیه یک لیست ، باید از چیزی مانند RecyclerView استفاده کنید. در Jetpack Compose ، می توانید از LazyColumn در @Composable برای دستیابی به یک لیست پیمایشی از موارد فوری درست نمایید و مانند RecyclerView استفاده کنید.

برای شروع جمع آوری دستور العمل های لیست خود ، یکبار دیگر روی پکیج کد اصلی راست کلیک کرده و New -> New Kotlin File/Class را انتخاب کنید. سپس File را از لیست انتخاب کرده و نام RecipeList را تایپ کنید. در نهایت ، متد () RecipeList  را به فایل اضافه کنید:

@Composable
fun RecipeList(recipes: List<Recipe>) {
  LazyColumnFor(items = recipes) { item ->
    RecipeCard(item)
  }
}

اطمینان حاصل کنید که reference های از دست رفته را import کنید. LazyColumn لیستی از موارد و یک lambdaComposable را می پذیرد که یک آرگومان می گیرد یک مورد آیتم در لیست شما. سپس می توانید از آن مورد برای ایجاد لیست پیمایش خود استفاده کنید. هیچ ViewHolders یا Adapter در اینجا یافت نمی شود!

اکنون که شما یک دستور Composable برای نشان دادن لیست دستور العمل های خود دارید ، وقت آن است که همه چیز را در کلاس MainActivity خود قرار دهید و کار سخت خود را روی یک دستگاه ببینید!

راه اندازی همه چیز چگونه اتفاق می افتد

به MainActivity  بروید و محتویات  () Content را با موارد زیر جایگزین کنید:

RecipeList(defaultRecipes)

برنامه را دوباره اجرا کنید. که لیستی از غذاهای خوشمزه را مشاهده خواهید کرد.

این برنامه خوب به نظر می رسد ، اما شما واقعاً نمی توانید recipe cards های تکی را متمایز کنید. برای متمایز کردن این UI ، باید مقداری Padding بین موارد اضافه کنید.

فایل Recipe Card را دوباره باز کنید و عملکرد RecipeCard را به روز کنید تا تغییرات در Surface شما منتقل شود:

fun RecipeCard(recipe: Recipe, modifier: Modifier) {
  Surface(shape = RoundedCornerShape(8.dp), elevation = 8.dp, modifier = modifier) {
  ...
  }
}

سپس روش پیش‌نمایش DefaultRecipeCard را برای گذر از یک اصلاح کننده به روز رسانی کنید :

@Composable
@Preview
fun DefaultRecipeCard() {
  RecipeCard(defaultRecipes[0], Modifier.padding(16.dp))
}

بعد از آن , فایل RecipeList را باز کنید و یک  padding به اندازه 8 dp را به اصلاح کننده (modifier) اضافه کنید . روش RecipeList باید به این شکل باشد :

@Composable
fun RecipeList(recipes: List<Recipe>) {
  LazyColumnFor(items = recipes) { item ->
    RecipeCard(item, Modifier.padding(16.dp))
  }
}

دوباره برنامه را اجرا کنید . شما باید یک لیست مرتب از مواد غذایی خوش‌مزه را ببینید .

تنها چیزی که اکنون در برنامه وجود ندارد یک نوار ابزار (Toolbar) است! شماToolbar را به عنوان آخرین مرحله اضافه خواهید کرد .

اضافه کردن نوارابزار (Toolbar)

داشتن نوار ابزار ، رفتار پیش‌فرض برنامه‌های اندروید است ، بنابراین مهم است که آن را در بر داشته باشد . محتویات () setContent را در فایل MainActivity با موارد زیر جایگزین کنید :

// 1
Column(modifier = Modifier.fillMaxSize()) {
  // 2
  TopAppBar(title = {
    Text("ComposableCookBook")
  })
  // 3
  RecipeList(defaultRecipes)
}

در اینجا تفکیک کد آمده است:

1. درست مانند قبل از اینکه از یک ستون استفاده کنید , اما این بار شما به آن می‌گویید که تمام فاصله‌گذاری موجود را با مشخص کردن یک اصلاح‌کننده (Modifier) با () fillMaxSize پر کنید .

2. سپس از TopAppBar @Composable برای افزودن نوار ابزار استفاده می کنید. توجه داشته باشید که به جای گذراندن یک رشته به نوار ابزار ، یک Composable@ دیگر ارسال می کنید. این به شما کنترل بسیار زیادی بر نحوه نمایش محتوا در نوار ابزار می دهد! برای این برنامه ، یک متن ساده برای محتوای نوار ابزار شما کافی است.

3. در نهایت ، شما RecipeList خود را به ستون اضافه می کنید تا در زیر TopAppBar قرار گیرد.

دوباره  Buildوrun  کنید و یک نوار ابزار جدید و شیک در بالای ComposeableCookBook خواهید دید.

تبریک می گویم! شما اولین برنامه خود را با استفاده از Jetpack Compose ساخته اید.

از اینجا کجا بریم؟

شما اکنون برخی از جدیدترین و بزرگترین تغییرات را در دنیای UI در Android تجربه کرده اید. اما شما فقط آنچه Compose به صورت مبتدی ارائه می دهد را یاد گرفته اید و بسیاری از این API ها قبل از اینکه این کتابخانه ثبات داشته باشد, به طور چشمگیری تغییر می‌کنند.

در این آموزش با موارد زیر آشنا شدید:

• فلسفه و انگیزه پشت Jetpack Compose.

• چگونه با استفاده از حاشیه‌نویسی composable@ یک composable بسازیم .

• نحوه پیش نمایش یک composable با استفاده از حاشیه نویسی@Preview.

• اصول کار کردن با استفاده از Column composable .

• چگونه با استفاده از MaterialThemes یک ظاهر طراحی شده به اجزای خود اضافه کنید.