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

این مقاله به همراه دیگر مقالات این مجموعه ۱۶ قسمتی، بر اساس آموزش ویدیویی در pluralsight به نام Android Fundamental : Layout تهیه شده است. تاریخ تولید این دوره ۲۰۱۹ است.روند منبع فوق در فهرست و محتوای مقالات، بطور کلی حفظ شده است ولی در جزئیات یک ترجمه کلمه به کلمه نیست؛ نگارش فهرست و محتوا با افزودن و دخالت همراه بوده است.بطور کلی هر جا حس شده توضیح بیشتر به درک مطلب کمک می‌کند دریغ نشده است. لی اوت در اندروید ۱ : مفاهیم اولیهلی اوت در اندروید ۲ : آشنایی با اتریبیوت width و height (در حال خواندن این مقاله هستید) لی اوت در اندروید ۳ : آشنایی با اتریبیوت های margin و padding لی اوت در اندروید ۴ : آشنایی با اتریبیوت gravity لی اوت در اندروید ۵ : آشنایی با لی اوت های پایهلی اوت در اندروید ۶ : آشنایی با LinearLayoutلی اوت در اندروید ۷ : اتریبیوت weight لی اوت در اندروید ۸ : آشنایی با FrameLayoutلی اوت در اندروید ۹ : آشنایی با RelativeLayoutلی اوت در اندروید ۱۰: آشنایی با CoordinateLayout لی اوت در اندروید ۱۱ : آشنایی با ConstraintLayoutلی اوت در اندروید ۱۲ : آشنایی با Layout Inspectorلی اوت در اندروید ۱۳ : بهینه سازی رابط کاربری لی اوت در اندروید ۱۴ : استفاده از تگ includeلی اوت در اندروید ۱۵ : استفاده از تگ mergeلی اوت در اندروید ۱۶ : استفاده از ViewStubبا ساده ترین نوع لی اوت یعنی 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اگر این موضوع برای شما واضح نیست کافیست یک رنگ بک گراند برای 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 معرفی خواهند شد.