عرض صور متعدّدة الطبقات على لوحة عرض

يمكنك دمج الصور المصدر أو تداخلها لعرض صور متعدّدة الطبقات على لوحة. على سبيل المثال، يمكنك تكرار الطريقة التي ينشئ بها إطار عمل Android رموز التطبيقات من خلال دمج عناصر قابلة للرسم منفصلة للخلفية والمقدمة. لعرض الصور المتعدّدة الطبقات، عليك اتّباع الخطوات التالية:

  • إضافة طبقات من الصور على لوحة عرض
  • ضع المصدر على الصورة.

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

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو إصدار أحدث.

التبعيات

إضافة طبقات من الصور على لوحة عرض

يضع الرمز التالي صورتَين مصدرتَين فوق بعضهما، ما يؤدي إلى عرض صورة ممزوجة على اللوحة:

class OverlayImagePainter constructor(
    private val image: ImageBitmap,
    private val imageOverlay: ImageBitmap,
    private val srcOffset: IntOffset = IntOffset.Zero,
    private val srcSize: IntSize = IntSize(image.width, image.height),
    private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height)
) : Painter() {

    private val size: IntSize = validateSize(srcOffset, srcSize)
    override fun DrawScope.onDraw() {
        // draw the first image without any blend mode
        drawImage(
            image,
            srcOffset,
            srcSize,
            dstSize = IntSize(
                this@onDraw.size.width.roundToInt(),
                this@onDraw.size.height.roundToInt()
            )
        )
        // draw the second image with an Overlay blend mode to blend the two together
        drawImage(
            imageOverlay,
            srcOffset,
            overlaySize,
            dstSize = IntSize(
                this@onDraw.size.width.roundToInt(),
                this@onDraw.size.height.roundToInt()
            ),
            blendMode = BlendMode.Overlay
        )
    }

    /**
     * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height
     */
    override val intrinsicSize: Size get() = size.toSize()

    private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize {
        require(
            srcOffset.x >= 0 &&
                srcOffset.y >= 0 &&
                srcSize.width >= 0 &&
                srcSize.height >= 0 &&
                srcSize.width <= image.width &&
                srcSize.height <= image.height
        )
        return srcSize
    }
}

النقاط الرئيسية حول الرمز

  • يستخدم OverlayImagePainter، وهو تنفيذ مخصّص Painter يمكنك استخدامه لوضع الصور فوق الصورة المصدر. يتحكّم وضع المزج في كيفية دمج الصور. لا تُلغي الصورة الأولى أي شيء آخر، لذلك لا حاجة إلى وضع دمج. يُلغي وضع المزج Overlay لل الصورة الثانية مناطق الصورة الأولى التي تغطيها الصورة الثانية.
  • يتم إلغاء DrawScope.onDraw() ويتم تداخل الصورتَين في هذه الوظيفة.
  • يتم إلغاء القيمة intrinsicSize لعرض الحجم الأساسي لل الصورة المجمّعة بشكل صحيح.

صورة المصدر التي يتمّ وضعها على سطح الصورة

باستخدام أداة الرسم المخصّصة هذه Painter، يمكنك تراكب صورة فوق الصورة المصدر على النحو التالي:

val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow)
val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)
val customPainter = remember {
    OverlayImagePainter(dogImage, rainbowImage)
}
Image(
    painter = customPainter,
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier.wrapContentSize()
)

النقاط الرئيسية حول الرمز

  • يتم تحميل كل صورة من الصور التي سيتم دمجها كمثيلات ImageBitmap قبل دمجها باستخدام OverlayImagePainter.
  • يتم عرض الصور المجمّعة بواسطة عنصر Image قابل للتركيب يستخدم الرسام المخصّص لدمج الصور المصدر عند العرض.

النتائج

أداة الرسم المخصّصة التي تتراكب صورتان فوق بعضهما
الشكل 1: Image يستخدم Painter مخصّصًا لوضع صورة قوس قزح شبه شفاف فوق صورة كلب.

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

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

تعرَّف على أساليب استخدام مرئيات مشرقة وجذابة لمنح تطبيق Android مظهرًا وشعورًا جميلَين.

إذا كانت لديك أسئلة أو ملاحظات

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