iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

简介: iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一、项目结构和plist文件   二、实现代码 1.说明: 主控制器直接继承UITableViewController // YYViewController.

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

一、项目结构和plist文件

 

二、实现代码

1.说明:

主控制器直接继承UITableViewController

 //  YYViewController.h
//  02-QQ好友列表(基本数据的加载)
//
//  Created by apple on 14-5-31.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YYViewController : UITableViewController

@end

在storyboard中进行了关联

2.代码

数据模型部分:

YYQQGroupModel.h文件

 1 //
 2 //  YYQQGroupModel.h
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYQQGroupModel : NSObject
12 /**
13  *  名称属性
14  */
15 @property(nonatomic,copy)NSString *name;
16 /**
17  *  是否在线
18  */
19 @property(nonatomic,copy)NSString *online;
20 /**
21  *  好友列表
22  */
23 @property(nonatomic,strong)NSArray *friends;
24 
25 -(instancetype)initWithDict:(NSDictionary *)dict;
26 +(instancetype) qqGroupModelWithDict:(NSDictionary *)dict;
27 @end

YYQQGroupModel.m文件

 1 //
 2 //  YYQQGroupModel.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYQQGroupModel.h"
10 #import "YYFriendsModel.h"
11 
12 @implementation YYQQGroupModel
13 -(instancetype)initWithDict:(NSDictionary *)dict
14 {
15     if (self=[super init]) {
16         //将字典转换为模型
17         [self setValuesForKeysWithDictionary:dict];
18         
19         //定义一个数组来保存转换后的模型
20         NSMutableArray *models=[NSMutableArray arrayWithCapacity:self.friends.count];
21         for (NSDictionary *dict in self.friends) {
22             YYFriendsModel *friends=[YYFriendsModel friendsWithDict:dict];
23             [models addObject:friends];
24         }
25         _friends=[models copy];
26     }
27     return self;
28 }
29 
30 +(instancetype)qqGroupModelWithDict:(NSDictionary *)dict
31 {
32     return  [[self alloc]initWithDict:dict];
33 }
34 @end

YYFriendsModel.h文件

 1 //
 2 //  YYFriendsModel.h
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYFriendsModel : NSObject
12 /**
13  *  每个好友的名称
14  */
15 @property(nonatomic,copy)NSString *name;
16 /**
17  *每个好友的头像
18  */
19 @property(nonatomic,copy)NSString *icon;
20 /**
21  *  每个好友的个性签名
22  */
23 @property(nonatomic,copy)NSString *intro;
24 /**
25  *  该好友是否是vip
26  */
27 @property(nonatomic,assign,getter = isVip)BOOL vip;
28 
29 -(instancetype)initWithDict:(NSDictionary *)dict;
30 +(instancetype)friendsWithDict:(NSDictionary *)dict;
31 @end

YYFriendsModel.m文件

 1 //
 2 //  YYFriendsModel.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYFriendsModel.h"
10 
11 @implementation YYFriendsModel
12 -(instancetype)initWithDict:(NSDictionary *)dict
13 {
14     if (self=[super init]) {
15         [self setValuesForKeysWithDictionary:dict];
16     }
17     return self;
18 }
19 
20 +(instancetype)friendsWithDict:(NSDictionary *)dict
21 {
22     return [[self alloc]initWithDict:dict];
23 }
24 @end

视图部分

YYfriendCell.h文件

 1 //
 2 //  YYfriendCell.h
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 @class YYFriendsModel;
11 @interface YYfriendCell : UITableViewCell
12 
13 @property(nonatomic,strong)YYFriendsModel *friends;
14 
15 +(instancetype)cellWithTableview:(UITableView *)tableView;
16 @end

YYfriendCell.m文件

 1 //
 2 //  YYfriendCell.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYfriendCell.h"
