ios uicollectionview实现横向滚动

现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo
实现上我选择了使用UICollectionView ;用UICollectionViewFlowLayout来定制样式;下面看看具体实现

效果

实现上我选择了使用UICollectionView ;用UICollectionViewFlowLayout来定制样式;下面看看具体实现

具体实现

1、ViViewController.m 代码实现

#import "ViewController.h"
#import "CollModel.h"
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define SCREEN_RATE ([UIScreen mainScreen].bounds.size.width/375.0)
#import "imageCell.h"
#import "LHHorizontalPageFlowlayout.h"
static NSString * const imageC = @"imageCell";
static NSString * const moreImageC = @"imageCell";
static const NSInteger kItemCountPerRow = 5; //每行显示5个
static const NSInteger kRowCount = 3; //每页显示行数
static float imageHeight = 80;//cell 高度
@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property (nonatomic, strong) UICollectionView * collectionView;
@property (nonatomic, strong) NSMutableArray * modelArray;
@property (nonatomic, strong) UICollectionView * moreCollectionView;
@end
@implementation ViewController
- (void)viewDidLoad {
 [super viewDidLoad];
 NSArray *appArray = [[self getDict] objectForKey:@"dictInfo"];
 for (int i = 0; i < appArray.count; i++) {
  NSDictionary * appDic = appArray[i];
  CollModel * model = [[CollModel alloc]init];
  model.title = [appDic objectForKey:@"title"];
  model.url = [appDic objectForKey:@"url"];
  [self.modelArray addObject:model];
 }
 [self createCollectionView];
 [self createRightCollectionView];
}

- (NSDictionary *)getDict {
 NSString * string = @"{\"dictInfo\":[{\"title\":\"你好啊\",\"url\":\"1.jpeg\"},{\"title\":\"你好啊\",\"url\":\"2.jpeg\"},{\"title\":\"你好啊\",\"url\":\"3.jpeg\"},{\"title\":\"你好啊\",\"url\":\"4.jpeg\"},{\"title\":\"你好啊\",\"url\":\"5.jpeg\"},{\"title\":\"你好啊\",\"url\":\"6.jpeg\"},{\"title\":\"是很好\",\"url\":\"7.jpeg\"},{\"title\":\"你好啊\",\"url\":\"1.jpeg\"},{\"title\":\"你好啊\",\"url\":\"2.jpeg\"},{\"title\":\"你好啊\",\"url\":\"3.jpeg\"},{\"title\":\"你好啊\",\"url\":\"4.jpeg\"},{\"title\":\"你好啊\",\"url\":\"5.jpeg\"},{\"title\":\"你好啊\",\"url\":\"6.jpeg\"},{\"title\":\"是很好\",\"url\":\"7.jpeg\"},{\"title\":\"你好啊\",\"url\":\"1.jpeg\"},{\"title\":\"你好啊\",\"url\":\"2.jpeg\"},{\"title\":\"你好啊\",\"url\":\"3.jpeg\"},{\"title\":\"你好啊\",\"url\":\"4.jpeg\"},{\"title\":\"你好啊\",\"url\":\"5.jpeg\"},{\"title\":\"你好啊\",\"url\":\"6.jpeg\"},{\"title\":\"是很好\",\"url\":\"7.jpeg\"}]}";
 NSDictionary *infoDic = [self dictionaryWithJsonString:string];
 return infoDic;
}

-(NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString {
 if (jsonString == nil) {
  return nil;
 }
 NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
 NSError *err;
 NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:jsonData options:NSJSONReadingMutableContainers error:&err];
 if(err)
 {
  NSLog(@"json解析失败:%@",err);
  return nil;
 }
 return dic;
}

- (NSMutableArray *)modelArray {
 if (!_modelArray) {
  _modelArray = [NSMutableArray array];
 }
 return _modelArray;
}

- (void)createCollectionView{
 UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];
 layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 layout.minimumLineSpacing = 0;
 layout.minimumInteritemSpacing = 0;
 _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, imageHeight * SCREEN_RATE) collectionViewLayout:layout];
 _collectionView.tag = 11;
 _collectionView.backgroundColor = [UIColor colorWithRed:186 / 255.0 green:186 / 255.0 blue:186 / 255.0 alpha:0.9];
 _collectionView.dataSource = self;
 _collectionView.delegate = self;
 _collectionView.bounces = NO;
 _collectionView.alwaysBounceHorizontal = YES;
 _collectionView.alwaysBounceVertical = NO;
 _collectionView.showsHorizontalScrollIndicator = NO;
 _collectionView.showsVerticalScrollIndicator = NO;
 [self.view addSubview:_collectionView];
 [_collectionView registerClass:[imageCell class] forCellWithReuseIdentifier:imageC];
}

