很多小夥伴做開發的時候都會用到卡片檢視 如下面：
在這裡我列舉全部的實現程式碼，需要的朋友可以參考，也方便下自己下次使用。下面是完整的程式碼。
HJTCardView.h
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, HJTCardViewEffect) {
HJTCardViewEffectNone,
HJTCardViewEffectTranslation,
HJTCardViewEffectDepth,
HJTCardViewEffectCarousel,
HJTCardViewEffectCards
};
@interface HJTCardView : UIScrollView
@property (nonatomic) HJTCardViewEffect effect;
@property (nonatomic) CGFloat angleRatio;
@property (nonatomic) CGFloat rotationX;
@property (nonatomic) CGFloat rotationY;
@property (nonatomic) CGFloat rotationZ;
@property (nonatomic) CGFloat translateX;
@property (nonatomic) CGFloat translateY;
- (NSUInteger)currentPage;
- (void)loadNextPage:(BOOL)animated;
- (void)loadPreviousPage:(BOOL)animated;
- (void)loadPageIndex:(NSUInteger)index animated:(BOOL)animated;
@end
複製程式碼
HJTCardView.m
#import "HJTCardView.h"
#define RADIANS_TO_DEGREES(radians) ((radians) * (180.0 / M_PI))
#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)
@implementation HJTCardView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(!self){
return nil;
}
[self commonInit];
return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if(!self){
return nil;
}
[self commonInit];
return self;
}
- (void)commonInit
{
self.pagingEnabled = YES;
self.clipsToBounds = NO;
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
self.effect = HJTCardViewEffectNone;
}
- (void)setEffect:(HJTCardViewEffect)effect
{
self->_effect = effect;
switch (effect) {
case HJTCardViewEffectTranslation:
self.angleRatio = 0.;
self.rotationX = 0.;
self.rotationY = 0.;
self.rotationZ = 0.;
self.translateX = .25;
self.translateY = .25;
break;
case HJTCardViewEffectDepth:
self.angleRatio = .5;
self.rotationX = -1.;
self.rotationY = 0.;
self.rotationZ = 0.;
self.translateX = .25;
self.translateY = 0.;
break;
case HJTCardViewEffectCarousel:
self.angleRatio = .5;
self.rotationX = -1.;
self.rotationY = 0.;
self.rotationZ = 0.;
self.translateX = .25;
self.translateY = .25;
break;
case HJTCardViewEffectCards:
self.angleRatio = .5;
self.rotationX = -1.;
self.rotationY = -1.;
self.rotationZ = 0.;
self.translateX = .25;
self.translateY = .25;
break;
default:
self.angleRatio = 0.;
self.rotationX = 0.;
self.rotationY = 0.;
self.rotationZ = 0.;
self.translateX = 0.;
self.translateY = 0.;
break;
}
[self setNeedsDisplay];
}
- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat contentOffsetX = self.contentOffset.x;
//CGFloat contentOffsetY = self.contentOffset.y;
for(UIView *view in self.subviews){
CATransform3D t1 = view.layer.transform; // Hack for avoid visual bug
view.layer.transform = CATransform3DIdentity;
CGFloat distanceFromCenterX = view.frame.origin.x - contentOffsetX;
// CGFloat distanceFromCenterY = view.frame.origin.y - contentOffsetY;
view.layer.transform = t1;
distanceFromCenterX = distanceFromCenterX * 100. / CGRectGetWidth(self.frame);
// distanceFromCenterY = distanceFromCenterY * 100. / CGRectGetHeight(self.frame);
CGFloat angle = distanceFromCenterX * self.angleRatio;
CGFloat offset = distanceFromCenterX;
CGFloat translateX = (CGRectGetWidth(self.frame) * self.translateX) * offset / 100.;
CGFloat translateY = (CGRectGetWidth(self.frame) * self.translateY) * abs(offset) / 100.;
CATransform3D t = CATransform3DMakeTranslation(translateX, translateY, 0.);
view.layer.transform = CATransform3DRotate(t, DEGREES_TO_RADIANS(angle), self.rotationX, self.rotationY, self.rotationZ);
}
}
- (NSUInteger)currentPage
{
CGFloat pageWidth = self.frame.size.width;
float fractionalPage = self.contentOffset.x / pageWidth;
return lround(fractionalPage);
}
- (void)loadNextPage:(BOOL)animated
{
[self loadPageIndex:self.currentPage + 1 animated:animated];
}
- (void)loadPreviousPage:(BOOL)animated
{
[self loadPageIndex:self.currentPage - 1 animated:animated];
}
- (void)loadPageIndex:(NSUInteger)index animated:(BOOL)animated
{
CGRect frame = self.frame;
frame.origin.x = frame.size.width * index;
frame.origin.y = 0;
[self scrollRectToVisible:frame animated:animated];
}
@end
複製程式碼使用詳細例子
CardViewController.h
#import <UIKit/UIKit.h>
#import "HJTCardView.h"
@interface CardViewController : UIViewController<UIScrollViewDelegate>
@property (nonatomic,strong)HJTCardView *scrollView;
@end
複製程式碼CardViewController.m
#import "CardViewController.h"
#import "masonry.h"
#define kScreenW [UIScreen mainScreen].bounds.size.width
#define kScreenH [UIScreen mainScreen].bounds.size.height
@interface CardViewController ()<UIScrollViewDelegate>
{
//上方文字的陣列
NSMutableArray *topArray;
//下方文字的陣列
NSMutableArray *downArray;
//背景圖片陣列
NSMutableArray *imgArray;
NSInteger number;
//卡片
UIView *view;
//UIScrollView偏移
NSInteger offset;
}
@end
@implementation CardViewController
- (void)viewDidLoad {
[super viewDidLoad];
//關閉ScrollView自動調整 不然會出現檢視控制器上方空白的問題
self.automaticallyAdjustsScrollViewInsets = NO;
self.navigationController.navigationBar.hidden = YES;
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bgone@2x"]];
self.scrollView = [[HJTCardView alloc]initWithFrame:CGRectMake(0, 0, 200, 400)];
self.scrollView.center = CGPointMake(kScreenW/2, 300);
[self.view addSubview:self.scrollView];
self.scrollView.effect = HJTCardViewEffectCarousel;
self.scrollView.pagingEnabled = YES;
self.scrollView.delegate = self;
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeSystem];
myButton.frame = CGRectMake(0, 0, 80, 40);
myButton.layer.borderColor = [UIColor cyanColor].CGColor;
myButton.layer.borderWidth = 2;
myButton.layer.cornerRadius = 20;
myButton.clipsToBounds = YES;
[myButton setTintColor:[UIColor cyanColor]];
[myButton setBackgroundColor:[UIColor colorWithRed:225/255.0 green:225/255.0 blue:225/255.0 alpha:1]];
[myButton addTarget:self action:@selector(DoneTask) forControlEvents:UIControlEventTouchDown];
myButton.center = CGPointMake(kScreenW/2, kScreenH-100);
[myButton setTitle:@"完成任務" forState:UIControlStateNormal];
[self.view addSubview:myButton];
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(15, 20, 20, 20);
[backButton setBackgroundImage:[UIImage imageNamed:@"task-return@2x"] forState:UIControlStateNormal];
[backButton addTarget:self action:@selector(backPreviousPage) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:backButton];
UIButton *shareButton = [UIButton buttonWithType:UIButtonTypeSystem];
[shareButton addTarget:self action:@selector(doShare) forControlEvents:UIControlEventTouchDown];
[shareButton setBackgroundImage:[UIImage imageNamed:@"share-b@2x"] forState:UIControlStateNormal];
[self.view addSubview:shareButton];
[shareButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@20);
make.height.equalTo(@20);
make.centerY.equalTo(backButton.mas_centerY);
make.left.equalTo(backButton.mas_right).offset(20);
}];
topArray = [NSMutableArray arrayWithObjects:@"123rwefwefwerwefwefwfwe",@"456rwerwefwwfwefwrewrwerwe",@"erwerwerewtwegwwegwe789", nil];
downArray = [NSMutableArray arrayWithObjects:@"sajfqgiu2331wfgiqwubfijwbifuqbwiufbiqwfqwfrtertewwgewgwegwtgewgwegwegwerwewetwetweytwwefwewfeyyewyeryewrfqwrqwfdwqfwfwrfwerwerwerwerwrqwfqw",@"sajfqgiuwfgiqwubf4421ijwbifuqbwiufbiqwfqwfqwfqw",@"s555ajfqgiuwfgiqwubfijwbifuqbwiufbiqwfqwfqwfqw", nil];
imgArray = [NSMutableArray arrayWithObjects:@"green@2x",@"yellow@2x",@"purple@2x", nil];
for (int i = 0; i < 3; i ++) {
[self createCardWithColorAndtopTitle:topArray downTitle:downArray count:i imgs:imgArray];
}
}
-(void)backPreviousPage
{
[self.navigationController popViewControllerAnimated:NO];
}
-(void)doShare
{
}
//封裝上下內容 以及背景圖的設定方法
- (void)createCardWithColorAndtopTitle:(NSMutableArray *)TopArray downTitle:(NSMutableArray *)DownArray count:(NSInteger)count imgs:(NSMutableArray *)Imgs
{
CGFloat width = CGRectGetWidth(self.scrollView.frame);
CGFloat height = CGRectGetHeight(self.scrollView.frame);
CGFloat x = self.scrollView.subviews.count * width;
view = [[UIView alloc] initWithFrame:CGRectMake(x, 0, 240, 288)];
view.layer.cornerRadius = 8.;
UIImageView *pinkyView = [[UIImageView alloc]initWithFrame:CGRectMake(20, 29, 22, 22)];
pinkyView.image = [UIImage imageNamed:@"done@2x"];
view.tag = count+200;
[view addSubview:pinkyView];
UILabel *topLabel = [[UILabel alloc]init];
topLabel.numberOfLines = 0;
topLabel.textColor = [UIColor whiteColor];
[view addSubview:topLabel];
[topLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(pinkyView.mas_right).offset(10);
make.centerY.equalTo(pinkyView.mas_centerY);
make.width.equalTo(@(180));
make.height.equalTo(@(50));
}];
UILabel *downLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 220, 205)];
downLabel.center = CGPointMake(view.frame.size.width/2, 173);
downLabel.numberOfLines = 0;
downLabel.textColor = [UIColor lightGrayColor];
[view addSubview:downLabel];
view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:Imgs[count]]];
topLabel.text = TopArray[count];
downLabel.text =DownArray[count];
[self.scrollView addSubview:view];
self.scrollView.contentSize = CGSizeMake(x + width, height);
// offset = (NSInteger)(self.scrollView.contentOffset.x / [UIScreen mainScreen].bounds.size.width);
}
#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
// 計算當前在第幾頁
offset = (NSInteger)(self.scrollView.contentOffset.x / 200);
}
-(void)DoneTask
{
//通過UIScrollViewDelegate協議找到對應的View
if (offset==0) {
UIView *myView = [self.view viewWithTag:200];
myView.backgroundColor = [UIColor redColor];
}
else if (offset==1)
{
UIView *myView = [self.view viewWithTag:201];
myView.backgroundColor = [UIColor blueColor];
}
else if (offset==2)
{
UIView *myView = [self.view viewWithTag:202];
myView.backgroundColor = [UIColor cyanColor];
}
[self.navigationController popViewControllerAnimated:YES];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
複製程式碼