• 问题总会出现,不过解决问题的方法也会出现!!!

UI控件03–基础控件示例01-引入MVC,字典

UI控件 小雨 553次浏览 已收录 0个评论

为什么用模型取代字典?

使用字典的坏处

一般情况下,设置数据和取出数据都使用“字符串类型的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;

instancetype

instancetype在类型表示上,跟id一样,可以表示任何对象类型
instancetype只能用在返回值类型上,不能像id一样用在参数类型上
instancetype比id多一个好处:编译器会检测instancetype的真实类型

字典转模型的过程

UI控件03--基础控件示例01-引入MVC,字典

Xib文件的使用

Xib文件可以用来描述某一块局部的UI界面

Xib文件的加载

方法1

NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@”CZAppView" owner:nil options:nil];

这个方法会创建xib中的所有对象,并且将对象按顺序放到objs数组中
(如果xib如右图所示,那么objs数组中依次会有3个对象:1个UIView、1个UIButton、1个UISwitch)

方法2

bundle参数可以为nil,默认就是main bundle

UINib *nib = [UINib nibWithNibName:@”CZAppView" bundle:[NSBundle mainBundle]];
NSArray *objs = [nib instantiateWithOwner:nil options:nil];

在开发阶段,面向开发者的是xib文件; 当把应用装到手机上时,xib文件就会转为nib文件

随意调整xib中view的尺寸

要想随意调整xib中view的尺寸,首先要设置size为Freeform

UI控件03--基础控件示例01-引入MVC,字典

Xib和storyboard对比

共同点:

都用来描述软件界面
都用Interface Builder工具来编辑

不同点:

Xib是轻量级的,用来描述局部的UI界面
Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系

xib文件的加载过程

1. 根据路径, 搜索对应的xib文件(nib文件)
2. 加载xib文件的时候, 会按顺序加载xib文件中的每个控件。
3. 对于每个控件, 创建的时候都会查找对应的Class属性中配置的是那个类, 那么就创建对应的类的对象。
4. 创建好某个控件以后, 按照在xib中配置的属性的值, 依次为对象的属性赋值。
5. 创建该控件下的子控件, 并设置属性值。然后把该控件加到父控件中。
6. 最后返回一个数组, 这个数组中包含创建的根元素对象。

xib 方式代替纯代码方式解决局部布局:

主要解决界面显示问题, 使用的时候要跟创建的类进行关联

xib 主要针对的是局部界面

如果一个类文件和xib文件进行关联, 那么他的初始化方法会走

- (void)awakeFromNib {
[super awakeFromNib];
}

xib: 只是用来描述 UI界面 (节省了代码量)
xib 可以拖放多个控件
实例化的时候, 是按照拖放顺序进行实例化

加载方式:

NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"YellowView" owner:nil options:nil];

xib 和 storyboard 的区别

sb: 属于重量级, 用来描述整个控制器, 界面之间的跳转

xib: 轻量级, 用来描述局部界面的

在使用xib 和 storyboard 的时候:
大大的节省代码量

xib 在项目打包后会变成nib文件:

UI控件03--基础控件示例01-引入MVC,字典

view的封装

如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部子控件的创建屏蔽起来,不让外界关心
外界可以传入对应的模型数据给view,view拿到模型数据后给内部的子控件设置对应的数据

UILabel的常见设置

@property(nonatomic,copy) NSString *text;
显示的文字
@property(nonatomic,retain) UIFont *font;
字体
@property(nonatomic,retain) UIColor *textColor;
文字颜色
@property(nonatomic) NSTextAlignment textAlignment;
对齐模式(比如左对齐、居中对齐、右对齐)

UIFont

UIFont代表字体,常见创建方法有以下几个:

