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

第三天笔记,今天听的有点晕,幸好公司年会,我们放3天假,所以慢慢复习吧

2016-01-16 00:13 453 查看
1、通过计算frame
的方式排列九宫格(九宫格算法)
 1>九宫格算法分析
-  1)每一列的x值一样,列号决定x值

-  2)每一行的y值一样,行号决定y值

-  结论:要想计算出某个”方框”的x和y,就要先获取某个”方框”所在的“列索引”和“行索引”

 
 2>通过修改 frame
实现九宫格排列
-  计算步骤:

-  1)确定每个app的宽和高

-  2)计算marginX,marginY,marginTop

-  3)计算每个app所在的行索引、列索引

-  4)根据当前app的行索引和列索引计算appX和appY

 

 
 
2、字典转模型
 1> 字典转模型的含义:

把字典中的数据使用模型来保存。新建一个类, 根据字典中键值对的个数, 来编写这个类中的属性, 将来用这个类的对象的属性来保存字典中每个键对应的值。
 
 2> 为什么要把字典转成模型?
 1)使用字典的坏处

一般情况下,设置数据和取出数据都使用“字符串类型的key”,编写这些key时,编译器不会有任何友善提示,需要手敲

dict[@"name"] = @"Tom ";

NSString *name =dict[@"name"];

手敲字符串key,key容易写错

Key如果写错了,编译器不会有任何警告和报错,造成设错数据或者取错数据

 

2)使用模型的好处

所谓模型,其实就是数据模型,专门用来存放数据的对象,用它来表示数据会更加专业,可以更方便的使用面向对象的3大特(封装、继承、多态)性进行扩展。
模型设置数据和取出数据都是通过它的属性,属性名如果写错了,编译器会马上报错,因此,保证了数据的正确性

使用模型访问属性时,编译器会提供一系列的提示,提高编码效率

app.name = @“Tom”;

NSString *name = app.name;

 
 

3>字典转模型思路分析

1)根据字典编写对应的模型类

2)   字典转模型的过程最好封装在模型内部

3)在模型类中分别编写一个根据字典创建模型的实例方法和类方法,并且实现。
- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)xxxWithDict:(NSDictionary *)dict;
 
4>id与 instancetype
分析
1)当返回是当前类型自己的对象的时候可以使用 instancetype,编译器会检测instancetype的真实类型,虽然id可以表示任何类型,但是编译器不会自动检测类型。
2)使用 instancetype 可以让类型更安全,id可以调用任何对象的set方法和get方法;
3)instancetype 只能用作方法的返回值, 不能像id一样用在参数类型上;
4)案例1:
        1. 编写两个类方法, 一个返回值是 id, 另一个返回值是 instancetype
        2. 然后同时用这个返回值去调用一个不存在的方法, 此时只有使用 instancetype 的方法会警告
 5)案例2:
        1. 当使用 id 作为返回值的时候,可以使用 NSString *来接收,不报错,也不警告。但是可能不对
        2. 当使用 instancetype 作为返回值的时候,不可以使用 NSString *来接收,警告。
 
 
 
 
 
3、Xib文件
1> 什么是xib? xib能做什么?
* 用来描述软件界面的文件。
* 如果没有xib, 所有的界面都需要通过代码来手动创建。
* 有了xib以后, 可以在xib中进行可视化开发, 然后加载xib文件的时候, 系统自动生成对应的代码来创建界面。
* 与xib类似的还有storyboard文件。
 
2> 查找xib在手机模拟器中的位置。安装到手机上后就变成了nib文件了。
/Users/Steve/Library/Developer/CoreSimulator/Devices/0C63A035-071E-4EFC-8718-C387A3F7E026/data/Containers
NSString *home = NSHomeDirectory();
NSLog(@"%@", home);
 
3>通过 xib
实现自定义 View
- 创建xib
- 通过代码加载 xib 文件
- 加载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:niloptions:nil];
 
备注:在开发阶段,面向开发者的是xib文件; 当把应用装到手机上时,xib文件就会转为nib文件
 
4> Xib和storyboard对比
- 共同点:
* 都用来描述软件界面
* 都用Interface Builder工具来编辑
 
- 不同点:
* Xib是轻量级的,用来描述局部的UI界面
* Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系
 
5> xib加载的过程分析
1) 根据路径, 搜索对应的xib文件(nib文件)
2) 加载xib文件的时候, 会按顺序加载xib文件中的每个控件。
3) 对于每个控件, 创建的时候都会查找对应的Class属性中配置的是那个类, 那么就创建对应的类的对象。
4) 创建好某个控件以后, 按照在xib中配置的属性的值, 依次为对象的属性赋值。
5) 创建该控件下的子控件, 并设置属性值。然后把该控件加到父控件中。
6) 最后返回一个数组, 这个数组中包含创建的根元素对象。
 
 
4、View的封装
如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部子控件的创建屏蔽起来,不让外界关心
外界可以传入对应的模型数据给view,view拿到模型数据后给内部的子控件设置对应的数据
 
封装自定义View代码
- 封装创建View 的代码
- 封装把模型赋值给 view 子控件的代码
案例步骤:
  第一步,创建一个自定义的HMAppView类,继承自UIView。

  第二步,让xib中的View和HMAppView类相关联。

  第三步,把xib中的控件在HMAppView类(.m文件)中拖线生成属性

  第四步,给HMAppView增加一个模型属性

  第五步,重写模型属性的set方法,给子控件赋值

 
