طراحی راحت تر و حرفه ای رابط کاربری اپلیکیشن در اندروید استودیو (بخش اول)

با Constraint Layout راحت تر و حرفه ای تر طراحی کن. همونطور که مهارت کد نویسی جزء مهمترین بخش های طراحی و توسعه اپلیکیشن اندروید است، طراحی رابط کاربری هم از اهمیت بسیاری برخورداره به طوری که یکی از دلایل عمده حذف اپلیکیشن توسط کاربران، ضعف طراحی در رابط کاربری است. اینجاست که Constraint Layout به کمک ما میاد و ما با استفاده از این لایه قدرتمند میتونیم تا حد زیادی از حذف شدن اپلیکیشن توسط کاربر جلوگیری کنیم. 

حالا چرا  Constraint Layout ؟

• از نظر performance کارایی عالی تری داره (در نتیجه سرعت اپ بالا تر میره).
• از نظر responsive بودن بهترین لایه است (این ویژگی خیلی مهمه چون اپلیکشن ما باید روی گوشی ها با سایز های مختلف به خوبی عمل کنه و رابط کاربری نباید به هم بریزه).
• با Constraint Layout خیلی راحت میتونی اپلیکیشنت رو چند زبانه کنی.

خوب فهمیدیم چرا باید از Constraint Layout استفاده کنیم حالا بریم سراغ اصل مطلب :

ابتدا باید گفت  در این مقاله به مطالب ابتدایی استفاده از  Constraint Layout  پرداخته نخواهد شد  ولی برای یک  مرور سریع، در       Constraint Layout  هر یک از اجزاء رابط کاربری باید حداقل با یکی از جهات (بالا یا پایین) و همچنین یکی از جهت های (چپ یا راست) به اجزاء دیگر(button ,...) یا صفحه متصل باشد. برای مثال به من گفته شده که یک عکس قرار بدم که به بالا و چپ و راست صفحه متصله.

همونطور که میبینید به دلیل اندازه عکس، بحای اینکه بالای صفحه قرار بگیره در وسط صفحه قرار گرفته با اینکه از جهت پایین به هیچ چیز متصل نیست. میتونیم بهش عرض و طول مشخص بدیم که البته باعث بد قیافه شدن رابط کاربری میشه و اصلا توصیه نمیشه. حالا بنظرتون چیکار کنیم ؟:(

Dimension Ratio  در  Constraint Layout 

خوب در این مواقع Dimension Ratio به کمک  ما میاد و ما رو از شر این مشکل رها میکنه. Dimension Ratio بیشتر برای عکس ها مورد استفاده قرار میگیره و با نسبت ها کار میکنه، مثل 1:1 یا هر نسبت طول به عرض دیگه ای.

برای استفاده من layout_width و layout_height رو مقدار 0dp میدم و بعد روی نوار که در پایین میبینید کلیک و نسبت دلخواهم رو وارد میکنم. برای مثال من نسبت رو روی   16:9 قرار دادم.

و نتیجش :

خوب حالا طراح دیزاین میاد و به ما میگه که میخواد عکس، 40 درصد از ارتفاع یا طول صفحه رو بگیره الان باید چیکار کنیم؟

Guide Line  در  Constraint Layout

Guide Line یا خط راهنما برای راحت تر کردن طراحی رابط کاربری مورد استفاده قرار میگیره و توسط کاربر قابل مشاهده نیست. در ادامه نحوه کار با اون رو توضیح میدم.

خب، ابتدا من از قسمت palette یک Guideline horizontal به صفحه اضافه میکنم (horizontal بودن برای اینه که خواستم به صورت افقی قرار بگیره).

در مرحله بعد به قسمت Attributes میرم  و در قسمت زیر عدد 0.4 که به معنا 40 درصد از صفحه است رو وارد میکنم.

بعد از این، Guideline در صفحه قابل مشاهده است و من پایین عکس را به Guideline متصل میکنم. برای اینکه تصویر بهتر بشه، scaleType رو  fitXY قرار میدم و نسبت Dimension Ratio رو تغییر میدم. تصویر زیر  خروجی ماست.

همونطور که مشاهده میکنید تصویر 40 درصد از ارتفاع صفحه را به خودش اختصاص داده و با عوض شدن پیکسل صفحه باز هم 40 درصد از صفحه را اشغال  میکنه:)

این هم کد های xml :

<ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/image"
        app:layout_constraintBottom_toTopOf="@+id/guideline4"
        app:layout_constraintDimensionRatio="19:12"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4" />

خوب حالا از ما میخوان که دو textview زیر عکس قرار بدیم و و زیر اونها یک button قرار بدیم و همچنین از ما خواسته شده button، زیر هر دو text باشه و اندازه متن ها هم مشخص نیست. در این مواقع اگر ما بالای button را به زیر یکی از text ها متصل کنیم ممکنه text کناری متن بیشتر داشته باشه و مشکل زیر به وجود میاد:

همونطور که میبینید من بالای button را به زیر text آبی رنگ قرار دادم اما بخاطر اینکه text سیاه رنگ  جای بیشتری اشغال کرد،  این ناهماهنگی به وجود آمد برای حل این مشکل :

Barrier در Constraint Layout

برای استفاده از  Barrier در قسمت component tree دیزاین، هر دو text view خودم را انتخاب میکنم، روی قسمت id یکی از انها با راست کلیک به قسمت add helper رفته و  horizontal barrier  را انتخاب میکنم و barrier Direction را به  حالت bottom که به معنی قرار گرفتن در زیر دو text من هست، تغییر میدم. نتیجش:

میبینید که button  در زیر barrier قرار گرفته و با کم یا زیاد شدن هر یک از متن ها مشکلی پیش نمیاد:)

حالا از من خواسته شده تا دو button در زیر button بزرگی که دارن قرار بدم به صورتی که مثل زیر قرار بگیرن.

Chain در  Constraint Layout

اگر من میخواستم مثال بالا را با guideline ها انجام بدم کار خیلی خسته کننده و سخت تر میشد اما با chain...

اول از همه باید گفت که Chain ، یک زنجیره بین اجزائی که من انتخاب میکنم قرار میده و اینطوری کار من رو خیلی راحت تر از قبل میکنه. برای استفاده مثل مرحله قبل دو button خودم را انتخاب میکنم، در قسمت id یکی از انها با راست کلیک به قسمت chain میرم و horizontal chain رو انتخاب میکنم. chain سه حالت داره که من برای این طراحی از حالت spread استفاده میکنم.

خب در انتها می بینیم که با استفاده از  روش های  کاربردی تر، هم  از وقوع بعضی مشکلات جلوگیری میشه . هم رابط کاربری حرفه ای تری خواهیم داشت.

امیدوارم  مفید واقع شده باشه:)