خواندن ۵ دقیقه·۵ سال پیش

لی اوت در اندروید، بخش ۲ : آشنایی با اتریبیوت width و height

این مقاله به همراه دیگر مقالات این مجموعه ۱۶ قسمتی، بر اساس آموزش ویدیویی در pluralsight به نام Android Fundamental : Layout تهیه شده است. تاریخ تولید این دوره ۲۰۱۹ است.
روند منبع فوق در فهرست و محتوای مقالات، بطور کلی حفظ شده است ولی در جزئیات یک ترجمه کلمه به کلمه نیست؛ نگارش فهرست و محتوا با افزودن و دخالت همراه بوده است.
بطور کلی هر جا حس شده توضیح بیشتر به درک مطلب کمک می‌کند دریغ نشده است.

با ساده ترین نوع لی اوت یعنی LinearLayout و حالت های مختلف طول و عرض آن شروع میکنیم.

تگ LinearLayout معرف یک کانتینر است و نوشته های قرمز رنگ اتریبیوت هستند.

اگر بخواهیم لی اوت به اندازه پرنتش یا همان کانتینترش بزرگ باشد از match_parent استفاده میکنیم. در اینجا خود LinearLayout برای ما root container است و طول و عرض آن نسبت به لبه های نمایشگر گوشی سنجیده میشود. در تصویر زیر طول و عرض تصویر مشخص شده است. با صرف نظر از actionbar (یا toolbar به معنای نوار بالای صفحه) محیط سفید رنگ محل قرارگیری LinearLayout ماست. چون از مقدار match_parent برای اتریبیوت layout_width و layout_height استفاده کردیم.

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

با اتریبیوت background رنگ پس زمینه را تعیین کردیم.

دقت کنید که اکشن بار بالای صفحه بخشی از Linearlayout ما نیست.

حالا کامپوننت یا ویوی TextView را به بدنه لی اوت اضافه می‌کنیم.

داخل تگ LinearLayout تگ جدید TextView را با اتریبیوت های طول و عرض و text اضافه کردیم.

برای TextView هم استفاده از match_parent برای اتریبیوت layout_width به معنی اشغال کل فضای طولی لی اوتی است که در آن قرار گرفته. شکل زیر را ببینید. کادر قرمز زیر طول اشغال شده را نشان میدهد.

اگر این موضوع برای شما واضح نیست کافیست یک رنگ بک گراند برای TextView مشخص کنیم.

مشخص کردن حوزه match_parent توسط رنگ زرد

اما wrap_content چیست؟ اگر بخواهیم طول یا عرض یک ویو(کامپوننت) به اندازه طول یا عرض محتوای آن باشد از wrap_content استفاده می‌کنیم.
واضح است چون یک TextView محتوای متنی دارد اگر مثلا برای عرض آن این مقدار را قرار دهیم یعنی عرض (یا همان ارتفاع) این المان به اندازه ارتفاع متن درون آن خواهد شد.

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

طول و عرض TextView بر اساس text آن تعیین شده است.

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

اگر هم طول و هم عرض را match_parent قرار دهیم خروجی به شکل زیر خواهد شد.

چون پرنتِ TextView یک لی اوت تمام صفحه است پس استفاده از match_parent برای طول و عرض، TextView را به اندازه پرنت آن یعنی LinearLayout گسترش میدهد.

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

برای دسترسی به اتریبیوت های یک ویو (چه کامپوننت ساده باشد و چه یک لی اوت) به شکل زیر از طریق component tree آیتم را انتخاب میکنیم و در سمت راست صفحه پنجره attributes را باز میکنیم.

بخش اول declared attributes است که اتریبیوت های تعیین شده در xml اینجا نمایش داده میشود.

دو اتریبیوت layout_width و layout_height در تگ xml وجود دارد.

اتریبوت های فوق از طریق xml ویو هم قابل مشاهده و تغییر هستند.
در بخش لی اوت هم به شکل زیر تنظیمات طول و عرض و ویزیبیلیتی ممکن است.

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

و در بخش آخر هم همه اتریبیوت ها را میتوانید ببینید.

لازم به توضیح نیست که با تغییر هر یک از آیتم های موجود در اتریبیوت مثل بک گراند نتیجه آن در صفحه نمایش داده میشود و همچنین کد آن در فایل xml نوشته میشود و در همین پنجره در بخش Declared attributes هم اضافه می شوند.

پس با این حساب در تب declared attributes باید این تغییر را ببینیم.

به محض تغییر مقدار یک اتریبیوت، ردیفی مختص به آن در بخش Declared Attributes اضافه میشود.

و این هم محتوای فایل xml این صفحه که با توجه به موارد گفته شده بصورت خودکار، اتریبیوتی جدید به آن اضافه شده است.

با دستکاری اتریبیوت ها در پنجره atrributes فایل xml به شکل خودکار آپدیت میشود.

با تعویض کامپوننت انتخابی اتریبیوت ها عوض میشوند؛ چون هر المان اتریبیوت های خودش را دارد.
مثلا تکست ویو را انتخاب میکنیم:

با انتخاب هر کامپوننت(ویو) ، اتریبیوت های مختص به آن در سمت راست نمایش داده می‌شود.

ذر سمت راست اتریبیوت های مربوط به این ویو نشان داده می‌شود.

میتوانیم مثلا با کمک اتریبیوت textSize اندازه نوشته را تغییر دهیم و یا رنگ بک گراند را عوض کنیم. یادآوری کنم که با هر کدام از این تغییرات چون اتریبیوت ها در فایل xml به روز می‌شوند، تب declared attributes آپدیت خواهد شد.

نمایی از تب Declared Attributes در پنجره attributes

حالا هم طول و هم عرض تکست ویو را روی match_parent میگذاریم ببینیم چه میشود

امیدوارم با پنجره اتریبیوت ها و همچنین اتریبیوت های مهم طول و عرض آشنا شده باشید.

در بخش بعد دو اتریبیوت مهم دیگر یعنی margin و padding معرفی خواهند شد.

مرتضی دلیل

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

شاید از این پست‌ها خوشتان بیاید