ios-Picture Stretching tips

iOS Development we will encounter the background of the gradient, the content of the variable flow tags, chat bubbles (qq chat bubbles), because the content is variable, the width and height of the same variable, so that each occurrence of the size is not the same as before. If it is necessary to set the comparison of more, estimated that the artist will be bored to death, the same will add additional memory overhead, so this know a little picture stretching skills to meet our ability to make our app more efficient, the code is more concise, more than four ways from the set point of view can be achieved ~

Assets Settings

First we have an irregular bubble button, the size is 35*30,slices selected horizontal and vertical distance, width height set to 1

Setting to complete, we set the button's background image to see the loading effect:

    UIButton *button = [[UIButton alloc] Initwithframe:cgrectmake (+, +, +)];    UIImage *buttonimage = [UIImage imagenamed:@ "Question"];    [Button settitle:@ "Default" Forstate:uicontrolstatenormal];    [Button addtarget:self action: @selector (buttonpressed:) forcontrolevents:uicontroleventtouchupinside];    [Button Setbackgroundimage:buttonimage Forstate:uicontrolstatenormal];    [Self.view Addsubview:button];

Simulator Loading effect:

The first picture is we need to load the effect, if we set slices to none, we see the effect is this:

See here is not feeling a bit interested, why set the above options can appear tile effect, a little thought, we will find the answer in one of the following ways ~

Pre-iOS5 settings

The second button we set through the code, not set in assets, let's take a look at the implementation code:

    35*30    UIButton *nextbutton = [[UIButton alloc] Initwithframe:cgrectmake (------)    [Nextbutton settitle:@ "iOS5 before" forstate:uicontrolstatenormal];    Nextbutton.layer.bordercolor=[[uicolor Redcolor] Cgcolor];    nextbutton.layer.borderwidth=1.0f;    UIImage *image = [UIImage imagenamed:@ "Question"];    Set the left End cover width  rightcap=width-leftcapwidth-1    nsinteger leftcapwidth = image.size.width * 0.5;    Set the top end cap height  bottom=height-topcapwidth-1    Nsinteger topcapheight = image.size.height * 0.5;    UIImage *newimage = [Image stretchableimagewithleftcapwidth:leftcapwidth Topcapheight:topcapheight];    [Nextbutton setbackgroundimage:newimage forstate:uicontrolstatenormal];    [Self.view Addsubview:nextbutton];

Create a new picture, set the background image of the button, and the general settings is no different, but more stretchableimagewithleftcapwidth: method, we look at the API description:

@interface UIImage (uiimagedeprecated)//Use Resizableimagewithcapinsets:and capinsets.-(UIImage *) Stretchableimagewithleftcapwidth: (Nsinteger) leftcapwidth topcapheight: (nsinteger) Topcapheight __TVOS_PROHIBITED; @property (nonatomic,readonly) Nsinteger leftcapwidth __tvos_prohibited;   Default is 0. If Non-zero, Horiz. Stretchable. Right cap is calculated as Width-leftcapwidth-1@property (nonatomic,readonly) Nsinteger topcapheight __TVOS_PROHIBITED;   //default is 0. If Non-zero, vert. stretchable. Bottom caps is calculated as Height-topcapwidth-1@end

We need to set the distance between the top and left of the specific picture in the stretch area:

strechwidth=width-leftcapwidth-(width-leftcapwidth-1) =1

strechheight=height-rightcaopwidth-(height-topcapwidth-1) =1

So we stretch the area is 1*1, about the above leftcapwidth someone may have questions in mind, why leftcapwidth = image.size.width * 0.5, why is 0.5? I began to casually set a distance result picture ugly die, for example, our left set 0.2, the top is set to 0.8, we see the effect is this:

This is the extreme case, the default case regardless of the picture is how the rules, the middle of the 1*1 area is a square, if the above settings, we will find that the top and bottom around four points of the picture is extremely irregular, so it is recommended to set in the middle, but some have deviated some and not too many problems, For example, 0.4,0.6 for the scale set everyone if interested can download code, self-study ~

iOS5 Settings

Stretchableimagewithleftcapwidth has been abandoned after iOS5, we can Resizableimagewithcapinsets to set the upper and lower left and right margins ~

Resizableimagewithcapinsets, like the previous method, creates a new image by resetting it:

-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets Ns_available_ios (5_0); Create a resizable version of this image. The interior is tiled when drawn.

Uiedgeinsets is basically more common in the UI:

typedef struct UIEDGEINSETS {    cgfloat top, left, bottom, right;  Specify amount to inset (positive) for each of the edges. Values can is negative to ' outset '} uiedgeinsets;

The image effect reference Simulator's third button, the setup code is as follows:

     UIImage *image = [UIImage imagenamed:@ "Question"];    UIButton  *resizablebutton=[[uibutton alloc]initwithframe:cgrectmake (N, A, ())];    [Resizablebutton settitle:@ "iOS5" forstate:uicontrolstatenormal];    Set the value of the end cover    cgfloat top = image.size.height * 0.5;    CGFloat left = image.size.width * 0.5;    CGFloat bottom = image.size.height * 0.5;    CGFloat right = image.size.width * 0.5;        Uiedgeinsets edgeinsets = Uiedgeinsetsmake (top, left, bottom, right);    Stretch picture    UIImage *edgeimage = [Image resizableimagewithcapinsets:edgeinsets];    Background image    [Resizablebutton setbackgroundimage:edgeimage forstate:uicontrolstatenormal];    [Self.view Addsubview:resizablebutton];

iOS6 Settings

IOS6 is set up in the same way as iOS5, with one more parameter Uiimageresizingmode:

-(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets Resizingmode: (uiimageresizingmode) ResizingMode NS _available_ios (6_0); The interior is resized according to the Resizingmode

Uiimageresizingmode Description:

typedef ns_enum (Nsinteger, Uiimageresizingmode) {    uiimageresizingmodetile,平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片

Uiimageresizingmodestretch,};拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片

The last button in the actual effect reference:

    UIImage *image = [UIImage imagenamed:@ "Question"];    UIButton *resizablebuttonmode=[[uibutton Alloc]initwithframe:cgrectmake (80, 320, 180, 40)];    [Resizablebuttonmode settitle:@ "iOS6" forstate:uicontrolstatenormal]; [Resizablebuttonmode addtarget:self Action: @selector (buttonpressed:) forcontrolevents:uicontroleventtouchupinside    ];    Set upper left lower right margin cgfloat topmode= image.size.height * 0.5;    CGFloat leftmode= image.size.width * 0.5;    CGFloat bottommode= image.size.height * 0.5;        CGFloat rightmode= image.size.width * 0.5;        Uiedgeinsets edgeinsetsmode= Uiedgeinsetsmake (Topmode, Leftmode, Bottommode, Rightmode); Stretch picture UIImage *edgemodeimage = [Image Resizableimagewithcapinsets:edgeinsetsmode Resizingmode: uiimageresizingmodestretch];//UIImage *edgemodeimage = [Image Resizableimagewithcapinsets:edgeinsetsmode        Resizingmode:uiimageresizingmodetile];    Set the picture [Resizablebuttonmode setbackgroundimage:edgemodeimage forstate:uicontrolstatenormal]; [sElf.view Addsubview:resizablebuttonmode]; 

Project GitHub Address: Https://github.com/SmallElephant/iOS-FEImageStrech

ios-Picture Stretching tips