天气Demo最终效果如下:
UICollectionView和UITableView是很类似的~
上一节我做的UITableView学好的话,这节的混合布局就会很容易。
1.首先再做布局的时候,要学会分类,先分好模块,再针对模块来做会更清晰和简单
2.在这个天气Demo里View分为两块:上面用UITableView自定义cell来实现,下面的用UICollectionView的cell来实现
3.首先在storyboard里从右边拖一个UITableView到View上,然后拖一个TableViewCell到tableview上,对cell进行自定义布局(当然对cell进行UIView模块划分,有助于后面的约束布局,博主这里暂没做划分)
4.新建class:TableViewCell,subclass of UITableViewCell,生成文件:TableViewCell.h,TableViewCell.m
5.关联storyboard中的TableViewCell的class:TableViewCell,并且关联我们布局的控件与class文件中的代码,设定Identifier:tableviewcell
6.关联TableView的dataSource和delegate到ViewController
7.在TableViewCell可以正确显示以后,在storyboard里从右边拖一个UICollectionView到TableView下面,在cell里面进行自定义布局
8.新建class:CollectionViewCell,subclass of UICollectionViewCell,生成文件:CollectionViewCell.h,CollectionViewCell.m
9.关联storyboard中的CollectionViewCell的class:CollectionViewCell,并且关联我们布局的控件与class文件中的代码,设定Identifier:collection cell
10.关联CollectionView的dataSource和delegate到ViewController
11.新建plist文件:WeatherPlist.plist和TodayPlist.plist
12.导入plist文件中需要的图片进来
13.整体布局两部分View,添加背景图片,拖一个ImageView到UIView上,在左边的列表栏将它拖到最上面,发现它显示在最底层,将TableView和CollectionView的背景设为clearcolor,再对背景图进行布局调整
1.ViewController.m里的关键代码:
#import "ViewController.h"
#import "TableViewCell.h"
#import "CollectionViewCell.h"
@interface ViewController ()
{
@private NSMutableArray *_weatherList;
@private NSMutableArray *_todayList;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 设定pList文件路径
NSString *dataPath = [[NSBundle mainBundle]pathForResource:@"WeatherPlist.plist" ofType:nil];
// 填充数组内容
_weatherList = [NSMutableArray arrayWithContentsOfFile:dataPath];
NSString *todayPath = [[NSBundle mainBundle]pathForResource:@"TodayList.plist" ofType:nil];
_todayList=[NSMutableArray arrayWithContentsOfFile:todayPath];
//注册Cell,必须要有
[