广告
返回顶部
首页 > 资讯 > 移动开发 >iOS UICollectionView实现横向滑动
  • 702
分享到

iOS UICollectionView实现横向滑动

iOS滑动 2022-05-25 12:05:16 702人浏览 独家记忆
摘要

本文实例为大家分享了iOS UICollectionView实现横向滑动的具体代码,供大家参考,具体内容如下 UICollectionView的横向滚动,目前我使用在了显示输入框的输

本文实例为大家分享了iOS UICollectionView实现横向滑动的具体代码,供大家参考,具体内容如下

UICollectionView的横向滚动,目前我使用在了显示输入框的输入历史上;


//
// SCVisitorInputAccessoryView.m
// 访客通行录入页面--访客姓名输入历史的InputAccessory

#import "SCInputAccessoryView.h"
#import "SCInputAccessoryCell.h"

#define SCHorizontalMargin 15.0f
#define SCVerticalMargin 10.0f

@interface SCInputAccessoryView () <UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;

/// 名字记录的数组
@property (nonatomic, strong) NSMutableArray *nameArray;

@end


@implementation SCInputAccessoryView

+ (instancetype)loadNibView {
 return [[[NSBundle mainBundle] loadNibNamed:[SCInputAccessoryView className] owner:self options:nil] objectAtIndex:0];
}

- (void)awakeFromNib {
 [super awakeFromNib];
 self.clipsToBounds = YES;
 self.collectionView.delegate = self;
 self.collectionView.dataSource = self;
 [self setupView];
}

- (void)setupView {

 /// 设置此属性为yes 不满一屏幕 也能滚动
 self.collectionView.alwaysBounceHorizontal = YES;
 self.collectionView.showsHorizontalScrollIndicator = NO;
 // 1.创建流水布局
 UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
 layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 self.collectionView.collectionViewLayout = layout;
 [self reGISterNibWithTableView];
}

#pragma mark - 代理方法 Delegate Methods
// 设置分区

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
 return 1;
}

// 每个分区上得元素个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
 return self.nameArray.count;
}

// 设置cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

 SCInputAccessoryCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([SCInputAccessoryCell class]) forIndexPath:indexPath];
 [cell refreshCellWithTitle:self.nameArray[indexPath.row]];
 return cell;
}

// 设置cell大小 itemSize:可以给每一个cell指定不同的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
 CGFloat height = 35.0f;
 CGFloat width = [self gainStringWidthWithString:self.nameArray[indexPath.row] font:15.0f height:height];
 return CGSizeMake(width, height);
}


// 设置UIcollectionView整体的内边距(这样item不贴边显示)
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
 // 上 左 下 右
 return UIEdgeInsetsMake(SCVerticalMargin, SCHorizontalMargin, SCVerticalMargin, SCHorizontalMargin);
}

// 设置minimumLineSpacing:cell上下之间最小的距离
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
 return SCHorizontalMargin;
}

// 设置minimumInteritemSpacing:cell左右之间最小的距离
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
 return SCHorizontalMargin;
}

// 选中cell的回调
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
 if (self.selectRowBlock) {
 self.selectRowBlock(indexPath.row, self.nameArray[indexPath.row]);
 }
}

#pragma mark - 对外方法 Public Methods
/// array数组里面放的元素 必须字符串类型的
- (void)refreshUIWithNameArray:(NSArray<NSString *> *)array {
 [self.nameArray removeAllObjects];
 [self.nameArray addObjectsFromArray:array];
 [self.collectionView reloadData];
}


#pragma mark - 内部方法 Private Methods
// 注册cell
- (void)registerNibWithTableView {
 [self.collectionView registerNib:[UINib nibWithNibName:[SCInputAccessoryCell className] bundle:nil] forCellWithReuseIdentifier:NSStringFromClass([SCInputAccessoryCell class])];
}

- (CGFloat)gainStringWidthWithString:(NSString *)string font:(CGFloat)font height:(CGFloat)height {

 if (string.length == 0) {
 return 0.0f;
 }

 CGSize maxSize = CGSizeMake(MAXFLOAT, height);
 CGSize realSize = [string boundingRectWithSize:maxSize
   options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
   attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:font]}
   context:nil].size;
 /// 左右各16
 return (realSize.width + 2 * (SCHorizontalMargin + 1.f));
}

#pragma mark - 点击/触碰事件 Action Methods

#pragma mark - 懒加载 Lazy Load

- (NSMutableArray *)nameArray {
 if (!_nameArray) {
 _nameArray = [NSMutableArray arrayWithCapacity:0];
 }
 return _nameArray;
}

@end

效果图:

Demo地址 :XGDevelopDemo

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

--结束END--

本文标题: iOS UICollectionView实现横向滑动

