IOS development of the custom button to achieve the text picture location to customize _ios

IOS development of the custom button to achieve the position of the text picture freely customized

Perhaps some of the friends who read this article will feel very disdain: "button who will not customize?" You still need to see that? "It is also true that the button is one of the most common controls in our project and is used every day." For different types of buttons, whether we have a more convenient way to achieve requirements is what we need to do. Here are two ways to do this, and you can compare your own custom buttons to see which one is simpler.

Say one more, do not feel the knowledge is simple, feel oneself will, do not need to study. "Often simple things exist big wisdom" (this is better than giving full marks), knowledge is accumulated slowly.

Buttons are the most common and basic control in an application. Buttons have a variety of styles, the system defaults to the left and right structure, the picture on the left, the text on the right-hand side. The System button is completely unable to meet the development needs, we can only customize the desired style. Buttons that contain both text and pictures have the following four styles:

• The picture is on, the text is below
• Picture on left, text on right
• The picture is down, the text is on
• Picture on right, text in left

As we all know, in a button you can change the position of pictures and text by setting the interior margin (uiedgeinsetsmake) of the picture and text to meet our needs. Of course, this is just one of the ways. Another approach is to use inheritance to create a class that inherits from UIButton, and by overriding the Layoutsubviews method, changes the position of the child controls within the button to meet our needs. Don't talk much, open the whole.

Method One: Through the classification of the way to achieve

Create a new category for the UIButton, below is a specific declaration and implementation

#import <UIKit/UIKit.h>
//Define an enumeration (containing four types of button)
typedef ns_enum (Nsuinteger, Mkbuttonedgeinsetsstyle) {
  mkbuttonedgeinsetsstyletop,//image on, label below
  mkbuttonedgeinsetsstyleleft,// Image on the left, label in right
  Mkbuttonedgeinsetsstylebottom,//Image down, label on
  mkbuttonedgeinsetsstyleright//image on right, Label on left
};

@interface UIButton (imagetitlespacing)

