IOS custom uibutton Jiugong grid effect


This article describes how to write custom Jiugong grid, because this demand is also common in development. Therefore, it is mainly described by uibutton;

The real column is not complex, and can be completed in two or three steps:

IDefine width and height (self. View)

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

#define JHRGB(r,g,b) [UIColor colorWithRed:(r/255.0) green:(g/255.0) blue:(b/255.0) alpha:1.0]
#define JHRandomColor JHRGB(arc4random_uniform(255), arc4random_uniform(255), arc4random_uniform(255))

IIDefine the text and pictures of the Jiugong grid

@property (nonatomic, strong) NSArray * titlesArr;

@property (nonatomic, strong) UILabel * numberLab;

@property (nonatomic, strong) NSArray * titleimg;

-(NSArray *)titlesArr{
 if (!_titlesArr) {
 _ Titlesarr = @ [@ "home page", @ "purchase", @ "article", @ "community", @ "service", @ "scan", @ "positioning", @ "after sales", @ "order"];
 return _titlesArr;
-(NSArray *)titleimg{
 if (!_titleimg) {
 _titleimg = @[@"me",@"msg",@"meg",@"1",@"2",@"3",@"me",@"2",@"3"];
 return _titleimg;

IIILoop out 9 uibton data and dynamically adjust relevant styles

 NSInteger totalLoc = 3;// Three numbers in a column
 CGFloat W = 50;// width
 CGFloat H = W;// height
 CGFloat margin=(self.view.frame.size.width-totalLoc * W)/(totalLoc+1);
 for (NSInteger i = 0;  i < self.titlesArr.count;  I + +) {// loop body
 UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];// Definition of button
 btn.frame = CGRectMake(100, 100, 80, 80);// Button size
 [btn setTitle:self.titlesArr[i] forState:UIControlStateNormal];// Dynamically set button text
 [btn setBackgroundImage:[UIImage imageNamed:self.titleimg[i]] forState:UIControlStateNormal];// Dynamic settings picture
 [btn setTitleColor:[UIColor darkGrayColor] forState:0];// The color of the text
 [btn setImageEdgeInsets:UIEdgeInsetsMake(5, 25, 45, 25)];// Size of picture
 [btn setTitleEdgeInsets:UIEdgeInsetsMake(80, 0, 5, 0)];// Position of text
 //btn.backgroundColor = [UIColor blueColor];
 /*Calculate frame*/
 NSInteger row = i / totalLoc;// Line number
 NSInteger loc = i % totalLoc;// Column number
 CGFloat X= margin + (margin + W) * loc;
 CGFloat Y= margin + (margin + H) * row;
 btn.frame = CGRectMake(X, Y, W, H);
 //Set the tag value (the tag here is just to make each button click have different animation effects)
 btn.tag = i;
 [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
 [self.lgView.imgview addSubview:btn];

IVEvent monitoring by clicking the button

-(void)clickBtn:(UIButton *)btn{
 NSString *stringInt = [NSString stringWithFormat:@"%ld",(long)btn.tag];
 btn.layer.transform = CATransform3DMakeScale(0.5*arc4random_uniform([stringInt floatValue]), 0.5*arc4random_uniform([stringInt floatValue]), 1);
 self.numberLab.text = btn.titleLabel.text;
 NSLog(@"%@wo dian ji l:",stringInt);
 [UIView animateWithDuration:0.5 animations:^{
 btn.layer.transform = CATransform3DMakeScale(1, 1, 1);


The following logic analysis:

1. The masonry layout is used above, so my view container has no width and height (written in my view layer).
2. Define a view container first
3. Define the button in the container and the loop body, and set the attributes of the button.
4. Define relevant arrays, such as: (text, picture)
5. Click button event trigger function;

To understand the logic of the above information, just copy and paste the above information, and the project can be tested in person.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.

Recommended Today

Shutter control layout – spacer, flex, expanded, flexible, padding

Spacer Initial state Set three buttons in order Add a line between the two buttons abSpacer() Add a line between the BC buttonsSpacer() summary Spacer()It is equivalent to the effect of spring to maximize the distance between two controls (effective only when the page is not slidable) Flex Flex is the parent component of row […]