您的位置:首页 > 产品设计 > UI/UE

UI部分 — 5

2018-01-21 14:59 676 查看
- xib与storyboard的区别

(1)共同点:1都用来描述软件界面

2
都用Interface Builder工具来编辑

3
本质都是转换成代码去创建控件

(2)不同点:1
Xib是轻量级的,用来描述局部的UI界面

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

- xib的基本使用

(1)xib的加载

//方式一

NSArray *views
= [[NSBundlemainBundle]loadNibNamed:@"xibname"owner:niloptions:nil];

UIView *view
= [[[NSBundlemainBundle]loadNibNamed:@"xibname"owner:niloptions:nil]firstObject];

//方式二

UINib *nib
= [UINib
nibWithNibName:@"xibname"
bundle:nil]

NSArray *views = [nib instantiateWithOwner:nil
options:nil];

UIView
= [UINib
nibWithNibName:@"xibname"
bundle:nil];

[self.viewaddSubview:view];

(2)xib的使用

注意事项: 1如果一个view从xib中加载,就不能用init和initWithFrame:方法创建

2如果一个xib经常被使用,应该提供快速构造类方法

3 如果一个view从xib中加载,想用代码添加一些子控件,得在initWithCoder:和 awakeFromNib 创建

4 如果一个view从xib中加载,会调用initWithCoder:和awakeFromNib,不会调用init和initWithFrame:方法

//关联XYProView类

//XYProView.h

#import <UIKit/UIKit.h>

@interface XYProView:UIView

//提供set方法

- (void)setIcon: (NSString *)icon;

- (void)setName: (NSString *)name;

//提供快速创建方法

+ (instancetype)proView;

@end

//XYProView.m

#import "XYProView.h"

@interfaceXYProView ()

//在xib中创建(连线)

@property (weak,nonatomic)IBOutletUIImageView *iconView;

@property (weak,nonatomic)IBOutletUILabel *titleLabel;

//注释代码为创建一个label子控件(用代码创建)

//@property (nonatomic, weak) UILabel *label;

//毛玻璃

@property (nonatomic,weak)UIToolbar *toolBar;

@end

@implementation XYProView

/*如果View从xib中加载,就不会调用init和initWithFrame:方法

View从xib中加载时,会调用initWithCoder:方法

注意:如果子控件是从xib中创建,是处于未唤醒状态
*/

- (instancetype)initWithCoder:(NSCoder *)aDecoder{

self = [superinitWithCoder:aDecoder])
{

//创建子控件

/*

UILabel *label = [[UILabel alloc] init];

label.backgroundColor = [UIColor grayColor];

label.text = @“text”;

[self addSubview:label];

self.label = label;

*/

}

returnself;

}

//布局子控件

- (void)layoutSubviews{

[superlayoutSubviews];

//self.label.frame = self.bounds;

self.toolBar.frame =self.iconView.bounds;

}

//从xib中唤醒,添加xib中创建的子控件的子控件

- (void)awakeFromNib{

//往imageView上加毛玻璃

UIToolbar *toolBar
= [[UIToolbaralloc]init];

[self.iconViewaddSubview:toolBar];

self.toolBar =
toolBar;

}

//快速构造方法

+ (instancetype)proView{

return [[[NSBundlemainBundle]loadNibNamed:@"XYproView"owner:niloptions:nil]firstObject];

}

//设置数据

- (void)setIcon:(NSString *)icon{

self.iconView.image =
[UIImageimageNamed:icon];

}

- (void)setName:(NSString *)name{

self.titleLabel.text =
name;

}

@end

//使用xib

XYProView *proView = [XYProViewshopView];

proView.frame =CGRectMake(100,100,80,100);

//给子控件设置属性

[proView setName:@“name”];

[proView setIcon:@“icon”];

[self.viewaddSubview:proView];

- xib的加载原理

(1)xib的加载原理(伪代码)

- (UIView *)loadFormNib{

XYproView *proView
= [[XYProViewalloc]initWithCoder:nil];

proView.frame =CGRectMake(0,0,80,100);

UIImageView *iconView
= [[UIImageViewalloc]initWithCoder:nil];

iconView.backgroundColor =
[UIColorgreenColor];

iconView.frame =CGRectMake(0,0,80,80);

iconView.tag =100;

[proViewaddSubview:iconView];

self.iconView =
iconView;

UILabel *label
= [[UILabelalloc]initWithCoder:nil];

label.backgroundColor =
[UIColororangeColor];

label.tag =200;

[proViewaddSubview:label];

self.titleLabel =
label;

return proView;

}

