xcode - Set stretching parameters for images programmatically in swift for iOS -
so if want stretch parts of image, regular image or background image, use following settings in layout editor:
how set programmatically?
i'm using xcode 7.2.1
specifying cap insets of image
you can set stretch specifics making use of uiimage
method .resizableimagewithcapinsets(_:uiedgeinsets, resizingmode: uiimageresizingmode)
.
declaration
func resizableimagewithcapinsets(capinsets: uiedgeinsets, resizingmode: uiimageresizingmode) -> uiimage
description
creates , returns new image object specified cap insets , options.
a new image object specified cap insets , resizing mode.
parameters
capinsets
: values use cap insets.
resizingmode
: mode interior of image resized.
example: custom stretching using specified cap insets
as example, let's try to---programmatically---stretch (current) profile picture along width, precisely @ right leg (left side viewing point of view), , leave rest of image original proportions. comparable stretching width of button texture size of content.
first, let's load our original image foo.png
uiimage
object:
let foo = uiimage(named: "foo.png") // 328 x 328
now, using .resizableimagewithcapinsets(_:uiedgeinsets, resizingmode: uiimageresizingmode)
, we'll define uiimage
instance, specified cap insets (to middle of right leg), , set resizing mode .stretch
:
/* middle of right leg @ ~ |-> 0.48: leg :0.52 <-| along image width (for width normalized 1.0) */ let foowidth = foo?.size.width ?? 0 let leftcapinset = 0.48*foowidth let rightcapinset = foowidth-leftcapinset // = 0.52*foowidth let bar = uiedgeinsets(top: 0, left: leftcapinset, bottom: 0, right: rightcapinset) let foowithinsets = foo?.resizableimagewithcapinsets(bar, resizingmode: .stretch) ?? uiimage()
note 0.48
literal above corresponds value enter x
in interface builder, shown in image in question above (or described in detail in link provided matt).
moving on, place image cap insets in uiimageview
, , let width of image view larger width of image
/* put 'foowithinsets' in imageview. per default, frame cover 'foo.png' size */ let imageview = uiimageview(image: foowithinsets) /* expand frame width, 328 -> 600 */ imageview.frame = cgrect(x: 0, y: 0, width: 600, height: 328)
the resulting view stretches original image specified, yielding unproportionally long leg.
now, long frame of image has 1:1
width:height
proportions (328:328
), stretching uniform, if fitting image smaller/larger frame. frame width
values larger height
(a:1
, ratio, a>1
), leg begin stretch unproportionally.
extension match x
, width
, y
, height
stretching properties in interface builder
finally, thoroughly answer question (which we've done implicitly above), can make use of detailed explanation of x
, width
, y
, height
interface builder stretching properties in the link provided matt, construct our own uiimage
extension using (apparently) same properties, translated cap insets in extension:
extension uiimage { func resizableimagewithstretchingproperties( x x: cgfloat, width widthproportion: cgfloat, y: cgfloat, height heightproportion: cgfloat) -> uiimage { let selfwidth = self.size.width let selfheight = self.size.height // insets along width let leftcapinset = x*selfwidth*(1-widthproportion) let rightcapinset = (1-x)*selfwidth*(1-widthproportion) // insets along height let topcapinset = y*selfheight*(1-heightproportion) let bottomcapinset = (1-y)*selfheight*(1-heightproportion) return self.resizableimagewithcapinsets( uiedgeinsets(top: topcapinset, left: leftcapinset, bottom: bottomcapinset, right: rightcapinset), resizingmode: .stretch) } }
using extension, can achieve same horizontal stretching of foo.png
above, follows:
let foo = uiimage(named: "foo.png") // 328 x 328 let foowithinsets = foo?.resizableimagewithstretchingproperties( x: 0.48, width: 0, y: 0, height: 0) ?? uiimage() let imageview = uiimageview(image: foowithinsets) imageview.frame = cgrect(x: 0, y: 0, width: 600, height: 328)
extending our example: stretching width height
now, want stretch right leg above (along width), in addition hands , left leg along height of image. control using y
property in extension above:
let foo = uiimage(named: "foo.png") // 328 x 328 let foowithinsets = foo?.resizableimagewithstretchingproperties( x: 0.48, width: 0, y: 0.45, height: 0) ?? uiimage() let imageview = uiimageview(image: foowithinsets) imageview.frame = cgrect(x: 0, y: 0, width: 500, height: 500)
yielding following stretched image:
the extension allows more versatile use of cap inset stretching (comparable versatility using interface builder), note extension, in current form, not include user input validation, it's caller use arguments in correct ranges.
finally, relevant note operations covering images , coordinates:
note: image coordinate axes
x
(width) ,y
(height) runx (width): left right (as expected) y (height): top bottom (don't miss this!)
Comments
Post a Comment