IOS 开发学习笔记-基础 UI（10）九宫格布局，块动画，字典转模型，Xib使用

大概如下图示：九个应用图标的样子

功能分析

(1)以九宫格的形式展示应用信息

(2)点击下载按钮后，做出相应的操作

步骤分析

(1)加载应用信息

(2)根据应用的个数创建对应的view

(3)监听下载按钮点击

思路整理

要在支持文件夹里，放入 plist 文件，且拖拽素材到 supporting files，注意勾选的项目的区别：

大多数情况，往项目中拖拽素材时，通常选择 Destination， Folders:选择第一项：创建组，这样 xcode 导航显式的是黄色文件夹，要知道，Xcode中资源素材是分文件夹存放的，但是在Bundle中所有素材所在，都在同一个文件夹下，这样勾选的开发效率很高，但是，不能出现文件重名的情况，会让美工不舒服。特点：可以直接使用[NSBundle mainBundle]作为资源路径，效率高！可以使用[UIImage imageNamed:]加载图像

如果选择第二项， 创建文件家的引用：xcode显得是蓝色文件夹，此时资源在Xcode中分文件夹，在Bundle中也分文件夹，因此，可以出现文件重名的情况，特点：需要在[NSBundle mainBundle]的基础上拼接实际的路径，效率较差！不能使用[UIImage imageNamed:]加载图像

app加载流程

1> app 从mainBundle中加载Plist

2> 按照plist中的数据数量先确定各个View的大小和位置

3> 不过，类似这样的很多图标，控件很多的 UI 设计，建议不使用故事板，而是使用代码创建，否则后期维护也麻烦。

九宫格布局的计算方法

方法很多，不必死记硬背，要理解，不伦做什么，都是思想为主。九宫格的关键是要能够顺利计算出每一个小格子准确的坐标，建议：

1>  先创建若干小的视图

2>  找到自己理解比较容易的计算方法

3>  编写循环创建九宫格布局

要求：能够公用的常量尽量给抽取出来，以便增加九宫格布局的灵活性，尽量保证做到：根据要显示的数据自动调整小格子的位置和数量，一旦调整了要显示的列数，仅需要修改少量的数值即可做到

 1 #import "ViewController.h"
 2
 3 @interface ViewController()
 4 @property (nonatomic, strong) NSArray *appList;
 5 @end
 6
 7 @implementation ViewController
 8
 9 - (NSArray *)appList
