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

تصاویر را می توان با استفاده از ویژگی های موجود در یک 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

شکل گوشه گرد - از 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

همچنین می توانید با گسترش 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

یک حاشیه به 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

اگر می‌خواهید یک مرز گرادیان ایجاد کنید، می‌توانید از 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

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

برای تبدیل یک تصویر به یک نسبت ابعاد سفارشی، از 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

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

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

سایر 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

برای اطلاعات بیشتر در مورد حالت های ترکیبی مختلف موجود، به مستندات مرجع 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

کنتراست یا روشنایی یک 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

رنگ های یک 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

تار کردن 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

هنگام محو کردن 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

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

توصیه شده برای شما

• توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
• اصلاح کننده های گرافیکی
• در حال بارگذاری تصاویر {:#loading-images}
• نمادهای مواد {:#material-icons}

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