مرتضی دلیل
مرتضی دلیل
خواندن ۳ دقیقه·۵ سال پیش

لی اوت در اندروید ۱۳ : بهینه سازی رابط کاربری

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

لی اوت در اندروید ۱ : مفاهیم اولیه
لی اوت در اندروید ۲ : آشنایی با اتریبیوت های width و height
لی اوت در اندروید ۳ : آشنایی با اتریبیوت های margin و padding
لی اوت در اندروید ۴ : آشنایی با اتریبیوت gravity
لی اوت در اندروید ۵ : آشنایی با لی اوت های پایه
لی اوت در اندروید ۶ : آشنایی با LinearLayout
لی اوت در اندروید ۷ : اتریبیوت weight
لی اوت در اندروید ۸ : آشنایی با FrameLayout
لی اوت در اندروید ۹ : آشنایی با RelativeLayout
لی اوت در اندروید ۱۰: آشنایی با CoordinateLayout
لی اوت در اندروید ۱۱ : آشنایی با ConstraintLayout
لی اوت در اندروید ۱۲ : آشنایی با Layout Inspector
لی اوت در اندروید ۱۳ : بهینه سازی رابط کاربری (در حال خواندن این مقاله هستید)
لی اوت در اندروید ۱۴ : استفاده از تگ include
لی اوت در اندروید ۱۵ : استفاده از تگ merge
لی اوت در اندروید ۱۶ : استفاده از ViewStub



چرا باید پرفورمنس یک لی اوت را اهمیت داد؟
قبل از این باید فهمید که چطور ویوها و لی اوت ها در صفحه رندر میشوند؟

مثال زیر را ببینید:

روت لی اوت ما یک LinearLayout است.که به رنگ قرمز (واقعا قرمز؟ یا بنفش یا صورتی!؟) نشان داده شده و باعث شده همه چایلدها به اندازه 20dp از طرفین فاصله داشته باشند.

دو تکست ویو داریم که به شکل ورتیکالی زیر هم هستند چون مثلا LinearLayout حالت ورتیکال دارد.

سپس یک Nested LinearLayout داریم که هوریزونتال است و دو چایلدش در کنار هم هستند. و با رنگ آبی مشخص شده است.

دقت کنید که لی اوت ها هم در اندروید ویو حساب میشوند.اما چطور این ویوها نمایش داده میشوند؟

ما یک layout engine داریم که در سه فاز کار خودش را انجام میدهد.

اولین مرحله اندازه گیری است. پردازش از روت شروع میشود و سلسله مراتب را طی میکند. مثلا در روت ما یک قید 20dp داریم.

این مقدار باید برای همه المان های چایلد اعمال شود همچنین وزن و مارجین و پدینگ و widthو height هرکدام روی اندازه واقعی آن المان روی دیوایس اثر دارد. پس ابتدا چیزی شبیه شکل زیر محاسبه میشود:

پردازش اندازه های ویوها زمانگیر است. مخصوصا وجود nested layout به پیچیدگی و زمانبر بودن این محاسبات می افزاید.

میتوان این قاعده را بیان کرد که هر چقدر nested layout ها بیشتر باشد زمان محاسبات اندازه در صفحه طولانی تر میشود.

در فاز بعدی ما layout را داریم.در این فاز مختصات قرار گیری هر لی اوت و فرزندانش محاسبه میشود. مثلا لی اوت روت مختصات بالا و چپ آن به شکل زیر تعیین میشود

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

چنین رفتاری برای تک تک المان ها یا همان ویوها اتفاق می افتد تا محل قرارگیری آنها به طور دقیق به دست آید.

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

مشخص است که سه فاز گفته شده با توجه به میزان پیچیدگی صفحه مخصوصا nested layout ها زمانبر هستند. راه حل برای افزایش پرفورمنس این است که دو فاز اول را تا جای ممکن برای پردازشگر ساده کنیم.

عوامل زیر روی بهینه سازی پرفورمنس تاثیر مثبت دارد:

  • فاز اندازه گیری تعداد کمتری محاسبه داشته باشد همچنین فاز layout کار کمتری داشته باشد.
  • تعداد ویوهای صفحه کم باشد.
  • عدم استفاده از nested layout ها.

برای بهینه سازی با توجه به چیزهایی که یاد گرفتیم به روش زیر عمل میکنیم

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

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