10 #import "YYFriendsModel.h"
11 //私有扩展
12 @interface YYfriendCell()
13 
14 
15 @end
16 @implementation YYfriendCell
17 
18 +(YYfriendCell *)cellWithTableview:(UITableView *)tableView
19 {
20     static NSString *identifier=@"qq";
21     YYfriendCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
22     if (cell==nil) {
23         //这里使用系统自带的样式
24         cell=[[YYfriendCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
25         NSLog(@"创建一个cell");
26     }
27     return cell;
28 }
29 
30 -(void)setFriends:(YYFriendsModel *)friends
31 {
32     _friends=friends;
33     //1.设置头像
34     self.imageView.image=[UIImage imageNamed:_friends.icon];
35        //2.设置昵称
36     self.textLabel.text=_friends.name;
37      //3.设置简介
38     self.detailTextLabel.text=_friends.intro;
39  //判断是否是会员
40     /**
41      *  这里有个注意点,如果不写else设置为黑色,会怎么样?
42      */
43     if (_friends.isVip) {
44         [self.textLabel setTextColor:[UIColor redColor]];
45     }else
46     {
47     [self.textLabel setTextColor:[UIColor blackColor]];
48     }
49 }
50 @end

主控制器部分

YYViewController.m文件

 1 //
 2 //  YYViewController.m
 3 //  02-QQ好友列表(基本数据的加载)
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "YYQQGroupModel.h"
11 #import "YYfriendCell.h"
12 #import "YYFriendsModel.h"
13 
14 @interface YYViewController ()
15 /**
16  *  用来保存所有的分组数据
17  */
18 @property(nonatomic,strong)NSArray *groupFriends;
19 @end
20 
21 @implementation YYViewController
22 #pragma mark-懒加载
23 //1.先拿到数据,实现懒加载
24 -(NSArray *)groupFriends
25 {
26     if (_groupFriends==nil) {
27         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"friends.plist" ofType:nil];
28         NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];
29         
30         NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];
31         for (NSDictionary *dict in arrayM) {
32             YYQQGroupModel *group=[YYQQGroupModel qqGroupModelWithDict:dict];
33             [models addObject:group];
34         }
35         _groupFriends=[models copy];
36     }
37     return _groupFriends;
38 }
39 
40 - (void)viewDidLoad
41 {
42     [super viewDidLoad];
43      self.tableView.sectionHeaderHeight = 100;
44 }
45 
46 #pragma mark-  设置数据源
47 //返回多少组
48 //为什么这里不会智能提示?因为这些方法是uitableview协议里的,默认并没有遵守协议,让主控制器类继承uitableviewcontroller后,就已经遵守了
49 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
50 {
51     return self.groupFriends.count;
52 }
53 //每组返回多少行
54 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
55 {
56     //取出对应的组模型
57     YYQQGroupModel *group=self.groupFriends[section];
58     //返回对应组中的好友数
59     return group.friends.count;
60 }
61 //每组每行的内容
62 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
63 {
64     //1.创建cell
65     YYfriendCell *cell=[YYfriendCell cellWithTableview:tableView];
66 
67     //2.设置cell
68     YYQQGroupModel *group=self.groupFriends[indexPath.section];
69     YYFriendsModel *friends=group.friends[indexPath.row];
70     cell.friends=friends;
71     //3.返回一个cell
72     return cell;
73 }
74 
75 
76 #pragma mark - 代理方法
77 // 当一个分组标题进入视野的时候就会调用该方法
78 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
79 {
80     //    1.创建头部视图
81     UIView *view = [[UIView alloc] init];
82     view.backgroundColor = [UIColor grayColor];
83     //    2.返回头部视图
84     return view;
85 }
86 
87 //设置分组头部标题的高度
88 -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
89 {
90     return 44;
91 }
92 
93 #pragma mark  隐藏状态栏
94 -(BOOL)prefersStatusBarHidden
95 {
96     return YES;
97 }
98 @end

实现的简陋效果:

三、注意点

(1)设置头部视图的方法

(2)在重写set方法时,应该考虑到回滚。

 

目录
相关文章
|
2月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
14天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
8天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
2月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
137 8
|
3月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
101 1
|
3月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
3月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
229 0
|
3月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
163 3
|
8月前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验

热门文章

最新文章