企业管理网站模板,pc网站制作,淘宝网站用什么语言做的,wordpress本地编辑器iOS回顾笔记#xff08; 02 #xff09; -- 由九宫格布局引发的一系列“惨案” 前言#xff08;扯几句淡先#xff09; 回顾到学习UI过程中的九宫格布局时#xff0c;发现当时学的东西真是不少。 这个阶段最大的特点就是#xff1a;知识点繁多且琐碎。 我们的目标就是要将… iOS回顾笔记 02 -- 由九宫格布局引发的一系列“惨案” 前言扯几句淡先 回顾到学习UI过程中的九宫格布局时发现当时学的东西真是不少。 这个阶段最大的特点就是知识点繁多且琐碎。 我们的目标就是要将这琐碎的知识点灵活运用、融汇贯通通过不同的实现方式来实现相同的功能最后进行比较得到最好的那种方式。这个求知的过程就是我们最需要学习的在过程中我们学会了自我思考并且在自己的思考和比较中我们的脑海里逐渐形成了自己的编程思想。 本文主要以九宫格购物车的实现为引子从最基础的实现方法层层递进直到最完美的实现方式。代码从起初的低效、耦合度高到后期的层层分离、MVC各模块封装高内聚、低耦合更具扩展性等方面逐步深化和扩展经过编程思想的层层深入和代码的步步完善最后完整的展现在用户面前。 本文大体目录 九宫格购物车demo对应物品封装View的简单封装数据的加载方式对比 与 演变属性列表文件plist的创建和使用MVC 思想的引入和介绍九宫格购物车Demo 九宫格是我们在开发过程中对于一些有规律的UI布局常用的一种布局算法。 九宫格特点简单封装性好可复用性高很适合一些页面同类型item数量动态变化UI页面布局 下面就实现一个买书购物车 基本要求和思路如下 思路 1. 最初没有书删除按钮不可用 2. 点击添加就添加一本书删除按钮可用 3. 添加基本之后提示购物车已满添加按钮不可用 4. 删除按钮点击购物车不满的时候添加按钮又可以使用 5. 添加书籍按九宫格的样式在页面中显示 先说说最直接的方法 // 添加书
- (IBAction)addBook:(id)sender {// 1. 创建书图标UIImageView *bookIcon [UIImageView new];bookIcon.image [UIImage imageNamed:0];bookIcon.frame CGRectMake(0, 0, 50, 50);[self.shopView addSubview:bookIcon];// 2.书名UILabel *bookName [UILabel new];bookName.frame CGRectMake(0, 50, 50, 20);bookName.text book1;bookName.textAlignment NSTextAlignmentCenter;[self.shopView addSubview:bookName];// 3.添加到数组(分开写好像很难明确如何添加这本书)}这是最直接的方法来添加的一本书这样确实能添加一本书但是这种直观、死板的思想是不对的。 面对这样的动态变化的UI页面每次添加和删除书籍的操作都是用户随机的所以代码每次也是根据对应的点击来计算对应书籍要添加的位置。每本书的位置主要是和它对应的index来确定这就涉及到“书”这个对象要每次计数书是一个整体所以书内部的东西应当封装起来。“书”在UI上表现是 图标 书名也就是iamgeview label从用户看到的整体性上来说每次添加和删除同一本书也需要对 图标 和 书名 分别计算两次来计算和排列。这也是非常不合理的并且很容易计算出现问题。应该根据UIView 父子控件相关特性对“书”进行封装添加/删除的时候统一处理父控件至于内部属性都会根据父控件来自动布局方便管理。书的封装 了解以上说的直接把代码分开写的局限性之后现在来封装一下“书”这个对象。 UI层的封装我们先分析UI布局内部属性只有 图标UIImagevView 和 书名UILabel父控件选取原则父控件只是承载子控件的容器应当简洁为主所以选择 UIView// 0. 创建书UIView *book [UIView new];book.frame CGRectMake(0, 0, 60, 70);book.backgroundColor [UIColor redColor];[self.shopView addSubview:book];// 1. 创建书图标UIImageView *bookIcon [UIImageView new];bookIcon.image [UIImage imageNamed:0];bookIcon.frame CGRectMake(0, 0, 60, 50);[book addSubview:bookIcon];// 2.书名UILabel *bookName [UILabel new];bookName.frame CGRectMake(0, 50, 60, 20);bookName.text book1;bookName.textAlignment NSTextAlignmentCenter;[book addSubview:bookName];// 3.添加到数组(直接添加书这个对象)[self.books addObject:book]; 这样在创建和管理书的时候就方便多了并且有一个数组来记录添加书的数量在添加和删除的时候有计算的依据可计算对应位置和两个按钮的可用情况 九宫格布局的思路和实现 书的对象已经封装好了我们可以以整体思维来操作它下面就是计算位置的思路。 书的数量不定但列数是固定的可以设置成变量 int clos 3每本书之间可能有一定间距横向间距 margin width - clos * book.width/ ( clos / 2) ;每本书的位置x,y可根据下图发现规律 x 列号 * W margin y 行号 * Hmargin行号规律 行号 index / clos ;列号规律 列号 index % clos ; 有了上面的铺垫就可以写动态代码了只需要用户 设置一个列数知道最终有多少本书遍历每本书根据书的索引来计算对应的书的位置即可。 废话不多说了上代码 // 添加书
- (IBAction)addBook:(id)sender {// 设置列数为 3int clos 3;// 设置书的宽高分别为 W HCGFloat W 60;CGFloat H 70;CGFloat iconH 50;// 0. 创建书UIView *book [UIView new];book.backgroundColor [UIColor redColor];[self.shopView addSubview:book];// 计算书的位置// 获得索引NSUInteger index [self.books count];// 计算横间距 marginCGFloat margin (self.shopView.frame.size.width - clos * W) / (clos - 1);// 书 frame 的 XCGFloat x (index % clos) * (W margin);// 书 frame 的 YCGFloat y (index / clos) * (H margin);book.frame CGRectMake(x, y, W, H);// 1. 创建书图标UIImageView *bookIcon [UIImageView new];bookIcon.image [UIImage imageNamed:0];bookIcon.frame CGRectMake(0, 0, W, iconH);[book addSubview:bookIcon];// 2.书名UILabel *bookName [UILabel new];bookName.frame CGRectMake(0, iconH, W, H-iconH);bookName.text book1;bookName.textAlignment NSTextAlignmentCenter;[book addSubview:bookName];// 3.添加到数组(分开写好像很难明确如何添加这本书)[self.books addObject:book];}效果图如下 书数据加载方式和对比 到这里购物车里的书已经可以随意添加了并且可以根据用户的点击无限制的添加。 如果项目需求修改了比如变成5列了宽高什么的也是根据项目自行修改就行。 九宫格布局的代码已经完成了。 现在需要注意的问题是“书”的属性数据的添加问题现在简单的来说书属性有 书名 icon。 “书”的各属性值应该如何赋值呢 几种简单数据加载方法与对比 直接根据 index 来进行if判断逐个添加数据 if (index 0) {bookIcon.image [UIImage imageNamed:0];bookName.text Book1;}else if(index 1){bookIcon.image [UIImage imageNamed:1];bookName.text Book2;}else if(index 2){bookIcon.image [UIImage imageNamed:2];bookName.text Book3;}... 创建一个书的数组数组存放对应的字典作为书的属性方法的数据源从中取值// 0.创建书的数据源self.books [{icon:0,name:book1},{icon:1,name:book2},{icon:2,name:book3},{icon:3,name:book4},];// 1.书图标
bookIcon.image [UIImage imageNamed:self.books[index][icon]];
// 2.书名
bookName.text self.books[index][name]; 进一步分离数据将数据信息放到其他文件中用的时候从文件中读取 // 获取文件路径NSString *books [[NSBundle mainBundle] pathForResource:bookData ofType:plist];// 加载路径中内容放到数组中_books [NSMutableArray arrayWithContentsOfFile:books];// 1.书图标bookIcon.image [UIImage imageNamed:self.books[index][icon]]; // 2.书名bookName.text self.books[index][name]; 对于三种方法简单的比较和点评 第一种直接if判断index的位置 直接把动态判断代码写到代码中过于死板代码耦合性太高及其不利于后期扩展如果加数据简直是恶魔一些死布局并且元素个数极少几个的时候可以使用代码重复性高技术含量低 第二种把数据代码独立出来放到一个数组中 避免了第一种直接写到代码中的低效且恶心的做法代码还是和数据耦合到一起了如果后期修改需要修改代码如果数据量大及其不利于后期管理和数据的修改相比第一种有明显的分离是一种进步 第三种代码和数据分离放到外部文件中 彻底代码和数据分离耦合性低易于扩展数据放到文件中、后期添加或者修改数据无需改动代码、更加独立代码更简洁直观只需关注功能和布局适合企业开发、这是一种通用方式网络应用更是如此plist文件介绍和使用 简介 plist文件全称Property List文件中文又叫属性列表文件。是苹果平台上常用的一种资源描述类文件。它存储的属性一般都是Xcode里面的基本数据类型或者OC里面的对应类型NSDictionaryNSArrayNSString等Xcode会自动进行解析成可以打开和合上的层叠格式用文本文件打开直接就是XML格式的键值对plist文件的创建 plist的创建一般直接用Xcode创建然后在里面添加对应的key和value几乎没有人会手写plist文件 plist文件的使用 plist使用就和其他的文件用法一样先读取目标文件的路径在根据路径加载到数组中。 // 获取文件路径NSString *books [[NSBundle mainBundle] pathForResource:bookData ofType:plist];// 加载路径中内容放到数组中_books [NSMutableArray arrayWithContentsOfFile:books]; plist使用注意 我们自己创建plist文件的时候不能使用info/Info.plist命名 由于每次创建工程的时候系统会自动生成一个对该项目信息进行描述的info.plist它会记录项目的一些包名、项目名、开发工具、版本和其他项目的基础信息。 所以我们自己创建plist文件的时候不能使用info/Info.plist 这是为了不和系统的info.plist混淆实际上自己创建一个info.plist文件和系统重名之后项目是运行不了的。 懒加载lazyLoad -- 提升性能 懒加载又叫延迟加载由于项目运行时候很多数据用不到可以暂时不创建等到用的时候在创建这样节省系统性能。 如以上项目中就是在添加书的方法中每次创建书籍数组 // 添加书
- (IBAction)addBook:(id)sender {self.books [{icon:0,name:book1},{icon:1,name:book2},{icon:2,name:book3},{icon:3,name:book4},];// 设置列数为 3int clos 3;// 设置书的宽高分别为 W HCGFloat W 60;CGFloat H 70;CGFloat iconH 50;// 0. 创建书UIView *book [UIView new];book.backgroundColor [UIColor redColor];这样其实非常耗性能每次都要创建一个数组然后用过一次就没有用了对此可以进行一个优化对于该书籍数据其实就是一个固定数据每次用一下用的时候再创建不用的时候就不管了这里正好用懒加载最好了。 懒加载实际上就是一个get方法
// 懒加载书籍数据
- (NSMutableArray *)books
{if (_books nil) {// 获取文件路径NSString *books [[NSBundle mainBundle] pathForResource:bookData ofType:plist];// 加载路径中内容放到数组中_books [NSMutableArray arrayWithContentsOfFile:books];}return _books;
}// 使用的时候直接用数组就行
bookIcon.image [UIImage imageNamed:self.books[index][icon]];
bookName.text self.books[index][name]; MVC 思想的介绍和引入 以上的小Demo已经告一段落了可以实现把文件中书籍数据按九宫格的布局添加到购物车中也可以一一删除。 思考 还有什么可以改进的吗 数据就这样存放到数组中就完美了吗 每次用书的数据的时候直接从数组总取出来确实方便但是这样真的足够完美吗 现在的所有代码几乎都在一个文件中如果项目大了也这样写吗 上面把对应的数据加载方式分离到文件中了其他的业务逻辑能不能也分离一下能不能让项目的结构更加清晰 待着这些思考答案是肯定的项目的代码还是非常耦合的并且有个致命的缺点。 每次从数组中取书的信息时候都自己写key值self.books[index][icon] 如果这个“icon“手误写错编辑器一点提示也没有如果书有很多属性每次手写key值很头痛并且代码看起来很糟所以我们需要一种新的方式因为书是一个对象可以把它封装成对象它用有自己的各种属性和方法。这样做有几点好处 便于管理在使用的时候直接调用属性的get方法就行。系统会自动提示get方法安全性高不会出错如果写错系统会报错。代码封装性好书就是书而不是每次到数组中去取字典根据对应的key来取值扩展性好如果日后需要添加新的属性和方法直接在”书“类中加就行MVC介绍 经过上面的分析可以确定的是书应该独立封装起来保存数据页面逻辑也应该单独管理至于ViewController恰好就是两者的桥梁。这样的设计模式就是MVC M : (Model)数据模型用来存储和保存数据V : (View)UI视图用来展示给用户看的页面一些复杂的页面要封装起来放到里面单独管理。C: (Controller)控制器是两者的桥梁主要用来处理业务逻辑。使用MVC模式可以很好的简化项目代码对不同的模块进行封装降低耦合性扩展性也会得到提高MVC是企业开发常用的设计模式。 MVC的分层封装和使用 经过分析可知在此小项目中书和展示的书的UI和ViewController对应MVC的关系 书 -- Model用来封装书的各种属性信息和方法书UI -- View封装书这个小表象用于展示给用户看ViewController -- Controller用来处理整体的业务逻辑优化代码废话不多说了上各层的代码 下面是书的代码封装存储书的数据和方法
头文件 XYBook.hinterface XYBook : NSObject// 书图标
property (nonatomic, copy) NSString *icon;
// 书名字
property (nonatomic, copy) NSString *name;// 对象方法返回自己对象
- (instancetype)initWithDict:(NSDictionary *)dict;
// 类方法返回自己对象(instancetype)bookWithDict:(NSDictionary *)dict;
end#import XYBook.himplementation XYBook- (instancetype)initWithDict:(NSDictionary *)dict
{if (self [super init]) {[self setValuesForKeysWithDictionary:dict];}return self;
} (instancetype)bookWithDict:(NSDictionary *)dict
{return [[self alloc] initWithDict:dict];
}
end 书的UI的封装集中布局减少控制器代码优化控制器逻辑
XYBookView.h 头文件#import UIKit/UIKit.h
class XYBook;interface XYBookView : UIView// 只放一个数据属性用来赋值内部布局放到.m 中自己管不暴露给外界
property (nonatomic, strong) XYBook *book;end实现文件 .m文件
#import XYBookView.h
#include XYBook.hinterface XYBookView ()property (nonatomic, weak) UIImageView *icon;property (nonatomic, weak) UILabel *label;endimplementation XYBookView- (instancetype)initWithFrame:(CGRect)frame
{if (self [super initWithFrame:frame]) {// 1. 创建书图标UIImageView *icon [UIImageView new];self.icon icon;[self addSubview:self.icon];// 2.书名UILabel *bookName [UILabel new];bookName.textAlignment NSTextAlignmentCenter;self.label bookName;[self addSubview:self.label];}return self;
}// 重写布局
- (void)layoutSubviews
{[super layoutSubviews];CGSize size self.frame.size;self.icon.frame CGRectMake(0, 0, size.width , size.height * 0.7);self.label.frame CGRectMake(0, size.height * 0.7, size.width, size.height *(1 - 0.7));}// 设置书的属性
- (void)setBook:(XYBook *)book
{_book book;self.icon.image [UIImage imageNamed:book.icon];self.label.text book.name;
}
end控制器不管细节专注处理逻辑
// 懒加载数据源
- (NSMutableArray *)books
{if (_books nil) {_books [NSMutableArray array];// 获取文件路径NSString *books [[NSBundle mainBundle] pathForResource:bookdata ofType:plist];// 加载路径中内容放到数组中NSMutableArray *arrayM [NSMutableArray arrayWithContentsOfFile:books];for (NSDictionary *dict in arrayM) {XYBook *book [XYBook bookWithDict:dict];[_books addObject:book];}}return _books;
}// 添加书
- (IBAction)addBook:(id)sender {// 设置列数为 3int clos 3;// 设置书的宽高分别为 W HCGFloat W 60;CGFloat H 70;// 0. 创建书XYBookView *bookView [XYBookView new];bookView.backgroundColor [UIColor redColor];// 计算书的位置// 获得索引NSUInteger index [self.shopView.subviews count];// 计算横间距 marginCGFloat margin (self.shopView.frame.size.width - clos * W) / (clos - 1);// 书 frame 的 XCGFloat x (index % clos) * (W margin);// 书 frame 的 YCGFloat y (index / clos) * (H margin);bookView.frame CGRectMake(x, y, W, H);[self.shopView addSubview:bookView];// 给书的UI设置数据bookView.book self.books[index];[self checkState];self.removeBtn.enabled YES;
}// 移除书
- (IBAction)removeBook:(id)sender {[[self.shopView.subviews lastObject] removeFromSuperview];[self checkState];self.addBtn.enabled YES;
} 以上就是对于本Demo的最终MVC封装版不同部分各司其职负责自己的模块项目的健壮性和封装性也也到了对应的提高 小记 一个简单的九宫格购物车的小Demo真是麻雀虽小五脏俱全。 关于这个项目的完整代码欢迎私聊或评论找我要如果文章有任何问题或有其他技术问题欢迎随时和我交流。 最后放一张项目效果图 转载于:https://www.cnblogs.com/xiaoyouPrince/p/6494710.html
