[iOS基础控件 - 4.1] APP列表

需求

1.以N宫格的形式展示应用信息

2.APP信息包括图标、名字、下载按钮

3.使用尽可能少的代码,从plist读取app信息,计算每个app图标的位置尺寸信息

A.思路

1.UI布局:N宫格

2.事件监听

3.动态添加 (by plist)

4.整体封装,组合每个应用信息,使用View的层级包装帮助布局

B.实现 (使用纯代码方式)

  1 //
  2 //  ViewController.m
  3 //  01-应用管理
  4 //
  5 //  Created by hellovoidworld on 14/11/24.
  6 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.
  7 //
  8
  9 #import "ViewController.h"
 10
 11 #define APP_WIDTH 85
 12 #define APP_HEIGHT 90
 13 #define MARGIN_HEAD 20
 14 #define ICON_WIDTH 50
 15 #define ICON_HEIGHT 50
 16 #define NAME_WIDTH APP_WIDTH
 17 #define NAME_HEIGHT 20
 18 #define DOWNLOAD_WIDTH (APP_WIDTH - 20)
 19 #define DOWNLOAD_HEIGHT 20
 20
 21 @interface ViewController ()
 22
 23 /** 存放应用信息 */
 24 @property(nonatomic, strong) NSArray *apps; // 应用列表
 25
 26 @end
 27
 28 @implementation ViewController
 29
 30 - (void)viewDidLoad {
 31     [super viewDidLoad];
 32     // Do any additional setup after loading the view, typically from a nib.
 33
 34     [self loadApps];
 35 }
 36
 37 - (void)didReceiveMemoryWarning {
 38     [super didReceiveMemoryWarning];
 39     // Dispose of any resources that can be recreated.
 40 }
 41
 42 #pragma mark 取得应用列表
 43 - (NSArray *) apps {
 44     if (nil == _apps) {
 45         NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
 46         _apps = [NSArray arrayWithContentsOfFile:path];
 47     }
 48
 49     return _apps;
 50 }
 51
 52 #pragma mark 加载全部应用列表
 53 - (void) loadApps {
 54     int appColumnCount = [self appColumnCount];
 55     int appRowCount = [self appRowCount];
 56
 57     CGFloat marginX = (self.view.frame.size.width - APP_WIDTH * appColumnCount) / (appColumnCount + 1);
 58     CGFloat marginY = (self.view.frame.size.height - APP_HEIGHT * appRowCount) / (appRowCount + 1) + MARGIN_HEAD;
 59
 60     int column = 0;
 61     int row = 0;
 62     for (int index=0; index<self.apps.count; index++) {
 63         NSDictionary *appData = self.apps[index];
 64
 65         // 每个app信息
 66         UIView *appView = [[UIView alloc] init];
 67
 68         CGFloat appX = marginX + column * (marginX + APP_WIDTH);
 69         CGFloat appY = marginY + row * (marginY + APP_HEIGHT);
 70
 71         appView.frame = CGRectMake(appX, appY, APP_WIDTH, APP_HEIGHT);
 72
 73         // 1.设置APP图片
 74         UIImageView *iconView = [[UIImageView alloc] init];
 75
 76         CGFloat iconMarginX = (appView.frame.size.width - ICON_WIDTH) / 2;
 77         CGFloat iconMarginY = 0;
 78         iconView.frame = CGRectMake(iconMarginX, iconMarginY, ICON_WIDTH, ICON_HEIGHT);
 79
 80         iconView.image = [UIImage imageNamed:appData[@"icon"]];
 81         [appView addSubview:iconView];
 82
 83         // 2.设置APP名字
 84         UILabel  *nameLabel = [[UILabel alloc] init];
 85         nameLabel.text = appData[@"name"];
 86         CGFloat nameMarginX = (appView.frame.size.width - NAME_WIDTH) / 2;
 87         CGFloat nameMarginY = iconMarginY + ICON_HEIGHT;
 88         nameLabel.frame = CGRectMake(nameMarginX, nameMarginY, NAME_WIDTH, NAME_HEIGHT);
 89         [nameLabel setFont:[UIFont systemFontOfSize:16]];
 90         [nameLabel setTextAlignment:NSTextAlignmentCenter];
 91         [appView addSubview:nameLabel];
 92
 93         // 3.设置下载按钮
 94         UIButton *downloadButton = [UIButton buttonWithType:UIButtonTypeCustom];
 95         CGFloat downloadMarginX = (appView.frame.size.width - DOWNLOAD_WIDTH) / 2;
 96         CGFloat downloadMarginY = nameMarginY + NAME_HEIGHT;
 97         downloadButton.frame = CGRectMake(downloadMarginX, downloadMarginY, DOWNLOAD_WIDTH, DOWNLOAD_HEIGHT);
 98
 99         UIImage *downloadNormalImage = [UIImage imageNamed:@"buttongreen"];
100         [downloadButton setBackgroundImage:downloadNormalImage forState:UIControlStateNormal];
101
102         UIImage *downloadHighlightedImage = [UIImage imageNamed:@"buttongreen_highlighted"];
103         [downloadButton setBackgroundImage:downloadHighlightedImage forState:UIControlStateHighlighted];
104
105         [downloadButton setTitle:@"下载" forState:UIControlStateNormal];
106
107         // 不要直接取出titleLabel属性进行操作,因为这样就不能为全部状态进行设置
108         [downloadButton.titleLabel setFont:[UIFont systemFontOfSize:13]];
109
110         [appView addSubview:downloadButton];
111
112
113         [self.view addSubview:appView];
114
115         column++;
116         if (column == appColumnCount) {
117             column = 0;
118             row++;
119         }
120     }
121 }
122
123 #pragma mark 计算列数
124 - (int) appColumnCount {
125     int count = 0;
126     count = self.view.frame.size.width / APP_WIDTH;
127
128     if ((int)self.view.frame.size.width % (int)APP_WIDTH == 0) {
129         count--;
130     }
131
132     return count;
133 }
134
135 #pragma mark 计算行数
136 - (int) appRowCount {
137     int count = 0;
138     count = (self.view.frame.size.height - MARGIN_HEAD) / APP_HEIGHT;
139
140     if ((int)(self.view.frame.size.height - MARGIN_HEAD) % (int)APP_HEIGHT == 0) {
141         count--;
142     }
143
144     return count;
145 }
146 @end

