前言
iOS UICollectionView 从右向左对齐(Aligning right to left on UICollectionView)
实现原理：采用setTransform对其进行水平翻转
效果图
I 、UICollectionView 从右向左对齐
本文按钮的视图结构
- bottomV 内部采用UICollectionView进行布局。
- UICollectionViewCell内部包含子视图自定义按钮ERPbtn4Radius
1.1 核心步骤
首先，在创建UICollectionView时，对其进行了水平翻转：
[_collectionView setTransform:CGAffineTransformMakeScale(-1,1)];
在更新UICollectionViewCell的数据模型时，对它的contentView上进行相同的水平翻转
- (void)setModel:(QCTCollectionModel *)model{ _model = model; [self.contentView setTransform:CGAffineTransformMakeScale(-1,1)]; }
1.2 bottomV的用法
- (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
#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
#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
@interface ERPBtnCollectionViewCell : UICollectionViewCell @property (nonatomic,strong) QCTCollectionModel *model; @property (weak, nonatomic) ERPbtn4Radius *btn; @end
- m
#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 自定义按钮
@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; }
