In IOS, UIButton is a mix of text and text, custom background colors are different when a button is pressed, custom UIButton length is defined based on the text length, and iosuibutton

In IOS, UIButton is a mix of text and text, custom background colors are different when a button is pressed, custom UIButton length is defined based on the text length, and iosuibutton

In some projects, we need to customize our own UIButton so that the Button has both an image and a text description to achieve custom UIButton text-and-image mixing.

First, we need to define a class that inherits from UIButton and implement our own initWithFrame: method. The method is declared in the header file of this class.

self = [super initWithFrame:frame];
    if (self) {
     
    }
    return self;

In the if judgment statement, we can customize attributes and methods of buttons, such as button rounded corners, Title text, and background color.

For example

self.titleLabel.textAlignment=NSTextAlignmentLeft;

You can make simple settings based on your needs.

For some simple settings above, of course, a class does not need to be customized, so the following gc is coming !!!!!

To adjust the length of UIButton according to the text content of UIButton, take the following steps:

1. First, the length of the text is automatically obtained,

NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:15]};
        titleTextSize = [self.titleLabel.text boundingRectWithSize:CGSizeMake(MAXFLOAT, self.frame.size.height) options:NSStringDrawingTruncatesLastVisibleLine attributes:attribute context:nil].size;
        [self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, titleTextSize.width + cornerRedius*2 +self.frame.size.height , self.frame.size.height)];

The size obtained by the above method is the size of the text length and height set by the system. After obtaining the image, call the setFrame method again to redefine the size of the image.

2. Customize the image display position and text display position

[self setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];

After setting UIImage in this method, you will find that the image and text may not be what you want. At this time, you need to rewrite the UIButton class two methods, as shown below:

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    CGFloat titleW = contentRect.size.width - btnCornerRedius;
    CGFloat titleH = self.frame.size.height;
    CGFloat titleX = self.frame.size.height + btnCornerRedius;
    CGFloat titleY = 0;
    contentRect = (CGRect){{titleX,titleY},{titleW,titleH}};
    return contentRect;
    
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGFloat imageW = self.frame.size.height -5;
    CGFloat imageH = self.frame.size.height -5;
    CGFloat imageX = btnCornerRedius;
    CGFloat imageY = 2.5;
    contentRect = (CGRect){{imageX,imageY},{imageW,imageH}};
    return contentRect;
    
}

Here, btnCornerRedius is the Radian of the rounded corner I have defined.

After the two methods are rewritten, the Image Height and text position are under your control.

3. Set the background color of the Button. When you need to set the different colors of UIButton in the press and normal states, you can use the following methods:

- (UIImage *)imageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}

This method is used to construct two images of the specified color, and then load them to

In the setBackgroundImage method, the buttons are displayed in two different colors after being pressed.

The setting method in this article is as follows:

  [self setBackgroundImage:[self imageWithColor:[UIColor colorWithHexString:btnNormalStateHEXCorlor]] forState:UIControlStateNormal];
        [self setBackgroundImage:[self imageWithColor:[UIColor colorWithHexString:btnSelectedHEXCorlor]] forState:UIControlStateHighlighted];

Note: The colorWithHexString in the above Code is a method for converting the color hexadecimal format to the red, green, and blue format of UIColor. You can search it online or directly go

Input UIColor in the imageWithColor method.