網易新聞客戶端是門戶裡面做得比較好的，現在我們來開發一個IOS類似新聞客戶端首頁的新聞輪播組件，後面帶效果圖。

一、需求分析

1、可橫向循環滾動新聞圖片

2、滾動到對應圖片時顯示新聞標題

3、每張新聞圖片可點擊

4、有pageControl提示

5、具有控件的擴展能力

二、設計實現

1、顯示圖片使用SDWebImage第三方庫，可緩存圖片、通過url異步加載圖片

2、使用一個橫向滾動的UITableView實現循環滾動

3、使用一個黑色半透明的背景、白色文字的UILabel顯示標題

4、定義每個新聞的數據結構：

/** @brief 默認使用本地地址，如果本地沒有的話，使用網絡圖片 */
 
@interface PhotoNewsModel : NSObject
 
/** @brief 加載時展示的圖片*/
@property (nonatomic, strong) UIImage *loadingImage;
 
/** @brief 圖片本地的地址 */
@property (nonatomic, strong) NSString *localPath;
 
/** @brief 新聞圖片的地址 */
@property (nonatomic, strong) NSString *photoUrl;
 
/** @brief 新聞標題 */
@property (nonatomic, strong) NSString *title;
 
 
@end

 

5、代理協議：

@protocol UIPhotoNewsViewDelegate <NSObject>
 
/**
 *  取得多少條圖片新聞
 *
 *  @param photoNews 控件自身
 *
 *  @return 圖片新聞的個數
 */
- (NSUInteger)photoNewsCount:(UIPhotoNewsView *)photoNews;
 
 
 
/**
 *  返回第幾個圖片新聞的model
 *
 *  @param photoNews 控件自身
 *  @param index
 *
 *  @return 返回描述圖片新聞的model
 */
- (PhotoNewsModel *)photoNews:(UIPhotoNewsView *)photoNews
            photoModelAtIndex:(NSUInteger)index;
 
 
 
/**
 *  圖片新聞點擊的回調
 *
 *  @param photoNews 控件自身
 *  @param model     點擊新聞對應的model
 */
- (void)photoNews:(UIPhotoNewsView *)photoNews
    photoDidClick:(PhotoNewsModel *)model;
 
 
 
 
@end

6、循環滾動如何實現

a)將要展示的數據復制一份相當於 1、2、3、4|1、2、3、4

b)數據初始化時，定位到第二份的1這裡

c)滾動到前面的1或者2時，設置跳轉到第二份的1和2

d)關鍵代碼：

- (void)makeCycleScroll
{
    if(self.realCount >= 2)
    {
        CGFloat currentOffsetX = self.contentTableView.contentOffset.x;
        CGFloat currentOffSetY = self.contentTableView.contentOffset.y;
        CGFloat contentHeight  = self.contentTableView.contentSize.height;
        
        if (currentOffSetY < (contentHeight / 8.0)) {
            self.contentTableView.contentOffset = CGPointMake(currentOffsetX,(currentOffSetY + (contentHeight/2)));
        }
        if (currentOffSetY >= ((contentHeight * 6)/ 8.0)) {
            self.contentTableView.contentOffset = CGPointMake(currentOffsetX,(currentOffSetY - (contentHeight/2)));
        }
    }
}

三、實現效果

(可左右循環滾動)