登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

类似优酷,网易云音乐导航条,代码足够简单,使用足够...

[复制链接]
来自: ppa 分类: iOS精品源码 上传时间: 2016-10-11 14:16:45

项目介绍:

滚动菜单是app展示数据常用的控件,使用频率极高,实现的过程就是对UIScrollView的应用,大体都是顶部一个标题滚动视图,下边一个用来铺显示数据的View的滚动视图,然后实现联动效果,基本差不多了。

需求分析

  • 从笔者安装的应用上观察,大体实现要功能标题下划线自适应菜单的半透明左右的不同按钮(参考优酷,网易云音乐)。

屏幕快照 2016-10-11 10.31.31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

屏幕快照 2016-10-11 10.26.41.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
屏幕快照 2016-10-11 10.26.53.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

实现

  • 总思想

    将标题视图,展示数据的视图放到一个View 上,View 来管理不同的子视图的滑动,子视图由各自的控制管理,要做的就是封装好这个视图,名字就叫HYPageView。
    

屏幕快照 2016-10-11 10.53.26.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
简单的说就是把控制器的View放到scrollView,滑到某一页,就加载某一页的控制器,并且将控制器的View放到这一页。需要注意的是,创建的控制器必要强引用,因为局部变量会导致"控制器死掉"造成控制器里边所有事件无法响应,比如tabView没有Cell,Button点上去没反应等等,都是因为控制器从内存释放了。

  • 下划线自适应

HYPageView00.gif?imageMogr2/auto-orient/strip)

就是一边滑,一边动,根据当前滑动的位置改变线条的位置,线条的长度也总是趋于下一个位置的长度,这种很细节的东西吸引了笔者,如何实现呢?

需要计算两点位置长度

  • 方法1(坑)

    首先想到是 **计算相对偏移量**,我们总是能知道当前位置和下一个位置,只要计算线条位置相对与手指拖拽的位置的偏移量,通过加减就可以算出准确的位置,线条的长度一个道理。感觉有点麻烦,但我尝试的这么做了。
    

在UIScrollViewDelegate 里的scrollViewDidScroll 方法中算出并记录每一次偏移量,然后累计到下划线上,结果是效果差不多。但总是有误差,误差的原因是误差累计,与越界,前者是在计算的过程精度的丢失,多次累加产生的误差,后者是在滑动的过程,结束的位置不会保证是下一个位置的结束点,我也尝试的修复这种误差,但滑的越快误差就越大。然后我就尝试寻找更好的方法。

  • 方法2

    想要精确无误,就想到了利用数学的知识来解决,通过观察想到了**contentOffset 的值与线条点的位置唯一对应**,也就是说线条点的位置是关于contentOffset的一个函数,不难发现就是一个分段函数,而且每一段都是一个 一次函数 形如y=kx+b 这里x 是 contentOffset ,y 是 线条的点或长度,写一个方法,传入contentOffset返回点的位置或线条的宽度,显然要一组k与b,而k 与 b 在 构造标题位置的就可以计算出来 k = △y/△x ,得到k后b也可以得到。
    

然后在- (void)scrollViewDidScroll:(UIScrollView *)scrollView;方法里只有两行代码

_lineBottom.center = CGPointMake([self getTitleWidth:scrollView.contentOffset.x], _lineBottom.center.y);  
_lineBottom.bounds = CGRectMake(0, 0, [self getTitlePoint:scrollView.contentOffset.x], LINEBOTTOM_HEIGHT);  

计算的代码

#pragma mark - Calculation Method  

- (CGFloat)getTitleWidth:(CGFloat)offset{  
    NSInteger index = (NSInteger)(offset / _selfFrame.size.width);  
    CGFloat k = [_width_k_array[index] floatValue];  
    CGFloat b = [_width_b_array[index] floatValue];  
    CGFloat x = offset;  
    return  k * x + b;  
}  
- (CGFloat)getTitlePoint:(CGFloat)offset{  
    NSInteger index = (NSInteger)(offset / _selfFrame.size.width);  
    CGFloat k = [_point_k_array[index] floatValue];  
    CGFloat b = [_point_b_array[index] floatValue];  
    CGFloat x = offset;  
    return  k * x + b;  
}  

这样就达到完美的线条自适应效果如下:

HYPageView03.gif?imageMogr2/auto-orient/strip)

HYPageView08.gif?imageMogr2/auto-orient/strip)

  • 菜单的半透明

    菜单的半透明很简单,设置好ScrollView的contentInset和frame就好了,需要注意的是有navigationController时控制器的automaticallyAdjustsScrollViewInsets 属性 和 edgesForExtendedLayout属性在开启navigationBar 半透明效果时 navigationController会对 控制器的 contentInset 和 frame进行调整 以达到半透明效果。
    
  • 左右的不同按钮

    前边的步骤做好了这里也很简单,设计可以根据navigationBar 的左右item来设计。笔者直接添加Button然后重新计算顶部菜单滚动视图的宽,效果如下:
    

HYPageView05.gif?imageMogr2/auto-orient/strip)

HYPageView06.gif?imageMogr2/auto-orient/strip)

  • 接口的设计

    /**
    Initializes and returns a newly allocated view object with the specified frame rectangle.

    @param frame       ...
    @param titles      Some title
    @param controllers Name of some controllers
    @param parameters  You need to set a property called "parameter" for your controller to receive.

    @return self
    */

    • (instancetype)initWithFrame:(CGRect)frame withTitles:(NSArray )titles withViewControllers:(NSArray )controllers withParameters:(NSArray *)parameters;

frame,titles 不用说,controllers是传控制器的名称,这样可以在需要的时候再创建控制器,parameters是要给控制器传的参数,传递的方式是KVC,当然传递的时候需要检查参数是否存在,控制器是否有parameters参数,具体实现可以看demo。
https://github.com/runlhy/HYPageView

code4app

相关源码推荐:

我来说两句
*滑动验证:
所有评论(579)
phoiu 2016-10-11 14:34:23
不错不错,楼主辛苦了。。。
回复
AlonMessi 2016-10-11 14:36:35
感谢大神~
回复
littleRed 2016-10-11 14:38:25
code4app好的代码demo真的很多,谢谢啦~
回复
hellokenken 2016-10-11 14:39:51
不错不错,楼主辛苦了。。。
回复
BlueManlove 2016-10-11 14:44:05
感谢分享,code4app有你更精彩
回复
kengsir 2016-10-11 14:47:44
code4app好的代码demo真的很多,谢谢啦~
回复
364601065 2016-10-11 18:17:57
code4app好的代码demo真的很多,谢谢啦~
回复
code4app热心网友 2016-10-11 23:43:32
我只是路过打酱油的。
回复
王颖博 2016-10-12 09:48:14
感谢分享,Code4App有你更精彩
回复
提取码:  下载次数:475 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
6503 3 475
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表