IOS菜鸟的所感所思(四)——自定义UICollectionViewCell以及网络数据的添加。

如何把已经获取到的数据放在控制器的cell中显示出来，下面我们就来实现自定义UICollectionViewCell，然后再向里添加网络获取的数据。

一：UI设计

主要是SongRearch控制器界面的设计。添加两个Bar Button Item，然后设置它们的属性，分别是stop，search。中间的是一个UITextField控件，用于接收用户的输入。

控制器的UIView是UICollectionView，这里我们会另外定义UICollectionViewCell。



当然需要将它做成一个接口，用于存放网络数据。

二：代码编写

SearchSongVC.h文件中：

#import <UIKit/UIKit.h>

@interface SearchSongVC :UIViewController

@end

SearchSongVC.m文件中：

定义私有变量：

//定义cell的标识符
NSStringstatic *reuseIdentifier =@"cell";

//需要用到的协议中的方法，即UICollectionView中的协议。

@interface
SearchSongVC ()<UICollectionViewDataSource,UICollectionViewDelegate>

//UI界面引出的接口

@property (weak,
nonatomic) IBOutletUITextField *searchContent;

@property (weak,
nonatomic) IBOutletUICollectionView *collectionView;

//定义网络的对象，用于获取数据。

@property (nonatomic,strong)FetchDataFromNet *fetchData;

//定义本地中的数组用于存放获取后的数据。

@property (nonatomic,strong)NSArray *getDataArray;

代码实现歩聚：

1.通过接口获取网络的数据来初始化本地的数组。
2.初始化本地数组后，立即重新加载数据。

- (void)getData:(NSString *)name page:(NSInteger)pageIndex{
[FetchDataFromNetfetchMusicData:namepage:pageIndex
callback:^(NSArray *array,NSInteger page,NSError *error){
if (error) {
NSLog(@"error = %@",error);
}else{
//初始化本地的数组，并重新加载数据。

self.getDataArray = array;
[self.collectionView reloadData];

// NSLog(@"%@",_getDataArray);
}
}];
}

//点击search按钮后调用的方法。
- (IBAction)searchSongs:(UIBarButtonItem *)sender {

if (self.searchContent.text)
{

//调用获取数据的方法，key是用户输入的内容。
[self getData:self.searchContent.textpage:1];
}

}
3.实现协议中的方法。

#pragma mark <UICollectionViewDataSource>

//section的个数。

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return1;
}

//cell的个数，本地数组的长度。

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{

return self.getDataArray.count;
}

//初始化cell，但需要在viewDidLoad方法中注册，并说明自己是协议的委托。

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath
*)indexPath {
//cell是自定义的对象，

CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];

//调用对象方法，初始化数据。（需要在CollectionViewCell.m文件中实现次方法），而参数是getDataArray中的一个musicData的对象，而该对象有trackname，albumname，logoname等属性。

[cell setInfo:self.getDataArray[indexPath.row]];

return cell;
}

- (void)viewDidLoad {

[superviewDidLoad];

//说明自己是协议的委托。

self.collectionView.delegate =self;

self.collectionView.dataSource =self;

//注册。

UINib *cellNib = [UINibnibWithNibName:@"collectionCell"bundle:[NSBundlemainBundle]];

[self.collectionViewregisterNib:cellNibforCellWithReuseIdentifier:reuseIdentifier];
}
//cell的长宽。

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{

returnCGSizeMake(self.view.frame.size.width,45);
}
4.在自定义cell中实现数据的初始化。

CollectionViewCell.m文件中：

//引出的接口

@property (weak,
nonatomic) IBOutletUIImageView *logoImage;

@property (weak,
nonatomic) IBOutletUILabel *songName;

@property (weak,
nonatomic) IBOutletUILabel *albumName;
//实现共有的api方法。
- (void)setInfo:(MusicData *)musicData{

//初始化数据
self.songName.text = musicData.trackname;
self.albumName.text = musicData.albumname;

//因为加载图片是耗时的操作，所以此处需要线程的异步操作

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0),
^{

//获取图片的网络地址，并进行加载。

NSURL *imageUrl = [NSURLURLWithString:musicData.logoname];

// NSData *imageData = [NSData dataWithContentsOfURL:imageUrl];

// UIImage *image = [UIImage imageWithData:imageData];

// [self setImage:image];

//这里我调用了第三方库UIImageView＋WebCache.h下载：点击打开链接 当然在导入库的时候要导完全。

[self.logoImagesd_setImageWithURL:imageUrlplaceholderImage:[UIImageimageNamed:@"surf.jpg"]];
});
}



我这里为了调试的方便，就只获取一条网络数据，而后面的➕按钮是后面会用到的。如果是多条数据，图片是一样的，因为图片的地址都是一样的。
这样我们就获取到了歌曲的logo，name，album等信息。
后面的文章中，我们会通过➕按钮将我们喜欢的歌曲添加到另一个收藏界面中，当然那会用到coredata的知识。