استفاده از Constraint Layout در Jetpack Compose

اگر از دنیای xml وارد Jetpack Compose شدید پس با layout ها اشنا هستین سه نوع layout وجود داشت که به صورت زیر بود:

• 1. Linear Layout
• 2. Relative Layout
• 3. Constraint Layout

در این مقاله قصد دارم نحوه ی پیاده سازی Constraint Layout در Jetpack Compose راتوضیح بدهم برای مطالعه ی این مقاله بهتر است با مفاهیم اولیه JetPack Compose تاحدی اشنا باشید.

پیاده سازی Constraint Layout در xml به صورت drag and drop بود به این صورت که کامپوننت ها را درخود xml برمی داشتیم و روی صفحه قرار میدادیم سپس این کامپوننت هارا به هم وصل می کردیم و در همسایگی هم قرار می دادیم اما در jetpack compose به این صورت نیست و تمامی این روال را به صورت کد می توانیم می نویسیم.

برای استفاده از constraint Layout در compose مراحل زیر را انجام می دهیم :

1- ابتدا dependency زیر را به gradle مربوط به ماژول خود اضافه می کنیم:

implementation &quotandroidx.constraintlayout:constraintlayout-compose:1.0.0-rc02&quot

2- سپس بایدمتغیری از نوع ConstraintSet تعریف کنین که به این صورت است:

دراین تابع میتوانیم constrain های مربوط به عناصر خودرا تعریف کنیم که درادامه خواهید دید.

3- برای کامپوننت خود که دراینده نوع ان ( Button , Text View ,..) را مشخص خواهیم کرد ایدی تعریف می
کنید:

در این قسمت درواقع بااستفاده از تابع createRefFor یک reference درست کردیم که به ایدی btn_login اشاره می کند سپس ان را در متغیری به نام button میریزیم بعد ازان محدودیت های مربوط به این reference را بااستفاده از تابعی به نام constrain درادامه مشخص می کنند .

4- محدودیت های مربوط به عنصر خودرا تعیین می کنیم :

این قسمت از کارشبیه به کاربا constraint Layout در xml است همانطور که مشاهده می کنید از تابع constrain استفاده شده و متغیری که برای ان ایدی تعریف کرده بودیم را به این تابع میدهیم سپس محدودیت های ان را مشخص میکنیم و start/end/top/bottom عنصر خود را به عنصر دیگر که برای ان ها ایدی تعریف کردیم و همینطور parent می توانیم link کنیم.

دراین قسمت به این صورت است که top عنصر button ما به top مربوط به parent متصل میشود و به همین ترتیب start ان به start مربوط به parent آن وصل میشود سپس عرض وارتفاع ان را مشخص میکنیم که هم میتوانیم برای ان عدد بگذاریم و هم میتوان از پارامتر های اماده ی دیگری از جمله موارد زیر استفاده کنیم:

5- دراین مرحله constraint Set هایی که ساختیم را به Constraint Layout می دهیم و برای ایدی هایی که مشخص کردیم عنصر تعیین می کنیم :

همانطور که مشاهده میکنیم از layout Id استفاده کرده و ایدی ان را که در ConstraintSetتعریف کردیم به عنصری که نیاز داریم می دهیم.

سپس میتوانید برنامه را ران کنید:

همانطور که مشاهد میکنید در تصویر یک دکمه به نامcompose که قبلا ان را مشخص کردیم ایجاد شده است.

نکته:

• برای تبدیل xmlبه کامپوز می توانیداز پلاگین استفاده کنید فقط لازم به ذکر است که این پلاگین برای تبدیل ویجت های ساده به کامپوز استفاده میشود وبرای materialوAppCompatکار نمیکند حتما به مثال ان توجه کنید.

لازم به ذکر است که در constraint Set هر چندتا متغیر می توانیم تعریف کنیم و سپس constrainهای مربوط به ان را مشخص کنیم و ان هارا به Constraint Layout بدهیم :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val constraints = ConstraintSet {
                val button = createRefFor(&quotbtn_login&quot)
                val textView = createRefFor(&quottv_name&quot)

                constrain(button) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
                constrain(textView) {
                    top.linkTo(parent.top)
                    start.linkTo(button.end)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
            }
            ConstraintLayout(constraintSet = constraints, modifier = Modifier.fillMaxSize()) {

                Button( = { /*TODO*/ },
                    modifier = Modifier
                        .layoutId(&quotbtn_login&quot)
                        .background(Color.Green)) {
                   Text(text = &quotCompose&quot)
                }

                Text(
                    text = &quotvirgool&quot,
                    modifier = Modifier
                        .background(Color.Red)
                        .layoutId(&quottv_name&quot)
                )

            }


        }
    }
}

نکته پایانی:

همانطور که مشاهده کردین در Jetpack Compose هم می توانیم از Constraint Layout استفاده کنیم ومجموعه ای از عناصر مختلف و حتی Layout های مختلف مربوط به Jetpack Compose از جمله Box وColumnوRow را در ان قرار دهیم . برای استفاده از ConstraintLayout ابتدا یک ایدی تعریف می کنیم سپس محدودیت های مربوط به عنصری که ایدی ان را تعریف کردیم را مشخص می کنیم و درنهایت نوع عنصر (Button,TextView,TextField,...)را مشخص می کنیم.

موفق باشید ?

منبع :