UI之03应用管理
2016-03-07 本文已影响126人
高俊
展示效果图
Snip20160307_1.png
**学习的知识点: **
1.纯代码方式实现九宫格
- 一个格子一个格子添加
- 使用for循环添加
2.字典转模型
- 什么是模型
- 好处分析
- 将字典转换为模型
- 模型提供字典转模型的构造方法
3.使用xib文件
- 用来描述九宫格
- 用来描述中间的提示信息
4.封装
- 纯代码的封装
- xib的封装
1. 分析:
- 上面的图标展示的为九宫格样式
- 上面的每一个图标里面都包含UIImage\Lable\Button
以上的几个特点:
- 九宫格: 我们可以利用整个屏幕的宽度减去三个应用的宽度减去两边的宽度就等于三个应用之间的宽度
- 每一个图标包含三个控件, 这里面我们就牵扯到我们的一个新的知识点xib文件
而我们的这个知识点,就是利用应用管理这个软件来介绍的
2. 具体分析(知识点解答):
1. 什么是Xib文件?
我们之前学的storyboard是描述软件界面的，重量级的，一般整一个软件的所有界面
我们的xib同样地用来描述我们的软件界面的，轻量级的，一般用来描述局部界面
我们一般是选用这个empty界面
- 然后我们应该在这个界面中创建一个
UIView - 尺寸我们选择的是freedom（自由调整大小）
- 我们这个xib是面向我们开发者，而面向我们的用户是Nib，这就是为什么我们上面说了xib却使用我们的Nib名了
Snip20160307_2.png
我们一旦增加了, 这个文件之后, 我们还要在这个里面增加一个UIView
Snip20160307_3.png
2. Xib文件的设计:
Snip20160307_4.png
这个就是我们设计的Xib文件
注意:类似于我们的storyboard我们也需要给我们的这个Xib文件(命名为AppView)设置一个控制器:
Snip20160307_6.png
当然, 我们在增加这个控制器之后, 我们需要在这个位置, 写上, 我们
AppView的控制器:
Snip20160307_7.png
这个之后, 就是连线
3. plist文件的导入
-
这个plist文件, 里面装的是我们应用的信息
虽然, 在这里的, 应用信息比较少, 但是, 以后我们在写程序的时候, 程序的数据量, 会变得很大. 所以, 在这里 , 我们就直接使用plist文件 -
plist文件的导入, 需要我们再增加一个类 , 用于存放我们的数据
Snip20160307_8.png
4. 知识点:
关于, 我们的手机屏幕, 他的坐标是这样的:
Snip20160307_10.png
所以我们的应用坐标计算方法是:
// 0.总列数(一行最多3列)
int totalColumns = 3;
// 1.应用的尺寸
CGFloat appW = 85;
CGFloat appH = 90;
// 2.间隙 = (控制器view的宽度 - 3 * 应用宽度) / 4
CGFloat marginX = (self.view.frame.size.width - totalColumns * appW) / (totalColumns + 1);
CGFloat marginY = 15;
3. 代码:
**storyboard控制器.m文件中的代码: **
#import "MJViewController.h"
#import "MJApp.h"
#import "MJAppView.h"
@interface MJViewController ()
/** 存放应用信息 */
@property (nonatomic, strong) NSArray *apps;
@end
@implementation MJViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加应用信息
// 0.总列数(一行最多3列)
int totalColumns = 3;
// 1.应用的尺寸
CGFloat appW = 85;
CGFloat appH = 90;
// 2.间隙 = (控制器view的宽度 - 3 * 应用宽度) / 4
CGFloat marginX = (self.view.frame.size.width - totalColumns * appW) / (totalColumns + 1);
CGFloat marginY = 15;
// 3.根据应用个数创建对应的框框(index 0 ~ 11)
for (int index = 0; index<self.apps.count; index++) {
// 3.1.创建view
MJAppView *appView = [MJAppView appViewWithApp:self.apps[index]];
// 3.2.添加view
[self.view addSubview:appView];
// 3.3.设置frame
int row = index / totalColumns;
int col = index % totalColumns;
// 计算x和y
CGFloat appX = marginX + col * (appW + marginX);
CGFloat appY = 30 + row * (appH + marginY);
appView.frame = CGRectMake(appX, appY, appW, appH);
}
}
- (NSArray *)apps
{
if (_apps == nil) {
// 初始化
// 1.获得plist的全路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
// 2.加载数组
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
// 3.将dictArray里面的所有字典转成模型对象,放到新的数组中
NSMutableArray *appArray = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
// 3.1.创建模型对象
MJApp *app = [MJApp appWithDict:dict];
// 3.2.添加模型对象到数组中
[appArray addObject:app];
}
// 4.赋值
_apps = appArray;
}
return _apps;
}
@end
**我们plist文件专用的模型类中的代码: **
**.h文件中的代码: **
#import <Foundation/Foundation.h>
/**
copy : NSString
strong: 一般对象
weak: UI控件
assign:基本数据类型
*/
@interface MJApp : NSObject
/**
* 名称
*/
@property (nonatomic, copy) NSString *name;
/**
* 图标
*/
@property (nonatomic, copy) NSString *icon;
/**
* 通过字典来初始化模型对象
*
* @param dict 字典对象
*
* @return 已经初始化完毕的模型对象
*/
- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)appWithDict:(NSDictionary *)dict;
@end
**.m文件中的代码: **
#import "MJApp.h"
@implementation MJApp
- (instancetype)initWithDict:(NSDictionary *)dict
{
if (self = [super init]) {
self.name = dict[@"name"];
self.icon = dict[@"icon"];
}
return self;
}
+ (instancetype)appWithDict:(NSDictionary *)dict
{
return [[self alloc] initWithDict:dict];
}
@end
AppView控制器的.h代码
#import <UIKit/UIKit.h>
@class MJApp;
@interface MJAppView : UIView
/**
* 模型数据
*/
@property (nonatomic, strong) MJApp *app;
+ (instancetype)appView;
/**
* 通过模型数据来创建一个view
*/
+ (instancetype)appViewWithApp:(MJApp *)app;
@end
.m文件
#import "MJAppView.h"
#import "MJApp.h"
@interface MJAppView()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@end
@implementation MJAppView
+ (instancetype)appViewWithApp:(MJApp *)app
{
NSBundle *bundle = [NSBundle mainBundle];
// 读取xib文件(会创建xib中的描述的所有对象,并且按顺序放到数组中返回)
NSArray *objs = [bundle loadNibNamed:@"MJAppView" owner:nil options:nil];
MJAppView *appView = [objs lastObject];
appView.app = app;
return appView;
}
+ (instancetype)appView
{
return [self appViewWithApp:nil];
}
- (void)setApp:(MJApp *)app
{
_app = app;
// 1.设置图标
self.iconView.image = [UIImage imageNamed:app.icon];
// 2.设置名称
self.nameLabel.text = app.name;
}
@end
作者说:
由于本人在学应用管理的时候, 笔记全部写在代码里面了, 不幸的是我自己写的代码不知道怎么就没有了, 所以这个笔记有点粗糙, 这个仅是凭借本人的记忆和李老师的代码写的, 所以, 抱歉啦!!!
下一个是内容是利用超级猜图这个程序来介绍新的知识点, 和回顾这次学的. 敬请期待.
