美文网首页
一点view视图的封装

一点view视图的封装

作者: 呦释原点 | 来源:发表于2016-11-15 17:06 被阅读32次

        应该很长时间了,朋友给了一个项目源码,让我从中学习一下。之前看他的项目的时候感觉逻辑很复杂,也不知道用的什么设计模式。感觉他就是把很复杂的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)]

写完了,不知道别人能不能看懂,感觉我表达有问题地的欢迎提意见,我自己是找不到的。

还是希望有同行的大牛帮忙指点指点,感激不尽。公司只有我自己,不知道和谁交流呢。

相关文章

  • 一点view视图的封装

    应该很长时间了,朋友给了一个项目源码,让我从中学习一下。之前看他的项目的时候感觉逻辑很复杂,也不知道用的什...

  • React Native之组件

    View 视图 实例1 Button 按钮 例1 属性 TouchableHighlight 用来封装可触摸视图 ...

  • 15、视图

    视图: 是一个封装了各种复杂查询的语句,就称为视图。 创建视图 CREATE VIEW视图名字(字段) AS 子查...

  • Oracle数据库知识 day02 索引&pl/sql语法&

    一、视图 1.1概念:视图就是封装了一条复杂查询的语句。 1.2 语法: CREATE VIEW 视图名称 A...

  • SQL-视图

    视图本质就是对查询的封装。 create view 视图名称 as select语句; (其实存储过程也是对查询的...

  • iOS-自定义控件相关

    本篇涵盖自定义控件、视图等. 1.iOS开发-轻松学会封装自定义视图view(自定义弹框封装详解)2.iOS开发-...

  • day41-认识Django

    一、MVC模式和MVT模式 1.MVC模式Model(模型):主要用于封装对数据层的访问View(视图):用于封装...

  • Android_View视图的基本属性

    一.概念: Android中的View与我们以前理解的“视图”有所不同。这里的View封装了用户交互和显示。Vie...

  • MVC,MVP,MVVM

    1.mvc Model:数据(存数据)。不应该为了适配某个view,在内部进行数据的解析和封装。 View:视图(...

  • 视图

    创建视图 创建视图语法:create VIEW 视图名 AS 查询语句; CREATE VIEW view_all...

网友评论

      本文标题:一点view视图的封装

      本文链接:https://www.haomeiwen.com/subject/dsqlpttx.html