美文网首页ios专题IOS-OCiOS开发
分页菜单SPPageMenu使用说明书

分页菜单SPPageMenu使用说明书

作者: S型身材的猪 | 来源:发表于2017-10-30 18:01 被阅读1982次

SPPageMenugithub地址:https://github.com/SPStore/SPPageMenu

一、 效果演示图

(演示图中仅展示了部分功能,更多功能请进入github下载源代码,如果您的网络较慢,gif图可能会延迟加载,您可以先把宝贵的时间浏览其它信息)

Untitled.gif

二、 重难点方法和属性详解

// 以下2个方法都用于创建pagMenu

+ (instancetype)pageMenuWithFrame:(CGRect)frame trackerStyle:(SPPageMenuTrackerStyle)trackerStyle;
- (instancetype)initWithFrame:(CGRect)frame trackerStyle:(SPPageMenuTrackerStyle)trackerStyle;
// 这个方法用于传递数据,items里面可装NSString或UIImage,每个item会根据传的是NSString还是UIImage而展示文字或者图片;selectedItemIndex是选中的item下标,selectedItemIndex不可超过 items的范围

- (void)setItems:(nullable NSArray *)items selectedItemIndex:(NSUInteger)selectedItemIndex;
//  这个属性是被选中的item下标

@property (nonatomic) NSUInteger selectedItemIndex;

//  这个属性命名为“桥梁scrollView”,意味着它是连接SPPageMenu与外界的桥梁。当外界的scrollView在左右切换的时候,需要让跟踪器时刻跟随该scrollView滚动,bridgeScrollView就是外界左右切换的scrollView。只要bridgeScrollView有值了,SPPageMenu会监听bridgeScrollView的滚动状态,从而让跟踪器有跟随效果。如果你忘了设置这个属性或者觉得不好,你还可以在scrollViewDidScroll的代理方法中,调用SPPageMenu的接口“- (void)moveTrackerFollowScrollView:(UIScrollView *)scrollView”。

@property (nonatomic, strong) UIScrollView *bridgeScrollView;
// 这个属性是关闭跟踪器的时刻跟随scrollView的效果,如果关闭了,在外界对bridgeScrollView赋值了或者调用了- (void)moveTrackerFollowScrollView:(UIScrollView *)scrollView的情况下,跟踪器会在scrollView滑动结束的时候才跟踪

@property (nonatomic, assign) BOOL closeTrackerFollowingfMode;
//  这个属性是设置内容的四周边距,例如如果你想让跟踪器距离底部分割线有一段距离,你就可以设置contentInset的底部间距,这里指的内容是不包括底部分割线的。

@property (nonatomic, assign) UIEdgeInsets contentInset;
// 这个方法是为指定的item同时设置图片和文字,参数imagePosition决定图片的位置,分上、下、左、右,ratio是图片所占比例,取值范围0~1,默认是0.5,即图片文字各占一半

- (void)setTitle:(nullable NSString *)title image:(nullable UIImage *)image imagePosition:(SPItemImagePosition)imagePosition imageRatio:(CGFloat)ratio forItemIndex:(NSUInteger)itemIndex;
//  这个方法和上面那个方法类似,只是设置对象不同,上面的方法是为指定item设置,这个方法是为功能按钮设置

- (void)setFunctionButtonTitle:(nullable NSString *)title image:(nullable UIImage *)image imagePosition:(SPItemImagePosition)imagePosition imageRatio:(CGFloat)ratio forState:(UIControlState)state;
//  这个方法在描述bridgeScrollView的时候有提到过,在外界的scrollViewDidScroll代理方法中调用,可以让跟踪器时刻跟随scrollView滑动,如果bridgeScrollView已经赋过值,那这个方法就没必要去调用了。

- (void)moveTrackerFollowScrollView:(UIScrollView *)scrollView;
以上介绍的属性和方法只是部分的,其余属性和方法相对简单,框架中也有非常详细的注释,这里就不再多做介绍

三、 应用场景

网易

A7FD723F-E458-437A-AD3F-D990C8F49C26.jpeg

爱奇艺

09145AB7-9FA8-4442-8E66-28A5D02EB4A6.jpeg

微博

8D4F4543-97C8-43AB-A6ED-152ACC35429D.jpeg

相关文章

