应该很长时间了,朋友给了一个项目源码,让我从中学习一下。之前看他的项目的时候感觉逻辑很复杂,也不知道用的什么设计模式。感觉他就是把很复杂的View自己封装了一下,然后留出本视图和父视图交互的方法。
可能是机遇的问题,一直没有遇到很复杂的界面,技术成长的也很慢。在现在的公司,刚完成了一个小小项目。老板让UI给了设计图,让我按着设计图改。在这过程中虽然要改的很多,有的功能可能需要重写。很高兴,也暴露出了自己的水平,改了一个界面,认认真的改了半天,把之前的删了,按设计的重新写。
我封装的小视图是下面带有蓝色按钮的那个视图,那四个按钮放在了一个View里面,然后和黑色透明的部分一起放到封装的view里面。
很low的小小项目图片
子视图与父视图交互使用Block,在要疯转的子视图中添加了一个block属性。
@property (nonatomic, copy)void(^OrderBtnAction)(UIButton *btn);
我选择了根据按钮的题目创建按钮
- (instancetype) initWithFrame:(CGRect)frame AndBtnTitles:(NSArray *)titles;
在.m文件中,我声明了一个数组btnArray来存放各个按钮,以后用用这些按钮,把他们设置为非选中状态,还声明了一个数组的个数btnNum,(现在看来是不需要这个属性了)
@property (nonatomic, assign) NSInteger btnNum;
@property (nonatomic, strong) NSMutableArray *btnArray;
然后就是方法的实现了
- (instancetype)initWithFrame:(CGRect)frame AndBtnTitles:(NSArray *)titles {
self.btnNum = titles.count;
按钮的款
CGFloat btnWidth = kSize(55);
按钮的高
CGFloat btnHeight = kSize(20);
左侧按钮距离边界的距离
CGFloat margin = kSize(8);
按钮之间的距离
CGFloat space = (frame.size.width - titles.count * btnWidth - margin * 2) / (titles.count - 1);
CGFloat positionX = frame.origin.x;
CGFloat positionY = frame.origin.y;
先设置阴影背景
if (self = [super initWithFrame:CGRectMake(frame.origin.x, frame.origin.y, kScreenW - positionX, kScreenH-positionY)]) {
self.backgroundColor = kUIColorFromRGBA(0x000000, 0.4);
再创建承载按钮的view
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
view.backgroundColor = kUIColorFromRGB(0xf3f3f3);
[self addSubview:view];
然后循环创建按钮了
for (int i = 0; i < titles.count; i ++) {
UIButton *btn = [[UIButton alloc] init];
[view addSubview:btn];
还使用了Masonry布局
[btn mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(margin + (btnWidth + space)*i);
make.centerY.mas_equalTo(0);
make.size.mas_equalTo(CGSizeMake(btnWidth, btnHeight));
}];
[btn setTitle:titles[i] forState:UIControlStateNormal];
[btn setTitle:titles[i] forState:UIControlStateSelected];
btn.titleLabel.font = [UIFont systemFontOfSize:kSize(13)];
[btn setTitleColor:kUIColorFromRGB(0x666666) forState:UIControlStateNormal];
[btn setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
设置按钮的背景色,后面有些
[btn setBackgroundColor:kUIColorFromRGB(0x29a0f3) forState:UIControlStateSelected];
非选中后clear颜色就没哟圆角框框了
[btn setBackgroundColor:[UIColor clearColor] forState:UIControlStateNormal];
主页面会根据这个i刷新相应类型的数据的
btn.tag = i;
btn.layer.borderWidth = 0;
btn.layer.cornerRadius = 3;
btn.clipsToBounds = YES;
[btn addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside];
默认第一个是选中状态的
if (i == 0) {
btn.selected = YES;
}
[self.btnArray addObject:btn];
}
}
return self;
}
当出发一个按钮事件时,向将其他的按钮变为非选中状态,然后将本按钮设为选中状态。
- (void)btnAction:(UIButton *)sender {
for (int i = 0; i < self.btnNum; i ++) {
((UIButton *)self.btnArray[i]).selected = NO;
}
将本按钮发给主视图
self.OrderBtnAction(sender);
}
- (NSMutableArray *)btnArray {
if(_btnArray == nil) {
_btnArray = [[NSMutableArray alloc] init];
}
return _btnArray;
}
在使用时 创建视图
_orderView = [[JKXOrderView alloc] initWithFrame:CGRectMake(0, kSize(40), kScreenWidth, kSize(36)) AndBtnTitles:@[@"时间降序", @"时间升序", @"重要降序", @"重要升序"]];
先隐藏
_orderView.hidden = YES;
[self.view addSubview:_orderView];
__block typeof(self) bself = self;
点击按钮后
self.orderView.OrderBtnAction = ^(UIButton *btn){
[bself.orderBtn setTitle:@[@"时间降序", @"时间升序", @"重要降序", @"重要升序"][btn.tag] forState:UIControlStateNormal];
设置标签内容
bself.classIndex = btn.tag;
然后刷新了数据
[bself.tableView.mj_header beginRefreshing];
将本按钮设为选中,选中状态底色为蓝色
btn.selected = YES;
然后隐藏自己的视图
bself.orderView.hidden = YES;
和那个三角
bself.triangleView.hidden = YES;
根据状态设置按钮背景色写了一个小分类
- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state {
[self setBackgroundImage:[UIButton imageWithColor:backgroundColor] forState:state];
}
画一个带颜色的小图片
+(UIImage *)imageWithColor:(UIColor *)color {
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
我的十六进制颜色宏
#define kUIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
// 带透明度是十六进制颜色
#define kUIColorFromRGBA(rgbValue,a) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:(a)]
写完了,不知道别人能不能看懂,感觉我表达有问题地的欢迎提意见,我自己是找不到的。
还是希望有同行的大牛帮忙指点指点,感激不尽。公司只有我自己,不知道和谁交流呢。