仿於網易新聞用戶端首頁新聞輪播的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)));
        }
    }
}

三、實現效果

(可左右迴圈滾動)