- (void)createRightCollectionView{

 LHHorizontalPageFlowlayout * layout = [[LHHorizontalPageFlowlayout alloc] initWithRowCount:kRowCount itemCountPerRow:kItemCountPerRow];
 [layout setColumnSpacing:0 rowSpacing:0 edgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
 layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 // UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
 // layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 layout.minimumLineSpacing = 0;
 layout.minimumInteritemSpacing = 0;
 _moreCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 300, [UIScreen mainScreen].bounds.size.width, imageHeight * SCREEN_RATE * kRowCount) collectionViewLayout:layout];
 _moreCollectionView.backgroundColor = [UIColor clearColor];
 _moreCollectionView.tag = 22;
 _moreCollectionView.dataSource = self;
 _moreCollectionView.delegate = self;
 _moreCollectionView.bounces = NO;
 _moreCollectionView.alwaysBounceHorizontal = YES;
 _moreCollectionView.alwaysBounceVertical = NO;
 _moreCollectionView.backgroundColor = [UIColor colorWithRed:186 / 255.0 green:186 / 255.0 blue:186 / 255.0 alpha:0.9];
 _moreCollectionView.showsHorizontalScrollIndicator = NO;
 _moreCollectionView.showsVerticalScrollIndicator = NO;
 [self.view addSubview:_moreCollectionView];
 [_moreCollectionView registerClass:[imageCell class] forCellWithReuseIdentifier:moreImageC];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
 return self.modelArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
 CollModel * model = self.modelArray[indexPath.row];
 imageCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:imageC forIndexPath:indexPath];
 cell.itemModel = model;
 return cell;
}

// 返回每个item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
 CGFloat CWidth = imageHeight * SCREEN_RATE;
 CGFloat CHeight = imageHeight * SCREEN_RATE;
 return CGSizeMake(CWidth, CHeight);
}

#pragma mark - UICollectionViewDelegate点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
 CollModel * model = self.modelArray[indexPath.row];
 NSLog(@"self.appModelArray----%@",model.title);
}

- (void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}

@end

2、自定义UICollectionViewFlowLayout

LHHorizontalPageFlowlayout.h 实现

#import <UIKit/UIKit.h>
@interface LHHorizontalPageFlowlayout : UICollectionViewFlowLayout
/** 列间距 */
@property (nonatomic, assign) CGFloat columnSpacing;
/** 行间距 */
@property (nonatomic, assign) CGFloat rowSpacing;
/** collectionView的内边距 */
@property (nonatomic, assign) UIEdgeInsets edgeInsets;

/** 多少行 */
@property (nonatomic, assign) NSInteger rowCount;
/** 每行展示多少个item */
@property (nonatomic, assign) NSInteger itemCountPerRow;

//固定宽度
@property (nonatomic, assign) CGFloat itemWidth; //设置完这个,就会自动计算列间距
//固定高度
@property (nonatomic, assign) CGFloat itemHight;//设置完这个,就会自动计算行间距

/** 所有item的属性数组 */
@property (nonatomic, strong) NSMutableArray *attributesArrayM;

/** 设置行列间距及collectionView的内边距 */
- (void)setColumnSpacing:(CGFloat)columnSpacing rowSpacing:(CGFloat)rowSpacing edgeInsets:(UIEdgeInsets)edgeInsets;
/** 设置多少行及每行展示的item个数 */
- (void)setRowCount:(NSInteger)rowCount itemCountPerRow:(NSInteger)itemCountPerRow;

#pragma mark - 构造方法
/** 设置多少行及每行展示的item个数 */
+ (instancetype)horizontalPageFlowlayoutWithRowCount:(NSInteger)rowCount itemCountPerRow:(NSInteger)itemCountPerRow;
/** 设置多少行及每行展示的item个数 */
- (instancetype)initWithRowCount:(NSInteger)rowCount itemCountPerRow:(NSInteger)itemCountPerRow;

@end

LHHorizontalPageFlowlayout.m 实现

#import "LHHorizontalPageFlowlayout.h"

@implementation LHHorizontalPageFlowlayout

#pragma mark - Public
- (void)setColumnSpacing:(CGFloat)columnSpacing rowSpacing:(CGFloat)rowSpacing edgeInsets:(UIEdgeInsets)edgeInsets
{
 self.columnSpacing = columnSpacing;
 self.rowSpacing = rowSpacing;
 self.edgeInsets = edgeInsets;
}

- (void)setRowCount:(NSInteger)rowCount itemCountPerRow:(NSInteger)itemCountPerRow
{
 self.rowCount = rowCount;
 self.itemCountPerRow = itemCountPerRow;
}

#pragma mark - 构造方法
+ (instancetype)horizontalPageFlowlayoutWithRowCount:(NSInteger)rowCount itemCountPerRow:(NSInteger)itemCountPerRow
{
 return [[self alloc] initWithRowCount:rowCount itemCountPerRow:itemCountPerRow];
}

