عرض صورة مُقتطعة على شكل

يمكنك جعل حجم الصورة يناسب شكلاً تم اقتصاصه، ورسم ظلال حول محيط الشكل لإضفاء مظهر ثلاثي الأبعاد. هذه التقنية مفيدة لإنشاء تصاميم مثل الصور الرمزية والصور المصغّرة للمنتجات، أو عرض الشعارات بأشكال مخصّصة.

لعرض صورة تم اقتصاصها لتناسب شكلاً، عليك اتّباع الخطوات التالية:

• إنشاء الشكل
• اقتصاص الصورة لتناسب الشكل

النتائج

التوافق مع الإصدارات

يتطلّب هذا التنفيذ ضبط `minSDK` لمشروعك على مستوى واجهة برمجة التطبيقات 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 إلى تحسين الأداء من خلال التأكّد من احتساب تعريفات الشكل والاقتصاص مرة واحدة فقط وتذكّرها لعمليات إعادة إنشاء واجهة المستخدم اللاحقة.

المجموعات التي تتضمّن هذا الدليل

هذا الدليل جزء من مجموعات "الدليل السريع" المنسّقة التي تغطي أهدافًا أوسع لتطوير تطبيقات Android:

عرض الصور

يمكنك التعرّف على تقنيات استخدام صور مرئية جذابة وساطعة لإضفاء مظهر جميل على تطبيق Android.

مجموعة "الدليل السريع"

هل لديك أسئلة أو ملاحظات؟

انتقِل إلى صفحة الأسئلة الشائعة وتعرَّف على "الأدلة السريعة" أو تواصَل معنا وأخبرنا بآرائك.

الانتقال إلى الأسئلة الشائعة تقديم ملاحظات