میتوانید یک تصویر را بر روی یک شکل بریده شده قرار دهید و سایههایی را در اطراف محیط شکل بکشید تا حسی سهبعدی ایجاد کنید. این تکنیک برای ایجاد طرح هایی مانند آواتارها و تصاویر بندانگشتی محصول یا نمایش لوگو با اشکال سفارشی مفید است.
برای نمایش تصویر بریده شده به شکل، باید موارد زیر را انجام دهید:
- شکل را ایجاد کنید.
- تصویر را به شکل برش دهید.
سازگاری نسخه
این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.
وابستگی ها
یک شکل ایجاد کنید
کد زیر یک شکل سفارشی ایجاد می کند که می تواند به صورت پویا یک چند ضلعی گرد را ترسیم و ارائه دهد:
fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) } class RoundedPolygonShape( private val polygon: RoundedPolygon, private var matrix: Matrix = Matrix() ) : Shape { private var path = Path() override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { path.rewind() path = polygon.toPath().asComposePath() matrix.reset() val bounds = polygon.getBounds() val maxDimension = max(bounds.width, bounds.height) matrix.scale(size.width / maxDimension, size.height / maxDimension) matrix.translate(-bounds.left, -bounds.top) path.transform(matrix) return Outline.Generic(path) } }
نکات کلیدی در مورد کد
-
RoundedPolygon.getBounds()
یک تابع پسوندی را در کلاسRoundedPolygon
تعریف می کند تا مرزهای آن را محاسبه کند. - کلاس
RoundedPolygonShape
رابطShape
پیاده سازی می کند و به شما امکان می دهد یک شکل سفارشی (یک چند ضلعی گرد) را در Jetpack Compose تعریف کنید. - شکل از یک
Matrix
برای مدیریت عملیات مقیاس بندی و ترجمه برای رندر انعطاف پذیر استفاده می کند. - تابع
createOutline()
یک شیRoundedPolygon
را می گیرد، آن را مقیاس بندی و ترجمه می کند تا در یک اندازه معین قرار گیرد، و یک شیOutline
برمی گرداند که شکل نهایی را که باید ترسیم شود، توصیف می کند.
تصویر را به یک شکل برش دهید
کد زیر تصویر را به یک شش ضلعی برش می دهد و یک سایه ریز ظریف برای ایجاد حس عمق اضافه می کند:
val hexagon = remember { RoundedPolygon( 6, rounding = CornerRounding(0.2f) ) } val clip = remember(hexagon) { RoundedPolygonShape(polygon = hexagon) } Box( modifier = Modifier .clip(clip) .background(MaterialTheme.colorScheme.secondary) .size(200.dp) ) { Text( "Hello Compose", color = MaterialTheme.colorScheme.onSecondary, modifier = Modifier.align(Alignment.Center) ) }
نکات کلیدی در مورد کد
- اشیاء
RoundedPolygon
وRoundedPolygonShape
برای تعریف و اعمال یک شکل شش ضلعی بر روی تصویر استفاده می شود. - کد از
graphicsLayer
برای اضافه کردن سایه مبتنی بر ارتفاع به تصویر استفاده می کند. این باعث ایجاد حس عمق و جدایی بصری از پس زمینه می شود. - استفاده از بلوک های
remember
عملکرد را با اطمینان از اینکه شکل و تعاریف برش فقط یک بار محاسبه می شود و برای ترکیب های بعدی رابط کاربری به خاطر سپرده می شود، بهینه می کند.
نتایج
![سگ در شش گوش با سایه اعمال شده در اطراف لبه ها](https://developer.android.com/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?hl=fa)
مجموعه هایی که حاوی این راهنما هستند
این راهنما بخشی از مجموعههای راهنمای Quick Guide است که اهداف توسعه Android گستردهتری را پوشش میدهد:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=fa)