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

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

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

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

برش یک تصویر با CircleShape
شکل 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))
)

برش یک تصویر با RoundedCornerShape
شکل 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())
)

برش یک تصویر با شکل مسیر سفارشی
شکل 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)
)

یک تصویر را بریده و یک حاشیه در اطراف آن ایجاد کنید
شکل 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)
)

حاشیه دایره گرادیان رنگین کمان
شکل 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)
)

استفاده از Modifier.aspectRatio (16f/9f) در تصویر
شکل 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)
)

ColorFilter.tint با BlendMode.SrcIn اعمال شد
شکل 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)
)

رنگ.رنگ سبز با BlendMode.Darken
شکل 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) })
)

ماتریس رنگ با اشباع 0 (تصویر سیاه و سفید)
شکل 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))
)

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

رنگ های معکوس روی تصویر
شکل 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))
        )
)

BlurEffect روی تصویر اعمال شد
شکل 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))
)

BlurEdgeTreatment. نامحدود
شکل 13 : BlurEdgeTreatment. Unbounded
{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}