نحوه استفاده از کانسترینت لیوت در اندروید
فیلم آشنایی با نحوه استفاده از کانسترینت لیوت در اندروید
متن به همراه عکس آشنایی با نحوه استفاده از کانسترینت لیوت در اندروید
در این مقالهی آموزشی میخواهیم نحوهی استفاده از کانسترینت لیوت در اندروید را باهم بررسی کنیم.
کانسترینت لیوت چیست؟
با استفاده از ConstraintLayout می توان یک ظاهر کاملا منعطف (در گوشی های مختلف به یک شکل نمایش داده می شود) بسازید و نیازی نیست برای سایز های مختلف موبایل، layout اضافه ایجاد کنیم. قبلا چهار نوع layout ساخته می شد که نام آن ها عبارتند از:
small، normal، large، xlarge
اما در ConstraintLayout تنها با ساختن یک layout تمامی سایز های دیگر را به صورت اتوماتیک پشتیبانی میکند به طور مثال در یک گوشی ۳ اینچ و یا 10 اینچ یا در گوشی با هر سایزی از صفحه نمایش ظاهر صفحه نمایش ثابت است.
نحوهی کار با کانسترینت لیوت:
ابتدا از طریق مسیر زیر وارد لایه میشویم:
app>res>layout>activity_main.xml
وقتی پروژهای میسازیم، به صورت پیش فرض کانسترینت لیوت فعال است. در واقع لایهی اصلی که با آن کار میکنیم، کانسترینت لیوت است که داخل آن یک تکست ویو وجود دارد به اسم hello world.
ابتدا تکست ویو را پاک میکنیم تا یک صفحهی خالی داشته باشیم. ویژگی مهمی که کانسترینت لیوت دارد و باید به آن توجه کنیم این است که وقتی بخواهیم ویویی را از قسمت common به داخل صفحهمان اضافه کنیم، مثلا یک باتن، باید دو قسمت آن را چک کنیم. این دو قسمت در واقع همان دایرههای دور باتن هستد. (دو دایره در بالا و پایین و دو دایره در راست و چپ) در واقع این دایرهها اتصال ویو به دیوارهها و یا ویوهای دیگر را نشان میدهد و هر وقت از کانسترینت لیوت استفاده میکنیم، باید حداقل دو دایره از ویو مشخص شده باشد. (یکی از بالا و پایین و یکی از راست و چپ)
ویژگیهای کانسترینت لیوت:
1_ اتصال ویو به دیوارهها:
فرض کنید از باتنی که اضافه کردیم بدون اینکه به جایی وصل کرده باشیم اجرا بگیریم. باتن در قسمت بالای پروژه اضافه میشود در حالی که میخواستیم در وسط پروژه قرار بگیرد.
برای رفع این مشکل باتن اضافه شده را انتخاب میکنیم، از بالا به دیوارهی بالا و از راست به دیوارهی راست وصل میکنیم. مشاهده میکنیم که باتن اضافه شده در قسمت بالا سمت راست ثابت شده و اگر از پروژه اجرا بگیریم، باتن را بالا سمت راست نشان میدهد؛ چرا که از قسمت بالا و راست به دیواره وصل شده است.
اگر از قسمت چپ و پایین نیز به دیواره وصل کنیم و اجرا بگیریم، باتن در وسط صفحه قرار میگیرد.
اگر از قسمت بالا یا پایین ویوی اضافه شده را به دیواره وصل نکنیم، به صورت پیش فرض بالا و اگر از راست و چپ به دیواره وصل نکنیم، به صورت پیش فرض چپ قرار میگیرد.
زمانی که ویو را به دیواره وصل کنیم، دایرهها به صورت توپر نشان داده میشود.
2_ انتخاب درصد نحوهی قرارگیری باتن:
ویژگی دیگر این است که ما میتوانیم درصد نحوهی قرارگیری باتن را مشخص کنیم.اگر باتن را انتخاب و سمت راست صفحه، قسمت Constraint Widjet را مشاهده کنیم، میبینیم که 50% را به ما نشان میدهد، یعنی باتن در وسط صفحه قرار گرفته است. همچنین میتوانیم درصد را تغییر دهیم و باتن را در هر جایی که مدنظرمان است قرار دهیم.
Respancive _3 بودن کانسترینت لیوت:
ویژگی سوم respancive بودن آن است، یعنی ابعاد خودش را بر اساس صفحه نمایشهای مختلف تنظیم میکند.
پیش از این در برنامه نویسی اندروید نیاز داشتیم که برای صفحه نمایشهای مختلف، لایههای مختلفی را بسازیم. مثلا برای صفحه نمایشهای 3.5 تا 4.5 اینچ یک لایه نمایش و برای 4 به بالا یک لایهی دیگر میساختیم. تقریبا میتوان گفت که 4 تا 5 لایهی مختلف میساختیم و ویوهایمان را به شکلهای مختلف کنار هم میچیدیم تا در اجرا از آنها استفاده کنیم. این کار باعث میشد که حجم برنامه زیاد شود. اما با آمدن کانسترینت لیوت، دیگر نیازی نیست که لایههای مختلف بسازیم. با ساختن یک لایه و تنظیم کردن ویوهایمان کنار هم، میتوانیم از آن استفاده کنیم.
4_ استفاده از دو ویو در کانسترینت لیوت:
فرض کنید یک باتن دیگر اضافه کنیم، باتن جدید را میتوانیم هم به دیوارهها و هم به باتن اول وصل کنیم.
فرض کنید که بخواهیم به باتن اول وصل کنیم؛ از قسمت پایین به قسمت بالایی باتن اول، از سمت راست به دیوارهی راست، از سمت چپ به دیوارهی چپ و از قسمت بالا به دیوارهی بالا وصل میکنیم. مشاهده میکنیم که باتن جدید نسبت به باتن اول به صورت شکل زیر قرار گرفته، یعنی اگر باتن اول را جابجا کنیم، باتن دوم نیز نسبت به آن جا به جا خواهد شد.
در صورتی که باتن اول را به سمت بالا جابجا کنیم، فاصلهی بین دو باتن کمتر میشود، چون به صورت پیش فرض در قسمت Constraint Widjet فاصلهی بین دو باتن را از قسمتی که به هم وصل شده اند روی 50% قرار دادهایم.
اما اگراین فاصله را به 25% تغییر دهیم، باتن دوم طوری قرار میگیرد که 25% با باتن اول و 75% با دیوارهی بالا فاصله داشته باشد.
درصورتی که باتن اول را به سمت پایین حرکت دهیم مشاهده میکنیم که باتن دوم تغییر چندانی نمیکند؛ چراکه فاصلهی بین دو باتن 75% و فاصله باتن دوم و دیوارهی بالا 25% است.
این ویژگی کمک میکند که در صفحه نمایشهای مختلف، ویوهای ما همانطور که میخواهیم در کنار هم قرار بگیرند و مشکلی ایجاد نشود.
5_ Componemt Tree در کانسترینت لیوت:
فرض کنید یک باتن دیگر را اضافه کنیم. از سمت راست به دیوارهی چپ باتن اول و از سمت چپ به دیوارهی چپ باتن دوم وصل کنیم، توجه داشته باشید در قسمت Componemt Tree برای باتن سوم پیغامی نشان میدهد که قسمت بالا یا پایین باتن سوم وصل نشده است.
اگر بالا و پایین باتن را وصل نکنیم، در حین اجرا در قسمت بالای صفحه قرار میگیرد. بنابراین برای داشتن ظاهری بهتر، لازم است حتما از بالا یا پایین نیز وصل شود. مثلا از قسمت بالای باتن سوم به پایین باتن اول وصل میکنیم و میبینیم که دیگر پیغام قبلی را به ما نشان نمیدهد.
برای زیبا کردن ویوها چه کاری میتوانیم انجام دهیم؟
کانسترینت لیوت دارای ویژگیهایی است که میتوانیم از آنها استفاده کنیم:
1_ استفاده از Wrap Content:
فرض کنید که باتن دوم را انتخاب کنیم، گزینههایی که در قسمت Constraint Widjet مشاهده میکنیم، به ما کمک میکند که باتن ها را بهتر و زیباتر در کنار هم بچینیم.
یکی از گزینههای موجود Wrap Content است که به اندازهی محتویات داخل باتن، طول و عرض باتن را بزرگ و کوچک میکند.
مثلا میتوانیم در قسمت text جملهای مثل Button shomare 2 بنویسیم. مشاهده میکنیم که با تغییر متن داخل باتن، اندازهی باتن نیز تغییر میکند.
حال اگر روی گزینهی Wrap Content کلیک کنیم، مشاهده میکنیم که قسمت layout_width یک مقدار ثابت به ازای محتوایات داخلش میگیرد. اگر در قسمت text متن را تغییر دهیم، مشاهده میکنیم که عرض باتن تغییر نخواهد کرد.
2_ انتخاب گزینهی Match Constreint:
این ویژگی یعنی تمام صفحهای را که باتن اجازه دارد به خودش اختصاص بدهد.
اگر در قسمت layout_width و layout_height گزینهی Match Constreint را انتخاب کنیم، مشاهده میکنیم که یک باتن بزرگ ایجاد میشود. (0dp در فلش پایین عکس نشاندهندهی Match Constreint میباشد)
3_ انتخاب فاصلهی ویو با دیوارههای صفحه:
ویژگی دیگر کانسترینت لیوت این است که هر باتنی را که انتخاب میکنیم، فاصلهی بین قسمتهای بالا، پایین، چپ و راست آن را با دیوارههای صفحه میتوانیم مشخص کنیم. برای مثال فاصله با قسمت بالا 32dp، با دیواره راست 8dp، و همینطور به صورت شکل زیر میتوانیم تنظیم کنیم.
4_ استفاده از یکسری ویژگی برای همهی ویوها:
از طریق کشیدن روی باتنها و یا از طریق انتخاب آنها در قسمت Component Tree، میتوانیم همهی باتنها را انتخاب کنیم و سپس یکسری ویژگیهای کلی به همهی آنها اختصاص دهیم.
برای مثال با کلیک راست روی باتنهای انتخاب شده، از یکسری ویژگیها میتوانیم استفاده کنیم.
-
انتخاب گزینهی Align:
- باتنها از سمت چپ در یک راستا قرار میگیرند.
- از وسط به صورت عمودی در یک راستا قرار میگیرند.
- از سمت راست در یک راستا قرار میگیرند.
- از بالای صفحه در یک راستا قرار میگیرند.
- از وسط به صورت افقی در یک راستا قرار میگیرند.
- از پایین صفحه در یک راستا قرار میگیرند.
- متن داخل باتنها به صورت افقی در یک راستا میگیرند.
-
انتخاب گزینهی Chains یا همان زنجیره کردن:
میتوانیم هم به صورت افقی و هم به صورت عمودی باتن ها را کنار هم زنجیر کنیم.
برای مثال به صورت عمودی (Create Vertical Chain) زنجیر میکنیم.
مشاهده میکنیم که باتنها را از سمت چپ و راست میتوانیم حرکت دهیم، اما چون به صورت عمود به هم زنجیر شدهاند و هر سه یک فاصلهی ثابت پیدا کردهاند، از سمت بالا یا پایین نمیتوانیم حرکت دهیم.
5_ انتخاب گزینهی Clear Constreints Selection:
با انتخاب یک باتن، کلیک راست و انتخاب این گزینه میتوانیم تمام اتصالات باتن را پاک کنیم. حتی دایرههای مربوط به اتصال به دیواره نیز دوباره توخالی شده است و از هیچ سمتی به دیوارهها وصل نیست.
6_ بزرگ و کوچک کردن ویو از چهار گوشهی آن:
میتوانیم باتن خود از 4 گوشهی آن بزرگ و یا کوچک کنیم و به اندازهی دلخواه درآوریم. البته بهتر است که با ابعاد آن زیاد کار نکنیم و روی همان Wrap Cotent باقی بماند.
7_ انتخاب گزینهی Show Baseline:
ویژگی دیگر کانسترینت لیوت مربوط به متن داخل ویوهایمان میشود. با کلیک راست روی ویو و انتخاب گزینهی Show Baseline، گزینهای روی متن باز میشود که اگر روی آن کلیک کنیم، فلشی ایجاد میشود که میتوانیم آن را به متن داخل ویوی دیگری وصل کنیم. وقتی که وصل شدند، دو ویو از نظر نوشتاری روی یک خط قرار میگیرند.
8_ استفاده از گزینهی Organize:
ویژگی دیگر استفاده از گزینهی Organize است که هم در بالای صفحه (شکل اول) و هم با کلیک راست (شکل دوم) میتوانیم از آنها استفاده کنیم. با انتخاب این گزینه میتوانیم ویوهایی را که انتخاب کردیم، نظم دهیم.
- Pack Horizontally فاصلهی بین ویوهایی را که در یک راستای افقی قرار دارند برابر میکند.
- Pack Vertically فاصلهی بین ویوهایی را که در یک راستای عمودی قرار دارند برابر میکند.
- Expand Horizontally طول ویوهای مربوط به یک راستای افقی را بیشتر میکند تا کل فضای افقی را بگیرد.
- Expand Vertically عرض ویوهای مربوط به یک راستای عمودی را بیشتر میکند تا کل فضای عمودی را بگیرد.
9_ انتخاب گزینهی Center:
با این گزینه نیز میتوانیم ویوهای انتخابیمان را نسبت به صفحهی نمایشی نظم دهیم.
- Horizontally از نظر راستای افقی در وسط صفحه قرار میگیرند.
- Vertically از نظر راستای عمودی در وسط صفحه قرار میگیرند.
- Horizontally in Parent از نظر راستای افقی همهی ویوها در وسط صفحه قرار میگیرند حتی ممکن است ویوها روی هم قرار بگیرند.
- Vertically in Parent از نظر راستای عمودی همهی ویوها در وسط صفحه قرار میگیرند حتی ممکن است ویوها روی هم قرار بگیرند.
10_ استفاده از گزینهی Guidelines:
ویژگی دیگری که در تبهای بالا وجود دارد گزینهی Guidelines است.
مثلا اگر رو گزینهی Add Vertical Guideline کلیک کنیم، یک خط فرضی به صورت عمودی در سمت چپ صفحه ایجاد میشود که میتوانیم ویوهایمان را نسبت به آن تنظیم کنیم.
در امتداد این خطها، یک فلش دیده میشود که اگر روی آن کلیک کنیم فاصلهی خط با دیوارهی روبرو (مثلا در اینجا دیوارهی سمت راست) را نشان میدهد و اگر بار دیگر کلیک کنیم فاصله را به حالت درصد نشان میدهد.
ویژگی که Guidelineها دارند این است که به صورت پیش فرض روی یک فاصلهی ثابت با دیواره هستند و ما میتوانیم خودمان خط را جابجا کنیم تا فاصلهی مدنظر را با دیواره داشته باشد. این خط در هنگام اجرا دیده نمیشود.
دانلود فایل
مطالب زیر را حتما بخوانید
-
نحوهی کار با ویدئوپلیر (Video Player) از طریق پوشهی raw
7.42k بازدید
-
آلرت دیالوگ (AlertDialog) چیست و نحوهی کار با آن چگونه است؟
7.02k بازدید
-
اسنکبار (Snackbar) در اندروید
4.56k بازدید
-
ّFloating action Button (فلوتینگ اکشن باتن) در اندروید
4.4k بازدید
-
نحوهی کار با فریم لیوت (FrameLayout)
4.83k بازدید
-
یک روش برای تمرکز در برنامهنویسی
3.27k بازدید
دیدگاهتان را بنویسید