封装了一个iOS水平方向动态宽度layout

我们有时候会遇到这样的情形,就是需要展示一些动态的标签,宽度是动态的,

水平方向是一行,其实这种情况还是比较容易处理的,只是一下子想不起来,

这里做了一个相关的需求,将思路和代码记录下来,方便后续的查找

效果图

思路:就是重写自定义layout的prepare layout 方法, 在里面计算每一个item 的frame

。通过[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:i inSection:0]] 方法创建 UICollectionViewLayoutAttributes 对象,然后个UICollectionViewLayoutAttributes 对象的frame赋值,这里要记录上一个UICollectionViewLayoutAttributes对象的x.及总的宽度。通过这句代码赋值frame

layoutAttributes.frame = CGRectMake(currentX, currentY, cellWidth, cellHeight);

然后将布局属性添加到一个数组中

在layoutAttributesForElementsInRect:方法中返回数组。

在 collectionViewContentSize 方法中返回宽度

还有一点,我们需要通过代理方式获取到单个item的宽度

  • (CGFloat)cellWidthForItemAtIndex:(NSInteger)index;

  • (CGFloat)footerWidthForFooterAtSection:(NSInteger)section;

代码

复制代码
@protocol LIUNumberCenterAssociationLayoutDelegate <NSObject>

- (CGFloat)cellWidthForItemAtIndex:(NSInteger)index;

- (CGFloat)footerWidthForFooterAtSection:(NSInteger)section;

@end

@interface LIUNumberCenterAssociationLayout : UICollectionViewFlowLayout

@property (nonatomic, weak) id <LIUNumberCenterAssociationLayoutDelegate> delegate;

@end

//
//  LIUNumberCenterAssociationLayout.m
//

#import "LIUNumberCenterAssociationLayout.h"

@interface LIUNumberCenterAssociationLayout ()

@property (nonatomic, strong) NSMutableArray<UICollectionViewLayoutAttributes *> *layoutAttributesArray;

@property (nonatomic, assign) CGSize contentSize;

@end

@implementation LIUNumberCenterAssociationLayout


- (instancetype)init {
    if (self = [super init]) {
        self.layoutAttributesArray = [NSMutableArray new];
        self.contentSize = CGSizeMake(16, 22); // 16是左边距
    }
    return self;
}

- (void)prepareLayout {
    [super prepareLayout];
    [self updateLayout];
}

- (CGSize)collectionViewContentSize {
    return self.contentSize;
}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.layoutAttributesArray;
}

#pragma mark - ---------- update ----------

- (void)updateLayout {
    // 移除旧的布局
    [self.layoutAttributesArray removeAllObjects];
    self.contentSize = CGSizeMake(8, 28); // 16是左边距
    // 计算新的布局
    NSInteger count = 0;
    if ([self.collectionView.dataSource respondsToSelector:@selector(collectionView:numberOfItemsInSection:)]) {
        count = [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:0];
    }
    CGFloat x = 0; 

    if (count > 0) {
        for (int i = 0; i < count; i++) {
            CGFloat currentX = x;
            CGFloat currentY = 0;
            CGFloat cellWidth = [self cellWidthForItemAtIndex:i];
            CGFloat cellHeight = 28;
            // 创建布局属性
            UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
            layoutAttributes.frame = CGRectMake(currentX, currentY, cellWidth, cellHeight);
            [self.layoutAttributesArray addObject:layoutAttributes];
            // 计算下一个item的x,以及布局更新结束检测
            if (i < count - 1) {
                x = currentX + cellWidth + 8; // 8是间距
            } else {
                x = currentX + cellWidth + 8; // 8是右边距
                self.contentSize = CGSizeMake(x, 0);
            }
        }
    }
    if ([self.delegate respondsToSelector:@selector(footerWidthForFooterAtSection:)]) {
        CGFloat footerWidth = [self.delegate footerWidthForFooterAtSection:0];
        UICollectionViewLayoutAttributes *layoutattribute = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]];
        layoutattribute.frame = CGRectMake(x, 0, footerWidth, 28);
        x += footerWidth ;
        self.contentSize = CGSizeMake(x, 28);
        [self.layoutAttributesArray addObject:layoutattribute];
    }
}

- (CGFloat)cellWidthForItemAtIndex:(NSInteger)index {
    CGFloat width = 0;
    if ([self.delegate respondsToSelector:@selector(cellWidthForItemAtIndex:)]) {
        width = [self.delegate cellWidthForItemAtIndex:index];
    }
    return width;
}

@end
相关推荐
fengyun28911 小时前
Omi录屏专家 Screen Recorder by Omi 屏幕录制Mac
macos·mac·录屏·屏幕录制
杂雾无尘1 小时前
开发者必看:如何在 iOS 应用中完美实现动态自定义字体!
ios·swift·apple
kymjs张涛3 小时前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
不学会Ⅳ5 小时前
Mac M芯片搭建jdk源码环境(jdk24)
java·开发语言·macos
与火星的孩子对话19 小时前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
九丝城主1 天前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
芳草萋萋鹦鹉洲哦1 天前
【vue3+tauri+rust】如何实现下载文件mac+windows
windows·macos·rust
恋猫de小郭2 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
点金石游戏出海2 天前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
旷世奇才李先生2 天前
Swift 安装使用教程
开发语言·ios·swift