前言
iOS UICollectionView 从右向左对齐(Aligning right to left on UICollectionView)
实现原理：采用setTransform对其进行水平翻转
效果图
在这里插入图片描述
I 、UICollectionView 从右向左对齐
本文按钮的视图结构
- bottomV 内部采用UICollectionView进行布局。
- 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
#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 自定义按钮
代码语言：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;
}
