لی اوت در اندروید بخش ۶ : آشنایی با LinearLayout

این مقاله به همراه دیگر مقالات این مجموعه ۱۶ قسمتی، بر اساس آموزش ویدیویی در pluralsight به نام Android Fundamental : Layout تهیه شده است. تاریخ تولید این دوره ۲۰۱۹ است.روند منبع فوق در فهرست و محتوای مقالات، بطور کلی حفظ شده است ولی در جزئیات یک ترجمه کلمه به کلمه نیست؛ نگارش فهرست و محتوا با افزودن و دخالت همراه بوده است.بطور کلی هر جا حس شده توضیح بیشتر به درک مطلب کمک می‌کند دریغ نشده است.لی اوت در اندروید ۱ : مفاهیم اولیهلی اوت در اندروید ۲ : آشنایی با اتریبیوت های width و height لی اوت در اندروید ۳ : آشنایی با اتریبیوت های margin و padding لی اوت در اندروید ۴ : آشنایی با اتریبیوت gravity لی اوت در اندروید ۵ : آشنایی با لی اوت های پایهلی اوت در اندروید ۶ : آشنایی با LinearLayout (در حال خواندن این مقاله هستید) لی اوت در اندروید ۷ : اتریبیوت weightلی اوت در اندروید ۸ : آشنایی با FrameLayoutلی اوت در اندروید ۹ : آشنایی با RelativeLayoutلی اوت در اندروید ۱۰: آشنایی با CoordinateLayout لی اوت در اندروید ۱۱ : آشنایی با ConstraintLayoutلی اوت در اندروید ۱۲ : آشنایی با Layout Inspectorلی اوت در اندروید ۱۳ : بهینه سازی رابط کاربری لی اوت در اندروید ۱۴ : استفاده از تگ includeلی اوت در اندروید ۱۵ : استفاده از تگ mergeلی اوت در اندروید ۱۶ : استفاده از ViewStubاین لی اوت به ما این امکان را میدهد که ویوها را یکی پس از دیگری در کنار هم قرار دهیم. بر همین اساس دو orientation برای LinearLayout داریم، یکی horizontal و دیگری vertical.تفاوت قرارگیری المان ها در لی اوت ورتیکال و هاریزونتالدر مثال زیر لی اوت افقی است:یک لی اوت افقی (horizontal) بصورت پیش فرض LinearLayout به شکل horizontal است. یعنی بدون مشخص کردن اتریبیوت orientation، حالت افقی دارد.با درگ کردن یک ویوی جدید در LinearLayout میبینید که محیط دیزاین میخواهد آنرا «کنار» ویو(المان) قبلی بگذارد.یک تکست ویوی جدید به صفحه اضافه کردیم، نوار عمودی بنفش(بنفش یا صورتی!!؟) نشان میدهد که این لی اوت ما را مقید به قرارگیری المان ها در صف افقی می کند.نتیجه اضافه کردن تکست ویوی جدیدیک دکمه به عنوان ویوی جدید به لی اوت اضافه کردیم. باز هم در کنار المان قبل قرار میگیرد.همینطور که میبینید با اضافه کردن المان ها، به شکل ردیفی در کنار هم چیده میشوند.میخواهیم گراویتی کامپوننت درون لی اوت را روی حالتهای orientation مختلف تست کنیم. (منظور layout_gravity است)یک لی اوت افقی طبیعتا اگر orientation به شکل افقی باشد گراویتی فقط به شکل عمودی عمل میکند یعنی گراویتی افقی معنی ندارد. تصویر زیر را ببینید:سه حالت گراویتی برای ویوی داخل لی اوت افقی به شکل فوق وجود دارد.یک لی اوت عمودیبرای اورینتیشن عمودی گراویتی به شکل افقی کار میکند.(منظور layout_gravity است)سه حالت گراویتی برای ویوی داخل لی اوت عمودی به شکل فوق وجود دارد.دقت کنید مقادیر layout_gravity را در حالت افقی و عمودی برای همدیگر استفاده نکنید.مثلا در حالت horizontal نمیتوان از مقادیر start,center,end استفاده کرد، چون فقط این مقادیر مربوط به حالت vertical است.یا در حالت vertical نمیتوان از مقادیر top,center,bottom استفاده کرد، چون این مقادیر مربوط به حالت horizontal است.البته فقط center در هر دو حالت مشترک است که به لحاظ نمایشی نتیجه متفاوت دارد.دقت کنید که ما تا اینجا فقط در مورد layout_gravity صحبت کردیم.برای گراویتی خالی چون مربوط به خود ویویی است که اتریبیوت به آن نسبت داده شده و ربطی به لی اوت بیرونی ندارد، مشکل خاصی در استفاده از حالت های مختلف نداریم.یک صفحه لاگین ساده راتصور کنید:صفحه لاگین شامل شش المان داخل LinearLayoutیک لی اوت روت داریم که ورتیکال است.همچنین جزئیات نشان میدهد که گراویتی آن center است.یعنی تمام کانتنت(المان های داخلی) موجود در این لی اوت در مرکز قرار دارد.ضمنا همه چایلدها با اینکه به شکل عمودی و زیر هم چیده شده‌اند، اما فواصل مرتبط با خود را دارند. مثلا فاصله EditText مربوط به ایمیل به اندازه 20dp از بالاست. از بالا یعنی فاصله از ویوی قبلی که image است.اما کاری که قرار است انجام دهیم تنظیم دکمه هاست.تصویر زیر را ببینید، میخواهیم خروجی به شکل زیر باشد::دو ویو به شکل افقی در کنار هم هستند.اما لی اوت اصلی ما ورتیکال است. پس نمیشود این دو را کنار هم گذاشت.ما در اندروید مفهومی به نام nested layout داریم.(یعنی یک لی اوت زیر مجموعه یک لی اوت دیگر باشد)در بخش سرچ یک LinearLayout افقی سرچ میکنیم:از طریق بخش سرچ میتوان المان یا کامپوننت مورد نظر را سرچ کرد.و به شکل زیر با درگ کردن به لی اوت اصلی اضافه میکنیم:المان یافت شده را به بخش Component Tree اضافه می‌کنیم.حالا کافیست که دو ویویی که قرار است کنار هم قرار بگیرند را به همین لی اوت جدید منتقل کنیم:فراموش نکنیم که حالت ویوهای اضافه شده wrap_content باشد. همچنین با جابجایی المان ها در پنجره Component Tree میتوانید اولویت قرارگیری از چپ به راست را تغییر دهید. مثلا سمت چپ اول signUp باشد یا اول Forget Password.اینکه تراز نیستند بخاطر این است که یکی نسبت به بالا مارجین دارد و آن را میتوانیم حذف کنیم.(صفر قرار دهیم)خروجی به شکل زیر مد نظر است اما ما هنوز نتوانستیم این دو المان را به شکل متوازن در دو سمت صفحه قرار دهیم.آنچه طراحی کردیم با آنچه در خروجی مد نظر است تفاوت دارد.برای ادامه کار نیاز داریم مفهوم weight را بدانیم.در مقاله بعدی بطور کامل در این مورد صحبت خواهیم کرد.امیدوارم با مفهوم orientation و همچنین nested layout آشنا شده باشید.