نمایش تصویر بریده شده به شکل

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

برای نمایش تصویر بریده شده به شکل، باید موارد زیر را انجام دهید:

• شکل را ایجاد کنید.
• تصویر را به شکل برش دهید.

سازگاری نسخه

این پیاده سازی مستلزم آن است که 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)
    }
}
ShapesSnippets.kt

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

• 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)
    )
}
ShapesSnippets.kt

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

• اشیاء RoundedPolygon و RoundedPolygonShape برای تعریف و اعمال یک شکل شش ضلعی بر روی تصویر استفاده می شود.
• کد از graphicsLayer برای اضافه کردن سایه مبتنی بر ارتفاع به تصویر استفاده می کند. این باعث ایجاد حس عمق و جدایی بصری از پس زمینه می شود.
• استفاده از بلوک های remember عملکرد را با اطمینان از اینکه شکل و تعاریف برش فقط یک بار محاسبه می شود و برای ترکیب های بعدی رابط کاربری به خاطر سپرده می شود، بهینه می کند.

نتایج

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

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

نمایش تصاویر

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

مجموعه راهنمای سریع

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

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

به سؤالات متداول بروید بازخورد بگذارید