UI خود را به طرح‌بندی‌های واکنش‌گرا منتقل کنید، رابط کاربری خود را به طرح‌بندی‌های واکنش‌گرا منتقل کنید، رابط کاربری خود را به طرح‌بندی‌های واکنش‌گرا منتقل کنید، رابط کاربری خود را به طرح‌بندی‌های واکنش‌گرا منتقل کنید

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

UI پاسخگو بر اصول انعطاف پذیری و تداوم تمرکز دارد.

انعطاف پذیری به چیدمان هایی اطلاق می شود که از فضای موجود استفاده بهینه می کنند و زمانی که فضای موجود تغییر می کند تنظیم می شود. تنظیمات می توانند اشکال مختلفی داشته باشند: صرفاً افزایش اندازه یک نمای واحد، تغییر موقعیت نماها به گونه ای که در مکان های قابل دسترس تری قرار گیرند، نمایش یا پنهان کردن نماهای اضافی، یا ترکیبی از این موارد.

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

چیزهایی که باید اجتناب کرد

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

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

چندین دستگاه که پنجره‌های برنامه را با اندازه‌های مختلف نشان می‌دهند.
شکل 1. اندازه پنجره ها می تواند با دستگاه فیزیکی یا اندازه نمایشگر متفاوت باشد.

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

همچنین، از تلاش برای تعیین اینکه آیا دستگاه تلفن یا رایانه لوحی است خودداری کنید . آنچه مشخصاً به عنوان یک تبلت واجد شرایط است تا حدودی ذهنی است: آیا بر اساس داشتن یک اندازه خاص یا نسبت تصویر یا ترکیبی از اندازه و نسبت تصویر است؟ با ظهور عوامل شکل جدید، این مفروضات می توانند تغییر کنند و تمایز اهمیت خود را از دست می دهد.

به جای امتحان هر یک از استراتژی های قبلی، از نقاط شکست و کلاس های اندازه پنجره استفاده کنید.

نقاط شکست و کلاس های اندازه پنجره

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

هنگام طراحی برای فاکتورهای چندگانه، مقادیر آستانه را پیدا کنید که این تصمیمات سطح بالا در جهات مختلف منشعب می شوند. برای این منظور، شبکه طرح‌بندی پاسخگو Material Design نقاط شکست را برای عرض و ارتفاع فراهم می‌کند، که به شما امکان می‌دهد اندازه‌های خام را به گروه‌های گسسته و استانداردی که به عنوان کلاس‌های اندازه پنجره نامیده می‌شوند، ترسیم کنید. به دلیل فراگیر بودن اسکرول عمودی، اکثر برنامه‌ها در درجه اول به کلاس‌های اندازه عرض اهمیت می‌دهند، بنابراین بیشتر برنامه‌ها را می‌توان برای همه اندازه‌های صفحه تنها با مدیریت چند نقطه شکست بهینه کرد. (برای اطلاعات بیشتر در مورد کلاس‌های اندازه پنجره، استفاده از کلاس‌های اندازه پنجره را ببینید.)

عناصر رابط کاربری پایدار

دستورالعمل‌های طرح‌بندی Material Design مناطقی را برای نوارهای برنامه، ناوبری و محتوا تعریف می‌کند. به طور معمول، دو مورد اول عناصر UI پایدار در (یا بسیار نزدیک) ریشه سلسله مراتب view هستند. توجه داشته باشید که "مداوم" لزوماً به این معنی نیست که نما همیشه قابل مشاهده است، بلکه به این معنی است که در حالی که سایر نماهای محتوا ممکن است جابجا شوند یا تغییر کنند، در جای خود باقی می ماند. برای مثال، یک عنصر ناوبری می‌تواند در یک کشوی کشویی باشد که خارج از صفحه است، اما کشو همیشه آنجاست.

عناصر پایدار می توانند پاسخگو باشند و معمولاً تمام عرض یا ارتفاع کامل پنجره را اشغال می کنند، بنابراین ترجیح می دهید از کلاس های اندازه برای تصمیم گیری در محل قرار دادن آنها استفاده کنید. این فضایی را که برای محتوا باقی می ماند مشخص می کند. در قطعه زیر، این اکتیویتی از نوار پایینی برای صفحه‌های فشرده و نوار بالای برنامه برای صفحه‌های بزرگتر استفاده می‌کند. طرح‌بندی‌های واجد شرایط از نقاط شکست عرض استفاده می‌کنند که قبلاً توضیح داده شد. 

<!-- res/layout/main_activity.xml -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view(s) -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>


<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        ... />

    <!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>

محتوا

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

اطمینان حاصل کنید که همه داده ها برای اندازه های مختلف در دسترس هستند

امروزه اکثر چارچوب‌های برنامه از یک مدل داده استفاده می‌کنند که از مؤلفه‌های Android که به رابط کاربری (فعالیت‌ها، بخش‌ها و نماها) کمک می‌کنند، جدا است. با Jetpack، این نقش معمولاً توسط ViewModels انجام می‌شود، که مزیت اضافه‌ای برای بقا در تغییرات پیکربندی دارند (برای اطلاعات بیشتر به ViewModel Overview مراجعه کنید).

هنگام اجرای طرح‌بندی که با اندازه‌های مختلف سازگار است، ممکن است استفاده از یک مدل داده متفاوت بر اساس اندازه فعلی وسوسه انگیز باشد. با این حال، این برخلاف اصل جریان داده های یک طرفه است. داده‌ها باید به سمت «نماها» به سمت پایین جریان پیدا کنند و رویدادهایی مانند تعاملات کاربر باید به سمت بالا جریان داشته باشند. ایجاد وابستگی در جهت دیگر، جایی که مدل داده به پیکربندی لایه UI بستگی دارد، این امر را به طرز چشمگیری پیچیده می کند. وقتی برنامه تغییر اندازه داد، باید تبدیل از یک مدل داده به مدل دیگر را حساب کنید.

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