10 {
11     if (!_appList) {
12         // 1. 从mainBundle加载
13         NSBundle *bundle = [NSBundle mainBundle];
14         NSString *path = [bundle pathForResource:@"app.plist" ofType:nil];
15         _appList = [NSArray arrayWithContentsOfFile:path];
16
17         NSLog(@"%@", _appList);
18     }
19     return _appList;
20 }
21
22 - (void)viewDidLoad
23 {
24     [super viewDidLoad];
25     // 九宫格总共有3列
26     int totalCol = 3;
27     //每一个格子的宽度
28     CGFloat viewW = 80;
29     //每一个格子的高度
30     CGFloat viewH = 90;
31     //横向间距的设定，把整个屏幕视图的宽度减去三个格子的宽度，剩下的宽度平均分为四份
32     CGFloat marginX = (self.view.bounds.size.width - totalCol * viewW) / (totalCol + 1);
33     //纵向间距的设定
34     CGFloat marginY = 10;
35     //第一行方格的纵向坐标的开始位置
36     CGFloat startY = 20;
37     //self.appList.count一共需要绘制的方格的总数
38     for (int i = 0; i < self.appList.count; i++) {
39         // 行数 = 3
40         // i = 0, 1, 2  / 3 = 0
41         // i = 3, 4, 5  / 3 = 1
42         int row = i / totalCol;
43         // 列数 = 3
44         // i = 0, 3, 6 % col 0
45         // i = 1, 4, 7 % col 1
46         // i = 2, 5, 8 % col 2
47         int col = i % totalCol;
48         //设置方格的绝对坐标
49         CGFloat x = marginX + (viewW + marginX) * col;
50         CGFloat y = startY + marginY + (viewH + marginY) * row;
51         //绘制方格
52         UIView *appView = [[UIView alloc] initWithFrame:CGRectMake(x, y, viewW, viewH)];
53         //把视图控件添加到 appView
54         [self.view addSubview:appView];
55
56         // 创建appView内部的细节
57         //读取数组中的字典
58         NSDictionary *dict = self.appList[i];
59
60         // UIImageView
61         UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, viewW, 50)];
62         imageView.image = [UIImage imageNamed:dict[@"icon"]];
63         // 按照比例显示图像
64         imageView.contentMode = UIViewContentModeScaleAspectFit;
65
66         [appView addSubview:imageView];
67
68         //UILabel
69         UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, imageView.bounds.size.height, viewW, 20)];
70         // 设置文字
71         label.text = dict[@"name"];
72         label.font = [UIFont systemFontOfSize:12.0];
73         label.textAlignment = NSTextAlignmentCenter;
74
75         [appView addSubview:label];
76
77         // UIButton
78         // UIButtonTypeCustom和[[UIButton alloc] init]是等价的
79         UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
80         button.frame = CGRectMake(15, 70, viewW - 30, 20);
81
82         [button setTitle:@"下载" forState:UIControlStateNormal];
83         // 不能使用如下代码直接设置title
84         // button.titleLabel.text = @"下载";
85         // @property中readonly表示不允许修改对象的指针地址，但是可以修改对象的属性
86         button.titleLabel.font= [UIFont systemFontOfSize:14.0];
87
88         [button setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
89         [button setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
90
91         [appView addSubview:button];
92
93     }
94 }

关于UIButton的一些补充

按钮的类型，在iOS的控件中，只有UIButton提供了类方法，可以在实例化按钮时指定按钮的不同类型。

UIButtonTypeCustom和[[UIButton alloc] init]是等价的

修改按钮字体

在UIButton中定义有两个readonly的属性：

1> titleLabel

2> imageView

@property中readonly表示不允许修改这两个属性的指针地址，但是可以修改其属性

注意：由于按钮的字体大小是所有状态共用的，因此可以通过

button.titleLabel.font= [UIFont systemFontOfSize:14.0];

修改按钮标签文本的字体大小，但是不能使用以下代码设置按钮标签的文本内容

button.titleLabel.text = @"下载";

因为按钮标签的文本内容是跟按钮的状态向关的

首尾式动画

如果只是修改控件的属性，使用首尾式动画还是比较方便的，但是如果需要在动画完成后做后续处理，就不是那么方便了

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:1.0];

// 修改属性的动画代码

// ......

[UIView commitAnimations];

块动画

块动画相对来说比较灵活，尤为重要的是能够将动画相关的代码编写在一起，便于代码的阅读和理解

[UIView animateWithDuration:2.0 animations:^{

    // 修改控件属性动画

    label.alpha = 0.0;

} completion:^(BOOL finished) {

    // 删除控件

    [label removeFromSuperview];

}];

字典转模型的好处：

1> 降低代码的耦合度

2> 所有字典转模型部分的代码统一集中在一处处理，降低代码出错的几率

3> 在程序中直接使用模型的属性操作，提高编码效率

模型应该提供一个可以传入字典参数的构造方法

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

+ (instancetype)xxxWithDict:(NSDictionary *)dict;

instancetype & id

1> instancetype在类型表示上，跟id一样，可以表示任何对象类型

2> instancetype只能用在返回值类型上，不能像id一样用在参数类型上

3> instancetype比id多一个好处：编译器会检测instancetype的真实类型

在模型中添加readonly属性

// 定义属性时，会生成getter&setter方法，还会生成一个带下划线的成员变量

// 而如果是readonly属性，则只会生成getter方法，同时没有成员变量

@property (nonatomic, strong, readonly) UIImage *image;

