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

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

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

  • شکل را ایجاد کنید.
  • تصویر را به شکل مورد نظر بچسبانید (کلیپس کنید).

نتایج

سگ در شش ضلعی با سایه اعمال شده در اطراف لبه ها
شکل ۱. شکل سفارشی اعمال شده به عنوان گیره.

سازگاری نسخه

این پیاده‌سازی مستلزم آن است که 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 ، با تضمین اینکه تعاریف شکل و برش فقط یک بار محاسبه می‌شوند و برای ترکیب‌بندی‌های بعدی رابط کاربری به خاطر سپرده می‌شوند، عملکرد را بهینه می‌کند.

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

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

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

سوالی یا بازخوردی دارید؟

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