Custom UIButton and ios custom uibutton

Custom UIButton and ios custom uibutton

Occasionally, you can see a lot of things worth remembering in simple books, some of which have never been touched, and some that have been touched may have been forgotten for a while. When you get started, you may be helpless, so I decided to record some things that are worth remembering. Blog is a good place, because many people can search for it, so they are forced to write it carefully. Otherwise, it will be very shameful, therefore, it may be better to record some things here for you to review the clearest record in the future. We recommend that you write them as notes, because it is still necessary for others to convert their ideas into their own things. Writing down their understanding is the process.

After writing so much nonsense, the following topic begins:

Method 1: Re-layout subclass

The code is very simple:

Inherit from UIButton. My common class prefix is AT, so the Custom button is ATButton. We will rewrite the layoutSubviews method in ATButton.

A common style is that the image is under the text title, or the text in the right title is on the left, and the text in the right text is on the left. The default style is used, I have never seen the image in the text below, but it is not difficult to implement it. But I will not write it here. I will only write the first two types. It will be hard to understand the first two types and the last one.

The picture is under the text title

ATButton. m

1 // change the position of the image and text in the upper and lower directions. 2-(void) layoutSubviews {3 [super layoutSubviews]; 4 5 CGRect imageRect = self. imageView. frame; 6 imageRect. origin. x = self. frame. size. width * 0.5-imageRect. size. width * 0.5; 7 imageRect. origin. y = self. frame. size. height * 0.5-imageRect. size. height; 8 9 CGRect titleRect = self. titleLabel. frame; 10 titleRect. origin. x = self. frame. size. width * 0.5-titleRect. size. width * 0.5; 11 titleRect. origin. y = self. frame. size. height * 0.5; 12 13 self. imageView. frame = imageRect; 14 self. titleLabel. frame = titleRect; 15}

Controller:

1 atbuttons * btn = [[ATButton alloc] init]; 2 [btn setBackgroundColor: [UIColor greenColor]; 3 [btn setFrame: CGRectMake (100,100,100,100)]; 4 [btn setTitle: @ "button" forState: UIControlStateNormal]; 5 [btn setTitleColor: [UIColor redColor] forState: UIControlStateNormal]; 6 [btn setImage: [UIImage imageNamed: @ "mainCellCaiClick"] forState: UIControlStateNormal]; 7 [btn addTarget: self action: @ selector (btnClick :) forControlEvents: UIControlEventTouchUpInside]; 8 [self. view addSubview: btn];

:

Picture on the right text title on the left

ATButton. m

1 // change the position of the image and text in the left and right directions. 2-(void) layoutSubviews 3 {4 [super layoutSubviews]; 5 6 CGRect imageRect = self. imageView. frame; 7 imageRect. origin. x = self. frame. size. width * 0.5; 8 imageRect. origin. y = self. frame. size. height * 0.5-imageRect. size. height * 0.5; 9 10 CGRect titleRect = self. titleLabel. frame; 11 titleRect. origin. x = self. frame. size. width * 0.5-titleRect. size. width; 12 titleRect. origin. y = self. frame. size. height * 0.5-titleRect. size. height * 0.5; 13 14 self. imageView. frame = imageRect; 15 self. titleLabel. frame = titleRect; 16 17}

Controller:

1 atbuttons * btn = [[ATButton alloc] init]; 2 [btn setBackgroundColor: [UIColor greenColor]; 3 [btn setFrame: CGRectMake (100,100,100,100)]; 4 [btn setTitle: @ "button" forState: UIControlStateNormal]; 5 [btn setTitleColor: [UIColor redColor] forState: UIControlStateNormal]; 6 [btn setImage: [UIImage imageNamed: @ "mainCellCaiClick"] forState: UIControlStateNormal]; 7 [btn addTarget: self action: @ selector (btnClick :) forControlEvents: UIControlEventTouchUpInside]; 8 [self. view addSubview: btn];

(I keep them centered. If you want to change it, it's easy to adjust the position)

Method 2: EdgeInsets (you do not need to create a subclass to directly change the position of the Code in the Controller line ).

1 UIButton * btn = [[UIButton alloc] init]; 2 [btn setBackgroundColor: [UIColor greenColor]; 3 [btn setFrame: CGRectMake (100,100,100,100)]; 4 [btn setTitle: @ "button" forState: UIControlStateNormal]; 5 [btn setTitleColor: [UIColor redColor] forState: UIControlStateNormal]; 6 [btn setImage: [UIImage imageNamed: @ "mainCellCaiClick"] forState: UIControlStateNormal]; 7 [btn addTarget: self action: @ selector (btnClick :) forControlEvents: UIControlEventTouchUpInside]; 8 btn. imageEdgeInsets = UIEdgeInsetsMake (0, btn. frame. size. width * 0.5, 0, 0); 9 btn. titleEdgeInsets = UIEdgeInsetsMake (0,-btn. frame. size. width + (btn. frame. size. width * 0.5-btn. titleLabel. frame. size. width), 0, 0); 10 [self. view addSubview: btn];

:

The picture is under the text title

1 UIButton * btn = [[UIButton alloc] init]; 2 [btn setBackgroundColor: [UIColor greenColor]; 3 [btn setFrame: CGRectMake (100,100,100,100)]; 4 [btn setTitle: @ "button" forState: UIControlStateNormal]; 5 [btn setTitleColor: [UIColor redColor] forState: UIControlStateNormal]; 6 [btn setImage: [UIImage imageNamed: @ "mainCellCaiClick"] forState: UIControlStateNormal]; 7 [btn addTarget: self action: @ selector (btnClick :) forControlEvents: UIControlEventTouchUpInside]; 8 btn. imageEdgeInsets = UIEdgeInsetsMake (-(btn. imageView. frame. size. height), btn. frame. size. width * 0.5-btn. imageView. frame. size. width * 0.5, 0, 0); 9 btn. titleEdgeInsets = UIEdgeInsetsMake (0,-btn. titleLabel. frame. size. width * 0.5,-(btn. titleLabel. frame. size. height), 0); 10 [self. view addSubview: btn];

:

 

OK, that's all. Finally, let's talk about UIEdgeInsetsMake (): Its Parameter order is a bit strange. It's top left, bottom right, how can it be used? This is easy to remember: for example, if you want to move the image in the button to the left by 10, you can write 10 in the second parameter. if you add a negative number to the front, it will be OK, in this way, it is easier to understand and remember.

Github: https://github.com/alan12138/Custom-Control