- 渐变动画

(1)平移

方式一:

//点击按钮开始动画

- (IBAction)translate
{

//开始动画

[UIViewbeginAnimations:nilcontext:nil];

[UIViewsetAnimationDuration:1.0];

//动画代码

CGRect frame =self.animationView.frame;

frame.origin.y -=50;

self.animationView.frame =
frame;

//提交动画

[UIViewcommitAnimations];

}

方式二(三种方法):

- (IBAction)translate {

1 //动画代码

[UIViewanimateWithDuration:2.0animations:^{

CGRect frame =self.animationView.frame;

frame.origin.y -=50;

self.animationView.frame =
frame;

}];

2 //动画代码

[UIViewanimateWithDuration:1.0animations:^{

CGRect frame =self.animationView.frame;

frame.origin.y -=50;

self.animationView.frame =
frame;

} completion:^(BOOL finished)
{

//动画完成后做什么事情

self.animationView.backgroundColor =
[UIColorblackColor];

}];

3 //动画代码

[UIViewanimateWithDuration:1.0delay:1.0options:UIViewAnimationOptionCurveEaseInOutanimations:^{

/*

UIViewAnimationOptionCurveEaseInOut 动画开始/结束比较缓慢,中间相对较快

UIViewAnimationOptionCurveEaseIn 动画开始延时

UIViewAnimationOptionCurveEaseOut 动画完成后延时

UIViewAnimationOptionCurveLinear 匀速

*/

CGRect frame =self.animationView.frame;

frame.origin.y +=50;

self.animationView.frame =
frame;

} completion:^(BOOL finished)
{

//动画完成后做什么事情

self.animationView.backgroundColor =
[UIColorgreenColor];

}];

}

(2)缩放

- (IBAction)scale {

[UIViewanimateWithDuration:1.0delay:1.0options:UIViewAnimationOptionCurveEaseInanimations:^{

CGRect frame =self.animationView.frame;

frame.size =CGSizeMake(10,15);

self.animationView.frame =
frame;

} completion:^(BOOL finished)
{

//动画完成

}];

}

(3)透明度动画(嵌套)

- (IBAction)alpha
{

[UIViewanimateWithDuration:1.0delay:0.5options:UIViewAnimationOptionCurveEaseOutanimations:^{

self.animationView.alpha -=0.9;

} completion:^(BOOL finished)
{

[UIViewanimateWithDuration:2.0animations:^{

self.animationView.alpha +=0.9;

}];

}];

}

- 调整UIButton内部子控件的位置

(1)方式一:重写两个方法

//重写两个方法:不要调用super,就是要重写掉

//contentRect: 内容的尺寸,内容包括(imageView和label)

- (CGRect)titleRectForContentRect:(CGRect)contentRect{

returnCGRectMake(0,0,100,70);

}

- (CGRect)imageRectForContentRect:(CGRect)contentRect{

returnCGRectMake(100,0,70,70);

}

(2)方式二:重写layoutSubviews方法

- (void)layoutSubviews{

[superlayoutSubviews];

//设置子控件的位置

self.titleLabel.frame =CGRectMake(0,0,100,70);

self.imageView.frame =CGRectMake(100,0,70,70);

}

(3)调整子控件

- (instancetype)initWithFrame:(CGRect)frame{

if (self =
[superinitWithFrame:frame])
{

//文本居中

self.titleLabel.textAlignment = NSTextAlignmentCenter;

//改变图片的内容模式

self.imageView.contentMode = UIViewContentModeCenter;

}

returnself;

}

- 调整UIButton内边距

(1)设置整体内边距

self.button.contentEdgeInsets =UIEdgeInsetsMake(-20,0,0,0);

(2)设置图片内边距

self.button.imageEdgeInsets =UIEdgeInsetsMake(0,0,0,0);

(3)设置标题内边距

self.button.titleEdgeInsets = UIEdgeInsetsMake(0,0,0,
-10);

- UIButton图片拉伸

(1)方式一:

//默认为平铺

UIImage *resizableImage = [imageresizableImageWithCapInsets:UIEdgeInsetsMake(imageHeight
*0.5, imageWidth * 0.5, imageHeight
* 0.5 -1, imageWidth *0.5 -1)];

