تصاویر را می توان با استفاده از ویژگی های موجود در یک 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.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) )
شکل گوشه گرد - از 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)) )
همچنین می توانید با گسترش 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
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) )
اگر میخواهید یک مرز گرادیان ایجاد کنید، میتوانید از 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) )
یک نسبت ابعاد سفارشی تنظیم کنید
برای تبدیل یک تصویر به یک نسبت ابعاد سفارشی، از Modifier.aspectRatio(16f/9f)
استفاده کنید تا نسبت سفارشی برای یک تصویر (یا هر نوع قابل ترکیبی برای آن موضوع) ارائه دهید.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = 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) )
سایر 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 مراجعه کنید.
اعمال فیلتر 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)) )
رنگ های یک 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)) ) )
هنگام محو کردن 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)) )
برای شما توصیه می شود
- توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
- اصلاح کننده های گرافیکی
- در حال بارگذاری تصاویر {:#loading-images}
- نمادهای مواد {:#material-icons}