- (instancetype)initWithRowCount:(NSInteger)rowCount itemCountPerRow:(NSInteger)itemCountPerRow
{
 self = [super init];
 if (self) {
  self.rowCount = rowCount;
  self.itemCountPerRow = itemCountPerRow;
 }
 return self;
}

#pragma mark - 重写父类方法
- (instancetype)init
{
 self = [super init];
 if (self) {
  [self setColumnSpacing:0 rowSpacing:0 edgeInsets:UIEdgeInsetsZero];
 }
 return self;
}

/** 布局前做一些准备工作 */
- (void)prepareLayout
{
 [super prepareLayout];
 if (self.attributesArrayM && self.attributesArrayM.count > 0) {
  [self.attributesArrayM removeAllObjects];
 }

 // 从collectionView中获取到有多少个item
 NSInteger itemTotalCount = [self.collectionView numberOfItemsInSection:0];

 // 遍历出item的attributes,把它添加到管理它的属性数组中去
 for (int i = 0; i < itemTotalCount; i++) {
  NSIndexPath *indexpath = [NSIndexPath indexPathForItem:i inSection:0];
  UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexpath];
  [self.attributesArrayM addObject:attributes];
 }
}

/** 计算collectionView的滚动范围 */
- (CGSize)collectionViewContentSize
{
 // 计算出item的宽度
 CGFloat itemWidth = (self.collectionView.frame.size.width - self.edgeInsets.left - self.itemCountPerRow * self.columnSpacing) / self.itemCountPerRow;
 // 从collectionView中获取到有多少个item
 NSInteger itemTotalCount = [self.collectionView numberOfItemsInSection:0];

 // 理论上每页展示的item数目
 NSInteger itemCount = self.rowCount * self.itemCountPerRow;
 // 余数(用于确定最后一页展示的item个数)
 NSInteger remainder = itemTotalCount % itemCount;
 // 除数(用于判断页数)
 NSInteger pageNumber = itemTotalCount / itemCount;
 // 总个数小于self.rowCount * self.itemCountPerRow
 if (itemTotalCount <= itemCount) {
  pageNumber = 1;
 }else {
  if (remainder == 0) {
   pageNumber = pageNumber;
  }else {
   // 余数不为0,除数加1
   pageNumber = pageNumber + 1;
  }
 }

 CGFloat width = 0;
 // 考虑特殊情况(当item的总个数不是self.rowCount * self.itemCountPerRow的整数倍,并且余数小于每行展示的个数的时候)
 if (pageNumber > 1 && remainder != 0 && remainder < self.itemCountPerRow) {
  width = self.edgeInsets.left + (pageNumber - 1) * self.itemCountPerRow * (itemWidth + self.columnSpacing) + remainder * itemWidth + (remainder - 1)*self.columnSpacing + self.edgeInsets.right;
 }else {
  width = self.edgeInsets.left + pageNumber * self.itemCountPerRow * (itemWidth + self.columnSpacing) - self.columnSpacing + self.edgeInsets.right;
 }

 // 只支持水平方向上的滚动
 return CGSizeMake(width, 150);
}

/** 设置每个item的属性(主要是frame) */
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
 // item的宽高由行列间距和collectionView的内边距决定
 CGFloat itemWidth = (self.collectionView.frame.size.width) / self.itemCountPerRow;
 CGFloat itemHeight = (self.collectionView.frame.size.height) / self.rowCount;

 NSInteger item = indexPath.item;
 // 当前item所在的页
 NSInteger pageNumber = item / (self.rowCount * self.itemCountPerRow);
 NSInteger x = item % self.itemCountPerRow + pageNumber * self.itemCountPerRow;
 NSInteger y = item / self.itemCountPerRow - pageNumber * self.rowCount;

 // 计算出item的坐标
 CGFloat itemX = itemWidth * x;
 CGFloat itemY = itemHeight * y;

 UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForItemAtIndexPath:indexPath];
 // 每个item的frame
 attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);

 return attributes;
}

