UICollectionViewFlowLayout根據數據寬度左對齊實現

由于功能原因想實現根據長度左對齊并且超過邊距換行輸出的效果(效果如圖)


xiaoguo.png

以下是實現效果的代碼

#import <UIKit/UIKit.h>

@protocol SearchOfFlowLayoutDelegate <NSObject>

// 獲取item高度
- (CGFloat)widthForItemIndexPath:(NSIndexPath *)indexPath AndCollectioinView:(UICollectionView *)collectionView;

@end

@interface SearchOfFlowLayout : UICollectionViewFlowLayout

@property (nonatomic, assign) id<SearchOfFlowLayoutDelegate>delegate;

// item 間距
@property (nonatomic,assign)CGFloat insertItemSpacing;

@end
#import "SearchOfFlowLayout.h"

#define WIDTH [UIScreen mainScreen].bounds.size.width

@interface SearchOfFlowLayout ()
//臨時保存item的總寬度
@property (nonatomic, assign) CGFloat columnWidth;
//記錄一共有多少行
@property (nonatomic, assign) NSInteger columnNumber;
//保存每一個item x y w h
@property (nonatomic, retain) NSMutableArray *arrForItemAtrributes;
//保存item總數
@property (nonatomic,assign) NSUInteger numberOfItems;
// 保存每個item的X值
@property (nonatomic, assign) CGFloat xForItemOrigin;
// 保存每個item的Y值
@property (nonatomic, assign) CGFloat yForItemOrigin;

@end


@implementation SearchOfFlowLayout

// 準備布局
- (void)prepareLayout {
    
    [super prepareLayout];
    
    self.columnWidth = self.insertItemSpacing;
    self.columnNumber = 0;
    self.arrForItemAtrributes = [NSMutableArray array];
    self.xForItemOrigin = self.insertItemSpacing;
    self.yForItemOrigin = self.insertItemSpacing;
    
    //獲取item的個數
    self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
    /** 為每個item確定LayoutAttribute屬性,同時將這些屬性放入布局數組中 */
    for(int i = 0;i < self.numberOfItems;i++)
    {
        /** 確定每個Item的indexPath屬性 */
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        /** 確定每個item的origin的x,y值 */
        /** 確定每個Item的frame屬性,同時確定了每個Item的LayoutAttribute,放入到了布局屬性數組中 */
        [self setFrame:indexPath];
    }

}
// 計算contentView的大小
- (CGSize)collectionViewContentSize
{
    // 獲取collectionView的Size
    CGSize contentSize = self.collectionView.frame.size;
    // 最大高度+bottom
    contentSize.height = self.insertItemSpacing + (self.itemSize.height + self.insertItemSpacing) * (self.columnNumber + 1);
    //設置collectionView的大小自適應
    self.collectionView.frame = CGRectMake(self.collectionView.frame.origin.x, self.collectionView.frame.origin.y, contentSize.width, contentSize.height);
   return contentSize;
}

// 返回每一個item的attribute
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 返回每一個item的Attribute
    return self.arrForItemAtrributes;
}

// 設置屬性和frame
- (void)setFrame:(NSIndexPath *)indexPath
{
    // 設置Item LayoutAttribute 屬性
    UICollectionViewLayoutAttributes *layoutArr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    // 獲取item的高
    CGFloat itemWidth = 0;
    if (_delegate && [_delegate respondsToSelector:@selector(widthForItemIndexPath:AndCollectioinView:)]) {
        // 使用代理方法獲取item的高
        itemWidth = [_delegate widthForItemIndexPath:indexPath AndCollectioinView:self.collectionView];
    }
    //之前item的寬總和 + 當前item的寬 + 間距 < 屏幕總款
    if (self.columnWidth + itemWidth + self.insertItemSpacing < WIDTH) {
        //設置x
        self.xForItemOrigin = self.columnWidth;
        self.columnWidth += itemWidth + self.insertItemSpacing;
    }else {
        self.xForItemOrigin = self.insertItemSpacing;
        //如果寬度超過屏幕從新計算寬度
        self.columnWidth = itemWidth + self.insertItemSpacing * 2;
        self.columnNumber++;
    }
    // 計算是第幾行 乘以高度
    self.yForItemOrigin = self.insertItemSpacing + (self.itemSize.height + self.insertItemSpacing) * self.columnNumber;
    
    // 設置frame
    layoutArr.frame = CGRectMake(self.xForItemOrigin, self.yForItemOrigin, itemWidth, self.itemSize.height);
    // 放入數組
    [self.arrForItemAtrributes addObject:layoutArr];
}
@end

以下是實現代理的方法 根據文本的長度判斷文本的寬度, 根據tag控制是哪個collection

- (CGFloat)widthForItemIndexPath:(NSIndexPath *)indexPath AndCollectioinView:(UICollectionView *)collectionView{
    if (collectionView.tag == 1001) {
        NSString *content = self.hotTagArr[indexPath.item];
        CGRect itemFrame = [content boundingRectWithSize:CGSizeMake(0, 20) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:17]} context:nil];
        
        CGFloat width = itemFrame.size.width + 10;
        return width;
    }
    return 10;
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,090評論 25 708
  • 原以為我很堅強 能夠應對生活的無常 ...
    葡萄樹下的綠刺猬閱讀 319評論 0 0
  • 拿起手機,愛奇藝推送過來一紀錄片《生門》,真實記錄四個女人,四個家庭生養孩子的過程,糾結著,還是打開看了。 百度上...
    宥奇跡閱讀 1,019評論 0 1