其中整个页面分为三个小的版块，分别"推荐"，"热门"以及"收藏"。点击上方的文字后，下方的页面会切换到对应的版块，同时文字下方的蓝色导航条也会随着界面的切换跟着滑动。另外，当我们不通过按钮切换，用手势在页面上左右滑动时，导航条也会跟着一起滑动。功能大概就是这个样子。
下面简单分析下实现原理。首先在"发现"的下方应该有UIView，在UIView中放有3个UIButton。至于文字下方的导航条，可以用UILabel来做，宽度等于一个按钮的宽度，并将背景色改为蓝色。导航条下方的页面可以通过手势来左右滑动，首先想到的应该就是，这是一个UIScrollView，我们需要将scrollView的contentSize属性设置成三个页面宽度的大小，否则会无法滑动页面。然后在scrollView放上三个版块的页面，这个根据自身的业务情况而定，一般UITableView用得比较多。最后，怎样才能让页面滑动的时候导航条也跟着移动的？在Android中，一般的做法就是给scrollView中添加一个事件监听器，用来监听滑动事件，并在事件处理函数中执行响应的逻辑。在ios中没有事件监听这个概念，我们可以为scrollView设置它的代理，并在代理类中覆盖掉该方法：
设置了代理类后，代理类其实就是帮我们注册了相应的回调函数，每次scrollView只要有细微的滑动，该方法就会被调用。在方法中，需要做的就是获取scrollView当前的偏移量，然后根据这个偏移量来设定导航条的位置。
将scrollView与滚动条声明未全局变量，因为在其他方法中也会用到。
scrollView延迟初始化，在初始化时记得为其设置代理对象。
navLabel延迟初始化
将三个按钮添加到页面中，并为按钮添加点击事件处理函数。
将创建按钮的过程单独抽象出来
按钮点击后调用的函数，即切换页面
最后，在回调函数中根据scrollView的偏移量调整导航条的位置。
这是最终的效果图：
项目当中要实现一个电子档案，效果呢是类似小说翻页的效果。很简单，先来说一下实现思路
写一个用来接收你想展示信息的控件，如果只是文字展示，那就label，如果带图片什么的，那就自定义一个view
然后就是左右滑动的手势，在左右手势实现方法中做数据判断展示，加上动画效果就ok 了
1、在self.view 上创建label
2、添加左右手势
3、根据左右手势实现方法，给 label.text 数组判断赋值
4、执行翻页动画
- ( 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: self action: @selector (nextPage:)]
_fromRightSwip.direction = UISwipeGestureRecognizerDirectionLeft
[ self .view addGestureRecognizer:_fromRightSwip]
_fromLeftSwip= [[UISwipeGestureRecognizeralloc]initWithTarget: self action: @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"]
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）