美文网首页UI进价知识点其他一丢丢
UICollectionViewCell「居左显示」

UICollectionViewCell「居左显示」

作者: LuisX | 来源:发表于2016-05-06 13:31 被阅读4184次

    准备:

    1.UICollectionView Left Aligned Layout
    UICollectionView Left Aligned Layout

    工程目录:

    工程目录

    自定义UICollectionViewCell

    CollectionViewCell.h 创建UILabel属性,用来传值

    #import <UIKit/UIKit.h>
    @interface CollectionViewCell : UICollectionViewCell
    @property (nonatomic, strong) UILabel *titleLB;;
    @end
    

    CollectionViewCell.m 创建显示文本视图

    • 此处titleLB文字大小要和计算的文字大小相同
    #import "CollectionViewCell.h"
    @implementation CollectionViewCell
    
    - (instancetype)initWithFrame:(CGRect)frame{
        self = [super initWithFrame:frame];
        if (self) {
            self.backgroundColor = [UIColor colorWithRed:251/255.0 green:74/255.0 blue:71/255.0 alpha:1];
            self.layer.cornerRadius = 3;
            self.layer.masksToBounds = YES;
            self.layer.borderColor = [UIColor lightTextColor].CGColor;
            self.layer.borderWidth = 0.5;
            
            [self createSubViews];
        }
        return self;
    }
    
    - (void)createSubViews{
        _titleLB = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        //_titleLB.backgroundColor = [UIColor yellowColor];
        _titleLB.textColor = [UIColor whiteColor];
        _titleLB.textAlignment = NSTextAlignmentCenter;
        _titleLB.font = [UIFont systemFontOfSize:14];
        [self.contentView addSubview:_titleLB];
    }
    @end
    

    在ViewController中创建UICollectionView

    ViewController.h

    #import <UIKit/UIKit.h>
    @interface ViewController : UIViewController
    
    @end
    

    ViewController.m

    #import "ViewController.h"
    #import "UICollectionViewLeftAlignedLayout.h"
    #import "CollectionViewCell.h"
    @interface ViewController ()<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
    
    @end
    
    @implementation ViewController{
        NSArray *_allTextArr;
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        self.view.backgroundColor = [UIColor whiteColor];
        [self initailData];
        [self createMianView];
    }
    
    /**
     *  虚拟数据
     */
    - (void)initailData{
        _allTextArr = @[@"19朵玫瑰礼盒", @"19朵红玫瑰礼盒+百合", @"33朵红玫瑰礼盒", @"33朵红玫瑰礼盒(三世情缘)", @"33朵香槟玫瑰礼盒(生日推荐)", @"38朵红玫瑰心连心礼盒(一见倾心)", @"19朵红玫瑰礼盒(热卖推荐)", @"19朵粉玫瑰礼盒(热卖推荐)", @"19朵混色玫瑰礼盒"];
    }
    
    /**
     *  创建视图
     */
    - (void)createMianView{
        //居左约束
         UICollectionViewLeftAlignedLayout *leftAlignedLayout = [[UICollectionViewLeftAlignedLayout alloc] init];
        leftAlignedLayout.minimumLineSpacing = 10;                          //最小行间距
        leftAlignedLayout.minimumInteritemSpacing = 10;                     //最小列间距
        leftAlignedLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);  //网格上左下右间距
        
        //网格
        UICollectionView *mainCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:leftAlignedLayout];
        mainCollectionView.backgroundColor = [UIColor whiteColor];
        mainCollectionView.dataSource = self;
        mainCollectionView.delegate = self;
        [self.view addSubview:mainCollectionView];
        [mainCollectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    #pragma mark -UICollectionViewDataSource
    //item内容
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
        cell.titleLB.text = [NSString stringWithFormat:@"%@", [_allTextArr objectAtIndex:indexPath.row]];
        return cell;
    }
    
    //Section中item数量
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
        return _allTextArr.count;
    }
    
    #pragma mark -UICollectionViewDelegate
    //点击item触发方法
    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
        
    }
    
    #pragma mark -UICollectionViewDelegateFlowLayout
    //设置每个item的尺寸
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
        NSString *textString = [_allTextArr objectAtIndex:indexPath.row];
        CGFloat cell_width = [self settingCollectionViewItemWidthBoundingWithText:textString];
        return CGSizeMake(cell_width, 30);
    }
    
    //计算文字宽度
    - (CGFloat)settingCollectionViewItemWidthBoundingWithText:(NSString *)text{
        //1,设置内容大小  其中高度一定要与item一致,宽度度尽量设置大值
        CGSize size = CGSizeMake(MAXFLOAT, 20);
        //2,设置计算方式
        //3,设置字体大小属性   字体大小必须要与label设置的字体大小一致
        NSDictionary *attributeDic = @{NSFontAttributeName: [UIFont systemFontOfSize:14]};
        CGRect frame = [text boundingRectWithSize:size options: NSStringDrawingUsesLineFragmentOrigin attributes:attributeDic context:nil];
        //4.添加左右间距
        return frame.size.width + 15;
    }
    

    运行效果:

    效果图

    相关文章

      网友评论

      • 那一浅笑:不得不说,是真牛B啊!!!!!!!!!!!!!
      • TheHunz:ios9一下闪退
      • 天月_将白:在UICollectionViewLeftAlignedLayout.m文件中的实现@implementation UICollectionViewLeftAlignedLayout里加入代码- (void)prepareLayout
        {
        [super prepareLayout];

        self.sectionInset = UIEdgeInsetsMake(25, 0, 0, 0);
        self.headerReferenceSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 25);
        self.minimumInteritemSpacing = 15;
        }可以解决问题
      • 天月_将白:帮了大忙了,不过有个小问题,用了这个leftLayout之后headerView没了
      • 波多多:写的可以,不过如果能适应高度就好了,有些文字一行显示不下!
        LuisX:@波多多 你可以把高度调整一下,自己做一下DIY:stuck_out_tongue_winking_eye:
      • 蒲公英少年:有用,刚好解决问题
      • 花前月下:666啊兄弟,正好解决问题。
        PGOne爱吃饺子:哥们,这个解决了你的什么问题啊
      • 大生活家:感谢,有用到
      • 小学生课代表:太感谢了,解决我遇到一大难题呀
        LuisX:@iOS_FonChY :stuck_out_tongue_winking_eye:解决就好!

      本文标题:UICollectionViewCell「居左显示」

      本文链接:https://www.haomeiwen.com/subject/jsedrttx.html