本文链接: https://www.lsjlt.com/news/30455.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS UICollectionView实现横向滑动
    本文实例为大家分享了iOS UICollectionView实现横向滑动的具体代码,供大家参考,具体内容如下 UICollectionView的横向滚动,目前我使用在了显示输入框的输...
    99+
    2022-05-25
    iOS 滑动
  • ios uicollectionview实现横向滚动
    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo 实现上我选择了使用UICollectionView ;用UICollec...
    99+
    2022-05-31
    ios uicollectionview 滚动
  • ios基于UICollectionView实现横向瀑布流
    在网上找了许久,一直没有发现有提供横向瀑布流效果的。在项目中用到了我就在垂直瀑布流的基础上,进行了修改,做出了横向瀑布流的效果。同时也对一些UICollectionView的属性进行...
    99+
    2022-05-27
    ios UICollectionView 瀑布流
  • iOS使用UICollectionView实现横向滚动照片效果
    本文实例为大家分享了iOS使用UICollectionView实现横向滚动展示照片的具体代码,供大家参考,具体内容如下 这是Demo链接 效果图 思路 1. 界面搭建 界面的搭建十...
    99+
    2022-05-28
    iOS UICollectionView 横向滚动
  • Android中实现水平滑动(横向滑动)ListView示例
    水平的ListView-HorizontalListView的使用 Android中ListView默认的是竖直方向的滑动,由于项目的需求,需要ListView是水平滑动的。有...
    99+
    2022-06-06
    平滑 listview Android
  • Android中RecyclerView实现横向滑动代码
     RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好。本文给大家介绍Andr...
    99+
    2022-06-06
    recyclerview Android
  • vueJS如何实现图片横向滑动
    本篇内容主要讲解“vueJS如何实现图片横向滑动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vueJS如何实现图片横向滑动”吧!vueJS实现图片横向滑动的方法:1、使用npm安装vue-aw...
    99+
    2023-06-25
  • 小程序的横向滑动
    小程序横向滑动可以通过使用小程序的scroll-view组件来实现,具体步骤如下: 在wxml文件中添加scroll-view组件,并设置属性horizontal为true,同时设置宽度和高度; 在样式文件中设置scroll-vie...
    99+
    2023-09-01
    微信小程序
  • iOS UICollectionView实现卡片效果
    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo 实现上我选择了使用UICollectionView ;用UICollec...
    99+
    2022-05-28
    iOS 卡片
  • iOS使用UICollectionView实现拖拽移动单元格
    目录一.介绍二.方法和步骤三.iOS9之后添加的API本文实例为大家分享了iOS开发UICollectionView拖拽移动单元格的具体代码,供大家参考,具体内容如下 一.介绍 iO...
    99+
    2022-11-13
    iOS拖拽移动单元格 iOS移动单元格 iOS拖拽单元格
  • iOS UICollectionView实现标签选择器
    近来,在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定,所以标签的显示长度就不定。为了实现效果,就使用了UICollectionView来实现了每行的标签数量不定、c...
    99+
    2022-05-15
    iOS 标签 选择器
  • 使用html5怎么实现一个横向滑动导航栏
    这篇文章给大家介绍使用html5怎么实现一个横向滑动导航栏,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首先引入scroll.jshtml部分<!-- 科目导航 --> &nb...
    99+
    2023-06-09
  • Android仿天猫横向滑动指示器功能的实现
    Android开发中会有很多很新奇的交互,比如天猫商城的首页头部的分类,使用的是GridLayoutManager+横向指示器实现的,效果如下图。 那对于这种效果要如何实现呢?最简...
    99+
    2022-11-13
    Android横向滑动指示器 Android横向滑动
  • iOS开发UICollectionView实现拖拽效果
    一.介绍 iOS9提供API实现单元格排序功能,使用UICollectionView及其代理方法。iOS9之后有自带方法可以实现该效果,只需添加长按手势,实现手势方法和调用iOS9的...
    99+
    2022-05-23
    iOS UICollectionView 拖拽
  • 横向滑动视图HorizontalScrollView精炼详解
    横向滑动视图(HorizontalScrollView)是一种Android中用于实现水平滑动效果的视图容器。它可以包含多个子视图,...
    99+
    2023-09-14
    详解
  • iOS怎么使用UICollectionView实现拖拽移动单元格
    这篇“iOS怎么使用UICollectionView实现拖拽移动单元格”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“iOS怎...
    99+
    2023-06-30
  • 微信小程序如何实现横向滑动scroll-view隐藏滚动条
    这篇文章主要介绍微信小程序如何实现横向滑动scroll-view隐藏滚动条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!wxml <scroll-view ...
    99+
    2022-10-19
    微信小程序
  • iOS实现背景滑动效果
    本文实例为大家分享了iOS实现背景滑动效果的具体代码,供大家参考,具体内容如下 1、在很多APP中,我们都可以看见那些特效绚丽的滑动选项条,那么如何才能够简单,快速的实现那样的效果呢...
    99+
    2022-11-13
    iOS 背景滑动
  • iOS实现无限滑动效果
    在看到这个标题的时候,相信大家心里肯定会想,无限循环轮播的博客已经满天飞了,好有必要写么。这里我想声明一下,这里的无线滑动,但是数据却不循环。 实现原理 由于业务的需求,需要有大量的...
    99+
    2022-11-13
    iOS 滑动
  • 如何实现横向滚动条
    今天就跟大家聊聊有关如何实现横向滚动条,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。html:<div class="nav_wrap">&...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作