快捷導(dǎo)航

IOS 九宮格布局實(shí)現(xiàn)方法

更新時(shí)間：2016年09月26日 15:40:09 作者：再見(jiàn)遠(yuǎn)洋

這篇文章主要介紹了IOS 九宮格布局實(shí)現(xiàn)方法,及實(shí)例代碼，需要的朋友可以參考下

以前剛開(kāi)始搞iOS的時(shí)候大部分都是通過(guò)計(jì)算frame來(lái)布局視圖，搞著搞著貌似都是用自動(dòng)布局來(lái)搞定了，因?yàn)樽詣?dòng)布局實(shí)在太方便、太好用了，所以當(dāng)我昨天突然回看以前代碼的時(shí)候突然看到了以前寫(xiě)的九宮格布局，感覺(jué)很多東西都忘了，所以今天特意在這里記錄一下，并且通過(guò)幾個(gè)簡(jiǎn)單的宏定義來(lái)完成布局的需求，具體大家看代碼吧，都有注釋很好懂：

//
// ButtonContainerView.h
// chemuchao
//
// Created by 遇見(jiàn)遠(yuǎn)洋 on 16/3/7.
// Copyright © 2016年 zhaoxiaolu. All rights reserved.
//

#import <UIKit/UIKit.h>
//按鈕點(diǎn)擊block
typedef void(^spitlotBtnClick)(UIButton * btn);
@interface ButtonContainerView : UIView
@property (nonatomic,copy)spitlotBtnClick spitlotBlock;/**<<#展示對(duì)話(huà)內(nèi)容的tableview#>*/

@end

這里給大家推薦一個(gè)寫(xiě)注釋的好方法吧，在聲明屬性的時(shí)候，我們?nèi)绻朐趧e的地方調(diào)用這個(gè)屬性的時(shí)候在下方有提示如圖：

只需要跟我在上面聲明屬性的時(shí)候一樣在最后加上

/**<這是要寫(xiě)的提示文字*/

使用這種方式聲明的屬性，在外面調(diào)用的時(shí)候就會(huì)有提示，好像跑題了，接下來(lái)點(diǎn)M的代碼吧：

//
// ButtonContainerView.m
// chemuchao
//
// Created by 遇見(jiàn)遠(yuǎn)洋 on 16/3/7.
// Copyright © 2016年 zhaoxiaolu. All rights reserved.
//

#import "ButtonContainerView.h"
#import "UIView+Extension.h"
//狀態(tài)欄高度
#define kStateHeight 20

//總行數(shù)
#define kRows 2

//總列數(shù)
#define kCols 4

//九宮格個(gè)數(shù)
#define kCount 8

//九宮格之間的間隙
#define kMargin 5

//字體大小
#define kFont15 [UIFont systemFontOfSize:15]

@interface ButtonContainerView ()
@property (nonatomic,strong)NSMutableArray * btns;
@property (nonatomic,strong)NSArray * btnTitles;

@end
@implementation ButtonContainerView

- (NSMutableArray *)btns
{
  if (!_btns) {
    _btns = [NSMutableArray array];
  }
  return _btns;
}

-(NSArray *)btnTitles {
  if (!_btnTitles) {
    _btnTitles = @[@"堵成狗",@"堵成翔",@"路太窄",@"沒(méi)燈",@"路不平",@"積水多",@"顛簸",@"路太臟"];
  }
  return _btnTitles;
}
- (instancetype)initWithFrame:(CGRect)frame{
  if (self = [super initWithFrame:frame]) {
    [self setupUI];
  }
  return self;
}

- (void)setupUI {
  for (int i = 0; i < kCount; i++) {
    UIButton * btn = [[UIButton alloc]init];
    [btn setTitle:self.btnTitles[i] forState:UIControlStateNormal];
    [self addSubview:btn];
    btn.layer.borderWidth = 1;
    btn.layer.borderColor = [UIColor redColor].CGColor;


      btn.titleLabel.font = [UIFont systemFontOfSize:13];
    [btn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    [btn addTarget:self action:@selector(spitlotBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.btns addObject:btn];
  }
}

-(void)layoutSubviews {
  [super layoutSubviews];
  [self.btns enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
    UIButton * btn = obj;
    btn.tag = idx;
    //行號(hào)
    NSUInteger row = idx/kCols;

    //列號(hào)
    NSUInteger col = idx%kCols;

    CGFloat btnW = (self.width - kMargin*(kCols + 1))/kCols;

    CGFloat btnH = (self.height - kMargin*(kRows + 1))/kRows -10;

    CGFloat btnX = kMargin + col*(kMargin + btnW);

     CGFloat btnY = kMargin + row*(kMargin + btnH) + kStateHeight;

    btn.frame = CGRectMake(btnX, btnY, btnW, btnH);
  }];
}

#pragma mark 按鈕點(diǎn)擊事件
- (void)spitlotBtnClick:(UIButton *)sender {
  NSAssert(self.spitlotBlock != nil, @"傳入的block不能為空");
  //執(zhí)行block
  self.spitlotBlock(sender);
}
@end

你只需要更換幾個(gè)宏定義就可以定制你的九宮格布局了，例如總行數(shù)、總列數(shù)、九宮格個(gè)數(shù)，簡(jiǎn)單吧復(fù)用性還是很高的，當(dāng)然對(duì)于使用自動(dòng)布局的你來(lái)說(shuō)，可以無(wú)視我。

希望通過(guò)此文能幫助大家開(kāi)發(fā) IOS九宮格的開(kāi)發(fā)，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: