طراحی متریال، عناصر رابط کاربری را به صورت برجسته نمایش میدهد. این ویژگی به کاربران کمک میکند تا اهمیت نسبی هر عنصر را درک کرده و توجه خود را به وظیفه فعلی معطوف کنند.
ارتفاع یک نما، که با ویژگی Z نشان داده میشود، ظاهر بصری سایه آن را تعیین میکند. نماهایی با مقادیر Z بالاتر، سایههای بزرگتر و نرمتری ایجاد میکنند و نماهایی با مقادیر Z کمتر را میپوشانند. با این حال، مقدار Z یک نما بر اندازه نما تأثیری ندارد.
سایهها توسط والد نمای مرتفع رسم میشوند. آنها تابع برش نمای استاندارد هستند و به طور پیشفرض توسط والد برش داده میشوند.
همچنین، قابلیت Elevation برای ایجاد انیمیشنهایی مفید است که در آنها ویجتها هنگام انجام عملیات، موقتاً از صفحه نمایش بالاتر میروند.
برای اطلاعات بیشتر، به مبحث ارتفاع در طراحی متریال مراجعه کنید.
به نماهای خود ارتفاع اختصاص دهید
مقدار Z برای یک نما دارای دو جزء است:
- ارتفاع: جزء استاتیک
- ترجمه: کامپوننت پویای مورد استفاده برای انیمیشنها
Z = elevation + translationZ
مقادیر Z بر حسب dp (پیکسلهای مستقل از چگالی) اندازهگیری میشوند.
برای تنظیم ارتفاع پیشفرض (در حالت استراحت) یک نما، از ویژگی android:elevation در طرحبندی XML استفاده کنید. برای تنظیم ارتفاع یک نما در کد یک فعالیت، از متد View.setElevation() استفاده کنید.
برای تنظیم ترجمه یک نما، از متد View.setTranslationZ() استفاده کنید.
متدهای ViewPropertyAnimator.z() و ViewPropertyAnimator.translationZ() به شما امکان میدهند ارتفاع نماها را متحرکسازی کنید. برای اطلاعات بیشتر، به مرجع API برای ViewPropertyAnimator و راهنمای توسعهدهندهی انیمیشن ویژگی مراجعه کنید.
شما همچنین میتوانید از StateListAnimator برای مشخص کردن این انیمیشنها به صورت اعلانی استفاده کنید. این امر به ویژه برای مواردی که تغییرات حالت باعث ایجاد انیمیشن میشوند، مانند زمانی که کاربر روی یک دکمه ضربه میزند، مفید است. برای اطلاعات بیشتر، به بخش متحرکسازی تغییرات حالت نما با استفاده از StateListAnimator مراجعه کنید.
سایهها و خطوط بیرونی نما را سفارشی کنید
مرزهای پسزمینهی قابل ترسیم یک نما، شکل پیشفرض سایهی آن را تعیین میکنند. خطوط بیرونی، شکل بیرونی یک شیء گرافیکی را نشان میدهند و ناحیهی موجدار را برای بازخورد لمسی تعریف میکنند.
نمای زیر را در نظر بگیرید که با یک پسزمینهی قابل ترسیم تعریف شده است:
<TextView android:id="@+id/myview" ... android:elevation="2dp" android:background="@drawable/myrect" />
پسزمینهی قابل ترسیم به صورت یک مستطیل با گوشههای گرد تعریف میشود:
<!-- res/drawable/myrect.xml --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#42000000" /> <corners android:radius="5dp" /> </shape>
این نما سایهای با گوشههای گرد ایجاد میکند، زیرا پسزمینهی قابل ترسیم، طرح کلی نما را تعریف میکند. ارائهی یک طرح کلی سفارشی، شکل پیشفرض سایهی نما را لغو میکند.
برای تعریف یک outline سفارشی برای یک view در کد خود، موارد زیر را انجام دهید:
- کلاس
ViewOutlineProviderارث بری (extend) میکند. - متد
getOutline()را بازنویسی (override) کنید. - با استفاده از متد
View.setOutlineProvider()ارائهدهندهی طرح کلی جدید را به نمای خود اختصاص دهید.
شما میتوانید با استفاده از متدهای کلاس Outline ، خطوط بیرونی بیضی و مستطیلی با گوشههای گرد ایجاد کنید. ارائهدهندهی پیشفرض خطوط بیرونی برای نماها، خطوط بیرونی را از پسزمینهی نما دریافت میکند. برای جلوگیری از ایجاد سایه توسط نما، ارائهدهندهی خطوط بیرونی آن را روی null تنظیم کنید.
نمایش کلیپها
برش نماها به شما امکان میدهد شکل یک نما را تغییر دهید. میتوانید نماها را برای سازگاری با سایر عناصر طراحی یا برای تغییر شکل یک نما در پاسخ به ورودی کاربر، برش دهید. میتوانید با استفاده از متد View.setClipToOutline() یک نما را به ناحیهی بیرونی آن برش دهید. فقط خطوط بیرونی که مستطیل، دایره و مستطیلهای گرد هستند، از برش پشتیبانی میکنند، همانطور که توسط متد Outline.canClip() تعیین میشود.
برای برش یک نما به شکل یک drawable، آن drawable را به عنوان پسزمینه نما تنظیم کنید - همانطور که در مثال قبلی نشان داده شده است - و متد View.setClipToOutline() را فراخوانی کنید.
برش نماها یک عملیات پرهزینه است، بنابراین شکلی را که برای برش یک نما استفاده میکنید، متحرک نکنید. برای دستیابی به این جلوه، از انیمیشن آشکار استفاده کنید.