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:

enter image description here

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 

enter image description here

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.

enter image description here

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:

enter image description here


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) run

x (width):  left right (as expected) y (height): top bottom (don't miss this!) 

Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -