实现类似微信表情包横向滚动翻页的功能,运用UICollectionView,自定义UICollectionViewFlowLayout,cell左右排版 ,支持多组Cell实现。

结合:https://blog.csdn.net/qiuhaozhou/article/details/54582741

下面是我所要的样式的实现的代码:

.h文件如下:

#import <UIKit/UIKit.h>

@interface JYECircleFlowLayout : UICollectionViewFlowLayout

//  一行中 cell 的个数

@property (nonatomic,assign) NSUInteger itemCountPerRow;

//    一页显示多少行

@property (nonatomic,assign) NSUInteger rowCount;

/** 列间距 */

@property (nonatomic, assign) CGFloat columnSpacing;

/** 行间距 */

@property (nonatomic, assign) CGFloat rowSpacing;

/** collectionView的内边距 */

@property (nonatomic, assign) UIEdgeInsets edgeInsets;

/** 设置行列间距及collectionView的内边距 */

- (void)setColumnSpacing:(CGFloat)columnSpacing rowSpacing:(CGFloat)rowSpacing edgeInsets:(UIEdgeInsets)edgeInsets;

@end

.m文件

#import "JYECircleFlowLayout.h"

@interface JYECircleFlowLayout () <UICollectionViewDelegateFlowLayout>

@property (strong, nonatomic) NSMutableArray *allAttributes;

@end

@implementation JYECircleFlowLayout

#pragma mark - Public

- (void)setColumnSpacing:(CGFloat)columnSpacing rowSpacing:(CGFloat)rowSpacing edgeInsets:(UIEdgeInsets)edgeInsets

{

self.columnSpacing = columnSpacing;

self.rowSpacing = rowSpacing;

self.edgeInsets = edgeInsets;

}

#pragma mark - 重写父类方法

- (instancetype)init

{

self = [super init];

if (self) {

}

return self;

}

- (void)prepareLayout

{

[super prepareLayout];

self.allAttributes = [NSMutableArray array];

NSInteger sections = [self.collectionView numberOfSections];

for (int i = 0; i < sections; i++)

{

NSMutableArray * tmpArray = [NSMutableArray array];

NSUInteger count = [self.collectionView numberOfItemsInSection:i];

for (NSUInteger j = 0; j<count; j++) {

NSIndexPath *indexPath = [NSIndexPath indexPathForItem:j inSection:i];

UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];

[tmpArray addObject:attributes];

}

[self.allAttributes addObject:tmpArray];

}

}

/** 计算collectionView的滚动范围 */

- (CGSize)collectionViewContentSize

{

NSInteger sections = [self.collectionView numberOfSections];

return CGSizeMake(JYEScreenWidth*sections, 0);

}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

{

NSUInteger item = indexPath.item;

NSUInteger x;

NSUInteger y;

[self targetPositionWithItem:item resultX:&x resultY:&y];

NSUInteger item2 = [self originItemAtX:x y:y];

NSIndexPath *theNewIndexPath = [NSIndexPath indexPathForItem:item2 inSection:indexPath.section];

UICollectionViewLayoutAttributes *theNewAttr = [super layoutAttributesForItemAtIndexPath:theNewIndexPath];

theNewAttr.indexPath = indexPath;

return theNewAttr;

}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{

NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

NSMutableArray *tmp = [NSMutableArray array];

for (UICollectionViewLayoutAttributes *attr in attributes) {

for (NSMutableArray *attributes in self.allAttributes)

{

for (UICollectionViewLayoutAttributes *attr2 in attributes) {

if (attr.indexPath.item == attr2.indexPath.item) {

[tmp addObject:attr2];

break;

}

}

}

}

return tmp;

}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{

return YES;

}

// 根据 item 计算目标item的位置

// x 横向偏移  y 竖向偏移

- (void)targetPositionWithItem:(NSUInteger)item resultX:(NSUInteger *)x resultY:(NSUInteger *)y{

NSUInteger page = item/(self.itemCountPerRow*self.rowCount);

NSUInteger theX = item % self.itemCountPerRow + page * self.itemCountPerRow;

NSUInteger theY = item / self.itemCountPerRow - page * self.rowCount;

if (x != NULL) {

*x = theX;

}

if (y != NULL) {

*y = theY;

}

}

// 根据偏移量计算item

- (NSUInteger)originItemAtX:(NSUInteger)x y:(NSUInteger)y{

NSUInteger item = x * self.rowCount + y;

return item;

}

@end

原文地址:https://www.cnblogs.com/lrr0618/p/9517297.html

时间: 2024-11-01 15:36:22

实现类似微信表情包横向滚动翻页的功能,运用UICollectionView,自定义UICollectionViewFlowLayout,cell左右排版 ,支持多组Cell实现。的相关文章

★android开发--ListView+Json+异步网络图片加载+滚动翻页的例子(图片能缓存,图片不错乱)

例子中用于解析Json的Gson请自己Google下载 主Activity: package COM.Example.Main; import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.List; import java.util.Map; import COM.Example.Main.R; import COM.Example.Main.stringG

Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

微信小程序横向滚动

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" > <view class="acvitity" ></view> <view class="acvitity" ></view> <view class="acvitity" ></v

iOS 类似淘宝商品详情查看翻页效果的实现

基本思路: 1.设置一个 UIScrollView 作为视图底层,并且设置分页为两页 2.然后在第一个分页上添加一个 UITableView 并且设置表格能够上提加载(上拉操作即为让视图滚动到下一页) 3. 在第二个分页上添加一个 UIWebView 并且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页) ps:以上所提及UITableView与UIWebView 可以自行更改为其他滚动控件也是可行的 实现需要的第三方支持:MJRefresh 关于此第三方,可参考:githua 地址 请点击

WPF解决当ScrollViewer中嵌套ItemsControl时,不能使用鼠标来滚动翻页

1. ScrollViewer:滚动条容器,当内容超过指定的长度和宽度后,就会出现滚动条,而且可以使用鼠标中键来滚动, 简单例子如下: 1 <Window x:Class="ConnectScrollViewScrollingDemo.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.mic

移动端滚动翻页

<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-dete

微信怎么把一张图片变成表情包?微信制作表情包教程

微信是大家再熟悉不过的社交软件了,那么说起聊天,大家接触最多的是什么呢?那当然是表情包啊,表情包在聊天的过程中起到了非常重要的作用,而且大家看到别人发过来的表情包,一定偷偷添加了不少到自己的微信表情库了吧.可是这些表情包终究是别人使用过的,那么接下来就告诉大家怎么在微信里制作表情包. 注意,本次教程不是传统地制作表情包,而是教大家怎么让一张图片变成表情包,从而利于我们添加到表情库里,和在聊天过程轻松使用. (在开始操作前,记得把图片保存到本地中) 1.打开微信,进入其中一个好友或者群组的对话框,

Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

经过一个星期的折腾,终于做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这只是一个单独聊天表情的输入,以及聊天的效果实现.因为我没有写服务器,所以没有双方聊天的效果.主要是聊天中表情的选择,发送.表情翻页带有不同的效果.我在主要代码中都写了注释.下面看代码实现.附上本文源码,代码较多. 下载地址:点击 一.先看实现的效果图 二.调用接口以及设置MainActivity package com.example.activity; import java.util.Arra

iOS开发日记45-类似淘宝商品详情查看翻页效果的实现

今天博主有一个类似淘宝商品详情查看翻页效果的实现的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 1.使用第三方框架 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中