前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS UICollectionView 从右向左对齐的实现

iOS UICollectionView 从右向左对齐的实现

作者头像
公众号iOS逆向
发布2021-07-29 16:11:38
2.4K0
发布2021-07-29 16:11:38
举报
文章被收录于专栏:iOS逆向与安全iOS逆向与安全

前言

iOS UICollectionView 从右向左对齐(Aligning right to left on UICollectionView)

实现原理:采用setTransform对其进行水平翻转

效果图

在这里插入图片描述

I 、UICollectionView 从右向左对齐

本文按钮的视图结构

  1. bottomV 内部采用UICollectionView进行布局。
  2. UICollectionViewCell内部包含子视图自定义按钮ERPbtn4Radius

1.1 核心步骤

首先,在创建UICollectionView时,对其进行了水平翻转:

代码语言:javascript
复制
         [_collectionView setTransform:CGAffineTransformMakeScale(-1,1)];

在更新UICollectionViewCell的数据模型时,对它的contentView上进行相同的水平翻转

代码语言:javascript
复制
- (void)setModel:(QCTCollectionModel *)model{
    _model = model;
    
    
    [self.contentView setTransform:CGAffineTransformMakeScale(-1,1)];
    
}

1.2 bottomV的用法

代码语言:javascript
复制
- (ERPBottom_operation_view4btn *)bottomV{
    if (nil == _bottomV) {
        ERPBottom_operation_view4btn *tmpView = [[ERPBottom_operation_view4btn alloc]init];
        _bottomV = tmpView;
        tmpView.backgroundColor = [UIColor whiteColor];
        [self addSubview:_bottomV];
        __weak __typeof__(self) weakSelf = self;

        [tmpView mas_makeConstraints:^(MASConstraintMaker *make) {
            
            
            make.bottom.equalTo(weakSelf);
            
            make.top.equalTo(weakSelf.tableView.mas_bottom);
            
            
            make.left.right.equalTo(weakSelf);
            
            make.height.mas_equalTo(kAdjustRatio(50));
            
            
        }];

        
    }
    return _bottomV;
}


1.3 bottomV的实现

  • h
代码语言:javascript
复制
#import "ERPBtnCollectionViewCell.h"
#import "QCTShadowView.h"
NS_ASSUME_NONNULL_BEGIN

@interface ERPBottom_operation_view4btn : QCTShadowView


@property (nonatomic, strong) NSMutableArray* models;
@property (nonatomic, copy) void (^block)(id sender);



@property (strong, nonatomic) UICollectionView *collectionView;
@property (strong, nonatomic) NSIndexPath *indexPath;


@end

  • m
代码语言:javascript
复制
#import "ERPBottom_operation_view4btn.h"

@implementation ERPBottom_operation_view4btn
- (instancetype)init
{
    self = [super init];
    if (self) {
        [self collectionView];
        [self setupshadowColor];//设置顶部阴影

    }
    return self;
}

- (void)setupshadowColor{
    
    UIView * tmpView = self;
    tmpView.layer.shadowColor = [UIColor blackColor].CGColor;//设置阴影的颜色
    tmpView.layer.shadowOpacity = 0.08;//设置阴影的透明度
    tmpView.layer.shadowOffset = CGSizeMake(kAdjustRatio(0), kAdjustRatio(-5));//设置阴影的偏移量,阴影的大小,x往右和y往下是正
    tmpView.layer.shadowRadius = kAdjustRatio(5);//设置阴影的圆角,//阴影的扩散范围,相当于blur radius,也是shadow的渐变距离,从外围开始,往里渐变shadowRadius距离

    
}

/**
 NSMutableArray

 */
- (void)setModels:(NSMutableArray*)models{
    _models = models;
    [self.collectionView reloadData];
}

- (UICollectionView *)collectionView {
    if (_collectionView == nil) {
        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
        // 2.设置整个collectionView的内边距
        //分别为上、左、下、右
                flowLayout.sectionInset = UIEdgeInsetsMake(0,kAdjustRatio(20),0,kAdjustRatio(20));
        //.设置每一行之间的间距
        flowLayout.minimumLineSpacing = 0;
        flowLayout.minimumInteritemSpacing = kAdjustRatio(10);
        //        flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH-3*kAdjustRatio(10))/3.0, self.optionsView.height);
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
        _collectionView.backgroundColor = [UIColor whiteColor];
        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.bounces = NO;
        
        _collectionView.dataSource = self;
        _collectionView.delegate = self;
        
        [_collectionView registerClass:[ERPBtnCollectionViewCell class] forCellWithReuseIdentifier:@"ERPBtnCollectionViewCell"];
        if (@available(iOS 11.0, *)) {
            _collectionView.contentInsetAdjustmentBehavior =  UIScrollViewContentInsetAdjustmentNever;
        } else {
            // Fallback on earlier versions
        }
        _collectionView.scrollEnabled = NO;
        //        UICollectionViewScrollDirectionHorizontal
        
        // 在UICollectionView上从右向左对齐(Aligning right to left on UICollectionView)
        //1、首先,在创建UICollectionView时,我对其进行了水平翻转:

//2、然后子类 UICollectionViewCell 在这里执行在其contentView上进行相同的水平翻转:
//[self.contentView setTransform:CGAffineTransformMakeScale(-1,1)];


         [_collectionView setTransform:CGAffineTransformMakeScale(-1,1)];
        
        
        

        
        
        __weak __typeof__(self) weakSelf = self;
        
        [self addSubview:_collectionView];
        [_collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.top.bottom.right.equalTo(weakSelf);
        }];
        
        
        
        
    }
    return _collectionView;
}


