IOS基础UI之(六)综合小案例-应用管理
来源:互联网 发布:redis mac 客户端 编辑:程序博客网 时间:2024/06/08 00:39
实现效果:
(1)已九宫格的形式展现应用信息
(2)点击下载按钮后,提示下载完成提醒
掌握知识点:
(1)UIView常见属性和方法
(2)九宫格的实现
(3)字段转模型
(4)xib的使用
(5)自定义view,封装view
(6)mvc的思想
九宫格实现分析:
特点:列号决定x值(每一列的x值一样),行号决定y值(每一行的y值一样)
//总列数 int totalCount = 3; //每个格子的尺寸 CGFloat appW = 85; CGFloat appH = 100; //间隙 = (控制器view宽度 - 3*应用宽度)/4; CGFloat marginX = (self.view.frame.size.width - totalCount * appW)/(totalCount+1); CGFloat marginY = 20; for(int i = 0;i<self.apps.count;i++){ //添加一个小框框 UIView *appView = [[UIView alloc] init]; //添加背景色 //appView.backgroundColor = [UIColor greenColor]; //计算行号和列好 int row = i/totalCount; int col = i%totalCount; //计算位置 CGFloat appX = marginX + col*( appW + marginX) ; CGFloat appY = 30 + row * ( appH + marginY); appView.frame = CGRectMake(appX, appY, appW, appH); //添加到控制器中 [self.view addSubview:appView]; }
字典转模型:
使用字典的坏处:
一般情况下,设置数据和取出数据都使用“字符串类型的key”,编写这些key时,编译器不会有任何友善提示,需要手敲
dict[@"name"] =@"Jack";
NSString *name = dict[@"name"];
手敲字符串key,key容易写错。Key如果写错了,编译器不会有任何警告和报错,造成设错数据或者取错数据
使用模型的好处:
所谓模型,其实就是数据模型,专门用来存放数据的对象,用它来表示数据会更加专业
模型设置数据和取出数据都是通过它的属性,属性名如果写错了,编译器会马上报错,因此,保证了数据的正确性
使用模型访问属性时,编译器会提供一系列的提示,提高编码效率
app.name = @"Jack”;
NSString *name = app.name;
使用模型注意点:
为了降低耦合性,字典转模型的过程最好封装在模型内部
为了别人跟容易调用自己的模型,最好规范自己提供的构造方法命名:
- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)xxxWithDict:(NSDictionary *)dict;
应用信息模型:
ZXHApp.h
//// ZXHApp.h#import <Foundation/Foundation.h>@interface ZXHApp : NSObject//应用名称@property(nonatomic,copy) NSString *name;//图标@property(nonatomic,copy) NSString *icon;/** * 字典初始化模型 * * @param dict 字典 * * @return 模型 */-(instancetype)initWithDict:(NSDictionary *)dict;/** * 字典初始化模型(类方法) * * @param dict 字典 * * @return 模型 */+(instancetype)appWithDict:(NSDictionary *)dict; @end
//// ZXHApp.m#import "ZXHApp.h"@implementation ZXHApp/** * 字典初始化模型 * * @param dict 字典 * * @return 模型 */-(instancetype)initWithDict:(NSDictionary *)dict{ if (self = [super init]) { self.name = dict[@"name"]; self.icon = dict[@"icon"]; } return self;}/** * 字典初始化模型 * * @param dict 字典(类方法) * * @return 模型 */+(instancetype)appWithDict:(NSDictionary *)dict{ //return [[ZXHApp alloc]initWithDict:dict]; //建议使用这种方式,self:谁调此方法self就指向谁。 这样的好处是,子类继承后,调用此方法就指向子类 return [[self alloc]initWithDict:dict]; }@end
xib的使用和自定义view
Xib和storyboard对比:
共同点:
都用来描述软件界面
都用Interface Builder工具来编辑
不同点:
Xib是轻量级的,用来描述局部的UI界面
Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系
Xib文件的使用:
Xib文件可以用来描述某一块局部的UI界面Xib文件的加载:
方法1
NSArray *objs = [[NSBundlemainBundle]loadNibNamed:@"ZXHAppView"owner:niloptions:nil];
这个方法会创建xib中的所有对象,并且将对象按顺序放到objs数组中
(如果xib如右图所示,那么objs数组中依次会有3个对象:1个UIView、1个UIButton、1个UISwitch)
方法2
bundle参数可以为nil,默认就是main bundle
UINib *nib = [UINibnibWithNibName:@"ZXHAppView"bundle:[NSBundlemainBundle]];
NSArray *objs = [nibinstantiateWithOwner:niloptions:nil];
在开发阶段,面向开发者的是xib文件;当把应用装到手机上时,xib文件就会转为nib文件
xib结合自定义view的使用步骤:
1> 新建一个继承UIView的自定义view,假设类名叫做(ZXHAppView)
2> 新建一个ZXHAppView.xib文件来描述ZXHAppView内部的结构
3> 修改UIView的类型为ZXHAppView真实类型
4>将内部的子控件跟ZXHAppView进行属性连线
5> ZXHAppView提供一个模型属性
6>重写模型属性的set方法,因为在set方法中可以拿到外界传递的模型数据
7>把模型数据拆开,分别设置数据到对应的子控件中
8>补充:提供一个创建ZXHAppView的类方法,将读取xib文件的代码屏蔽起来
自定义view,获取模型数据并将内部的子控件跟ZXHAppView进行属性连线
ZXHAppView.h
//// ZXHAppView.h#import <UIKit/UIKit.h>@class ZXHApp;@interface ZXHAppView : UIView//数据模型@property(nonatomic,strong) ZXHApp *app;/** * 通过模型数据来创建一个view * * @return */+(instancetype)appView;/** * 通过模型数据来创建一个view * * @return */+(instancetype)appViewWithApp:app;@end
ZXHAppView.m
//// ZXHAppView.m#import "ZXHAppView.h"#import "ZXHApp.h"@interface ZXHAppView()@property (weak, nonatomic) IBOutlet UIImageView *imageView;@property (weak, nonatomic) IBOutlet UILabel *nameLabel;- (IBAction)download:(UIButton *)sender;@end@implementation ZXHAppView/** * 通过模型数据来创建一个view * * @param app ZXHApp * * @return ZXHAppView */+(instancetype)appViewWithApp:(id)app{ //获取xib文件 NSBundle *bundle = [NSBundle mainBundle]; NSArray *objs = [bundle loadNibNamed:@"ZXHAppView" owner:nil options:nil]; ZXHAppView *appView = [objs lastObject]; appView.app = app; return appView;}/** * 通过模型数据来创建一个view * * @return ZXHAppView */+(instancetype)appView{ return [self appViewWithApp:nil];}/** * 重写set方法 * * @param app ZXHApp对象 */-(void)setApp:(ZXHApp *)app{ _app = app; //设置图片 self.imageView.image = [UIImage imageNamed:app.icon]; //设置名称 self.nameLabel.text = app.name; } }@end
xib修改UIView的类型为ZXHAppView真实类型
修改九宫格的实现代码:
//// ViewController.m// 九宫格#import "ViewController.h"#import "ZXHApp.h"#import "ZXHAppView.h"@interface ViewController ()/** 存放应用信息 */@property(nonatomic,strong) NSArray *apps;@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //添加应用信息 //总列数 int totalCount = 3; //应用尺寸 CGFloat appW = 85; CGFloat appH = 100; //间隙 = (控制器view宽度 - 3*应用宽度)/4; CGFloat marginX = (self.view.frame.size.width - totalCount * appW)/(totalCount+1); CGFloat marginY = 20; for(int i = 0;i<self.apps.count;i++){// //读取xib文件(会创建xib中的描述的所有对象,并且按照顺序放到数组中返回)// NSBundle *bundle = [NSBundle mainBundle];// NSArray *objs = [bundle loadNibNamed:@"ZXHAppView" owner:nil options:nil];// UIView *appView = [objs lastObject]; //创建view ZXHAppView *appView = [ZXHAppView appViewWithApp:self.apps[i]]; //添加到view [self.view addSubview:appView]; //设置frame int row = i / totalCount; int col = i % totalCount; CGFloat appX = marginX + col*( appW + marginX) ; CGFloat appY = 30 + row * ( appH + marginY); appView.frame = CGRectMake(appX, appY, appW, appH); // //获取数据// ZXHApp *app = self.apps[i];// //设置图片// //UIImageView *iconView = appView.subviews[0];// UIImageView *iconView = (UIImageView *)[appView viewWithTag:10];// iconView.image = [UIImage imageNamed:app.icon];// //设置文字// //UILabel *nameLabel = appView.subviews[1];// UILabel *nameLabel = (UILabel *)[appView viewWithTag:20];// nameLabel.text = app.name; } }- (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.}/** 实现懒加载初始化信息*/-(NSArray *)apps{ if (_apps == nil) { //获取plist全路径 NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil]; //加载数据 NSArray *appArray = [NSArray arrayWithContentsOfFile:path]; //将dictArray里面所有字段转换为模型对象,放到心的数组中 NSMutableArray *appMuArray = [NSMutableArray array]; for (NSDictionary *dict in appArray) { //创建模型对象 ZXHApp *app = [[ZXHApp alloc]initWithDict:dict]; //将模型添加到数组中 [appMuArray addObject:app]; } _apps = appMuArray; } return _apps;}@end
实现点解下载按钮,提示“下载成功”
/** * 下载app * * @param sender uibutton 这种实现方式存在问题:耦合性强,[self.superview addSubview:label]; label添加到父窗口中,万一xib的父窗口变了就要改代码,扩展性不好。 应该采用代理方式。 */- (IBAction)download:(UIButton *)btn { //让按钮实效(文字变为“已下载”) btn.enabled = NO; //获取屏幕宽度和高度 CGSize size = [[UIScreen mainScreen]applicationFrame ].size; CGFloat width = size.width; CGFloat hegiht = size.height; //显示下载成功的信息("成功下载xxx") UILabel *label = [[UILabel alloc] init]; label.text = [NSString stringWithFormat:@"成功下载%@",self.app.name]; label.font = [UIFont systemFontOfSize:13]; label.textAlignment = NSTextAlignmentCenter; label.textColor = [UIColor whiteColor]; label.backgroundColor = [UIColor blackColor]; label.frame = CGRectMake(0, 0, 150, 25); label.center = CGPointMake(width * 0.5, hegiht -50); label.alpha = 0.5; //label圆角 // 巧妙利用控件的尺寸和圆角半径,能产生一个圆 label.layer.cornerRadius = 5; // 超出主层边界的内容统统剪掉 //label.layer.masksToBounds = YES; label.clipsToBounds = YES; //添加label [self.superview addSubview:label]; // 动画显示 [UIView animateWithDuration:2 animations:^{ label.alpha = 0.5; //显示 }completion:^(BOOL finished){ [UIView animateWithDuration:2 animations:^{ label.alpha = 0; //不显示 }completion:^(BOOL finished){ [label removeFromSuperview]; //移除 }]; }];
完整项目源码:点击打开链接
---------------文章至此!!
- IOS基础UI之(六)综合小案例-应用管理
- IOS基础UI之(七)综合小案例-猜图
- IOS开发UI基础之综合应用
- 【iOS】UI基础Day3-笔记(UIButton、购物车综合案例)
- UI基础控件综合案例之XML布局编写
- UI基础控件综合案例之Java代码编写
- UI基础控件综合案例之案例介绍及案例分析
- Android基础综合案例(六)
- iOS学习之TableView和UIScrollView的综合小应用
- ios开发之UI基础--应用管理xib-九宫格布局
- iOS开发UI基础—10常用UI控件综合示例之QQ音乐
- springcloud入门之综合入门小案例
- ajax综合案例之用户管理系统
- UI基础-基础控件-0323-几个常用属性的应用-btn小案例
- UI基础-基础控件-0324-transform应用-使用transform实现btn小案例
- Android基础综合案例(七)《简易计算器UI界面设计》
- Android基础综合案例(九)Android UI设计
- Android基础综合案例(九)Android UI设计2
- Smarty标签变量来源
- Java三目运算符注意事项
- 存储过程 和 函数 区别
- Game of Life
- Eclipse无法检测到手机的解决方法
- IOS基础UI之(六)综合小案例-应用管理
- Invalid result location value/parameter 解决办法
- support design开发控件
- 【SQL】求两个日期值之间的工作天数
- 关于Android 性能优化的整理
- 实现lamp docker数据容器(mysql)与应用容器(apache+php)独立运行
- java中的集合
- wke升级vs2010,vs2013
- valgrind 检查内存泄漏