یک تصویر را سفارشی کنید

تصاویر را می توان با استفاده از ویژگی های موجود در یک Image composable ( contentScale ، colorFilter ) سفارشی کرد. همچنین می توانید Modifiers موجود را برای اعمال جلوه های مختلف بر روی Image خود اعمال کنید. اصلاح‌کننده‌ها را می‌توان در هر Composable استفاده کرد، نه فقط Image composable، در حالی که contentScale و colorFilter پارامترهای صریح در Image composable هستند.

مقیاس محتوا

یک گزینه contentScale را برای برش یا تغییر نحوه مقیاس بندی یک تصویر در محدوده آن مشخص کنید. به طور پیش فرض، اگر گزینه contentScale مشخص نکنید، ContentScale.Fit استفاده خواهد شد.

در مثال زیر، Image composable به اندازه 150dp با حاشیه محدود شده است و پس‌زمینه روی Image composable روی زرد تنظیم شده است تا گزینه‌های ContentScale مختلف را در جدول زیر نشان دهد.

val imageModifier = Modifier
    .size(150.dp)
    .border(BorderStroke(1.dp, Color.Black))
    .background(Color.Yellow)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Fit,
    modifier = imageModifier
)
CustomizeImageSnippets.kt

تنظیم گزینه های مختلف ContentScale منجر به خروجی های متفاوتی می شود. در زیر جدولی وجود دارد که می تواند به انتخاب حالت ContentScale صحیح مورد نیاز شما کمک کند:

تصویر منبع
ContentScale	نتیجه - تصویر پرتره:	نتیجه - تصویر منظره:
ContentScale.Fit : با حفظ نسبت تصویر (پیش‌فرض) تصویر را به طور یکنواخت مقیاس دهید. اگر محتوا کوچک‌تر از اندازه باشد، تصویر برای تناسب با محدوده‌ها، بزرگ‌تر می‌شود.
ContentScale.Crop : تصویر را در فضای موجود وسط برش دهید.
ContentScale.FillHeight : منبع را با حفظ نسبت تصویر مقیاس کنید تا مرزها با ارتفاع مقصد مطابقت داشته باشند.
ContentScale.FillWidth : منبع را با حفظ نسبت ابعادی مقیاس دهید تا مرزها با عرض مقصد مطابقت داشته باشند.
ContentScale.FillBounds : محتوا را به صورت عمودی و افقی به صورت غیر یکنواخت مقیاس کنید تا محدوده مقصد را پر کنید. (توجه: اگر تصاویر را در محفظه هایی قرار دهید که با نسبت دقیق تصویر مطابقت ندارند، این کار باعث تحریف می شود)
ContentScale.Inside : منبع را برای حفظ نسبت تصویر در محدوده مقصد، مقیاس کنید. اگر منبع در هر دو بعد کوچکتر یا مساوی با مقصد باشد، رفتاری مشابه با «هیچ» دارد. محتوا همیشه در محدوده ها قرار می گیرد. اگر محتوا کوچکتر از کران باشد، هیچ مقیاسی اعمال نخواهد شد.	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:
ContentScale.None : هیچ مقیاسی روی منبع اعمال نکنید. اگر محتوا کوچکتر از محدوده مقصد باشد، برای تناسب با منطقه بزرگ نمی شود.	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:

یک Image قابل ترکیب را به یک شکل برش دهید

برای اینکه یک تصویر متناسب با یک شکل باشد، از اصلاح کننده clip داخلی استفاده کنید. برای برش یک تصویر به شکل دایره، از Modifier.clip(CircleShape) استفاده کنید:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(CircleShape)
)
CustomizeImageSnippets.kt

شکل 1 : برش یک تصویر با CircleShape

شکل گوشه گرد - از Modifier.clip(RoundedCornerShape(16.dp) ) با اندازه گوشه هایی که می خواهید گرد شوند استفاده کنید:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(RoundedCornerShape(16.dp))
)
CustomizeImageSnippets.kt

شکل 2 : برش یک تصویر با RoundedCornerShape

همچنین می توانید با گسترش Shape و ارائه Path برای برش دادن شکل، شکل برش خود را ایجاد کنید:

class SquashedOval : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container.
            addOval(
                Rect(
                    left = size.width / 4f,
                    top = 0f,
                    right = size.width * 3 / 4f,
                    bottom = size.height
                )
            )
        }
        return Outline.Generic(path = path)
    }
}

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(SquashedOval())
)
CustomizeImageSnippets.kt

شکل 3 : برش یک تصویر با شکل مسیر سفارشی

یک حاشیه به Image composable اضافه کنید

یک عملیات رایج ترکیب Modifier.border() با Modifier.clip() برای ایجاد یک حاشیه در اطراف یک تصویر است:

val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, Color.Yellow),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)
CustomizeImageSnippets.kt

شکل 4 : یک تصویر را بریده و یک حاشیه در اطراف آن ایجاد کنید

اگر می‌خواهید یک مرز گرادیان ایجاد کنید، می‌توانید از Brush API برای ترسیم یک مرز گرادیان رنگین کمانی در اطراف تصویر استفاده کنید:

val rainbowColorsBrush = remember {
    Brush.sweepGradient(
        listOf(
            Color(0xFF9575CD),
            Color(0xFFBA68C8),
            Color(0xFFE57373),
            Color(0xFFFFB74D),
            Color(0xFFFFF176),
            Color(0xFFAED581),
            Color(0xFF4DD0E1),
            Color(0xFF9575CD)
        )
    )
}
val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, rainbowColorsBrush),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)
CustomizeImageSnippets.kt