/**
 * Sets the Titlelabel and ImageView layout style of the button, and the spacing
 *
 * @param Style Titlelabel and ImageView layout style
 * @param space Titlelabel and imageview spacing * *
(void) Layoutbuttonwithedgeinsetsstyle: (mkbuttonedgeinsetsstyle) style
            imagetitlespace: (cgfloat) space;

@end

And look at the implementation file.

#import "Uibutton+imagetitlespacing.h" @implementation UIButton (imagetitlespacing)-(void) Layoutbuttonwithedgeinsetsstyle: (Mkbuttonedgeinsetsstyle) style imagetitlespace: (cgfloat) Space {/** * knowledge point : Titleedgeinsets is title relative to its top and bottom of the inset, and TableView Contentinset is similar, * If only title, it is relative to the top and bottom of the button, image is the same;
   If you have both image and label, then the top left of image is relative to the button, the right side is relative to the label, the top right of title is relative to the button, and the left is relative to the image. *///1.
  To get the ImageView and Titlelabel of the wide and high cgfloat imagewith = self.imageView.frame.size.width;

  CGFloat imageheight = self.imageView.frame.size.height;
  CGFloat labelwidth = 0.0;
  CGFloat labelheight = 0.0;  if ([Uidevice currentdevice].systemversion.floatvalue >= 8.0) {//Because the size of Titlelabel in IOS8 is 0, use the following setting Labelwidth
    = Self.titleLabel.intrinsicContentSize.width;
  Labelheight = Self.titleLabel.intrinsicContentSize.height;
    else {labelwidth = Self.titleLabel.frame.size.width;
  Labelheight = Self.titleLabel.frame.size.height; }//2. Declaring globalImageedgeinsets and labeledgeinsets uiedgeinsets imageedgeinsets = Uiedgeinsetszero;

  Uiedgeinsets labeledgeinsets = Uiedgeinsetszero; 3. Get imageedgeinsets and Labeledgeinsets values based on style and space/** mkbuttonedgeinsetsstyletop,//image on, label below MKBUTTONEDG Einsetsstyleleft,//image on left, label on right mkbuttonedgeinsetsstylebottom,//image in bottom, label on top Mkbuttonedgeinsetsstylerigh T//image on right, label on left/switch (style) {case Mkbuttonedgeinsetsstyletop: {imageedgeinsets = Uiedgeins
      Etsmake (-labelheight-space/2.0, 0, 0,-labelwidth);
    Labeledgeinsets = Uiedgeinsetsmake (0,-imagewith,-imageheight-space/2.0, 0);
    } break;
      Case Mkbuttonedgeinsetsstyleleft: {imageedgeinsets = Uiedgeinsetsmake (0,-space/2.0, 0, space/2.0);
    Labeledgeinsets = Uiedgeinsetsmake (0, space/2.0, 0,-space/2.0);
    } break; Case Mkbuttonedgeinsetsstylebottom: {imageedgeinsets = uiedgeinsetsmake (0, 0,-labelheight-space/2.0,-labelWid TH);
      Labeledgeinsets = Uiedgeinsetsmake (-imageheight-space/2.0,-imagewith, 0, 0);
    } break; Case Mkbuttonedgeinsetsstyleright: {imageedgeinsets = Uiedgeinsetsmake (0, labelwidth+space/2.0, 0,-labelWidth-
      space/2.0);
    Labeledgeinsets = Uiedgeinsetsmake (0,-imagewith-space/2.0, 0, imagewith+space/2.0);
    } break;
  Default:break; }//4.
  Assign value self.titleedgeinsets = labeledgeinsets;
Self.imageedgeinsets = imageedgeinsets; } @end

How to use: just create a new category to copy the above code, directly into the class you need to use, call the method can be, specifically see below

Import header file
#import "uibutton+imagetitlespacing.h"
//We randomly create a button, such as button, after you set the picture, title, and frame of the button, just add the following code:
[Button Layoutbuttonwithedgeinsetsstyle: Here fills in the style Imagetitlespace: Here fills in the picture and the text spacing];

Isn't that convenient?

Method Two: Through the way of inheritance

Create a new class that inherits from UIButton, rewrite the Layoutsubviews method, and set the position of the picture and text yourself.

#import "TSSquareButton.h"

@implementation Tssquarebutton

-(Instancetype) initWithFrame: (CGRect) Frame {
  if (self = [Super Initwithframe:frame]) {
    //Set other properties of the picture
    self.titleLabel.textAlignment = Nstextalignmentcenter;
    Self.titleLabel.font = [Uifont systemfontofsize:12.0];
    [Self Setbackgroundcolor:[uicolor whitecolor]];
    [Self Settitlecolor:[uicolor blackcolor] forstate:uicontrolstatenormal];
  }
  return self;
}

Override the Layoutsubviews method to manually set the position of the button child control
-(void) layoutsubviews {
  [super layoutsubviews];

  Self.imageView.TS_width = self. Ts_width * 0.4;
  Self.imageView.TS_height = Self.imageView.TS_width;
  Self.imageView.TS_y = self. Ts_height * 0.25;
  Self.imageView.TS_centerX = self. Ts_width * 0.5;

  Self.titleLabel.TS_width = self. Ts_width;
  self.titleLabel.TS_y = Self.imageView.TS_buttom;
  Self.titleLabel.TS_height =;
  self.titleLabel.TS_x = 0;
}

@end

Run the results in two different ways

Summarize:

At this point, the two methods of setting up the picture are already finished. Compare:

The first way to set the button through the classification is very convenient, only need a line of code is enough, do not need to calculate uiengeinsetsmake ourselves, for pure code created buttons. If the button created by Xib is not used.

The second way to override Layoutsubviews in an inherited way is to set the button the benefit is both for the button created by pure code and for the button created by Xib, but this method has some limitations, it only applies to the same type of button. For example, I have several different types of buttons in an interface, this time we need to create different inherited UIButton Button class, in the Layoutsubviews set different position relationship. This is relatively complicated.

The two methods have pros and cons, you can choose to use according to their actual situation. Of course there are more than two ways to set the position of the button picture and text, and there are other better ways to find out. If you have any better suggestions, you can also contact me, we discuss learning together.

Thank you for reading, I hope to help you, thank you for your support for this site!