首页 > 代码库 > IOS 类似于网易新闻首页新闻轮播的组件
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))); } }}
三、实现效果
（可左右循环滚动）
四、代码
发邮件到：480071411@qq.com
IOS 类似于网易新闻首页新闻轮播的组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。