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:pageIndexcallback:^(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的知识。