+ (UIFont *)systemFontOfSize:(CGFloat)fontSize; //系统默认字体
+ (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize; //粗体
+ (UIFont *)italicSystemFontOfSize:(CGFloat)fontSize; //斜体

UIButton的常见设置

- (void)setTitle:(NSString *)title forState:(UIControlState)state;
设置按钮的文字
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
设置按钮的文字颜色
- (void)setImage:(UIImage *)image forState:(UIControlState)state;
设置按钮内部的小图片
- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;
设置按钮的背景图片
设置按钮的文字字体(需要拿到按钮内部的label来设置)
btn.titleLabel.font = [UIFont systemFontOfSize:13];
注意: 最好不要通过btn.titleLabel.text来设置按钮文字, 而是通过setTitle:方法来设置按钮文字, 因为按钮文字分不同状态。

- (NSString *)titleForState:(UIControlState)state;
获得按钮的文字
- (UIColor *)titleColorForState:(UIControlState)state;
获得按钮的文字颜色
- (UIImage *)imageForState:(UIControlState)state;
获得按钮内部的小图片
- (UIImage *)backgroundImageForState:(UIControlState)state;
获得按钮的背景图片

资源拖拽选项:

copy items if needed

拷贝资源文件到项目目录中, 如果不勾选, 资源文件依然在原始路径中UI控件03--基础控件示例01-引入MVC,字典

create groups

如果资源文件中有目录结构 image/icons/a.png , 打包安装之后目录结构不存在a.pngUI控件03--基础控件示例01-引入MVC,字典

create folder references

保留资源文件中 目录结构UI控件03--基础控件示例01-引入MVC,字典

add to targets:

如果不勾选, 可以在项目目录中看到, 但是打包安装之后, 资源文件不存在安装目录中UI控件03--基础控件示例01-引入MVC,字典

九宫格应用视图管理

代码方式
逻辑实现步骤:
1. 添加12个 yellowView
列索引: i % column (没一行的总列数)
行索引: i / column

x = (列索引 + 1) * margin + 列索引 * kYellowWidht;
y = (行索引 + 1) * margin + 行索引 * kYellowHeight;

2. 在循环添加的时候, 对内部子控件进行布局

#####################################################
自定义view的实现方式:
1. 创建一个类 HMYellowView, 继承自UIView
HMYellowView 对内部的子控件进行布局

2. 在控制器的view中, 添加 VQYellowView

3. 对VQYellowView 内部的子控件进行赋值
为 VQYellowView 设置一个 appModel 属性
在内部 重写 setAppModel: 方法

#####################################################

把三个子控件, 放到一个yellowView中, 那么控制器就可以单独的对yellowView进行布局, yellowView去管理三个子控件的布局

每一行的 y 值是相当的只需要考虑x 值

x = (i + 1) * margin + i * kYellowWidht;
y = (j + 1) * margin + j * kYellowHeight;

// 想要获得哪个对象的最大的y值, 就把这个对象的frame 传递进去

CGFloat buttonY = CGRectGetMaxY(nameLabel.frame);

MVC模型

M : Model 数据模型, 用来描述和处理数据
V : View 显示界面的, 只是用来显示的
C : Controller 管理view的生命周期, 处理用户交互

自定义一个view:

1. 创建一个类, 继承自 UIView

2. 对内部的子控件进行设置
入口方法:
取决于外部在实例化自定义view的时候, 所调用的实例化方法
initWithFrame: — > 重写
init –> 重写

如果有特殊需要的实例化方法, 就需要在头文件中声明, 然后在.m 文件中进行实现

3. 对内部子控件进行赋值
对内部子控件进行赋值的时候, 需要考虑到使用的数据
对yellowView 进行赋值的时候, 它所需要的数据, 都在 appModel 中存储着

定义一个 VQAppModel类型的属性, 外部进行赋值

@property (nonatomic, strong) VQAppModel *appModel;

在yellowView内部需要: 重写 appModel的 set方法

重写set方法
1. 先对属性进行赋值
_appModel = appModel;

2. 再对内部的子控件进行赋值

点击按钮显示遮罩view:

1. 点击按钮在控制器的view上, 添加一个遮罩view
superView

2. 设置coverView的透明度, 默认为0
alpha 0(完全透明) 1 (完全不透明)

3. 修改透明度实现 动画


本博客内容既有转载自网络的内容,也有本作者原创内容,仅供学习与交流之用
如有侵权或者错误之处,请及时在下方留言!
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址