首先看下效果图：
17C12286-8174-4917-8824-BB4FC2C155AC.png
6438432E-E8E5-4F7C-9637-585F877C1E65.png
A4364707-4CEB-4782-AE8F-786487EF1E46.png
当小于三行是不可滑动，大于可滑动。背景View的最大高度是有限制的。
当前界面使用到了计算高度的宏定义
#define PXW(x) (x / 750.f * kScreenWidth)
根据效果图需要定义背景View，标题Label，下划线View，还有可以滑动的UIScrollView。定义所需的基本的控件以及创建：
@property (nonatomic, weak) UIView *backgroundView;
@property (nonatomic, weak) UILabel *titleLabel;
@property (nonatomic, weak) UIView *lineView;
@property (nonatomic, weak) UIScrollView *scrollView;
- (UIView *)backgroundView {
if (!_backgroundView) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor whiteColor];
view.layer.masksToBounds = YES;
view.layer.cornerRadius = 3.f;
[self addSubview:view];
_backgroundView = view;
}
return _backgroundView;
}
- (UILabel *)titleLabel {
if (!_titleLabel) {
UILabel *label = [[UILabel alloc] init];
label.textColor = Color_45b245;
label.font = [UIFont systemFontOfSize:PXW(26.f)];
label.text = @"冷库规模";
[self.backgroundView addSubview:label];
_titleLabel = label;
}
return _titleLabel;
}
- (UIView *)lineView {
if (!_lineView) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = Color_b1b1b1;
[self.backgroundView addSubview:view];
_lineView = view;
}
return _lineView;
}
- (UIScrollView *)scrollView {
if (!_scrollView) {
UIScrollView *view = [[UIScrollView alloc] init];
[self.backgroundView addSubview:view];
_scrollView = view;
}
return _scrollView;
}
当点背景View以外的区域需要销毁当前的View，首先添加手势代码
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapView:)];
tap.delegate = self;
[self addGestureRecognizer:tap];
实现手势代理方法销毁自身，但是点击背景view上的空间不销毁View视图，
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
NSLog(@"%@",NSStringFromClass([touch.view class]))
if ([NSStringFromClass([touch.view class]) isEqualToString:@"UIView"] || [NSStringFromClass([touch.view class]) isEqualToString:@"UIScrollView"]) {
//返回为NO则屏蔽手势事件
return NO;
}
return YES;
}
- (void)tapView:(UITapGestureRecognizer *)tapView {
[self hiddenView];
}
- (void)hiddenView {
[self removeAllSubviews];
[self removeFromSuperview];
}
下面为基本布局的UI代码
[self.backgroundView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.mas_right).offset(PXW(-74.f)).priorityHigh();
make.left.equalTo(self.mas_left).offset(PXW(74.f));
make.centerY.equalTo(self.mas_centerY);
make.height.mas_lessThanOrEqualTo(PXW(462.f)).priorityHigh();
}];
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.backgroundView.mas_right).offset(PXW(-30.f)).priorityHigh();
make.left.equalTo(self.backgroundView.mas_left).offset(PXW(30.f));
make.top.equalTo(self.backgroundView.mas_top).offset(PXW(31.f));
}];
[self.lineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.left.equalTo(self.backgroundView);
make.top.equalTo(self.titleLabel.mas_bottom).offset(PXW(31.f));
make.height.mas_equalTo(PXW(1.f));
}];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.left.equalTo(self.titleLabel);
make.top.equalTo(self.lineView.mas_bottom).offset(PXW(20.f));
make.bottom.equalTo(self.backgroundView.mas_bottom).offset(PXW(-20.f));
}];
下面为实现九宫格的代码，使用了RAC第三方库
- (RACSubject *)showArray:(NSArray *)array viewTitle:(NSString *)title {
RACSubject *subject = [RACSubject subject];
UIView *view = [[[UIApplication sharedApplication] delegate] window];
self.frame = view.frame;
[view addSubview:self];
[self.scrollView layoutIfNeeded];
if (title.length) {
self.titleLabel.text = title;
}
NSInteger colInt = 3;//每行3个
NSInteger bottomHeight = PXW(20.f);//button距离底部的距离
CGFloat leftMrgin = PXW(20.f);//左间距
CGFloat buttonWidth = (self.scrollView.frame.size.width - (colInt + 1)*PXW(20.f))/colInt;//每个button的宽度
CGFloat buttonHeight = buttonWidth/154.f*90.f;//根据UI的宽高比计算高度
UIButton *lastButton = nil;//适配参考button
for (int i = 0; i < array.count; i ++) {
LYColdStoreRefriDataInfo *dataInfo = array[I];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setTitle:dataInfo.name forState:UIControlStateNormal];
button.layer.borderColor = Color_b1b1b1.CGColor;
button.layer.borderWidth = PXW(1.f);
[button setTitleColor:Color_a6a6a6 forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize:PXW(26.f)];
WEASELF(weakSelf)
[[button rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
//点击按钮发送数据信号
[subject sendNext:dataInfo];
[weakSelf hiddenView];
}];
[self.scrollView addSubview:button];
[button mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(buttonWidth);
make.height.mas_equalTo(buttonHeight);
//计算Top的高度值
CGFloat top = (i / colInt) * (buttonHeight + bottomHeight);
make.top.mas_offset(top);
//当参考button为空或者为左边第一个
if(!lastButton || (i%colInt) == 0) {
make.left.mas_offset(leftMrgin);
} else {
//根据参考的button适配
make.left.mas_equalTo(lastButton.mas_right).mas_offset(leftMrgin);
}
}];
//赋值button
lastButton = button;
}
//计算scrollView的高度 并且设置优先级为低 priorityLow 否则高度会超出View的高度
NSInteger heightCount = array.count % colInt > 0 ? (array.count/colInt + 1) : (array.count/colInt);
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(heightCount * (buttonHeight + bottomHeight)).priorityLow();
make.bottom.equalTo(self.scrollView.subviews.lastObject.mas_bottom);
}];
return subject;
}
LYColdStoreRefriDataInfo就是一个Model定义所需的属性。
下面为view的使用
LYColdStoreAlertView *alert = [[LYColdStoreAlertView alloc] init];
RACSubject *subject = [alert showArray:array viewTitle:view.titleLabel.text];
[subject subscribeNext:^(id x) {
LYColdStoreRefriDataInfo *dataInfo = (LYColdStoreRefriDataInfo *)x;
view.textField.text = dataInfo.name;
}];
小面展示的是效果图，数据是从后台获取的
1D74AD45-4160-4E58-AE1D-B480D70152F1.png
68BAA439-8B8D-4DAE-B8D5-01820E433DED.png