天天看點

iOS開發UI篇—無限輪播(新聞資料展示)

iOS開發UI篇—無限輪播(新聞資料展示)

一、實作效果

  

iOS開發UI篇—無限輪播(新聞資料展示)
iOS開發UI篇—無限輪播(新聞資料展示)

二、實作步驟

1.前期準備

  (1)導入資料轉模型的第三方架構MJExtension

  (2)向項目中添加儲存有“新聞”資料的plist檔案

    

iOS開發UI篇—無限輪播(新聞資料展示)

  (3)導入用到的圖檔素材

2.步驟和代碼

(1)建立一個資料模型

   

iOS開發UI篇—無限輪播(新聞資料展示)

  該模型的代碼設計如下:    

  YYnews.h檔案

1 //
 2 //  YYnews.h
 3 //  08-無限滾動(新聞資料展示)
 4 //
 5 
 6 #import <Foundation/Foundation.h>
 7 
 8 @interface YYnews : NSObject
 9 @property(nonatomic,copy)NSString *title;
10 @property(nonatomic,copy)NSString *icon;
11 @end      

(2)建立一個繼承自UICollectionViewCell的類,用于自定義cell。

iOS開發UI篇—無限輪播(新聞資料展示)

(3)建立一個xib檔案,和自定義的cell做關聯

iOS開發UI篇—無限輪播(新聞資料展示)
iOS開發UI篇—無限輪播(新聞資料展示)

  代碼設計如下:

   YYcell.h檔案

1 //
 2 //  YYcell.h
 3 //  08-無限滾動(新聞資料展示)
 4 //
 5 
 6 #import <UIKit/UIKit.h>
 7 
 8 @class YYnews;
 9 @interface YYcell : UICollectionViewCell
10 @property(nonatomic,strong)YYnews *news;
11 @end      

 YYcell.m檔案

1 //
 2 //  YYcell.m
 3 //  08-無限滾動(新聞資料展示)
 4 //
 5 
 6 #import "YYcell.h"
 7 #import "YYnews.h"
 8 
 9 @interface YYcell ()
10 @property (weak, nonatomic) IBOutlet UILabel *label;
11 @property (weak, nonatomic) IBOutlet UIImageView *imageView;
12 
13 @end
14 @implementation YYcell
15 
16 -(void)setNews:(YYnews *)news
17 {
18     _news=news;
19     self.label.text=news.title;
20     self.imageView.image=[UIImage imageNamed:news.icon];
21 }
22 
23 @end      

(4)在主要制器中的代碼處理

  YYViewController.m檔案

1 //
 2 //  YYViewController.m
 3 //  
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "MJExtension.h"
11 #import "YYnews.h"
12 #import "YYcell.h"
13 
14 #define YYIDCell @"cell"
15 
16 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
17 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
18 @property(nonatomic,strong)NSArray *news;
19 @end
20 
21 @implementation YYViewController
22 
23 #pragma mark-懶加載
24 -(NSArray *)news
25 {
26     if (_news==nil) {
27         _news=[YYnews objectArrayWithFilename:@"newses.plist"];
28     }
29     return _news;
30 }
31 - (void)viewDidLoad
32 {
33     [super viewDidLoad];
34     //注冊cell
35 //    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
36     [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
37     
38 }
39 
40 #pragma mark- UICollectionViewDataSource
41 //一共多少組,預設為1組
42 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
43 {
44     return 1;
45 }
46 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
47 {
48     return self.news.count;
49 }
50 
51 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
52 {
53     YYcell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath];
54     cell.news=self.news[indexPath.item];
55     return cell;
56 }
57 
58 #pragma mark-UICollectionViewDelegate
59 @end      

3.補充說明

(1)如果collectionCell是以xib的方式自定義的,那麼在注冊cell的時候,需要使用另外一種方式。

[self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];

[self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];

(2)在自定義xib的時候,使用collectionViewCell。并設定其辨別為cell.

iOS開發UI篇—無限輪播(新聞資料展示)

(3)列印檢視cell的利用情況

iOS開發UI篇—無限輪播(新聞資料展示)

繼續閱讀