5、设置 UILabel
的字体
* UILabel 的 font 属性
* 创建UIFont 对象
+ (UIFont *)systemFontOfSize:(CGFloat)fontSize;   系统默认字体
+ (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize;  粗体
+ (UIFont*)italicSystemFontOfSize:(CGFloat)fontSize; 斜体
* 创建指定字体的 UIFont对象
 
6、设置 UIView
为圆角
- 解释"圆角半径"的含义
 
- 设置四周圆角的半径
lblMsg.layer.cornerRadius = 5;
 
- 把多余的部分裁剪掉。
lblMsg.layer.masksToBounds = YES;
 
1>程序中代码:
设置Label的圆角效果
// 设置Label为圆角
// 设置四周圆角的半径
lblMsg.layer.cornerRadius = 5;
// 把多余的部分裁剪掉。
lblMsg.layer.masksToBounds = YES;
 
 
2>通过动画显示和隐藏Label
// 通过动画来显示Label, 通过动画来隐藏Label
[UIView animateWithDuration:0.8 animations:^{
   
    // 要执行的动画
    lblMsg.alpha =0.8;
   
} completion:^(BOOL finished) {
   
    // 动画执行完毕后, 要执行的代码
    //[lblMsgremoveFromSuperview];
    //UIViewAnimationOptionCurveLinear做匀速动画
    [UIViewanimateWithDuration:1.0 delay:1.5 options:UIViewAnimationOptionCurveLinearanimations:^{
       
        // 通过动画的方式让当前Label的透明度慢慢变成0
       lblMsg.alpha = 0;
       
    }completion:^(BOOL finished) {
       
        // 动画执行完毕以后删除该提示label
        [lblMsgremoveFromSuperview];
       
        // 设置当前被点击的按钮禁用
       sender.enabled = NO;
       
    }];
   
   
}];
 
 
7、UIButton的常见设置
- (void)setTitle:(NSString *)titleforState:(UIControlState)state;
设置按钮的文字
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
设置按钮的文字颜色
 
- (void)setImage:(UIImage *)imageforState:(UIControlState)state;
设置按钮内部的小图片
 
- (void)setBackgroundImage:(UIImage *)imageforState:(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;
获得按钮的背景图片
 
 
 
 
 
 
 
 
 
 
8、引入 MVC
概念
基本思想就是把数据、界面、控制器分开。
// M : Model, 负责获取数据
// V : View, 负责显示
// C : Controller, 负责编写各种逻辑代码, 创建Model和View, 并且把Model设置给View
// Models、 Views、 Controllers、 Others
 
 
 
9、
应用管理过程
1> 准备工作
    * 新建一个"Single ViewApplication"
    * 把图片素材、apps.plist文件拖到项目中
 
2> 懒加载数据
    * 通过懒加载的方式加载apps.plist中的数据到NSArray中
 
3> 根据apps中的数据,
创建相应的view并展示到屏幕上
    一、分析:
        * 思考: 在界面一加载完毕就能看到应用了, 所以要在viewDidLoad方法中创建应用
        * 分析每个一个应用中都包含了什么控件?(UIImageView、UILabel、UIButton)
        * 为了便于统一管理, 为每一个应用封装一个UIView, 然后在该UIView内部再放上面3个子控件
 
    二、创建UIView, 并添加到屏幕上
        * 一个一个创建UIView, 说明如何创建、添加UIView到界面上, 以及如何计算坐标
        ** 注意: 设置完毕frame以后才可以看到(假设每个UIView的width=75,height=90)
 
        * 保证每行的应用之间的间距相等, 所以要计算每行的应用之间的间距
        ** 注意: 间距 = (屏幕宽度 - (3 * 每个应用的宽度)) / 4
 
        * 为了让"应用"显示到状态栏下面, 所以设置一个y值, 假设为30
 
        * 至此, 计算出了第一个UIView的frame的值: appW = 75, appH =90, appX = 间距, appY = 30
        /** 九宫格计算坐标的讲解思路:
         1. 添加一个UIView
        
         2. 通过循环根据app的个数添加多个UIView, 但是会覆盖, 因为frame相同
        
         3. 计算第一个UIView的x和y, 引出marginTop、marginX
        
         4. 让后一个一个去分析每个UIView的x和y找规律
        
         5. 引入需要基础每个UIView所在的行的索引和列的索引
        
        
         */
 
    三、通过循环创建多个UIView加载到屏幕上。
        * 了解计算每个UIView坐标的方法
 
        * 计算每个UIView坐标的核心点:
        1> 计算出当前的UIView处于第几列、第几行
        2> 然后根据当前UIView所处的列与行, 然后计算出对应的x、y坐标。
 
        * 计算当前UIView所在的列索引: columnIndex = i %3
 
        * 计算当前UIView所在的行索引: rowIndex = i / 3
 
4> 在每个UIView中创建3个子元素: UIImageView、UILabel、UIButton
* UIImageView:
    CGFloat iconW =45;
    CGFloat iconH =45;
    CGFloat iconX =(appView.frame.size.width - iconW) * 0.5;
    CGFloat iconY =0;)
 
* UILabel:
    CGFloat titleW= appW;
    CGFloat titleH= 20;
    CGFloat titleX= 0;
    CGFloat titleY= iconY + iconH;
 
* UIButton
    CGFloatdownloadW = appW;
    CGFloatdownloadH = 20;
    CGFloatdownloadX = 0;
    CGFloatdownloadY = titleY + titleH;
    downloadBtn.frame= CGRectMake(downloadX, downloadY, downloadW, downloadH);
 
 
5> 向UIImageView、UILabel、UIButton中添加数据
 
6> 修改Label的字体、文字居中显示、按钮背景图片、设置按钮的字体大小。
* 了解按钮的内部结构
* 注意: 修改按钮的文字的时候还是通过setTitle:来修改, 不要直接通过titleLabel来修改文字。
* UIImageView设置图片居中:contentMode属性
 
 
7> 了解"文档注释"的含义。
 
 
 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ui基础 天天更新