جت‌پک کامپوز در اندروید: معرفی کامپوز و نحوه ایجاد تابع کامپوز

معرفی کامپوز (Compose)

کامپوز (Compose) یک بخشی از کتابخونه ی جت پک (Jetpack) در فریم‌ورک اندروید است که با زبان کاتلین نوشته شده، کامپوز ابتدا در می 2019 توسط گوگل معرفی شد و در اکتبر 2019 نسخه پیش نمایش آن تولید شد، نسخه آلفا آن در آگوست 2020 منتشر و در فوریه 2021 وارد فاز بتا شد؛ در نهایت در جولای 2021 نسخه 1.0 پایدار آن منتشر شد.

با استفاده از کامپوز میتونیم رابط کاربری (UI) مدرن به صورت نیتیو برای اندروید طراحی کنیم؛ استفاده از کامپوز طراحی UI رو برای توسعه دهندگان اندروید ساده تر کرده و کامپوز از اندروید 5 به بالا پشتیبانی می‌کنه.

کد های نوشته شده در کامپوز، با کامپایلر کامپوز (Compose Compiler) کامپایل میشن.

تابع کامپوز (Composable Function)

میتونیم یک تابع، پراپرتی یا کلاس رو با Annotation علامتگذاری کنیم، Annotation ها حاوی اطلاعات اضافی برای تابع، پراپرتی و کلاس هستن و میتونن از کد های تکراری (boilerplate) جلوگیری کنن.

با علامت گذاری یک تابع با @Composable یک تابع کامپوز ایجاد می‌کنیم؛ علامت Composable به کامپایلر میگه، تابع علامت گذاری شده یک تابع کامپوز است.

@Composable
fun MyComposeFunction(){
    //do something here
}
                

توابع کامپوز تغییر ناپذیر (Immutable)هستن، یعنی زمانی که وضعیت (State) کامپوز تغییر کنه (مقدار متغیر های یک تابع کامپوز تغییر کنه)، ویو پاک میشه و تابع کامپوز با وضعیت (State) جدید دوباره صدا زده میشه و ویو دوباره ترسیم میشه که اصطلاحا بهش ریکامپوزیشن (recomposition) میگیم؛ هنگام ریکامپوزیشن، فقط توابعی که وضعیتشون تغییر کرده دوباره ترسیم میشن و این ويژگی ترسیم ویو ها رو در کامپوز بهینه کرده.

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

پیش نمایش توابع کامپوز قبل از اجرا

با تعریف یک تابع کامپوز و علامتگذاری تابع با @Preview میتونیم بدون ران کردن برنامه ویو رو ببینیم؛ همچنین میتونیم یک یا چند تابع Preview تعریف کنیم.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier){
    Text(
        text="Hello $name",
        modifier = modifier
    )
}
                    
@Preview
@Composable
fun GreetingPreview(){
    Greeting("Android!")
}
                

برای پیش نمایش ویو، فایلی که تابع Preview رو داخلش تعریف کردیم باز می کنیم و بر روی دکمه ی وسط یا سمت راست که در زیر با مستطیل مشخص کردیم کلیک می‌کنیم.

تابع setContent

برای اجرای توابع کامپوز باید تابع setContent(@Composable () -> Unit) رو داخل onCreate صدا بزنیم و سپس میتونیم یک یا چند تابع کامپوز رو داخلش صدا کنیم؛ در زیر دو تابع Scaffold و Greeting داخل setContent صدا زده شدن.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                Greeting(
                    name = "Android",
                    modifier = Modifier.padding(innerPadding)
                )
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting("Android")
}
                

قوانین کامپوز

توابع معمولی رو میتونیم داخل تابع کامپوز صدا بزنیم ولی تابع کامپوز رو نمیتونیم داخل تابع معمولی صدا کنیم.

اسم تابع به صورت قرارداد باید به صورت Pascal Case نوشته بشه؛ یعنی اول هر کلمه با حروف بزرگ باشه.

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

//صحیح
@Composable
fun Name(name: String){
    Text(
        text = name
    )
}

//غلط
@Composable
fun ShowName(name: String){
    Text(
        text = name
    )
}
                        

خلاصه

• کامپوز یک بخش از کتابخونه جت پک برای طراحی ui در اندروید است.
• Annotation ها دربردارنده ی اطلاعات اضافی برای تابع، پراپرتی یا کلاس هستند.
• تابع کامپوز رو با @Composable علامتگذاری می کنیم.
• با تعریف تابع Preview میتونیم ویو ها رو قبل از اجرای برنامه مشاهده کنیم.
• کامپوز در اندروید تغییر ناپذیر است و با تغییر وضعیت، ویو دوباره ترسیم میشه.