IOS Stretched image on UIButton showing angular angles

Question

Ok

I searched everything and can not find a solution to my problem.

I am trying to use a significant image for the button background to get a custom UIButton look and reduce the overall size of the application, and because it seems like the right thing.

However, when I try to set the image on the button, the button gets all the weird vision, and the angles do not match the standard angular radius of a regular UIButton.

I tried to create several different image sizes, but nothing works.

I know that the caps should be even, and I have plus plus 1 pixel to stretch.

My UIButton is at a high level of 44. If I create an image with a height of 44 pixels and a width of 21 pixels and has the same rounded corner radius as the default button (he likes the Aspirin drop), and set the background image as follows:

UIImage *btnImage = [UIImage imageNamed:@"buttontest1.png"]; UIImage *newImg = [btnImage stretchableImageWithLeftCapWidth:10 topCapHeight:0]; 

the corners just don't match and look weirdly wide stretched And the button grows in height!

I know that stretchableImagewithLeftCapWidth is deprecated, but using resizableCapWithInsets makes even less sense to me, and when I try to do this, the button image just repeats over and over again.

Can anyone understand what I'm doing wrong? Is there anything that explains this shit just? I just can't figure it out.

Thanks! -TJ

EDIT - adding images after using resizableImageCapWithInserts to display the results. They may not be typical, because I see examples of everything that supposedly works, but examples never work for me. I just figured out how to add images here, so maybe this helps some.

Here is PNG file 21px wide 39px high

This is the result of using the following code to set the background image:

 [self.button1 setBackgroundImage:[[UIImage imageNamed:@"buttontest4.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)] forState:UIControlStateNormal]; 

As I understand it, this should copy the left 10 pixels and the right 10 pixels of my 21-pixel image wide and stretch the middle 1 pixel across, which apparently does, but it also makes my button grow vertically and I get this strange repeat. It should be the same size as the BTN next to it.

Here is my Xcode layout:

No matter which image I use, I see similar results.

I'm obviously not going to do something here.

I appreciate the answers so far. It gets a little less foggy.

t

EDIT2: Display samples using the overlay method with a 21px by 44 pixel image.

All 4 buttons are 44 pixels high when they are designed in a storyboard.

As you can see, the orange buttons are larger than the white buttons for comparing the scale.

The top button is button1, the bottom is button2.

I found a way to approach it using the optional resizingMode parameter for UIImageResizingModeStretch.

However, note that the buttons are larger than they should be.

Here is the code for setting the button images.

 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self.button1 setBackgroundImage:[[UIImage imageNamed:@"buttontest1a.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)] forState:UIControlStateNormal]; [self.button2 setBackgroundImage:[[UIImage imageNamed:@"buttontest1a.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10) resizingMode:UIImageResizingModeStretch] forState:UIControlStateNormal]; } 

Executing the top image with (10,10,10,10,10) gives me an image that doesn't repeat the top of the image like before. I know that the top image does not use the optional resize parameter, as it is a test to see that everyone gets me.

Now, to complicate the situation even more. If I set the size of the top button to 43, that is, one pixel smaller than my image and make a call with an additional resize option, I get almost perfect results, except that my button does not fit the size.

What's going on here?

I appreciate everyone who is trying to gain some knowledge through my thick skull. Tj

Answer 1

UIEdgeInsets are a little tricky to wrap around, but - more modern use. I will explain how it works. In principle, using four offsets, you divide your image into 9 fragments. If you want to see an image of what it potentially looks like, see the “Scalable Area” section on this page (Note that this is for Android, but the concept is the same. Android has just begun to do this). You will see four lines passing through the image. They will match your four inserts. So your nine sections from left to right and top to bottom will be:

• X: 0 → Insert on the left, Y: 0 → Top insert
• X: left insert → (width - right insert), Y: 0 → top insert
• X: (width - right insert) → width, Y: 0 → top insert
• X: 0 → Insert on the left, Y: upper insert → (height - lower insert)
• X: Left insert → (width - right insert), Y: upper insert → (height - lower insert)
• X: (width - right insert) → width, Y: upper insert → (height - lower insert)
• X: 0 → Left insert, Y: (Height - Lower insert) → Height
• Left insert → (width - right insert), Y: (height - bottom insert) → Height
• X: (width - right insert) → width, Y: (height - bottom insert) → height

Sections 1, 3, 7, and 9 are set and will not stretch.
Sections 2 and 8 will only stretch horizontally
Sections 4 and 6 will stretch only vertically. Section 5 will stretch in both directions.

New in iOS 6, you can choose a mode. You can stretch the stretch tiles or repeat them to get the desired effect (colors, etc. Must stretch while the textures are repeated).

Answer 2

Try UIEdgeInsets

 [button setBackgroundImage:[[UIImage imageNamed:@"buttontest1.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)] forState:UIControlStateNormal]; 

Answer 3

The 2016th way is to do what we will tell in WWDC2016 video 213: https://developer.apple.com/videos/play/wwdc2016-213/?time=1084 We can stretch the assets. Sorry for the link only this time; I will talk in more detail later. The instructions in the video are no more than a minute or two. In short, we use the Asset Slicer Xcode tool to determine which parts of the image should not be stretched when the image is used as a UIButton background. UIButton can expand to any size without distorting rounded edges, etc.