@interface AppInfo()
{
    UIImage *_imageABC;
}
- (UIImage *)image
{
    if (!_imageABC) {
        _imageABC = [UIImage imageNamed:self.icon];
    }

    return _imageABC;
}

在模型中合理地使用只读属性，可以进一步降低代码的耦合度。使用数据模型的好处：调用方不用关心模型内部的任何处理细节！

  1 #import "ViewController.h"
  2 #import "AppInfo.h"
  3
  4 @interface ViewController ()
  5 @property (nonatomic, strong) NSArray *appList;
  6 @end
  7
  8 @implementation ViewController
  9 // 字典转模型
 10 - (NSArray *)appList
 11 {
 12     if (!_appList) {
 13         // 1. 从mainBundle加载
 14         NSBundle *bundle = [NSBundle mainBundle];
 15         NSString *path = [bundle pathForResource:@"app.plist" ofType:nil];
 16         //_appList = [NSArray arrayWithContentsOfFile:path];
 17
 18         NSArray *array = [NSArray arrayWithContentsOfFile:path];
 19         // 将数组转换成模型，意味着self.appList中存储的是AppInfo对象
 20         // 1. 遍历数组，将数组中的字典依次转换成AppInfo对象，添加到一个临时数组
 21         // 2. self.appList = 临时数组
 22         NSMutableArray *arrayM = [NSMutableArray array];
 23
 24         for (NSDictionary *dict in array) {
 25             [arrayM addObject:[AppInfo appInfoWithDict:dict]];
 26         }
 27
 28         _appList = arrayM;
 29     }
 30     return _appList;
 31 }
 32
 33 - (void)viewDidLoad
 34 {
 35     [super viewDidLoad];
 36
 37     // 总共有3列
 38     int totalCol = 3;
 39     CGFloat viewW = 80;
 40     CGFloat viewH = 90;
 41
 42     CGFloat marginX = (self.view.bounds.size.width - totalCol * viewW) / (totalCol + 1);
 43     CGFloat marginY = 10;
 44     CGFloat startY = 20;
 45
 46     for (int i = 0; i < self.appList.count; i++) {
 47         // 行数
 48         // i = 0, 1, 2  / 3 = 0
 49         // i = 3, 4, 5  / 3 = 1
 50         int row = i / totalCol;
 51         // 列数
 52         // i = 0, 3, 6 col 0
 53         // i = 1, 4, 7 col 1
 54         // i = 2, 5, 8 col 2
 55         int col = i % totalCol;
 56
 57         CGFloat x = marginX + (viewW + marginX) * col;
 58         CGFloat y = startY + marginY + (viewH + marginY) * row;
 59
 60         UIView *appView = [[UIView alloc] initWithFrame:CGRectMake(x, y, viewW, viewH)];
 61
 62         [self.view addSubview:appView];
 63
 64         // 创建appView内部的细节
 65         // 读取数组中的AppInfo
 66         // NSDictionary *dict = self.appList[i];
 67         AppInfo *appInfo = self.appList[i];
 68
 69         // UIImageView
 70         UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, viewW, 50)];
 71         imageView.image = appInfo.image;
 72         // 按照比例显示图像
 73         imageView.contentMode = UIViewContentModeScaleAspectFit;
 74
 75         [appView addSubview:imageView];
 76
 77         // UILabel
 78         UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, imageView.bounds.size.height, viewW, 20)];
 79         // 设置文字
 80         label.text = appInfo.name;
 81         label.font = [UIFont systemFontOfSize:12.0];
 82         label.textAlignment = NSTextAlignmentCenter;
 83
 84         [appView addSubview:label];
 85
 86         // UIButton
 87         // UIButtonTypeCustom和[[UIButton alloc] init]是等价的
 88         UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
 89         button.frame = CGRectMake(15, 70, viewW - 30, 20);
 90
 91         [button setTitle:@"下载" forState:UIControlStateNormal];
 92         // 不能使用如下代码直接设置title
 93         // button.titleLabel.text = @"下载";
 94         // @property中readonly表示不允许修改对象的指针地址，但是可以修改对象的属性
 95         button.titleLabel.font= [UIFont systemFontOfSize:14.0];
 96
 97         [button setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
 98         [button setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
 99
100         [appView addSubview:button];
101         button.tag = i;
102
103         [button addTarget:self action:@selector(downloadClick:) forControlEvents:UIControlEventTouchUpInside];
104     }
105 }
106
107 - (void)downloadClick:(UIButton *)button
108 {
109     NSLog(@"%d", button.tag);
110     // 实例化一个UILabel显示在视图上，提示用户下载完成
111     UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(80, 400, 160, 40)];
112     label.textAlignment = NSTextAlignmentCenter;
113     label.backgroundColor = [UIColor lightGrayColor];
114
115     LFAppInfo *appInfo = self.appList[button.tag];
116     label.text = [NSString stringWithFormat:@"下载%@完成", appInfo.name];
117     label.font = [UIFont systemFontOfSize:13.0];
118     label.alpha = 1.0;
119     [self.view addSubview:label];
120
121     // 动画效果
122     // 动画效果完成之后，将Label从视图中删除
123     // 首尾式动画，只能做动画，要处理完成后的操作不方便
124 //    [UIView beginAnimations:nil context:nil];
125 //    [UIView setAnimationDuration:1.0];
126 //    label.alpha = 1.0;
127 //    [UIView commitAnimations];
128
129     // block动画比首尾式动画简单，而且能够控制动画结束后的操作
130     // 在iOS中，基本都使用首尾式动画
131     [UIView animateWithDuration:2.0 animations:^{
132         label.alpha = 0.0;
133     } completion:^(BOOL finished) {
134         // 删除label
135         [label removeFromSuperview];
136     }];
137 }
138
139 @end