#pragma mark - UICollectionViewDelegate
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
    
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.models.count;
    

}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGSize size;
//    size = CGSizeMake(self.collectionView.width/ self.models.count, kAdjustRatio(k_cell_H));
    
    size = CGSizeMake(self.collectionView.width/ 5, kAdjustRatio(k_cell_H));
    

    
    return size;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ERPBtnCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ERPBtnCollectionViewCell" forIndexPath:indexPath];
    QCTCollectionModel *model = self.models[indexPath.row];
    cell.model =model;
    return cell;
}



@end

II、UICollectionViewCell的完整代码

UICollectionViewCell内部包含子视图自定义按钮ERPbtn4Radius

2.1 自定义UICollectionViewCell

  • h
代码语言:javascript
复制
@interface ERPBtnCollectionViewCell : UICollectionViewCell
@property (nonatomic,strong) QCTCollectionModel *model;

@property (weak, nonatomic) ERPbtn4Radius *btn;

@end

  • m
代码语言:javascript
复制
#import "ERPBtnCollectionViewCell.h"

@implementation ERPBtnCollectionViewCell

- (void)setSelected:(BOOL)selected{
    [super setSelected:selected];
    
}


- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self selfInit];
    }
    return self;
}
/**
 */
- (void)selfInit{
    self.layer.borderWidth = 0;
    self.layer.borderColor = rgb(255,255,255).CGColor;
    [self btn];
    
}


- (ERPbtn4Radius *)btn{
    if (!_btn) {
        ERPbtn4Radius *b = [[ERPbtn4Radius alloc]init];
        _btn = b;
        
        
        
        
        __weak __typeof__(self) weakSelf = self;

        
        [self.contentView addSubview:b];
        
        
        
        
        [b mas_makeConstraints:^(MASConstraintMaker *make) {
            
            //            make.height.mas_equalTo(kAdjustRatio(25));
//            make.width.mas_equalTo(kAdjustRatio(70));
            make.center.equalTo(weakSelf);
        }];
        [[b rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(__kindof UIControl * _Nullable x) {
           
            
                    if (weakSelf.model.block) {
                        weakSelf.model.block(weakSelf.model);
                    }

            
        }];

        

        
    }
    return _btn;
}



- (void)setModel:(QCTCollectionModel *)model{
    _model = model;
    
    
    [self.contentView setTransform:CGAffineTransformMakeScale(-1,1)];
    

    
    [self.btn setTitle:model.titleName forState:UIControlStateNormal];
    
    
    
    if(model.backgroundColor){
        
        self.backgroundColor = model.backgroundColor;

        
    }
    
    if(model.textColor){
        
        [self.btn setTitleColor:model.textColor forState:UIControlStateNormal];

        
    }
    

}



2.2 自定义按钮

代码语言:javascript
复制
@implementation ERPbtn4Radius

- (void)layoutSubviews{
    
    
    [super layoutSubviews];
    [self layoutIfNeeded];
    self.layer.cornerRadius = self.height*0.5;
    
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {


        make.bottom.offset(kAdjustRatio(-7));
        make.top.offset(kAdjustRatio(7));
        
        
        if(self.titleLabel.text.length<=2){
            
            make.left.offset(kAdjustRatio(24));

            make.right.offset(kAdjustRatio(-24));


            
        }else{
            
            make.left.offset(kAdjustRatio(12));

            make.right.offset(kAdjustRatio(-12));


        }
        



    }];

    
}

- (void)setHighlighted:(BOOL)highlighted{
    
    [super setHighlighted:highlighted];
    
    UIButton *_receiptBtn = self;

    
    if (highlighted) {
        
        
        _receiptBtn.layer.borderColor = ktabSelectedTextColor.CGColor;
        _receiptBtn.layer.borderWidth = 1;

        
        
    }else{
        
        _receiptBtn.layer.borderColor = rgb(231,231,231).CGColor;
        
        _receiptBtn.layer.borderWidth = 1;

        
    }
    
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        
        UIButton *_cancelBtn = self;
        
        _cancelBtn.layer.borderColor = rgb(231,231,231).CGColor;
        
        _cancelBtn.layer.borderWidth = 1;
        

        _cancelBtn.clipsToBounds = YES;
        
        _cancelBtn.titleLabel.font = kPingFangFont(12);
        

        
        [_cancelBtn setTitleColor:rgb(51,51,51) forState:UIControlStateNormal];

        [_cancelBtn setTitleColor:ktabSelectedTextColor forState:UIControlStateHighlighted];
        
    }
    return self;
}


see also

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 iOS逆向 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • I 、UICollectionView 从右向左对齐
    • 1.1 核心步骤
      • 1.2 bottomV的用法
        • 1.3 bottomV的实现
        • II、UICollectionViewCell的完整代码
          • 2.1 自定义UICollectionViewCell
            • 2.2 自定义按钮
            • see also
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档