UIEdgeInsetsMake use detailed explanation

UIEdgeInsetsMake use detailed explanation

  • Example
    When creating a button, it is often necessary to add images and buttons to the button, and in general, what we need is the effect of the image on the top and the title on the bottom (the gray one is the button):
Screenshot 2016-04-08, 4.38.33.png in the afternoon

When we set the title and image, we find that the picture is on the left and the title is on the right:

Screenshot 2016-04-08, 4.40.19.png in the afternoon

Of course, this is not the effect we want, so we can achieve the effect we want by setting the UIEdgeInsetsMake property, but the specific is how much to set, every time I do it, I always try, little by little, until it reaches The desired effect, this is very troublesome, and the principle is completely unclear, and even more troublesome is that in case of modification requirements, such as the number or size of the font changes, then another crazy try , The feeling of madness, there is nothing! So one day (that is today) I finally couldn't stand it anymore, and I started to research what the hell is UIEdgeInsetsMake .

  • Look at the definition first
typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right; //specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;

UIEdgeInsets is actually a structure (I wrote an enumeration here before, thanks to the mistake made by Bladeless Blade ), UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, < #CGFloat right#>) The four margins to be set are four margins. First look at a picture:


In the figure, the blue mark is the variable area, and the green mark is the constant area. The top and bottom attributes of the UIEdgeInsets structure are a pair to specify the vertical variable area (black dotted rectangle), and left and right are a pair to specify the horizontal variable area (white dotted rectangle). When the size of UIButton/UIImageView is larger than the size of UIImage, the size of the variable area in the picture will be adjusted to cover the entire control. The specific adjustment rules are as follows:
(1) The width of the control is greater than the width of the picture, stretch the white dotted rectangle
(2) The height of the control Larger than the height of the picture, stretch the black dashed rectangle
(3) When the control width is smaller than the width of the picture, the overall horizontal reduction (the ratio of the variable area and the constant area remains unchanged)
(4) When the control height is less than the height of the picture, the overall vertical reduction (variable (The ratio of the zone to the constant zone remains the same)

The above picture and explanation are from Yiye blog . According to my understanding, it can be explained as follows: top is the distance from the top plus the set distance on the basis of the default. Take the button at the beginning as an example, only set the image in the button. At that time (if the image and title effects are set at the same time, the effect is different, the following will explain in detail, don't worry), the image is centered by default, which is equivalent to this setting:

[button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

If we set at this time:

[button setImageEdgeInsets:UIEdgeInsetsMake(20, 0, 0, 0)];

It is equivalent to moving the picture down by 20 on the basis of the center of the picture. If it is -20, it is moved up by 20 on the original basis. The other parameters are the same. A positive number means that the distance from the corresponding edge increases. , A negative number means that the distance from the corresponding decrease. If you want to really understand this point, it s almost impossible to simply search for articles written by me or by any other person. The best way is to practice and write a piece of code by yourself, one variable for one variable. To experiment, what kind of effect will occur every time the value of a variable is changed, so that we can understand more thoroughly. Before that, I searched a lot of information about this on the Internet. Most of them were written by one person, and they were copied and pasted by others. They were the same. Maybe it was not that others were incomplete, but that they lacked practice. Going far, back to the topic, let's talk about the situation of setting the picture and the title at the same time:

  • Set the image and title for the button at the same time
    As mentioned at the beginning of the article, when we set the image and title for the button, the default is that the image is on the left and the title is arranged side by side on the right:
    [button setImage:[UIImage imageNamed:@"ffw_32"] forState:UIControlStateNormal];
    [button setTitle:@" " forState:UIControlStateNormal];

Let's go back to the second chapter picture at the beginning of the article. What is the root cause of this change? That is, when we add a picture and a title at the same time, the picture will be offset to the left by the width of the button s titleLabel by default, and the title will be offset to the right by the width of the picture. In this case, we can set the offset to achieve what we want Any effect of, step by step, first center (you can first think about how to set these parameters):

    [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -button.currentImage.size.width, 0, 0)];


Screen shot 2016-04-08 at 5.45.58.png in the afternoon. You
may have noticed that when I set the image offset, I did not set -button.titleLabel.bounds.size.width , but -button.titleLabel.intrinsicContentSize.width , Because the value of -button.titleLabel.bounds.size.width is 0 after iOS8 , an alternative method was found after many searches. The meaning of this setting is to reduce the distance between the image offset and the right to reduce the width of the titleLabel , Because the default is so much cheaper to the left, after we set it this way, it is equivalent to offsetting the offset of the left shift, so the picture is centered, and the reason for the title is the same. After this point is understood, there is no problem with the rest, continue, the title is moved down, and the image is moved up:
    [button setImageEdgeInsets:UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height, -button.currentImage.size.width, 0, 0)];


Screen shot 2016-04-08 at 5.55.24 pm

The picture and the title seem to be a bit close, easy to handle, add a little more:

[button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height + 20, -button.currentImage.size.width, 0, 0)];


Screen shot 2016-04-08 at 5.57.56.png in the afternoon

Attach my test demo, if necessary, you can directly modify the parameters:

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 160, 160)];
    [button setImage:[UIImage imageNamed:@"ffw_32"] forState:UIControlStateNormal];
    [button setTitle:@" " forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:14];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.center = self.view.center;
    button.backgroundColor = [UIColor grayColor];
    [self.view addSubview:button];
    [button setImageEdgeInsets:UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height + 20, -button.currentImage.size.width, 0, 0)];
  • Postscript
    As a newcomer to iOS, I really struggled a lot when looking for information in this area. I hope this article can help friends who are as confused as me. In addition, I am very grateful to the Yiye blog and Learning Notes articles. I have benefited a lot!

  • End