شکل 5 : مرز دایره گرادیان رنگین کمان

یک نسبت ابعاد سفارشی تنظیم کنید

برای تبدیل یک تصویر به یک نسبت ابعاد سفارشی، از Modifier.aspectRatio(16f/9f) استفاده کنید تا نسبت سفارشی برای یک تصویر (یا هر نوع قابل ترکیبی برای آن موضوع) ارائه دهید.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    modifier = Modifier.aspectRatio(16f / 9f)
)
CustomizeImageSnippets.kt

شکل 6 : استفاده از Modifier.aspectRatio(16f/9f) در تصویر

فیلتر رنگ - تغییر رنگ پیکسل های تصویر

Image composable دارای یک پارامتر colorFilter است که می تواند خروجی تک تک پیکسل های تصویر شما را تغییر دهد.

رنگ آمیزی یک تصویر

با استفاده از ColorFilter.tint(color, blendMode) یک حالت ترکیبی با رنگ داده شده بر روی Image قابل ترکیب شما اعمال می شود. ColorFilter.tint(color, blendMode) از BlendMode.SrcIn برای رنگ آمیزی محتوا استفاده می کند، به این معنی که رنگ ارائه شده نشان داده می شود، جایی که تصویر روی صفحه نمایش داده می شود. این برای نمادها و وکتورهایی که نیاز به تم های متفاوت دارند مفید است.

Image(
    painter = painterResource(id = R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description),
    colorFilter = ColorFilter.tint(Color.Yellow)
)
CustomizeImageSnippets.kt

شکل 7 : ColorFilter.tint با BlendMode.SrcIn اعمال می شود

سایر BlendMode در جلوه های متفاوتی نتیجه می دهند. برای مثال، تنظیم BlendMode.Darken با Color.Green روی یک تصویر نتیجه زیر را ایجاد می کند:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)
CustomizeImageSnippets.kt

شکل 8 : رنگ. رنگ سبز با BlendMode.Darken

برای اطلاعات بیشتر در مورد حالت های ترکیبی مختلف موجود، به مستندات مرجع BlendMode مراجعه کنید.

اعمال فیلتر Image با ماتریس رنگ

تصویر خود را با استفاده از گزینه ColorFilter ماتریس رنگ تغییر دهید. به عنوان مثال، برای اعمال یک فیلتر سیاه و سفید بر روی تصاویر خود می توانید از ColorMatrix استفاده کنید و میزان اشباع را روی 0f تنظیم کنید.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) })
)
CustomizeImageSnippets.kt

شکل 9 : ماتریس رنگ با اشباع 0 (تصویر سیاه و سفید)

کنتراست یا روشنایی یک Image قابل ترکیب را تنظیم کنید

برای تغییر کنتراست و روشنایی یک تصویر، می توانید از ColorMatrix برای تغییر مقادیر استفاده کنید:

val contrast = 2f // 0f..10f (1 should be default)
val brightness = -180f // -255f..255f (0 should be default)
val colorMatrix = floatArrayOf(
    contrast, 0f, 0f, 0f, brightness,
    0f, contrast, 0f, 0f, brightness,
    0f, 0f, contrast, 0f, brightness,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)
CustomizeImageSnippets.kt

شکل 10 : تنظیم روشنایی و کنتراست تصویر با استفاده از ColorMatrix

رنگ های یک Image قابل ترکیب را معکوس کنید

برای معکوس کردن رنگ های یک تصویر، ColorMatrix را طوری تنظیم کنید که رنگ ها را معکوس کند:

val colorMatrix = floatArrayOf(
    -1f, 0f, 0f, 0f, 255f,
    0f, -1f, 0f, 0f, 255f,
    0f, 0f, -1f, 0f, 255f,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)
CustomizeImageSnippets.kt

شکل 11 : رنگ های معکوس روی تصویر

تار کردن Image قابل ترکیب

برای محو کردن یک تصویر، از Modifier.blur() استفاده کنید، که radiusX و radiusY را تامین می کند، که شعاع تاری را به ترتیب در جهت افقی و عمودی مشخص می کند.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )
)
CustomizeImageSnippets.kt

شکل 12 : BlurEffect روی تصویر اعمال شده است

هنگام محو کردن Images ، توصیه می شود از BlurredEdgeTreatment(Shape) به جای BlurredEdgeTreatment.Unbounded استفاده کنید، زیرا دومی برای محو کردن رندرهای دلخواه استفاده می شود که انتظار می رود خارج از محدوده محتوای اصلی ارائه شوند. برای تصاویر، این احتمال وجود دارد که آنها خارج از محدوده محتوا ارائه نشوند. در حالی که محو کردن یک مستطیل گرد ممکن است به این تمایز نیاز داشته باشد.

به عنوان مثال، اگر BlurredEdgeTreatment در تصویر بالا روی Unbounded قرار دهیم، لبه های تصویر به جای شارپ تار به نظر می رسند:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment.Unbounded
        )
        .clip(RoundedCornerShape(8.dp))
)
CustomizeImageSnippets.kt

شکل 13 : BlurEdgeTreatment. Unbounded

توجه: جلوه تاری فقط در اندروید 12 و بالاتر پشتیبانی می‌شود. تلاش برای استفاده از این Modifier در نسخه‌های قدیمی‌تر Android نادیده گرفته می‌شود.

{% کلمه به کلمه %} {% آخر کلمه %}