بهطور خلاصه میتوان گفت ابزار مدرنی میباشد که برای ساخت رابط کاربری (Material UI) در اندروید معرفی شده است.Jetpack Compose سهولت و مختصر بودن زبان برنامه نویسی کاتلین را با مدل برنامه نویسی reactive ترکیب میکند. و به صورت کاملا اعلانی است. به این معنی که رابط کاربری شما با فراخواندن دنبالهای از توابع که داده را به سلسه مراتبی از رابط کاربری تبدیل میکند، تعریف میشود. زمانی که دادههای اصلی تغییر میکند، فریم ورک به صورت اتوماتیک با فراخوانی دوباره تابعها سلسله مراتبی از viewها را برای شما بروزرسانی میکند. Android Jetpack Compose مانند سایر کتابخانههای JetPack در مراحل اولیه خود است. Jetpack Compose با کد کمتر، ابزاریهای قدرتمند و Apiهای بصری کاتلین باعث سادهتر شدن و تسریع در پیاده سازی رابط کاربری در اندروید میشود.
android {
defaultConfig {
...
minSdkVersion 21
}
buildFeatures {
// Enables Jetpack Compose for this module
compose true
}
...
// Set both the Java and Kotlin compilers to target Java 8.
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
}
composeOptions {
kotlinCompilerExtensionVersion "0.1.0-dev09"
}
}
یک اپلیکیشن Compose از توابع Composable ساخته شده، توابع منظم با Annotation) @Composable) مشخص شده است، که میتواند سایر تابعهای Composable را فراخوانی کند.
یک تابع تمام چیزی هست که شما برای ساخت رابط کاربری جدید نیاز دارید. Annotation (حاشیه نویسی) به Compose میگوید که برای بروزرسانی و حفظ رابط کاربری خود در طول زمان، پشتیبانی ویژهای را برای توابع فراهم میکند.
توابع Composable را میتوان فقط از دیگر توابع Composable فراخوانی کرد. Compose به ما این امکان را میدهد تا ساختار کدهای خود را به قطعههای کوچک تبدیل کنیم.
اغلب مواقع به Composable Functions، به طور کوتاه Composables میگوییم. برای استفاده از آخرین نسخه از Compose، فایل app/build.gradle را باز کنید.
کتابخانههای Compose را بروزرسانی کنید:
dependencies {
// You also need to include the following Compose toolkit dependencies.
implementation 'androidx.ui:ui-framework:0.1.0-dev10'
implementation 'androidx.ui:ui-tooling:0.1.0-dev10'
implementation 'androidx.ui:ui-layout:0.1.0-dev10'
implementation 'androidx.ui:ui-material:0.1.0-dev10'
...
}
MainActivity.kt را باز کنید، کدها را بررسی و کار را شروع کنید:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Greeting("Android")
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
Greeting("Android")
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
تابع Composable، یک تابع کاتلین میباشد که با annotation) @Composable) نشانه گذاری شده است، در مثال بالا میبینید.
با Composable ،Activity همچنان نقطه ورود یک برنامه اندرویدی است. در پروژه ما، زمانی که کاربر برنامه را باز میکند MainActivity راه اندازی میشود. ( همانطور که در فایل AndroidManifest.xml مشخص شده است).
ما از setContent برای تعریف طرح خود استفاده میکنیم اما به جای استفاده از یک فایل XML، توابع Composable را درون آن قرار میدهیم.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Greeting("Android")
}
}
}
}
MaterialTheme روشی برای استایل دادن به توابع Composable است، در بخش Theming your app برنامه اطلاعات بیشتری در این مورد خواهیم دید. برای دیدن نحوه نمایش متن روی صفحه، میتوانید برنامه را در یک شبیه ساز یا دستگاه اجرا کنید. یا از پیش نمایش Android Studio استفاده کنید.
برای استفاده از پیش نمایش Android Studio، شما فقط باید توابع Composable را بدون پارامتر با annotation) @Preview) علامت گذاری کنید و پروژه خود را بسازید. در حال حاضر میتوانید یک پیش نمایش از عملکرد Composable را در فایل MainActivity.kt مشاهده کنید. میتوانید پیش نمایشهای مختلفی در همان فایل داشته باشید و به آنها نام بدهید.
@Preview("Text preview")
@Composable
fun DefaultPreview() {
MaterialTheme {
Greeting(name = "Android")
}
}
androidx.compose.* for compiler and runtime classes
androidx.ui.* for UI toolkit and libraries
اگر حالت نمایش "فقط کد" انتخاب شود، پیش نمایش ظاهر نمیشود. برای دیدن پیش نمایش همانطور که در تصویر زیر مشاهده میکنید، روی حالت نمایش "تقسیم" ضربه بزنید:@Composable
fun Greeting(name: String) {
Surface(color = Color.Yellow) {
Text (text = "Hello $name!")
}
}
مؤلفه هایی که درون Surface قرار دارند، بالای آن رنگ پس زمینه کشیده میشوند (مگر این که توسط یک Surface دیگر مشخص شده باشد).
هنگامی که آن کد را به پروژه اضافه میکنید، دکمه Build & Refresh را در گوشه بالا سمت راست Android Studio مشاهده خواهید کرد. برای دیدن تغییرات جدید در پیش نمایش، روی آن ضربه بزنید یا پروژه را بسازید.
@Composable
fun Greeting(name: String) {
Surface(color = Color.Yellow) {
Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
}
}
برای دیدن تغییرات جدید، روی دکمه Build & Refresh کلیک کنید.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp()
}
}
}
@Composable
fun MyApp() {
MaterialTheme {
Surface(color = Color.Yellow) {
Greeting(name = "Android")
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
}
@Preview
@Composable
fun DefaultPreview() {
MyApp()
}
ما میخواهیم از توابع Composable ،MyApp در Activityهای مختلف دوباره استفاده کنیم زیرا پیکربندی سطح بالایی را تعریف میکند که میتواند در مکانهای مختلف استفاده شود. از آنجا که Greeting در آن تعبیه شده است وضعیت فعلی توابع اجازه نمیدهد دوباره استفاده شود. در ادامه Container را تنظیم میکنیم که پیکربندی برنامه مشترک را داشته باشیم.
@Composable
fun MyApp(children: @Composable() () -> Unit) {
MaterialTheme {
Surface(color = Color.Yellow) {
children()
}
}
}
هنگام استفاده از یک عملکرد Composable به عنوان یک پارامتر، مراقب پرانتز اضافی در () Composable@ باشید.
از آنجا که حاشیه نویسی (Annotation) بر روی یک تابع اعمال میشود، به آن نیاز دارید و لازم است!
fun MyApp(children: @Composable() () -> Unit) { ... }
تابع ما، تمام پیکربندی مشترکی را که میخواهیم Container ما تهیه کند را تعریف میکند و سپس فرزندان منتقل شده Composable را میتوان به کمک آنها فراخوانی کرد.
در این حالت، ما میخواهیم از MaterialTheme و یک surface زرد استفاده کرده و سپس children () را فراخوانی کنیم.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp {
Greeting("Android")
}
}
}
}
@Preview("Text preview")
@Composable
fun DefaultPreview() {
MyApp {
Greeting("Android")
}
}
این کد معادل چیزی است که در بخش قبلی داشتیم اما اکنون انعطاف پذیرتر است. انجام توابع سازگار با ظروف یک روش خوب است که باعث بهبود خوانایی میشود و استفاده از کد را ترغیب میکند.
@Composable
fun MyScreenContent() {
Column {
Greeting("Android")
Divider(color = Color.Black)
Greeting("there")
}
}
Divider یک تابع Composable است که یک تقسیم افقی ایجاد میکند. از آنجا که ما میخواهیم MyScreenContent همان چیزی باشد که کاربران ما هنگام باز کردن برنامه میبینند، ما باید بر این اساس کد MainActivity را اصلاح کنیم. همچنین، میتوانیم کد پیش نمایش را تغییر دهیم، تا بتوانیم بدون استفاده از برنامه در دستگاه یا شبیه ساز، سریعتر در Android Studio کار را پیش ببریم:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp {
MyScreenContent()
}
}
}
}
@Preview("MyScreen preview")
@Composable
fun DefaultPreview() {
MyApp {
MyScreenContent()
}
}
اگر پیش نمایش را Refresh کنیم، مواردی را میبینیم که به صورت عمودی قرار دارند:
@Composable
fun MyScreenContent(names: List<String> = listOf("Android", "there")) {
Column {
for (name in names) {
Greeting(name = name)
Divider(color = Color.Black)
}
}
}
@Model
class CounterState(var count: Int = 0)
@Composable
fun Counter(state: CounterState) {
Button(onClick = { state.count++ }) {
Text("I've been clicked ${state.count} times")
}
}
Compose انواع مختلفی از دکمهها را مطابق مشخصات دکمه طراحی متریال ارائه میدهد: OutlinesButton ،Button و TextButton.
در این مورد ما، از OutlinesButton استفاده خواهیم کرد و یک متن به عنوان محتوای دکمه خواهیم داشت که نشان میدهد OutlinesButton چند بار کلیک شده است.
از آنجا که دکمه شمارش را میخواند، هرگاه تعداد شمارش تغییر کند، دکمه دوباره تجدید میشود و مقدار جدید شمارش را نشان میدهد.
اکنون میتوانیم Counter را به صفحه خود اضافه کنیم:
@Composable
fun MyScreenContent(
names: List<String> = listOf("Android", "there"),
counterState: CounterState = CounterState()
) {
Column {
for (name in names) {
Greeting(name = name)
Divider(color = Color.Black)
}
Divider(color = Color.Transparent, height = 32.dp)
Counter(counterState)
}
}
پیش نمایش در این بخش پاسخگو نیست، برای دیدن این که کار میکند، باید برنامه را در یک شبیه ساز یا یک دستگاه واقعی اجرا کنیم.
اگر برنامه را اجرا کنیم، میبینیم که Counter چگونه حالت را حفظ میکند و در هر کلیک آن را افزایش میدهد.
@Composable
fun MyScreenContent(
names: List<String> = listOf("Android", "there"),
counterState: CounterState = CounterState()
) {
Column(modifier = Modifier.fillMaxHeight()) {
Column(modifier = Modifier.weight(1f)) {
for (name in names) {
Greeting(name = name)
Divider(color = Color.Black)
}
}
Counter(counterState)
}
}
@Composable
fun Counter(state: CounterState) {
Button(
onClick = { state.count++ },
backgroundColor = if (state.count > 5) Color.Green else Color.White
) {
Text("I've been clicked ${state.count} times")
}
}
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.compose.Model
import androidx.ui.core.Modifier
import androidx.ui.core.setContent
import androidx.ui.foundation.Text
import androidx.ui.graphics.Color
import androidx.ui.layout.Column
import androidx.ui.layout.fillMaxHeight
import androidx.ui.layout.padding
import androidx.ui.material.Button
import androidx.ui.material.Divider
import androidx.ui.material.MaterialTheme
import androidx.ui.material.Surface
import androidx.ui.tooling.preview.Preview
import androidx.ui.unit.dp
@Model
class CounterState(var count: Int = 0)
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp {
MyScreenContent()
}
}
}
}
@Composable
fun MyApp(children: @Composable() () -> Unit) {
MaterialTheme {
Surface(color = Color.Yellow) {
children()
}
}
}
@Composable
fun MyScreenContent(
names: List<String> = listOf("Android", "there"),
counterState: CounterState = CounterState()
) {
Column(modifier = Modifier.fillMaxHeight()) {
Column(modifier = Modifier.weight(1f)) {
for (name in names) {
Greeting(name = name)
Divider(color = Color.Black)
}
}
Counter(counterState)
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
}
@Composable
fun Counter(state: CounterState) {
Button(
onClick = { state.count++ },
backgroundColor = if (state.count > 5) Color.Green else Color.White
) {
Text("I've been clicked ${state.count} times")
}
}
@Preview("MyScreen preview")
@Composable
fun DefaultPreview() {
MyApp {
MyScreenContent()
}
}
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Greeting(name = "Android")
}
}
}
}
از آنجا که Material Theme، یک لایه بر روی Greeting است، Greeting با ویژگیهای تعریف شده یک Theme طراحی شده است.
ما میتوانیم خصوصیات MaterialTheme را بازیابی کنیم و از آنها برای تعریف استایل Text به این روش استفاده کنیم:
@Composable
fun Greeting(name: String) {
Text (
text = "Hello $name!",
modifier = Modifier.padding(24.dp),
style = MaterialTheme.typography.h1
)
}
متن ترکیب شده در مثال بالا سه آرگومان، یک String ،modifier و یک TextStyle را تنظیم میکند. میتوانید TextStyle خود را ایجاد کنید، یا میتوانید با استفاده از MaterialTheme.typography یک استایل تعریف شده از موضوع را بازیابی کنید.
این MaterialTheme.typography به شما امکان دسترسی به استایلهای متن تعریف شده، مانند h1 ،body1 یا subtitle1 را میدهد. در این مثال ما از h1 استفاده میکنیم.
هر زمان که یک رنگ یا استایل متنی میخواهید، از یک تابع Composable از MaterialTheme.colors یا MaterialTheme.typography استفاده کنید.
به عنوان مثال پیش نمایش را با این کد Refresh کنید:
@Preview("Text preview")
@Composable
fun DefaultPreview() {
MaterialTheme {
Greeting("Android")
}
}
حال تصویر زیر را مشاهده میکنید:
import androidx.compose.Composable
@Composable
fun MyAppTheme(children: @Composable() () -> Unit) {
// TODO
}
MaterialTheme پیکربندی رنگها و تایپوگرافی را در اختیار دارد. ما فقط در این مرحله رنگها را تغییر میدهیم تا به طراحی مورد نظر خود برسیم.
import androidx.compose.Composable
import androidx.ui.graphics.Color
import androidx.ui.material.MaterialTheme
import androidx.ui.material.lightColorPalette
val green = Color(0xFF1EB980)
private val themeColors = lightColorPalette(
primary = green,
surface = Color.DarkGray,
onSurface = green
)
@Composable
fun MyAppTheme(children: @Composable() () -> Unit) {
MaterialTheme(colors = themeColors) {
children()
}
}
شما میتوانید از رنگ موجود دیگری نیز استفاده کنید.
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.ui.core.Modifier
import androidx.ui.core.setContent
import androidx.ui.foundation.Text
import androidx.ui.layout.padding
import androidx.ui.material.MaterialTheme
import androidx.ui.material.Surface
import androidx.ui.tooling.preview.Preview
import androidx.ui.unit.dp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyAppTheme {
Surface {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting2(name: String) {
Text (
text = "Hello $name!",
modifier = Modifier.padding(24.dp),
style = MaterialTheme.typography.h1
)
}
@Preview("Text preview")
@Composable
fun DefaultPreview() {
MyAppTheme {
Surface {
Greeting("Android")
}
}
}
اگر پیش نمایش را Refresh کنید، شکل زیر را مشاهده خواهید کرد:
اگر به یادگیری بیشتر در زمینهی اندروید علاقه داری، با شرکت در دورهی آموزش برنامه نویسی اندروید در کمتر از یکسال به یک توسعهدهنده اندروید همه فن حریف تبدیل میشوی که آمادهی استخدام، دریافت پروژه و حتی پیادهسازی اپلیکیشن خودت هستی.منابع این مقاله: developer.android.com github.com/android medium.com