网友评论

  • 心里有个数:如果想实现类似网易云音乐中带角标的样式,应该如何设置
    S型身材的猪:你的这个问题我思考了很久,昨天还在想我要不要把这个功能加上,其实我提供一个方法,返回一个指定按钮,然后你就可以把这个角标夹在此按钮上,但是如果我把这个返回出去,我担心的问题是别人可能会去修改该按钮的属性,比如设置这个按钮的文字或者图片,这个操作是不允许的,修改文字和图片有专门的方法
  • 数8寒冬:如果只有一个tab ,想要把title影藏怎么做呀
    S型身材的猪:那你可以试着设置title为空试试
  • 加菲猫哈哈哈哈:楼主 把栏目条和列表都往下移动了下 然后栏目条点击和滑动都没反应了 求教。。。
    加菲猫哈哈哈哈:@S型身材的猪 设置scrollview和pagemenu的frame,同时下移200,空出来的上面加个imageView,已经解决了,是我黑苹果的问题,昨晚用我的黑苹果搞了三个多小时没搞定,要疯了,今天在公司十分钟OK
    S型身材的猪:不是很明白你的意思
  • 简人Lmy:你这个没有考虑重用吗?
    简人Lmy:@S型身材的猪 还有底下的scrollView,就是放viewControllers的view是否可以重用呢,这个重用的价值就很大了吧,一页就一个页面
    S型身材的猪:你的建议是可行的,但是会增加好大的难度和复杂度,想想scrollView上的按钮也不会太多,能有多少呢,一般有10个就算多的了,而且按钮大多数是文字,一个文字占不了一点点内存,不像cell,cell上的内容就比较复杂了,而且cell个数会很多,所以这里个人觉得不重用比重用甚至好些,而且重用只对scrollView可以滑动的时候才有用,如果scrollView不能滑动,按钮个数很少,比如2个或3个,重用就没有意义了
  • 一个写代码的文艺姑娘:写的超赞
    S型身材的猪:谢谢啊,文艺的姑娘
  • a2e29e6af3a3:子控制器加的是tableView,tableview的头视图的是个广告轮播图,结果广告轮播图一滑动就SPPageMenu的滑动事件就触发了,请问怎么控制呢?
    a2e29e6af3a3:@S型身材的猪 楼主明白我的意思吗
    a2e29e6af3a3:@S型身材的猪 头视图属于往addChildViewController中子控制器中tableView的tableHeaderView,其中我的ChildViewController中的控制器是TableViewController
    S型身材的猪:SPPageMenu跟你头视图是什么关系,怎么添加的?
  • Xavier_Lost:已经加载过viewWillAppear方法并不执行,有什么方法吗?
    S型身材的猪:@Addict_dong 当然不会走了,因为你这样左右滑动切换控制器,上一个控制器没有被销毁呀,换句话说上一个控制器并未消失呀,所以这完全是正常的,走viewWillAppear那就不正常了。如果你想在viewWillAppear里做什么事情,可以放到我框架的代理方法里面去做呀
    cbb9e3ec600d:@S型身材的猪
    for (int i = 0; i < self.dataArr.count; i++) {
    DBViewController *VC = [[DBViewController alloc]init];
    VC.msgStyle = i;
    [self addChildViewController:VC];
    [self.myChildViewControllers addObject:VC];
    }
    按照你demo上的这种写法,已经加载过的页面 就不走viewWillAppear方法.
    S型身材的猪:那就查查为什么不执行viewWillAppear?你是不是采用present方式madal出另一个控制器,而且设置了madal样式,比如并非底部弹出,然后你回到上一个控制器时,就不调viewWillAppear?
  • Coffee丶:<SPPageMenu: 0x15bc07680; frame = (0 0; 375 40); layer = <CALayer: 0x1c803f220>>: An -observeValueForKeyPath:ofObject:change:context: message was received but not handled.
    Key path: contentOffset
    Observed object: <UIScrollView: 0x15a008400; frame = (0 0; 0 0); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x1c4241800>; layer = <CALayer: 0x1c4228e00>; contentOffset: {0, 0}; contentSize: {1500, 0}; adjustedContentInset: {0, 0, 0, 0}>
    Change: {
    kind = 1;
    new = "NSPoint: {0, 0}";
    }
    Context: 0x0
    (null)
    S型身材的猪:原因很有可能是你添加SPPageMenu的控制器可能没有被销毁,从而导致SPPageMenu也没有被销毁,所以自始至终SPPageMenu都在监听scrollView的滚动。你检查一下控制器是否被销毁了,看是否会走控制器的dealloc方法
    Coffee丶:捕捉的信息,消息收到但未处理
  • 清晰00:请问里面放tableView,最后一个 右滑删除 和 本身的滑动冲突了 ,怎么处理?
  • 前年的邂逅_Jerry:楼主,底部线条的高度我怎么去改变?
    前年的邂逅_Jerry:@01badM 各种项目,老哥。。。。
    01badM:@前年的邂逅_Jerry 大佬做什么项目
    前年的邂逅_Jerry:[_pageMenu setValue:@(2) forKey:@"trackerHeight"]; 用着方法可以。
  • z小志:第一个 视图 为什么尺寸不对 设置的屏幕的宽度 但是自控制器tableView的宽度 不对 别的 是对的
    前年的邂逅_Jerry:很强大,感谢楼主的分享。
    z小志:@S型身材的猪 5 宽度小了 6p 刚开始宽度超了
    S型身材的猪:不对是怎么个不对?宽度小了,超了?我这个小框架对你的控制器的布局不会产生任何影响,完全与控制器是隔离开来的
  • 唐山斯坦森:您好 能不能加入 频道管理功能 我正在添加这个功能 有点问题
    S型身材的猪:你的意思是你添加控制器或者删除控制器后,我的pageMenu也要跟着一起添加删除,时刻保持与控制器同步?这个是不能做的,因为我封装的这个控件不仅仅是针对控制器,不能被外界牵着鼻子走,如果那样,我干脆直接把控制器一起封装进去,你只要传控制器数组给我就行了。有很多人就是这样封装的,但是我觉得那样不够通用,有些地方未必是控制器,可能就是几个view在左右切换,或者不能左右切换。你添加删除控制器后,你同时可以用SPPageMenu添加或者删除对应的按钮啊,我提供了添加删除的接口呀。添加到last位置不就是(array.cout-1)的位置吗
    唐山斯坦森:在拿到用户点击频道管理添加删除或者排序后的Array数组 返回到控制器后 如何让pageMenu reloadData一下或者是 将新增加的字段添加到pagemeny的last位置
  • 请叫我小白同学:大佬写的很棒,但是我在自定义cell的时候,往下移动的时候,发现cell会消失了一下,然后往上移的时候又显示出来了!!这是为什么呢?跟你微博项目差不多,就是cell不一样
    S型身材的猪:@阿阿小白啊 我并不是大佬,我只是喜欢把我自己喜欢的事做到最好,有些东西看着好像很6,但实际上我可能花了别人2倍的时间去思考。
    请叫我小白同学:@S型身材的猪 :+1:大佬就是大佬,已经解决了,大佬能不能留个qq群之类的好交流。
    S型身材的猪:消失是怎么个消失法?哪个位置的cell不见了?微博项目要特别注意scrollView或者tableView的高度和contentSize等设置,容量不够,cell就看不见,可以从容量着手看看
  • 随缘随鈊:很赞的控件 !有几个问题希望大神能完善一下,1.如果能设置图片和文字的距离(因为我需求类似京东金融的首页) ,2.可以通过storyboard使用,3.希望能让这个控件的自定义程度更高,这样更灵活。毕竟没人个遇到的需求并不会都一样。
    S型身材的猪:@随缘随鈊 回头我改一下
    随缘随鈊:谢谢你的回答 关于图片和文字的间距 在我设置为等比宽度不可移动属性 菜单类型为等比下划线 的时候 图片和文字的间距特别大。我想可以自己定义imageview 大小!
    S型身材的猪:设置图片和文字间距其实是有办法的,比如图片在左,文字在右,那可以叫美工把图片的右边做一点留白,看起来就像间距。或者你设置文字的时候,你可以先敲几个空格,再输入文字,
    比如@“ 哈哈”,空格就起到间距作用。storyboard使用的意思是不是可以把该控件直接拖进去然后在故事板里操作属性?那我好像还真不会,只有系统的控件才能直接在故事版里操作吧,只能先拖一个空白的view,然后关联我这个类SPPageMenu,再去代码里设置属性和方法。你还要自定义程度高点?比如呢,还有什么需要我做的。
  • 随机昵称:POD管理不了‘SPPageMenu'啊
    S型身材的猪:@kingchang 你这是在搜索的时候提示的错误吧,那是因为你的cocoapods版本不是最新的,我目前的版本是1.4.0.beta.2,我当初自己也搜不到,后来卸载cocoapods重新下载就可以了。还有,搜索不到不代表不能使用,有时搜索不到也可以直接安装到项目里
    随机昵称:@S型身材的猪 [!] Unable to find a pod with name, author, summary, or description matching `SPPageMenu`
    S型身材的猪:为什么,我自己都在用cocoapod导入项目中啊?你哪里有问题
  • 阿兹尔:楼主,我的想法:完善下添加item的功能,类似网易 头条的那种。假设有tableVIew的头视图,那个类似seg的条悬停效果。这样就基本所有的App功能都有了:smile:
    阿兹尔:@S型身材的猪 谢谢作者滴回复,不过你滴已经很完美了。
    S型身材的猪:感谢你的建议,但是我没听太明白,你的意思是不是:当有tableView头视图的时候,segment在头视图和第一个cell之间,然后往上滑动时菜单悬浮在顶部?如果是这样,那估计你看错了,我封装的不是类似于UIPageViewController一样的控制器,而是仅封装了一个类似于segment的view,不包含底部的大scrollView,就像我简书中三张截图里面红方框框起来的那部分,如果要实现悬停,需要开发者自己去判断,如果你想看具体实例,可以看看这个:https://github.com/SPStore/HVScrollView,爱奇艺那个 demo是最难的,至今我没有发现网上有任何人实现了,就连爱奇艺本身app都有bug,我的当然也不完美,不过已经无限接近爱奇艺了

本文标题:分页菜单SPPageMenu使用说明书

本文链接:https://www.haomeiwen.com/subject/nvlmpxtx.html