میتوانید تصاویر را بااستفاده از داراییهای Image ترکیبشدنی
(contentScale، colorFilter) سفارشیسازی کنید. همچنین میتوانید اصلاحکنندههای موجود را برای اعمال جلوههای مختلف روی Image اعمال کنید. از اصلاحکنندهها میتوان در هر
ترکیبشدنی استفاده کرد، نه فقط در ترکیبشدنی Image، درحالیکه contentScale و
colorFilter پارامترهای صریح در ترکیبشدنی Image هستند.
مقیاس محتوا
گزینه contentScale را برای برش دادن یا تغییر دادن نحوه مقیاسبندی تصویر در
محدودههای آن مشخص کنید. بهطور پیشفرض، اگر گزینه contentScale را مشخص نکنید،
از ContentScale.Fit استفاده میشود.
در مثال زیر، عنصر ترکیبی Image به اندازه ۱۵۰dp با حاشیه محدود شده است، و پسزمینه در عنصر ترکیبی Image به رنگ زرد تنظیم شده است تا گزینههای مختلف 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.Crop: تصویر را در فضای دردسترس برش مرکزی دهید. |
|
|
ContentScale.FillHeight: منبع را با حفظ نسبت ابعادی مقیاسبندی کنید تا مرزها با ارتفاع مقصد مطابقت داشته باشند. |
|
|
ContentScale.FillWidth: منبع را با حفظ نسبت ابعادی مقیاسبندی کنید تا مرزها با عرض مقصد مطابقت داشته باشد. |
|
|
ContentScale.FillBounds: محتوا را بهصورت عمودی و افقی بهطور غیریکنواخت مقیاسبندی کنید تا مرزهای مقصد را پر کند. (توجه: اگر تصاویر را در محفظههایی قرار دهید که با نسبت دقیق تصویر مطابقت ندارند، این کار باعث تحریف تصاویر میشود). |
|
|
ContentScale.Inside: منبع را مقیاسبندی کنید تا نسبت ابعادی در محدوده مقصد حفظ شود. اگر منبع در هر دو بُعد کوچکتر یا مساوی مقصد باشد، عملکرد آن مشابه 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.برای شکل گوشه گرد، از 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.همچنین میتوانید با گسترش دادن 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()) )
افزودن حاشیه به عنصر ترکیبی Image
یک عملیات رایج ترکیب 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) )
برای ایجاد حاشیه گرادیان، میتوانید از API Brush برای
کشیدن حاشیه گرادیان رنگینکمانی در اطراف تصویر استفاده کنید:
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) )
تنظیم نسبت ابعادی سفارشی
برای تبدیل تصویر به نسبت ابعادی سفارشی، از
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) در Image.فیلتر رنگ: رنگهای پیکسل تصویر را تغییر میدهد
عنصر ترکیبی Image پارامتر 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 درخواست داد.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) )
Color.Green tint با 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) }) )
تنظیم کنتراست یا روشنایی 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 تنظیم شد.رنگهای عنصر ترکیبی 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)) )
محو کردن عنصر ساختنی 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 روی تصویر اعمال شد.هنگام محو کردن 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.Unbounded.توصیهشده برای شما
- توجه: نوشتار پیوند وقتی جاوا اسکریپت خاموش است نمایش داده میشود
- اصلاحکنندههای گرافیک
- درحال بار کردن تصاویر
- نمادهای Material
تصویر منبع کوچکتر از محدوده:
تصویر منبع کوچکتر از محدوده:
تصویر منبع کوچکتر از محدوده:
تصویر منبع کوچکتر از محدوده: