使用UICollectionView和UITableView混合佈局，完成簡單天氣demo
天氣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 {
[superviewDidLoad];
// 設定pList檔案路徑
NSString *dataPath = [[NSBundlemainBundle]pathForResource:@"WeatherPlist.plist"ofType:nil];
// 填充陣列內容
_weatherList = [NSMutableArrayarrayWithContentsOfFile:dataPath];
NSString *todayPath = [[NSBundlemainBundle]pathForResource:@"TodayList.plist"ofType:nil];
_todayList=[NSMutableArrayarrayWithContentsOfFile:todayPath];
//註冊Cell，必須要有
[self.collectionViewregisterClass:[CollectionViewCellclass]
forCellWithReuseIdentifier:@"collectioncell"];
// Do any additional setup after loading the view, typically from a nib.
}
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [_todayListcount];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"tableviewcell";
TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier
forIndexPath:indexPath];
// Configure the cell...
// 例項化單元格物件
if (cell == nil) {
cell = [[TableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier];
}
NSDictionary *item = [_todayList objectAtIndex:indexPath.row];
//顯示文字
[cell.weatherLabel1 setText:[item objectForKey:@"Low"]];
[cell.weatherLabel2 setText:[item objectForKey:@"High"]];
[cell.weatherLabel3 setText:@"~"];
[cell.weatherLabel4 setText:[item objectForKey:@"Now"]];
[cell.weatherLabel5 setText:[item objectForKey:@"Name"]];
[cell.weatherLabel6 setText:[item objectForKey:@"Suggestion"]];
[cell.weatherLabel7 setText:[item objectForKey:@"Situation"]];
[cell.weatherLabel8 setText:[item objectForKey:@"Number"]];
[cell.weatherLabel9 setText:@"洗車指數："];
cell.backgroundColor=[UIColorclearColor];
// 顯示頭像
[cell.firstImagesetImage:[UIImageimageNamed:[item objectForKey:@"Image"]]];
// 改變字型顏色
[cell.weatherLabel4setTextColor:[UIColororangeColor]];
return cell;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return [_weatherList count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell *cocell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectioncell"forIndexPath:indexPath];
// Configure the cell...
NSDictionary *coitem = [_weatherList objectAtIndex:indexPath.row];
//顯示文字
cocell.backgroundColor=[UIColorclearColor];
[cocell.weatherLabel1setTextColor:[UIColorwhiteColor]];
[cocell.weatherLabel2setTextColor:[UIColorwhiteColor]];
[cocell.weatherLabel10setTextColor:[UIColorwhiteColor]];
[cocell.weatherLabel1 setText:[coitem objectForKey:@"Low"]];
[cocell.weatherLabel2 setText:[coitem objectForKey:@"High"]];
[cocell.weatherLabel10 setText:[coitem objectForKey:@"Today"]];
// 顯示頭像
[cocell.secondImage setImage:[UIImage imageNamed:[coitem objectForKey:@"Image"]]];
return cocell;
}
- (void)didReceiveMemoryWarning {
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
2.CollectionViewCell.h#import <UIKit/UIKit.h>
@interface CollectionViewCell : UICollectionViewCell
@property (strong, nonatomic) IBOutletUIImageView *secondImage;
@property (strong, nonatomic) IBOutletUILabel *weatherLabel1;
@property (strong, nonatomic) IBOutletUILabel *weatherLabel2;
@property (strong, nonatomic) IBOutletUILabel *weatherLabel10;
@end
3.CollectionViewCell.m#import "CollectionViewCell.h"
@implementation CollectionViewCell
@synthesize secondImage = _secondImage;
@synthesize weatherLabel1 = _weatherLabel1;
@synthesize weatherLabel2 = _weatherLabel2;
@synthesize weatherLabel10 = _weatherLabel10;
@end
4.TodayPlist.plist<plist version="1.0">
<array>
<dict>
<key>Low</key>
<string>5℃</string>
<key>High</key>
<string>15℃</string>
<key>Now</key>
<string>11℃</string>
<key>Name</key>
<string>陰</string>
<key>Suggestion</key>
<string>不宜洗車</string>
<key>Number</key>
<string>66</string>
<key>Situation</key>
<string>良</string>
<key>Today</key>
<string>週四</string>
<key>Image</key>
<string>icon1.jpg</string>
</dict>
</array>
</plist>
5.storyboard佈局圖