/** 返回collectionView视图中所有视图的属性数组 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
 return self.attributesArrayM;
}

#pragma mark - Lazy
- (NSMutableArray *)attributesArrayM
{
 if (!_attributesArrayM) {
  _attributesArrayM = [NSMutableArray array];
 }
 return _attributesArrayM;
}
@end

4、自定义cell 和model

model

#import <Foundation/Foundation.h>

@interface CollModel : NSObject
@property (nonatomic,strong)NSString *imgUrl;
@property (nonatomic,strong)NSString *title;
@property (nonatomic,strong)NSString *url;
@end

cell 自定义

#import "imageCell.h"
// 屏幕比例
#define SCREEN_RATE  ([UIScreen mainScreen].bounds.size.width/375.0)

@interface imageCell()
@property (nonatomic, strong) UIImageView *itemIcon;
@end

@implementation imageCell

@synthesize itemModel = _itemModel;

- (instancetype)initWithFrame:(CGRect)frame{
 if (self = [super initWithFrame:frame]) {
  self.contentView.backgroundColor = [UIColor clearColor];
  [self initView];
 }
 return self;
}

- (void)initView{
 _itemIcon = [[UIImageView alloc] init];
 [self.contentView addSubview:_itemIcon];
 _itemIcon.backgroundColor = [UIColor clearColor];
 CGFloat iconWidth = 80 * SCREEN_RATE;
 _itemIcon.frame = CGRectMake(0, 0, iconWidth, iconWidth);
 _itemIcon.center = self.contentView.center;
}

- (CollModel *)itemModel{
 return _itemModel;
}

- (void)setItemModel:(CollModel *)itemModel
{
 if (!itemModel) {
  return;
 }
 _itemModel = itemModel;

 [self setCellWithModel:_itemModel];
}

- (void)setCellWithModel:(CollModel *)itemModel{
 [[NSOperationQueue mainQueue] addOperationWithBlock:^{
  _itemIcon.image = [UIImage imageNamed:itemModel.url];
 }];
}

下载:ios uicollectionview横向滚动

GitHub下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS使用UICollectionView实现横向滚动照片效果

    本文实例为大家分享了iOS使用UICollectionView实现横向滚动展示照片的具体代码,供大家参考,具体内容如下 这是Demo链接 效果图 思路 1. 界面搭建 界面的搭建十分简单,采用UICollectionView和自定义cell进行搭建即可. // ViewController.m // 下面使用到的宏和全局变量 #define ScreenW [UIScreen mainScreen].bounds.size.width #define ScreenH [UIScreen main

  • iOS Swift UICollectionView横向分页滚动,cell左右排版问题详解

    情况 Swift对于一门新的iOS编程语言,他的崛起是必然的,我们这群老程序员们学习新的技能也是必然的,不接受新技能将被这大群体无情的淘汰. 最近因为工作的需求,在做表情键盘时遇到一个问题,我用UICollectionView来布局表情,使用横向分页滚动,但在最后一页出现了如图所示的情况 情况分析图 是的,现在的item分布就是这个鬼样子 现在想要做的,就是将现在这个鬼样子变成另外一种样子,如图 那怎么办?只好重新布局item了 解决方案 我是自定了一个Layout(LXFChatEmotion

  • ios uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章.文章最后附有demo 实现上我选择了使用UICollectionView :用UICollectionViewFlowLayout来定制样式:下面看看具体实现 效果 实现上我选择了使用UICollectionView :用UICollectionViewFlowLayout来定制样式:下面看看具体实现 具体实现 1.ViViewController.m 代码实现 #import "ViewController

  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了iOS UICollectionView实现横向滑动的具体代码,供大家参考,具体内容如下 UICollectionView的横向滚动,目前我使用在了显示输入框的输入历史上: // // SCVisitorInputAccessoryView.m // 访客通行录入页面--访客姓名输入历史的InputAccessory #import "SCInputAccessoryView.h" #import "SCInputAccessoryCell.h"

  • JS实现table表格固定表头且表头随横向滚动而滚动

    先看一张效果图 思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop 5.滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动 当然还有很多可以优化的地方 我只是展示一个小思路 嘿嘿嘿 题外话 为啥用红色表头 因为显眼哇 哈哈 JS代码

  • JS实现图片横向滚动效果示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案

    原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrolling这个属性,苹果手机会使用硬件加速,从而促使页面滑动得更加流畅,然而也导致了页面出现空白的情况. 解决办法: 滚动之前,先设-webit-overflow-scrolling的属性值为auto,然后页面滚动完了,再设为touch即可. 实例: $("#id").css('-webkit-overflow-scrolling','auto'); $(

  • js文字横向滚动特效

    本文为大家分享了js文字横向滚动特效代码,具体实现内容如下: 页面布局 <div id="scroll_div" class="fl"> <div id="scroll_begin"> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_righ

  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

  • android开发之横向滚动/竖向滚动的ListView(固定列头)

    由于项目需要,我们需要一个可以横向滚动的,又可以竖向滚动的 表格.而且又要考虑大数据量(行)的展示视图.经过几天的研究终于搞定,做了一个演示.贴图如下:      好吧.让我们看思路是什么样的: 1. 上下滚动直接使用 listView来实现. 2. 左右滚动使用HorizontalScrollView,来处理滚动.我写一个类MyHScrollView继承 自它. 2.1 . ListView里的每行(row)分为 两部分,不滚动的和可滚动的区域.比如本demo的第一列,就是静态的.而后面的所有

  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

    demo01.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

随机推荐