模型

#import <Foundation/Foundation.h>

@interface AppInfo : NSObject

// 应用程序名称
@property (nonatomic, copy) NSString *name;
// 应用程序图标名称
@property (nonatomic, copy) NSString *icon;
// 图像
// 定义属性时，会生成getter&setter方法，还会生成一个带下划线的成员变量
// 如果是readonly属性，只会生成getter方法，同时没有成员变量
@property (nonatomic, strong, readonly) UIImage *image;

// instancetype会让编译器检查实例化对象的准确类型
// instancetype只能用于返回类型，不能当做参数使用
- (instancetype)initWithDict:(NSDictionary *)dict;
/** 工厂方法 */
+ (instancetype)appInfoWithDict:(NSDictionary *)dict;

@end

m 文件

#import "AppInfo.h"

@interface AppInfo()
{
    UIImage *_imageABC;
}

@end

@implementation AppInfo

- (instancetype)initWithDict:(NSDictionary *)dict
{
    self = [super init];
    if (self) {
        self.name = dict[@"name"];
        self.icon = dict[@"icon"];
    }
    return self;
}

+ (instancetype)appInfoWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}

- (UIImage *)image
{
    if (!_imageABC) {
        _imageABC = [UIImage imageNamed:self.icon];
    }
    return _imageABC;
}

@end

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

XIB & Storyboard

相同点：

1>  都用来描述软件界面

2>  都用Interface Builder工具来编辑

不同点

1>  Xib是轻量级的，用来描述局部的UI界面

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

7. View的封装思路

1>  如果一个view内部的子控件比较多，一般会考虑自定义一个view，把它内部子控件的创建屏蔽起来，不让外界关心

2>  外界可以传入对应的模型数据给view，view拿到模型数据后给内部的子控件设置对应的数据

时间： 2024-10-06 00:45:46

IOS 开发学习笔记-基础 UI（10）九宫格布局，块动画，字典转模型，Xib使用的相关文章

iOS开发学习笔记:基础篇

iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境),Xcode是一个集成开发环境,包括了编辑器.调试.模拟器等等一系列方便开发和部署的工具,iOS SDK则是开发应用所必需,不同的SDK分别对应不同的iOS版本或设备,通常我们需要下载多个iOS SDK以确保我们开发的程序能够在不同版本的iOS上正常运行. 创建新工程 Xcode提供了很多种工程模

IOS开发学习笔记（二）－语音识别（科大讯飞）

上次简单地讲解了如何利用科大讯飞完成语音合成,今天接着也把语音识别整理一下.当然,写代码前我们需要做的一些工作(如申请appid.导库),在上一篇语音合成的文章当中已经说过了,不了解的可以看看我上次的博文,那么这次直接从堆代码开始吧. 详细步骤: 1.导完类库之后,在工程里添加好用的头文件.在视图里只用了一个UITextField显示识别的内容,两个UIButton(一个开始监听语音,一个结束监听),然后引入类.添加代理,和语音合成的一样. MainViewController.h 1 #imp

IOS开发学习笔记(1)-----UILabel 详解

1. [代码][C/C++]代码     //创建uilabelUILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(20, 40, 280, 80)];//设置背景色label1.backgroundColor = [UIColor grayColor];//设置taglabel1.tag = 91;//设置标签文本label1.text = @"Hello world!";//设置标签文本字体和字体大小label1.

IOS开发学习笔记－－语音合成（科大讯飞）

      现在语音服务越来越热,我们平时使用的很多软件都带有语音合成和识别功能,用起来也很方便.说到语音服务,Google和微软都提供过API接口,不过笔者要介绍的是国内的智能语音技术提供商---科大讯飞.之前看过一个比较Google.微软和科大讯飞语音识别引擎的博文(http://fqctyj.blog.163.com/blog/static/70843455201361955322797/),有兴趣可以去看看.笔者接触语音服务的时间也不长,对语音服务也不是很了解,但是拆解过科大讯飞的Dem

IOS开发学习笔记-(2)键盘控制，键盘类型设置，alert 对话框

一.关闭键盘,放弃第一响应者,处理思路有两种 ① 使用文本框的 Did End on Exit 绑定事件 ② UIControl on Touch 事件 都去操作 sender 的  resignFirstResponder #import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (weak, nonatomic) IBOutlet UITextField *txtUserName; @pro

IOS开发学习笔记-(3) 进度条、等待动画开始停止

一.创建对应空间视图  ,如下图: 二.编写对应的 .h 代码,如下 : #import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (weak, nonatomic) IBOutlet UIActivityIndicatorView *activWaitNetWork; @property (weak, nonatomic) IBOutlet UIProgressView *pgrsDownLo

IOS开发学习笔记(2)-----UIButton 详解

1. [代码][C/C++]代码     //这里创建一个圆角矩形的按钮    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];    //    能够定义的button类型有以下6种,//    typedef enum {//        UIButtonTypeCustom = 0,          自定义风格//        UIButtonTypeRoundedRect,        

ios开发学习笔记（1）

objective-c基础总结 第一二章 1.application:didiFinishLauchingWithOptions:程序启动后立即执行 2.启动界面代码格式:self.window = [UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];//1.从Infor.plist中取出版本号NString *version = [NSBundle mainBundle].infoDictionary[key];//2.

IOS开发学习笔记017-什么是IOS开发

应用程序开发流程 1.IOS开发需要思考的问题 用户是谁?不同应用程序的内容和用户体验大不相同,这取决于想要编写的是什么应用程序,它可能是儿童游戏,也可能是待办事项列表应用程序,又或者是测试自己学习成果的应用程序. 应用程序的用途是什么?赋予应用程序一个明确的用途十分重要.了解激发用户使用应用程序的动因是界定用途的一个出发点. 应用程序尝试解决什么问题?应用程序应该完美解决单个问题,而不是尝试解决多个截然不同的问题.如果发现应用程序尝试解决不相关的问题,那么最好考虑编写多个应用程序. 应用程序要