滚动标题条的创建

首先,预览一下实现效果:

滚动标签条

     滚动标签条在应用中起到导航的功能,可将正文内容分成具体的内容模块,用户点击标签时相对应的内容视图同步切换,反之,滑动内容视图的页面时标签条也会跟随变换。ps.图中的label为自定义控件GYLabel,可达到点击时字体放大变色的效果,本文中就先不赘述。

为达到以上需求,实现方式如下:

主框架由两个scrollview组成:

1.滚动标题条smallScroll

2.对应于标题的内容视图bigScroll


==== 完成点击标签显示对应的内容视图====

a.滚动标题条绑定用户点击响应

滚动标题条的视图是由GYLabel组合而成的,每add一个子视图,配置tag属性,由0开始逐个递增;给每一个标签添加手势:

addGestureRecognizer:[ [UITapGestureRecognizer alloc]

initWithTarget:self action:@selector(lblClick:) ]

响应方法lblClick中拿到点击视图,根据标签的tag值算出大的滚动内容视图的位移值,这样可做到标签与内容视图以及用户交互动作的三者绑定。

ps.不要忘记label.userInteractionEnabled = YES

-(void)lblClick:(UITapGestureRecognizer*)recognizer

//点击标签时内容视图滑动到指定的坐标,并且带动画效果

{ [self.bigScroll setContentOffset:

CGPointMake(recognizer.view.tag*self.bigScroll.bounds.size.width, 0)

animated:YES]; }


b.显示bigScroll的内容视图

分析一下:致使bigScroll发生滑动的有可能是用户点击了标签或者直接滑动屏幕,而在这两种情况下都会调用的方法应该是系统的UIScrollViewDelegate中的委托响应方法。

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{    [self scrollViewDidEndScrollingAnimation:scrollView];  }

选用以上的委托代理响应顺序,在view停止滑动并且动画结束时调用,在方法中讲子控制器的view加载到bigScroll,子控制器的实例对象在viewDidLoad时机中已经生成。

此处用子控制器来完成是考虑到界面如果比较复杂,其相关设置可由子控制器去完成。

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{

NSUInteger index=scrollView.contentOffset.x/self.bigScroll.bounds.size.width;

UIViewController* vc=self.childViewControllers[index];

vc.view.frame=scrollView.bounds;

[self.bigScroll addSubview:vc.view]; }


==== 手动滑动内容视图滚动标签条跟随变化====

因为是伴随着滑动时页面显示一起变化的,所以这部分的逻辑实现应该和页面生成是在同一个时机。

分析一下:用户的点击区域分成屏幕可视部分的左半边和右半边

a.如果点击的标签中心点的位置在左半边,则点击不发生位移;

b.如果点击的标签中心点的位置在右半边,则点击时标签水平位移到屏幕中心点;

c.需要考虑标签的最大水平位移距离(滚动标题条smallScroll内容视图超出屏幕部分的水平距离),如果位移到屏幕中心点的位移量大于最大水平位移距离,则此时的水平位移量应该设定为最大水平位移距离。


`

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{

NSUInteger index=scrollView.contentOffset.x/self.bigScroll.bounds.size.width;

UILabel* label=self.smallScroll.subviews[index];

//中心点在左半边

CGFloat offsetx=label.center.x-self.smallScroll.bounds.size.width*0.5;

//最大水平位移距离

CGFloat offsetMax=

self.smallScroll.contentSize.width-self.smallScroll.bounds.size.width;

if (offsetx<0) {offsetx=0;}

else if(offsetx>offsetMax) {offsetx=offsetMax; }

[self.smallScroll setContentOffset:CGPointMake(offsetx, 0) animated:YES]; }

`

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容