首先看下效果圖：
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)
根據(jù)效果圖需要定義背景View，標題Label偎漫，下劃線View爷恳，還有可以滑動的UIScrollView。定義所需的基本的控件以及創(chuàng)建：
@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 = @"冷庫規(guī)模";
[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以外的區(qū)域需要銷毀當前的View象踊，首先添加手勢代碼
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapView:)];
tap.delegate = self;
[self addGestureRecognizer:tap];
實現(xiàn)手勢代理方法銷毀自身温亲，但是點擊背景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));
}];
下面為實現(xiàn)九宮格的代碼杯矩，使用了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;//根據(jù)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) {
//點擊按鈕發(fā)送數(shù)據(jù)信號
[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 {
//根據(jù)參考的button適配
make.left.mas_equalTo(lastButton.mas_right).mas_offset(leftMrgin);
}
}];
//賦值button
lastButton = button;
}
//計算scrollView的高度 并且設置優(yōu)先級為低 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;
}];
小面展示的是效果圖，數(shù)據(jù)是從后臺獲取的
1D74AD45-4160-4E58-AE1D-B480D70152F1.png
68BAA439-8B8D-4DAE-B8D5-01820E433DED.png
