2. 程式人生 > 程式設計 >ios uicollectionview實現橫向滾動

ios uicollectionview實現橫向滾動

阿新 • • 發佈：2020-03-25

現在使用卡片效果的app很多，之前公司讓實現一種卡片效果，就寫了一篇關於實現卡片的文章。文章最後附有demo
實現上我選擇了使用UICollectionView ；用UICollectionViewFlowLayout來定製樣式；下面看看具體實現

效果

ios uicollectionview實現橫向滾動

實現上我選擇了使用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\"},\"url\":\"3.jpeg\"},\"url\":\"4.jpeg\"},\"url\":\"5.jpeg\"},\"url\":\"6.jpeg\"},{\"title\":\"是很好\",\"url\":\"7.jpeg\"},\"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)];
 layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 // UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
 // layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 layout.minimumLineSpacing = 0;
 layout.minimumInteritemSpacing = 0;
 _moreCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0,300,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,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下載

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

ios uicollectionview實現橫向滾動

現在使用卡片效果的app很多，之前公司讓實現一種卡片效果，就寫了一篇關於實現卡片的文章。文章最後附有demo

iOS UICollectionView實現橫向滑動

本文例項為大家分享了iOS UICollectionView實現橫向滑動的具體程式碼，供大家參考，具體內容如下

iOS UICollectionView實現標籤選擇器

近來，在專案中需要實現一個類似興趣標籤的選擇器。由於標籤的文字長度不定，所以標籤的顯示長度就不定。為了實現效果，就使用了UICollectionView來實現了每行的標籤數量不定、cell的寬度自適應的效果。先在此分享出

iOS UICollectionView實現卡片效果

現在使用卡片效果的app很多，之前公司讓實現一種卡片效果，就寫了一篇關於實現卡片的文章。文章最後附有demo

uniapp實現橫向滾動選擇日期

本文例項為大家分享了uniapp實現橫向滾動選擇日期的具體程式碼，供大家參考，具體內容如下

RecyclerView實現橫向滾動效果

本文例項為大家分享了RecyclerView實現橫向滾動效果的具體程式碼，供大家參考，具體內容如下

vue使用better-scroll實現橫向滾動的方法例項

一、滾動的實現原理 better-scroll的滾動原理和瀏覽器原生滾動原理是一樣的，當子盒子的高度大於父盒子的高度，就會出現縱向滾動；同理，如果子盒子的寬度大於父盒子的寬度，那麼就會出現橫向滾動。

Vue中利用better-scroll元件實現橫向滾動功能

About 最近在學習vue的過程中，仿照去哪兒網的移動端寫了個小專案，旨在實踐和鞏固基礎知識，但是今天發現去哪兒的首頁上有一個元件使用者體驗較差，即一個橫向列表使用瀏覽器的原生滾動實現，列表滾動起來較為生澀

自定義UICollectionViewFlowLayout實現橫向滾動時，離中心點越近，item越大，離中心店越遠，item越小的效果

控制器程式碼 class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad()

iOS UICollectionView實現動態標籤（單選、多選）

專案中我們經常會遇到標籤動態展示的問題，有時我們也需要實現單選或者多選的功能

小程式 scroll-view實現橫向滾動的2種方法

<template> <view class=\"content\"> <scroll-view scroll-x=\"true\"> <view class=\"tabs\">

uni-app實現橫向滾動

借鑑部落格： https://blog.csdn.net/qq_36436407/article/details/115002550 成功後效果： 實現程式碼：

transition 平移屬性實現 橫向整屏 滾動

需要達到效果: 橫向展示商品,預設一行展示5個,超出隱藏,頁面一開啟,該模組自動橫向滾動

橫向滾動tab實現

<style> .app-toppic-fixed { position: fixed; top: 56px; left: 0; right: 0; z-index: 1020; background-color: #ffffff;

React 中實現滾輪觸發的橫向滾動

技術標籤：前端ReactJS 在要滾動的元件上新增 onWheel事件回撥函式yWheel <div ref={this.container} className={style.container} onWheel={this.yWheel}>

vue實現公告文字橫向滾動

技術標籤：專案 文章目錄 前言一、需求？二、思路和實現1.可以通過改變元素的marginLeft值和計時器來實現滾動2.也可以通過改變元素的left值和計時器來實現滾動

使用js實現橫向文字重複滾動，超簡單！！

技術標籤：HTML前端JQuery前端jsJavaScriptjavascripthtml 背景 因為公司系統需要實現橫向文字滾動效果，所以自己手動寫了一個，沒用網上的，感覺網上的囉嗦繁瑣，擴充套件性還不行，喜歡的話點贊收藏吧，下面是

Vue實現跑馬燈樣式文字橫向滾動

本文例項為大家分享了實現跑馬燈樣式文字橫向滾動的具體程式碼，供大家參考，具體內容如下

兩行IOS程式碼實現輪播圖

此篇文章講述IOS輪播圖，僅需要幾步就可以完成，很簡單了。 第一步：利用cocopods匯入KJBannerView元件

JS實現橫向輪播圖（初級版）

本文例項為大家分享了JS實現橫向輪播圖的具體程式碼，供大家參考，具體內容如下