//UIImageResizingModeTile, 平铺

//UIImageResizingModeStretch,拉伸(伸缩)

UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(imageHeight *0.5,
imageWidth *0.5, imageHeight * 0.5 -1,
imageWidth *0.5 -1) resizingMode:UIImageResizingModeTile];

(2)方式二:

//stretchableImageWithLeftCapWidth 图片宽度 - 左边受保护区域-
1

//topCapHeight图片高度 - 上方受保护区域-
1

UIImage *resizableImage = [image stretchableImageWithLeftCapWidth:imageWidth *0.5topCapHeight:imageHeight
*0.5];

(3)一般我们将拉伸方法写在UIImage的分类中

#import "UIImage+XMGExtention.h"

@implementation UIImage (XMGExtention)

+ (instancetype)resizableImageWithLocalImageName:(NSString *)localImageName{

//创建图片对象

UIImage *image
= [UIImageimageNamed:localImageName];

//获取图片的尺寸

CGFloat imageWidth
= image.size.width;

CGFloat imageHeiht
= image.size.height;

//返回一张拉伸且受保护的图片

return [imagestretchableImageWithLeftCapWidth:imageWidth
*0.5topCapHeight:imageHeiht *0.5 ];

}

@end

- KVC

(1)KVC:Key Value Coding,即键值编码

(2)使用KVC进行赋值

[person setValue:@"王五"forKey:@"name"];

//forKeyPath可以进行自动类型转换

[person setValue:@"19"forKeyPath:@"money"];

[person.dogsetValue:@"阿黄"forKey:@"name"];

[person setValue:@"旺财"forKeyPath:@"dog.name"];

//KVC可以修改类的私有成员变量(_age可以改为age)

[person setValue:@"88"forKeyPath:@"_age"]
;

forKey和forKeyPath的区别:

1 forKeyPath包含了所有 forKey的功能

2 forKeyPath进行内部的点语法,层层访问内部的属性

3注意:
key值一定要在属性中找到

(3)利用KVC取值

XMGPerson *person = [[XMGPersonalloc]init];

person.name = @“name”;

person.money =12332;

NSLog(@"%@ --- %.2f",
[personvalueForKeyPath:@"name"],
[[personvalueForKey:@"money"]floatValue]);

(4)字典转模型

开发中不建议使用setValuesForKeysWithDictionary:

1字典中的key必须在模型的属性中找到,否则会报错

2 如果模型中带有模型,setValuesForKeysWithDictionary无法使用

应用场景:简单的字典转模型

- (instancetype)initWithDict:(NSDictionary *)dict{

if (self =
[superinit])
{

//self.name = dict[@"name"];

//self.money = [dict[@"money"] floatValue];

[selfsetValuesForKeysWithDictionary:dict];

}

returnself;

}

(5)模型转字典

NSDictionary *dict
= [persondictionaryWithValuesForKeys:@[@"name",@"money"]];

(6)取出数组中所有模型的某个属性值

XYPerson *person1 = [[XYPersonalloc]init];

person1.name =@“name1”;

person1.money =22.99;

XYPerson *person2 = [[XYPersonalloc]init];

person2.name =@“name2”;

person2.money =122.99;

NSArray *allPersons =@[person1,
person2];

NSArray *allPersonName =
[allPersonsvalueForKeyPath:@"name"];

- KVO

(1)KVO: Key Value Observing键值监听,当某个对象的属性值发生改变的时候,用KVO监听

(2)XYPerson *person
= [[XYPersonalloc]init];

person.name =@“aaa”;

/*

作用:给对象绑定一个监听器(观察者)

- Observer观察者

- KeyPath要监听的属性

- options选项(方法方法中拿到属性值)

*/

[personaddObserver:selfforKeyPath:@"name"options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOldcontext:nil];

person.name =@“bbb”;

//移除监听

[personremoveObserver:selfforKeyPath:@"name"];

/*

当监听的属性值发生改变

keyPath要改变的属性

object 要改变的属性所属的对象

change 改变的内容

context上下文

*/

- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(id)object change:(NSDictionary<NSString*,id>
*)change context:(void *)context{

NSLog(@“%@,
%@,%@“, keyPath,
object, change); //改变的属性,所属对象,改变后的值

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Objective-C OC