نمایش نوار بالای برنامه

برای کمک به کاربران برای پیمایش و دسترسی به عملکردهای برنامه شما، با استفاده از TopAppBar ، یک نوار برنامه بالا ایجاد کنید.

سازگاری نسخه

این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.

وابستگی ها

یک کامپوزیشن برای نوار برنامه بالا ایجاد کنید

یک نوار برنامه بالا با استفاده از MediumTopAppBar composable ایجاد کنید که وقتی کاربر در قسمت محتوا به پایین پیمایش می‌کند جمع می‌شود و زمانی که کاربر به بالای محتوا برمی‌گردد بزرگ می‌شود:

نکات کلیدی در مورد کد

  • Scaffold بیرونی با مجموعه TopBar .
  • عنوانی متشکل از یک عنصر Text .
  • یک نوار بالا با یک اقدام واحد تعریف شده است.
  • یک عمل IconButton با یک onClick lambda برای انجام عمل.
  • یک IconButton حاوی یک Icon که دارای یک تصویر نماد و یک متن توضیحات محتوا است.
  • رفتار اسکرول برای محتوای داخلی Scaffold به صورت enterAlwaysScrollBehavior() تعریف می شود. وقتی کاربر محتوای داخلی را بالا می‌برد، نوار برنامه را جمع می‌کند و وقتی کاربر محتوای داخلی را پایین می‌کشد، نوار برنامه را گسترش می‌دهد.
  • علاوه بر MediumTopBar که شامل عنوان است، می توانید از:
    • TopAppBar : برای صفحه‌هایی که به پیمایش یا اقدامات زیادی نیاز ندارند استفاده کنید.
    • CenterAlignedTopAppBar : برای صفحه‌هایی استفاده می‌شود که دارای یک عمل اصلی هستند. عنوان در مرکز مؤلفه است.
    • MediumTopAppBar : برای صفحه‌هایی که به مقدار متوسطی از پیمایش و اقدامات نیاز دارند استفاده کنید.
    • LargeTopAppBar : برای صفحاتی که نیاز به پیمایش و اقدامات زیادی دارند استفاده کنید. از padding بیشتری نسبت به MediumTopAppBar استفاده می کند و عنوان را در زیر هر نماد اضافی قرار می دهد.

نتایج

شکل 1. نوار برنامه متوسط ​​بالا.

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

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

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.
به سؤالات متداول بروید بازخورد بگذارید