استفاده از لایه جدید ConstraintLayout در طراحی لایه برنامه نویسی آندروید

بازدید: 296 بازدید

قصد داریم به معرفی اجمالی constraint layout بپردازیم. این لایه الان دیگه می شود گفت که دیگر یک لایه ی جدیدی نیست واز معرفی ان۲ سال می گذرد و مشکلات آن برطرف شده و stable می باشد.

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

در این آموزش ConstraintLayout سعی شده است این لایه به طور ساده شرح داده شود.

اگه با جاوا در آندروید استدیو ، برنامه نویسی آندروید می کنید پیشهاد میکنم با ما همراه باشید.

مزیت لایه ConstraintLayout

  1. طرای لایه را بسیار ساده کرده زیرا با استفاده از Drag & Drop می توان لایه ها را طراحی کرد.
  2. نیاز به کد نویسی ندارد.
  3. سرعت طراحی لایه را بالا برده است.
  4. طراحی لایه های پیچیده با این لایه ساده تر شده است.
  5. نسبت به لایه های دیگر بسیار کاربردی می باشد.
  6. طراحی responsive برای انواع دستگاه های آندرویدی
  7. کارایی و performance بسیار خوبی دارد.

علت افزایش performance

به علت این که سلسه مراتب لایه ها را نسبت به سایر لایه ها کاهش داده است ، performance آن بالا رفته است و از لایه های تو در تو اجتناب می شود.

با استفاده از constarint layout می توانید لایه های پیچیده را به راحتی و با کارایی بالا طراحی کنید.

لایه پیش فرض گوگل برای طراحی

گوگل توصیه می کند برای طراحی لایه های خود از constarint layout استفاده کنید. حتی لایه پیش فرض هنگام ایجاد پروژه جدید این لایه می باشد.

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

دانلود و نصب Constarint layout

از نسخه ۲٫۲ آندروید استدیو به بعد به طور پیش فرض هنگام نصب آن این لایه به طور پیش فرض نصب می باشد اما در صورتی که از نسخه های قبلی استفاده می کنید باید آن را از SDK Manager برای نصب آن استفاده بکنید به همین منظور SDK Manager خود را باز کرده و در تب SDK TOOLS تیک گزینه Constarint layout for Android را مطابق شکل زیر بزنید.

Constarint layout - استفاده از لایه جدید ConstraintLayout در طراحی لایه برنامه نویسی آندروید
فعال کردن Constarint layout در آندروید استدیو

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

سپس شما نیاز دارید تا کتابخانه Constraint Layout را در بخش Dependencies  برنامه خود اضافه کنید. برای انجام این کار با استاده از دستور زیر که در فایل build.gradle قرار میگیرد شما می توانید این کتابخانه را به برنامه خود اضافه کنید :

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}

سپس پروژه خود را همگام سازی( Sync) کنید و با این کار شروع به build کردن پروژه و دانلود فایل های مورد نیاز خود.

نحوه عملکرد Constraint Layout

در این لایه کلیه کارها با شرط انجام می شود و شبیه Relative Layout می باشد و کاملا با شرط کار می کند. یک مفهوم داریم به اسم constraint که در زبان فارسی شرط ترجمه می شود.

کار با Constraint Layout

برای کار با Constraint Layout در برنامه نویسی آندروید یک اکتیویتی جدید ایجاد کنید. همان طور که مشاهده می کنید این لایه لایه پیش فرض آندروید می باشد.

در داخل قسمت palette می توانید view های استاندارد آندروید را مشاهده کنید که می توانید در طراحی خود از آن ها استفاده کنید. یکی از نقاط ضعف constraint layout این هست که custom view را در این قسمت مشاهده نمی کنید .

در قسمت component tree می توان سلسه مراتب view ها را مشاهده نمود.

به عنوان مثال با درگ و دراپ کردن یک دکمه از قسمت palette یک دکمه له صفحه شما طبق شکل زیر اضافه می شود:

Button in constraint layout - استفاده از لایه جدید ConstraintLayout در طراحی لایه برنامه نویسی آندروید
اضافه کردن یک دکمه به constraint layout

پس از انتخاب دکمه در پنجربه سمت راست در قسمت properties می توانید خصوصیات view خودتون رو به صورت کاملا تعاملی انتخاب بکنید و دیگر نیازی به کدنویسی نیست.

تعیین موقعیت viewها در Constraint Layout

هر view داخل Constraint Layout باید دو تا شرط را حداقل داشته باشد.

  1. شرط روی محور y یا محور عمودی
  2. شرط روی محور x یا محور افقی

در صورتی که دو شرط بالا را تعیین نکنیم پس از اجرای برنامه دکمه له گوشه بالا از سمت راست می چسبد مطابق شکل زیر:

پس دکمه بالا در سمت راست قرار گرفته چون هیچ شرطی روی محور x و محور y ندارد.

برای حل این مشکل میاییم به دکه شرط می دهیم به عنوان مثال یک شرط به سمت راست دکمه و یک شرط به سمت چپ دکمه که با انجام این کار دکمه در وسط تصویر قرار می گیرد مطابق شکل زیر:

parent position in constraint layout - استفاده از لایه جدید ConstraintLayout در طراحی لایه برنامه نویسی آندروید
parent-position-in-constraint layout

با انجام این کار دقیقا دکمه در وسط صفحه قرار می گیرد

view های که در constraint layout اضافه می کنیم به طور خودکار ۸dp مقدار margin می گیرد که البته می توان این مقدار را دستکاری کرد.

به این حالت که دکمه ما نسبت به parent خودش که constraint layout است مشخص شده است ، parent position گفته می شود. به این که معنی که position مربوط به view ما بر اساس والد خودش تعیین شده است.

یک جالت دیگه داخل constraint layout داریم که order position است. به این معنی که دکمه ای که قرار است موقعیت آن را تعیین کنیم نسبت به دیگر view ها این کار را انجام می دهیم به عنوان مثال فرض کنید موقعیت یک دکمه را در صفحه نسبت به دکمه دیگر تعیین می کنیم مانند شکل زیر:

order position in constraint layout - استفاده از لایه جدید ConstraintLayout در طراحی لایه برنامه نویسی آندروید
order-position-in-constraint layout

همان طور که در شکل بالا ملاحظه می کنید دکمه B موقعیت آن بر اساس موقعیت دکمه A می باشد که با جابه جایی دکمه A دکمه B هم تغییر می کند.

Baseline handle در constraint layout

شما ممکنه یک متن خیلی بندی داشته باشید که در کتار یک دکمه با متن داخل دکمه تزار بشه که به این حالت Baseline گفته می شود.

برای انجام این کار روی آیکون ab که کنار دکمه هست را انتخاب میکنم و اون را درگ می کنیم روی اون کنترل مورد نظر البته انجام این عمل بهتر است به طور عملی آموزش داده شود.

بی شک constraint layout یک لایه بسیار خوب است که توسط گوگل معرفی شده است و مزایای بسیار زیادی دارد و کاربردهای زیادی در برنامه نویسی آندروید دارد و کاررا برای شما بسیار راحت می کند.

برای آموزش ConstraintLayout سعی کنید بیشتر به طور عملی با این لایه کار کنید.

با آموزش های بیشتر برنامه نویسی آندروید با ایران فایلز همراه باشید.

در صورت هر گونه سوال می توانید در بخش نظرات این مطلب در سایت ایران فایلز نظر خود را بنویسید بزارید.

مطالعه بیشتر