در این مقاله به صورت ساده و روان تفاوت و نحوه استفاده از Arrangement و Alignment بررسی میکنیم 

در طراحی رابط کاربری با Jetpack Compose، کنترل نحوه‌ی چیدمان و فاصله‌گذاری بین کامپوننت‌ها اهمیت زیادی دارد. این دوتا سوال خیلی از مواقع مطرح می شود :

• چگونه می‌توانم بین آیتم‌های یک Row یا Column فاصله‌ی دلخواه ایجاد کنم؟
• اگر بخواهیم از spacer و padding برای فاصله گذاری استفاده کنیم که از modifier ها هستند پس کاربرد Alignment و Arrangement چیست ؟

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

این مقاله با هدف پاسخ به همین پرسش ها  نوشته شده است.

تفاوت Arrangement و Alignment

تیم Jetpack Compose تصمیم طراحی بسیار خوبی گرفته اند : آن‌ها برای کنترل فاصله در محور اصلی (Main Axis) و محور متقاطع (Cross Axis) از پارامترهایی با نام‌های متفاوت استفاده کرده‌اند. این جداسازی نام‌گذاری باعث خوانایی و درک بهتر کد می‌شود، اگرچه ممکن است در ابتدا کمی گیج‌کننده باشد — به‌خصوص اگر قبلاً با فریم‌ورک‌های رابط کاربری دیگر کار کرده باشید.

Arrangement چیست؟

• در Row، پارامتر horizontalArrangement فاصله‌گذاری افقی بین آیتم‌ها را تعیین می‌کند.
• در Column، پارامتر verticalArrangement فاصله‌گذاری عمودی را کنترل می‌کند.

محور اصلی (Main Axis) در :

Column محور اصلی به صورت عمودی است

Row محور اصلی به صورت افقی است .

Alignment چیست؟

• در Row، پارامتر verticalAlignment مکان آیتم‌ها در محور عمودی را مشخص می‌کند.
• در Column، پارامتر horizontalAlignment موقعیت آیتم‌ها در محور افقی را تعیین می‌کند.

محور فرعی (Cross Axis)در :

Column محور فرعی به صورت افقی است .

Row محور فرعی به صورت عمودی است .

 

انواع Arrangement‌ های پیش‌فرض

شما می‌توانید پیاده‌سازی دلخواه خود را برای Arrangement بنویسید، اما Jetpack Compose چند نوع پرکاربرد را به‌صورت پیش‌فرض ارائه داده است:

نکته‌ی مهم درباره‌ی اندازه‌ی Row و Column

به‌صورت پیش‌فرض، Row و Column فقط به اندازه‌ی محتوای داخلی‌شان فضا اشغال می‌کنند. این یعنی اگر شما از Arrangement.SpaceBetween استفاده کنید ولی فقط دو آیتم داشته باشید و هیچ فضای اضافی نداشته باشید، هیچ فاصله‌ای اعمال نمی‌شود.

برای اینکه Arrangement قابل مشاهده باشد، باید فضای کافی در اختیار Row یا Column قرار دهید. می‌توانید از Modifierهای زیر استفاده کنید:

• Modifier.fillMaxWidth()
• Modifier.fillMaxSize()
• Modifier.height(100.dp)
• Modifier.size(300.dp)

نتیجه‌گیری

شناخت دقیق تفاوت بین Arrangement و Alignment یکی از کلیدهای مهم در طراحی رابط کاربری با Jetpack Compose است. این دو ابزار قدرتمند به شما اجازه می‌دهند تا کنترل کاملی روی فاصله‌گذاری و نحوه‌ی چیدمان اجزا داشته باشید — چه در محور اصلی و چه در محور فرعی.

اگر تازه‌کار هستی و به‌تازگی با Compose آشنا شدی ، پیشنهاد می‌کنم با ترکیب‌های مختلف Arrangement و Alignment آزمایش کنی تا بهتر متوجه شون بشی .

از مسیر کد زدن لذت ببرید ، پایان 🍕