iOS开发之UITabBarController和UICollectionView的使用

这一篇要记录的是iOS开发中UITabBarController控件和UICollectionView控件的使用,APP跑起来之后的效果如下图:

       

UITabBarController控件,即上图中页面下部可以切换到不同页面去的选项卡,UICollectionView即上右图中的View,以格子的形式展现出来。

本篇主要用到了如下几个知识点:

1、给ViewController加上UITabBarController控件

2、给ViewController加上UINavigationController控件

3、使用UITableView和UICollectionView展示列表

4、使用plist文件,在代码中读取plist文件并加载到UITableView和UICollectionView中

下面就一步步完成这个项目:

1、首先在xcode中新建项目,取名为TabBarControllerTest

2、切换到Main.storyboard,然后选中ViewController视图,在菜单栏中选择Editor-->Embed in-->Tab Bar Controller,这一步操作完成后,故事板中的界面如下所示:



3、下面给ViewController设置TabBar,在故事板中选中ViewController下方的TabBar,然后在xcode右侧的属性栏中,设置System item为Contacts,如下图所示:


4、给ViewController加上导航栏。选中故事板中的ViewController,然后在菜单栏中选择Editor-->Embed in-->NavigationController,操作完成后界面如下所示:


然后选中ViewController视图顶部的Navigation,在xcode右侧的属性栏中配置title为“联系人”。

5、新增一个代表最近联系人的ViewController。在控件区拖入一个ViewController到故事板中,然后鼠标右键按住,从Tab Bar Controller视图拖到刚刚新建的ViewController视图上,如下图所示:


松开鼠标后,在出现的对话框中,选择view controller,如下图所示:


现在故事板中的视图是下面这样:


采用和上面的步骤相同的方法,选中我们新建的那个ViewController视图底部的TabBar,然后在xcode右侧的视图中配置System item为Recents。

6、为新增的那个ViewController加上导航栏。选中故事板中我们新增的ViewController,然后在菜单中选择Editor-->Embed in-->Navigation Controller,然后像前面的操作那样设置导航栏的标题为“最近联系人”,操作完成后的故事板应该如下图所示:


到这里可以先运行程序看看效果,虽然没有数据显示,但是我们的TabBar还是可以切换的,切换到不同的Tab之后,导航栏上的标题也会随着切换,如下图所示:

    

7、给页面中加入数据。

首先是联系人列表的数据,这个在前面的博文中已有说到,这里就不详细说了,这里我们需要新建一个单元格类ContactCell继承自UITableViewCell,ContactCell.h的代码如下:

#import <UIKit/UIKit.h>

@interface ContactCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *avatarImage;

@property (weak, nonatomic) IBOutlet UILabel *nameLabel;

@property (weak, nonatomic) IBOutlet UILabel *phoneLabel;

@end
然后在ViewController中加载数据,ViewController.h文件的代码如下:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end
这里主要是ViewController.m中的代码,我们在其中加载了外部plist文件里的数据,先贴上ViewController.m文件的代码:

#import "ViewController.h"
#import "ContactCell.h"

@interface ViewController ()

@end

@implementation ViewController

NSArray *avatarArr;
NSArray *nameArr;
NSArray *phoneArr;
static NSString *identifier = @"ContactCell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self loadDataFromFile];
    //设置tableView的代理和数据源
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
}

#pragma mark 从plist中加载数据
- (void)loadDataFromFile {
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"contacts" ofType:@"plist"];
    NSDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:filePath];
    avatarArr = [dict objectForKey:@"avatars"];
    nameArr = [dict objectForKey:@"names"];
    phoneArr = [dict objectForKey:@"phones"];
}

#pragma mark 返回TableView的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [nameArr count];
}

#pragma mark 返回某个单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    ContactCell *cell = [self.tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
    cell.avatarImage.image = [UIImage imageNamed:[avatarArr objectAtIndex:indexPath.row]];
    cell.nameLabel.text = [nameArr objectAtIndex:indexPath.row];
    cell.phoneLabel.text = [phoneArr objectAtIndex:indexPath.row];
    return cell;
}

#pragma mark 返回单元格的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 80;
}

#pragma mark 设置选中某个单元格后,背景色恢复初始状态
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
从plist文件中加载数据,主要使用的NSBundle类的pathForResource方法,这里我们的plist文件名为contacts,文件内容如下:

8、给CollectionView加载数据

为了给CollectionView加载数据,首先得新建一个代表CollectionView单元格的类,这里取名为RecentCell,且这个类继承自UICollectionViewCell,RecentCell.h代码如下:

#import <UIKit/UIKit.h>

@interface RecentCell : UICollectionViewCell 

@property (weak, nonatomic) IBOutlet UIImageView *avatarImage;

@property (weak, nonatomic) IBOutlet UILabel *nameLabel;

@end
然后还得新建一个装载了CollectionView的ViewController,这里取名为RecentViewController,RecentViewController.h代码如下:

#import <UIKit/UIKit.h>

@interface RecentViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate>

@property (weak, nonatomic) IBOutlet UICollectionView *recentCollectionView;

@end
里面仅包含一个代表CollectionView的变量,RecentViewController.m文件的代码如下:

#import "RecentViewController.h"
#import "RecentCell.h"

@interface RecentViewController ()

@end

@implementation RecentViewController

NSArray *recentAvatarArr;
NSArray *recentNameArr;
static NSString *identifier = @"RecentCell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self loadDataFromFile];
    self.recentCollectionView.delegate = self;
    self.recentCollectionView.dataSource = self;
}

#pragma mark 从文件中加载数据
- (void)loadDataFromFile {
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"contacts" ofType:@"plist"];
    NSDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:filePath];
    recentAvatarArr = [dict objectForKey:@"avatars"];
    recentNameArr = [dict objectForKey:@"names"];
}

#pragma mark 一个section中的item数目
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [recentAvatarArr count];
}

#pragma mark 返回某个单元格
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    RecentCell *cell = [self.recentCollectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    cell.avatarImage.image = [UIImage imageNamed:[recentAvatarArr objectAtIndex:indexPath.row]];
    cell.nameLabel.text = [recentNameArr objectAtIndex:indexPath.row];
    return cell;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
其实UICollectionView的用法和UITableView的用法类似,都是需要在头文件中实现数据源和委托协议,然后在.m文件中实现协议里的某几个方法来处理视图中显示的数据。

下面总结下在项目过程中需要注意的点:

(1)要注意在xcode的属性视图中给单元格指定的标识一定要和代码中的对应

(2)不要忘了将代码中声明的代表视图对象的变量,和真正的视图联系起来

(3)要给UITableView和UICollectionView等集合视图添加数据,一定不要忘了在头文件中实现协议


Demo代码下载地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yubo_725

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值