#1. 放入了Images.xcassets中的文件只能通过[UIImage imageNamed:(NSString *) imageName] 访问吗?

时间: 2024-10-29 19:06:17

[iOS基础控件 - 4.1] APP列表的相关文章

[iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表&quot;练习)

A.概述 在"[iOS基础控件 - 4.4] APP列表 进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能 1.按钮点击后,显示为“已下载”,并且不可以再按 2.在屏幕中间弹出一个消息框,通知消息“xx已经被安装”,慢慢消失 3.消息框样式为圆角半透明 B.不使用代理模式,使用app空间组和主View之间的父子View关系 1.在主View中创建一个消息框 主View控制器:ViewController.m 1 // 创建下载成功消息框 2 CGFloat labelWid

iOS基础控件UINavigationController中的传值

iOS基础控件UINavigationController中的传值,代理传值,正向传值,反向传值 #import <UIKit/UIKit.h> //声明一个协议 @protocol SendValue<NSObject> //定义一个方法 - (void)sendBtnTitle:(NSString *)title; @end @interface FirstViewController : UIViewController // 定义代理 @property (nonatomi

ios基础控件之开关按钮(UISwitch)

UISwitch控件是iOS开发的基础控件,是非常简单的一个控件,因为它的方法比较少.UISwitch继承于UIControl基类,因此可以当成活动控件使用. 注意:开关状态通过它的on属性进行读取,该属性是一个BOOL属性 创建: UISwitch* mySwitch = [[ UISwitch alloc]initWithFrame:CGRectMake(0.150.0f,100.0f,0.0f,0.0f)]; 可能你会疑问为什么它的大小都设置为0?没错,它的大小你设置是无效的,系统会为你分

[iOS基础控件 - 4.4] 进一步封装&quot;APP列表&rdquo;,初见MVC模式

A.从ViewController分离View 之前的代码中,View的数据加载逻辑放在了总的ViewController中,增加了耦合性,应该对控制器ViewController隐藏数据加载到View的细节. 封装View的创建逻辑 封装View的数据加载逻辑到自定义的UIView中 B.思路 使用xib封装自定义view的步骤: 1.新建一个继承UIView的自定义view,这里的名字是"AppView",用来封装独立控件组 每个AppView封装了如下图的控件组 2.新建一个xi

[iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 B.实现步骤 1.编写MVC结构 (1)根据plist文件结构,编写model,使用嵌套型 1 // 2 // FriendGroup.h 3 // FriendsList 4 // 5 // Created by hellovoidworld on 14/12/12. 6 // Copyright (c) 2014

【iOS基础控件 - 13】【Demo 】QQ好友列表TableView

A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 code source: B.实现步骤 1.编写MVC结构 (1)根据plist文件结构,编写model,使用嵌套型 1 // 2 // FriendGroup.h 3 // FriendsList 4 // 5 // Created by hellovoidworld on 14/12/12. 6 // Copyr

[iOS基础控件 - 6.1] 汽车品牌列表 UITableView多项显示

A.实现思路 1.拖入UITableView 2.拖曳.连线UITableView控件 3.Controller遵守UITalbeViewDataSource协议 4.设置UITableView的dataSource 5.加载数据到Model 6.从Model解析数据,显示到View上 B.实现细节 1.UITableView style (1)Grouped,成组出现,标题和尾部会被分隔开,如上图 (2)Plain C.主要代码 Car.h 1 // 2 // Car.h 3 // 01-Ca

iOS 基础控件(下)

上篇介绍了UIButton.UILabel.UIImageView和UITextField,这篇就简短一点介绍UIScrollView和UIAlertView. UIScrollView 顾名思义也知道这个是和滚动相关的控件,在Android开发时遇到过ScrollView,当内容的尺寸超出了屏幕范围之后,用ScrollView则可以通过滚动的方式使得超出屏幕的那部分内容通过滚动的方式显示出来,在Android里面有水平的ScrollView和垂直的ScrollView,在iOS里面就只有一个S

[iOS基础控件 - 6.11.3] 私人通讯录Demo 控制器的数据传递、存储

A.需求 1.搭建一个“私人通讯录”Demo 2.模拟登陆界面 账号 密码 记住密码开关 自动登陆开关 登陆按钮 3.退出注销 4.增删改查 5.恢复数据(取消修改) B.基本架构 1. 5个控制器 (1)导航控制器 NavigationController (2)登陆 UIViewController 输入账号密码 记住密码.自动登录开关 登陆跳转按钮 (3)联系人列表 TableViewController 注销功能 添加联系人跳转按钮 (4)添加联系人 UIView (5)查看.编辑 UI