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