محتوا را گسترش دهید

طرح بندی متعارف : خوراک

فضای گسترده می‌تواند فرصتی باشد برای بزرگ‌تر کردن مطالب و قالب‌بندی مجدد محتوایتان به طوری که در دسترس‌تر باشد.

مجموعه ها را بزرگتر کنید بسیاری از برنامه‌ها مجموعه‌ای از موارد را در یک ظرف پیمایش نشان می‌دهند، مانند RecyclerView یا ScrollView . فعال کردن یک ظرف برای بزرگتر شدن خودکار به این معنی است که می توان محتوای بیشتری را نشان داد. با این حال، مراقب باشید که محتوای داخل ظرف بیش از حد کشیده یا مخدوش نشود. برای مثال، با یک RecyclerView ، زمانی که عرض آن فشرده نیست، از یک مدیر طرح‌بندی متفاوت مانند GridLayoutManager ، StaggeredGridLayoutManager یا FlexboxLayout استفاده کنید.

دستگاهی تا و باز شده نشان می‌دهد که چگونه مدیران طرح‌بندی متفاوت برنامه را بر اساس کلاس اندازه عرض طراحی می‌کنند.
شکل 2. مدیران طرح های مختلف برای کلاس های اندازه پنجره های مختلف.

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

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

راه‌های زیادی برای ایجاد چنین طرح‌بندی وجود دارد، اما ConstraintLayout مخصوصاً برای این منظور مناسب است، زیرا راه‌های زیادی برای محدود کردن اندازه نمای کودک - از جمله بر اساس درصد یا اعمال نسبت ابعاد - و قرار دادن فرزندانش نسبت به خودش یا به بچه های دیگر درباره همه این قابلیت‌ها در ساخت یک رابط کاربری پاسخگو با ConstraintLayout بیشتر بیاموزید.

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

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

از طرف دیگر، یک جزء تمام صفحه می تواند به یک رابط گفتگوی شناور تبدیل شود. این به ویژه زمانی مناسب است که آن مؤلفه برای انجام یک کار فوری کاربر، مانند نوشتن ایمیل یا ایجاد یک رویداد تقویم، به تمرکز انحصاری نیاز دارد.

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

محتوا اضافه کنید

طرح‌بندی‌های متعارف : صفحه پشتیبانی، نمای فهرست جزئیات

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

نکته مهم این است که وقتی فضای کافی برای نمایش صفحه وجود ندارد، این محتوا را کجا قرار دهیم. در اینجا چند جایگزین برای بررسی وجود دارد:

  • کشوی کناری در لبه انتهایی با استفاده از DrawerLayout
  • کشوی پایین با استفاده از BottomSheetBehavior
  • منو یا پنجره بازشو با ضربه زدن روی نماد منو قابل دسترسی است
شکل 4. روش های جایگزین برای ارائه محتوای اضافی در یک صفحه پشتیبانی.

یک طرح دو صفحه ای ایجاد کنید. صفحه‌های بزرگ ممکن است ترکیبی از ویژگی‌هایی را نشان دهند که معمولاً به طور جداگانه در صفحه‌های کوچک‌تر ظاهر می‌شوند. یک الگوی تعامل متداول در بسیاری از برنامه‌ها این است که فهرستی از موارد، مانند مخاطبین یا نتایج جستجو را نشان می‌دهد، و هنگامی که مورد انتخاب می‌شود، به جزئیات یک مورد بروید. به جای بزرگ‌نمایی فهرست برای صفحه‌های بزرگ‌تر، از نمای فهرست جزئیات استفاده کنید تا هر دو ویژگی را در کنار هم در یک طرح‌بندی دو جداره نشان دهید. برخلاف یک صفحه پشتیبان، صفحه جزئیات نمای فهرست جزئیات یک عنصر مستقل است که می تواند به طور مستقل در صفحه نمایش های کوچکتر نشان داده شود.

از ویجت اختصاصی SlidingPaneLayout برای اجرای نمای فهرست جزئیات استفاده کنید. این ویجت به طور خودکار محاسبه می کند که آیا فضای کافی برای نمایش هر دو صفحه با هم بر اساس مقدار layout_width مشخص شده برای دو صفحه وجود دارد یا خیر، و هر فضای باقی مانده را می توان با استفاده از layout_weight توزیع کرد. وقتی فضای کافی وجود ندارد، هر پنجره از عرض کامل طرح‌بندی استفاده می‌کند، و پنجره جزئیات یا خارج از صفحه یا بالای صفحه فهرست می‌چرخد.

SlidingPaneLayout که هر دو صفحه یک طرح بندی فهرست جزئیات را در دستگاهی با نمایشگر گسترده نشان می دهد.
شکل 5. SlidingPaneLayout که دو صفحه را در عرض گسترده و یک صفحه را در عرض فشرده نشان می دهد.

ایجاد یک طرح‌بندی دو صفحه‌ای حاوی جزئیات بیشتری درباره استفاده از SlidingPaneLayout است. همچنین توجه داشته باشید که این الگو ممکن است بر نحوه ساختار نمودار پیمایش شما تأثیر بگذارد (به پیمایش برای رابط‌های کاربری پاسخگو مراجعه کنید).

منابع اضافی

{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}