Painted levels: being fostered fostered fostered

Tags: “iOS” “UIButton” “Automatic layout” author: Mu Linuo review: QiShare team

UIButton is the most commonly used control in the development process, you can set a variety of styles, also can be customized to add pictures, titles.

However, the actual design is often inconsistent with the default style shown above. For example, if the image is 10 away from the text, the image is 10 away from the left, and the title is 10 away from the right, we need to use some method to achieve the effect.

1. Use imageEdgeInsets and titleEdgeInsets
btn.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 10);
Copy the code

The above method can achieve the desired effect, but because of the special calculation method, the code is not intuitive. See iOS UIButton UIEdgeInsets for details

2. Render imageView and titleLabel frames

Override the following two methods to return the required frame and render imageView and titleLabel separately.

  • -(CGRect)titleRectForContentRect:(CGRect)contentRect;
  • -(CGRect)imageRectForContentRect:(CGRect)contentRect;

So we create a QiShareButton that inherits from UIButton and defines two properties

@interface QiShareButton : UIButton

@property (nonatomic, assign) CGRect imageRect;
@property (nonatomic, assign) CGRect titleRect;

@end
Copy the code

Override two methods in dot m

- (CGRect)titleRectForContentRect:(CGRect)contentRect { if (! CGRectIsEmpty(self.titleRect) && ! CGRectEqualToRect(self.titleRect, CGRectZero)) { return self.titleRect; } else { return [super titleRectForContentRect:contentRect]; } } - (CGRect)imageRectForContentRect:(CGRect)contentRect { if (! CGRectIsEmpty(self.imageRect)&&! CGRectEqualToRect(self.imageRect, CGRectZero)) { return self.imageRect; } else { return [super imageRectForContentRect:contentRect]; }}Copy the code

About use:

QiShareButton *btn = [[QiShareButton alloc]initWithFrame:CGRectZero]; btn.backgroundColor = [UIColor cyanColor]; [btn addTarget:self action:@selector(test) forControlEvents:UIControlEventTouchUpInside]; [btn setTitle:@"QiShareBtn" forState:UIControlStateNormal]; [btn setImage:[UIImage imageNamed:@"icon_presonal_sign"] forState:UIControlStateNormal]; Btn. titleRect = CGRectMake(60.0, 10.0, 100.0, 40.0); Btn. imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0); [self.view addSubview:btn];Copy the code

In the above code, initialize the button with CGRectZero and set titleRect and imageRect properties respectively. Observe that although imageView and titleLabel are drawn normally, the frame of the button is still Zero. The cyanColor button is invisible against an orange background.

We set the frame of the button not enough to display imageView and titleLabel

QiShareButton * BTN = [[QiShareButton alloc] initWithFrame:CGRectMake(100.0, 100.0, 20.0, 20.0)];Copy the code

We want the button to automatically adapt the appropriate frame based on the values of the titleRect and imageRect properties. TitleRect and imageRect are used to calculate the size of the button. So rewrite UIButton’s layoutSubViews method:

- (void)layoutSubviews { [super layoutSubviews]; BOOL hasSetTitleRect = ! (CGRectIsEmpty(self.titleRect) || CGRectEqualToRect(self.titleRect, CGRectZero)); BOOL hasSetImageRect = ! (CGRectIsEmpty(self.imageRect) || CGRectEqualToRect(self.imageRect, CGRectZero)); if (hasSetImageRect || hasSetTitleRect) { CGRect rect = self.frame; CGRect curentRect = CGRectUnion(hasSetImageRect ? self.imageRect : CGRectZero, hasSetTitleRect ? self.titleRect : CGRectZero); rect.size.width = curentRect.size.width + curentRect.origin.x * 2; rect.size.height = curentRect.size.height + curentRect.origin.y * 2; self.frame = rect; }}Copy the code

Use effect (incorrect frame or width without given button)

Btn. titleRect = CGRectMake(60.0, 10.0, 100.0, 40.0); Btn. imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0);Copy the code

Btn. imageRect = CGRectMake(110.0, 10.0, 40.0, 40.0); TitleRect = CGRectMake(10.0, 10.0, 100.0, 40.0);Copy the code

TitleRect = CGRectMake(10.0, 10.0, 100, 40); btn.imageRect = CGRectMake(40, 60, 40, 40);Copy the code

btn.titleRect = CGRectMake(10 , 60, 100, 40);
btn.imageRect = CGRectMake(40, 10, 40, 40);
Copy the code

Source: Demo source

Recommended articles:

IOS specifies the initialization method hitTest method in UIView iOS notes about tabBar A’s daughter is the mother of B’s daughter, who is A of B? Algorithm small column: Select sort iOS Runloop (a) odd dance weekly