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)));
        }
    }
}

　　

 

三、實現效果

　　（可左右循環滾動）

　　

 

四、代碼

　　http://pan.baidu.com/s/1sjqJsK1 提取碼：xvfl