项目当中要实现一个电子档案,效果呢是类似小说翻页的效果。很简单,先来说一下实现思路
写一个用来接收你想展示信息的控件,如果只是文字展示,那就label,如果带图片什么的,那就自定义一个view
然后就是左右滑动的手势,在左右手势实现方法中做数据判断展示,加上动画效果就ok 了
1、在self.view 上创建label
2、添加左右手势
3、根据左右手势实现方法,给 label.text 数组判断赋值
4、执行翻页动画
一、声明属性
@interface FilesViewController ()
@property(nonatomic, strong) NSArray *arr;
@property(nonatomic, strong) UILabel *label;
@property(nonatomic, strong) UIView *labelView;
@property(nonatomic, strong) UISwipeGestureRecognizer *fromRightSwip;
@property(nonatomic, strong) UISwipeGestureRecognizer *fromLeftSwip;
@property(nonatomic, assign) NSInteger count;
@property(nonatomic, strong) UIBarButtonItem *nextBtn;
@property(nonatomic, strong) UIBarButtonItem *forwardBtn;
@end
二、创建label,手势
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
_arr = @[@"11111", @"22222", @"33333",@"44444",@"55555"];
[self buildLable];
[self configTapGes];
_count=0;
}
#pragma mark- label
- (void)buildLable {
_labelView= [[UIViewalloc]init];
[self.view addSubview:_labelView];
[_labelView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view.mas_centerX);
make.centerY.equalTo(self.view.mas_centerY);
make.width.mas_offset(WIDTH-40);
make.height.mas_offset(500);
}];
_labelView.backgroundColor = [UIColor orangeColor];
_label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, WIDTH-40, 500)];
_label.backgroundColor = [UIColor grayColor];
_label.numberOfLines = 0;
_label.text = [_arr objectAtIndex:0];
[self.labelView addSubview:_label];
}
#pragma mark- 手势
- (void)configTapGes {
_fromRightSwip= [[UISwipeGestureRecognizeralloc]initWithTarget:selfaction:@selector(nextPage:)];
_fromRightSwip.direction = UISwipeGestureRecognizerDirectionLeft;
[self.view addGestureRecognizer:_fromRightSwip];
_fromLeftSwip= [[UISwipeGestureRecognizeralloc]initWithTarget:selfaction:@selector(forwardPage:)];
_fromLeftSwip.direction = UISwipeGestureRecognizerDirectionRight;
[self.view addGestureRecognizer:_fromLeftSwip];
}
三、手势实现方法及执行动画
#pragma mark- 下一页按钮响应事件
- (void)nextPage:(UIButton*)btn {
if(_count<_arr.count-1) {
_label.text= [_arrobjectAtIndex:_count+1];
NSString*subtypeString;
subtypeString =kCATransitionFromRight;
[self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:_labelView];
_count=_count+1;
}else{
_count=_arr.count-1;
// [self showAlert:@"已经是最后一页"];
}
NSLog(@"下一页:%ld", (long)_count);
}
#pragma mark- 上一页按钮响应事件
- (void)forwardPage:(UIButton*)btn {
if(_count>0) {
_label.text= [_arrobjectAtIndex:_count-1];
NSString*subtypeString;
subtypeString =kCATransitionFromLeft;
[self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:_labelView];
_count=_count-1;
}else{
_count=0;
// [self showAlert:@"已经是第一页"];
}
NSLog(@"上一页:%ld", (long)_count);
}
#pragma CATransition动画实现
/**
* 动画效果实现
*
* @param type 动画的类型 在开头的枚举中有列举,比如 CurlDown//下翻页,CurlUp//上翻页
,FlipFromLeft//左翻转,FlipFromRight//右翻转 等...
* @param subtype 动画执行的起始位置,上下左右
* @param view 哪个view执行的动画
*/
- (void)transitionWithType:(NSString*) typeWithSubtype:(NSString*) subtypeForView: (UIView*) view {
CATransition *animation = [CATransition animation];
animation.duration=0.7f;
animation.type= type;
if(subtype !=nil) {
animation.subtype= subtype;
}
animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
[view.layeraddAnimation:animationforKey:@"animation"];
}
网友评论