先来看下效果图
效果图.gif
- 小工具目前只是单纯的展示出宫格，只是写了个框架，可以根据自己的需求在此基础上修改代码。
简单介绍一下思路，我这里是一共分了四种情况写布局，分别是：一张图片、两张图片、四张图片和其他张图片。
typedef enum : NSUInteger {
FCButtonLayoutStyleOne,//一张图片
FCButtonLayoutStyleTwo,//两张图片
FCButtonLayoutStyleFour,//四张图片
FCButtonLayoutStyleOther,//其他
} FCButtonLayoutStyle;
接下来开始上菜
1、创建一个自定义View
- .h文件
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface FriendCircleImgView : UIView
///初始化的时候传入最大宽度，方便布局使用
-(instancetype)initWithMaxWidth:(CGFloat)width;
///本次需要添加宫格的个数
@property (nonatomic, assign) NSInteger buttonCount;
@end
NS_ASSUME_NONNULL_END
- .m文件
#import "FriendCircleImgView.h"
typedef enum : NSUInteger {
FCButtonLayoutStyleOne,//一张图片
FCButtonLayoutStyleTwo,//两张图片
FCButtonLayoutStyleFour,//四张图片
FCButtonLayoutStyleOther,//其他
} FCButtonLayoutStyle;
@interface FriendCircleImgView ()
///装多宫格的数组,复用视图
@property (nonatomic, strong) NSMutableArray <UIButton*>* buttons;
///容器视图 来自适应九宫格高度
@property (nonatomic, strong) UIView * containerView;
///容器视图的底部约束
@property (nonatomic, weak) MASConstraint * containerViewConstraintbottom;
///button布局类型
@property (nonatomic) FCButtonLayoutStyle layoutStyle;
///最大宽度
@property (nonatomic) CGFloat maxWidth;
@end
@implementation FriendCircleImgView
-(void)setButtonCount:(NSInteger)buttonCount{
//有图片的情况
if (buttonCount != 0) {
if (buttonCount == 1) {
self.layoutStyle = FCButtonLayoutStyleOne;
}else if (buttonCount == 2){
self.layoutStyle = FCButtonLayoutStyleTwo;
}else if (buttonCount == 4){
self.layoutStyle = FCButtonLayoutStyleFour;
}else{
self.layoutStyle = FCButtonLayoutStyleOther;
}
//每次重新创建宫格的个数 从容器视图中移除
[self.containerView.subviews enumerateObjectsUsingBlock:^(UIButton * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
if (!obj.hidden) {
[obj removeFromSuperview];
obj.hidden = true;
}
}];
//循环从初始化list中取出在添加到容器视图当中
for (int i = 0; i< buttonCount; i++) {
UIButton *btn = self.buttons[i];
[self.containerView addSubview:btn];
btn.hidden = false;
}
//间距x,y
CGFloat marginX = 10.0;
CGFloat marginY = marginX;
//一张图片的情况
if (self.layoutStyle == FCButtonLayoutStyleOne) {
//button宽度
CGFloat btnWidth = self.maxWidth - marginX * 2;
UIButton *subv = self.containerView.subviews[0];
subv.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1];
[subv mas_updateConstraints:^(MASConstraintMaker *make){
make.left.mas_equalTo(marginX);
make.top.mas_equalTo(marginY);
make.size.mas_equalTo(CGSizeMake(btnWidth, btnWidth));
}];
}
//两张图片的情况
if (self.layoutStyle == FCButtonLayoutStyleTwo) {
//button宽度
CGFloat btnWidth = (self.maxWidth - marginX * 3) / 2;
for (int i = 0; i < self.containerView.subviews.count ; i++) {
UIButton *subv = self.containerView.subviews[i];
subv.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1];
[subv mas_updateConstraints:^(MASConstraintMaker *make){
make.left.mas_equalTo(marginX + i % 2 * (btnWidth + marginX));
make.top.mas_equalTo(marginY);
make.size.mas_equalTo(CGSizeMake(btnWidth, btnWidth));
}];
}
}
//四张图片的情况
if (self.layoutStyle == FCButtonLayoutStyleFour) {
//button宽度
CGFloat btnWidth = (self.maxWidth - marginX * 3) / 2;
for (int i = 0; i < self.containerView.subviews.count ; i++) {
UIButton *subv = self.containerView.subviews[i];
subv.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1];
[subv mas_updateConstraints:^(MASConstraintMaker *make){
make.left.mas_equalTo(marginX + i % 2 * (btnWidth + marginX));
make.top.mas_equalTo(marginY + i / 2 * (btnWidth + marginY));
make.size.mas_equalTo(CGSizeMake(btnWidth, btnWidth));
}];
}
}
//其他情况
if (self.layoutStyle == FCButtonLayoutStyleOther) {
//button宽度
CGFloat btnWidth = (self.maxWidth - marginX * 4) / 3;
for (int i = 0; i < self.containerView.subviews.count ; i++) {
UIButton *subv = self.containerView.subviews[i];
subv.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1];
[subv mas_updateConstraints:^(MASConstraintMaker *make){
make.left.mas_equalTo(marginX + i % 3 * (btnWidth + marginX));
make.top.mas_equalTo(marginY + i / 3 * (btnWidth + marginY));
make.size.mas_equalTo(CGSizeMake(btnWidth, btnWidth));
}];
}
}
//卸载上一次容器视图的底部约束
if (self.containerViewConstraintbottom) {
[self.containerViewConstraintbottom uninstall];
}
//重新生成容器视图的底部约束 参考最后一个宫格的底部
[self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
self.containerViewConstraintbottom = make.bottom.equalTo(self.containerView.subviews.lastObject).offset(marginX);
}];
[self mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.containerView.mas_bottom);
}];
}
//无图片的情况
else{
//每次重新创建宫格的个数 从容器视图中移除
[self.containerView.subviews enumerateObjectsUsingBlock:^(UIButton * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
if (!obj.hidden) {
[obj removeFromSuperview];
obj.hidden = true;
}
}];
//卸载上一次容器视图的底部约束
if (self.containerViewConstraintbottom) {
[self.containerViewConstraintbottom uninstall];
}
//重新生成容器视图的底部约束 参考最后一个宫格的底部
[self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
self.containerViewConstraintbottom = make.bottom.equalTo(self.containerView.mas_top).offset(0);
}];
[self mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.containerView.mas_bottom);
}];
}
// self.layoutStyle = 0;
}
-(instancetype)initWithMaxWidth:(CGFloat)width{
self = [super init];
if (self) {
self.maxWidth = width;
self.backgroundColor = [UIColor groupTableViewBackgroundColor];
for (int i = 0; i < 9; i++) {
UIButton * button = [UIButton new];
button.hidden = true;
[self.buttons addObject:button];
}
[self addSubview:self.containerView];
[self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.right.equalTo(self);
}];
}
return self;
}
/// MARK: ---- 懒加载
-(NSMutableArray *)buttons {
if (!_buttons) {
_buttons = [NSMutableArray array];
}
return _buttons;
}
-(UIView *)containerView {
if (!_containerView) {
_containerView = [UIView new];
}
return _containerView;
}
@end
2、调用
不用说，肯定是要导入头文件
#import "FriendCircleImgView.h"
- 我这里直接贴代码了，这些代码直接复制粘贴就可以用了，效果就是文章开头那样的。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
FriendCircleImgView *fcIView = [[FriendCircleImgView alloc]initWithMaxWidth:[UIScreen mainScreen].bounds.size.width - 40];
[self.view addSubview:fcIView];
_fcIView = fcIView;
[fcIView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(20);
make.top.mas_equalTo(100);
make.right.mas_equalTo(self.view.mas_right).offset(-20);
}];
fcIView.buttonCount = 1;
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
NSInteger count = arc4random() % 10;
NSLog(@"count = %ld",count);
_fcIView.buttonCount = count;
}
