iOS仿新闻标签标题栏效果

  

iOS仿网易新闻之类的滑动标题栏,供大家参考,具体内容如下

  

<强>预览

  

 iOS仿新闻标签标题栏效果

  

<>强思路

  

两个scorllview,一个用于标题栏,一个拥有底下的页面
  标题栏文字和效果切换,渐变色和大小都是根据底下的页面偏移量来归一化换算的
  小横线直接加载标题栏所在的scorllview里面,小横线自身要有局部偏移,根据页面来切换
  标题栏的居中需要算一个滚动视图的偏移量,小横线跟着scorllview偏移
  监听滚动视图的滑动和停止滑动进行相应的处理
  

        - (void) viewDidLoad   {   (超级viewDidLoad);//加载后任何额外设置视图。   (自我createTitleScrollView);   (自我createButtonLine);   (自我createContentScrollview);   }      # pragma马克-初始化UI   - (void) createTitleScrollView   {//根据是否有导航栏调整坐标   CGFloat marginY=自我。导航控制器& # 63;self.navigationController.view.frame.size.height: kUpMargin;//标题栏,包括小横线的位置   _titleScrollView=[[UIScrollView alloc] initWithFrame: CGRectMake (0 marginY kFrameWidth kTitleHeight + kButtonLineHeight)];   _titleScrollView。showsHorizontalScrollIndicator=没有;   _titleScrollView。反弹=没有;   _titleScrollView.delegate=自我;   (自我。视图addSubview _titleScrollView):;//添加按钮   NSArray * titleArray=@ @”头条”,@“社会”,@“财经”,@“科技”,@”体育”,@“娱乐”,@”时尚”,@“军事”,@“教育”,@“游戏”);   _pageCount=titleArray.count;   _titleScrollView。contentSize=CGSizeMake (kButtonWidth * _pageCount kTitleHeight);   for (int i=0;我& lt;_pageCount;我+ +)   {   UIButton * titleBtn=[[UIButton alloc] initWithFrame: CGRectMake (kButtonWidth *我,0 kButtonWidth kTitleHeight)];   [titleBtn setTitle: titleArray[我]forState: UIControlStateNormal);   [titleBtn setTitleColor:(用户界面颜色blackColor] forState: UIControlStateNormal);   titleBtn.titleLabel。字体=[UIFont systemFontOfSize: 16);   [titleBtn addTarget:自我行动:@ selector (titleButtonClicked:) forControlEvents: UIControlEventTouchDown);   titleBtn。标签=1000 +我;//按钮做标记,方便后面索引,为了不出冲突,就把这个数值设得大一些   [_titleScrollView addSubview: titleBtn];   };   }      - (void) createButtonLine   {//初始时刻停在最左边与按钮对齐   _buttonLine=[[UIView alloc] initWithFrame: CGRectMake (0 kTitleHeight kButtonWidth kButtonLineHeight)];   _buttonLine。写成backgroundColor=[用户界面颜色redColor];//小横线加载滚动视图上才能跟随按钮联动   [_titleScrollView addSubview: _buttonLine];   }      - (void) createContentScrollview   {   CGFloat marginY=自我。导航控制器& # 63;self.navigationController.view.frame.size.height: kUpMargin;//添加内容页面   _contentScrollview=[[UIScrollView alloc] initWithFrame: CGRectMake (0, marginY + kTitleHeight + kButtonLineHeight, kFrameWidth, kFrameHeight - marginY kTitleHeight kButtonLineHeight)];   _contentScrollview。pagingEnabled=是的;   _contentScrollview。反弹=没有;   _contentScrollview。contentSize=CGSizeMake (kFrameWidth * _pageCount kFrameHeight - marginY kTitleHeight);   _contentScrollview。showsHorizontalScrollIndicator=没有;   _contentScrollview.delegate=自我;   (自我。视图addSubview _contentScrollview):;//添加分页面   for (int i=0;我& lt;_pageCount;我+ +)   {   PageViewController * PageViewController=[[PageViewController alloc] init);   UIButton *按钮=[_titleScrollView viewWithTag: 1000 + i);   pageViewController。标题=button.currentTitle;   pageViewController.view.frame=CGRectMake (kFrameWidth *我,0 kFrameWidth kFrameHeight - marginY kTitleHeight);   [_contentScrollview addSubview: pageViewController.view];   }//初始化后选中某个栏目   [自我titleButtonClicked: [_titleScrollView viewWithTag: 1000 + 0]];   }      # pragma马克-标题按钮点击事件   - (void) titleButtonClicked:发送者(UIButton *)   {//根据点击的按钮切换页面和偏移   printf (" % s点击\ n ", sender.currentTitle.UTF8String);//以下不用了,因为滚动切换会自动处理好尺寸和颜色了//(int i=0;我& lt;_pageCount;我+ +)//{//UIButton *按钮=[_titleScrollView viewWithTag: 1000 + i);////重置按钮尺寸颜色//按钮。变换=CGAffineTransformMakeScale (1,1);//[按钮setTitleColor:[用户界面颜色blackColor] forState: UIControlStateNormal);//}//强调被选中的按钮//放大聚焦   发送者。变换=CGAffineTransformMakeScale (kMaxTitleScale kMaxTitleScale);//变色   (发送者setTitleColor:(用户界面颜色greenColor] forState: UIControlStateNormal);//居中标题   (自我settleTitleButton:发送者);//带动画切换到对应的内容,会触发scrollViewDidScroll   NSInteger pageIndex=发送者。标签- 1000;   [_contentScrollview setContentOffset: CGPointMake (kFrameWidth * pageIndex, 0)动画:是的);   }      # pragma马克-滚动视图滑动事件   - (void) scrollViewDidScroll: (UIScrollView *)滚动视图   {//根据内容内容偏移调整标题栏   如果(scrollView==_titleScrollView)   {   printf(“标题\ n”);         }   else if (scrollView==_contentScrollview)   {   printf (“\ n”内容);//获得左右两个按钮的索引,注意最后取整   CGFloat offsetX=scrollView.contentOffset.x;   NSInteger leftTitleIndex=offsetX/kFrameWidth;   NSInteger rightTitleIndex=leftTitleIndex + 1;//因为设置了到边不能滑动,所以不考虑边界   UIButton * leftTitleButton=[_titleScrollView viewWithTag: 1000 + leftTitleIndex];   UIButton * rightTitleButton=[_titleScrollView viewWithTag: 1000 + rightTitleIndex];//设置大小和颜色渐变以及小横线的联动//权重因子0 ~ 1小数,左边和右边互补   CGFloat rightTitleFactor=offsetX/kFrameWidth - leftTitleIndex;   CGFloat leftTitleFactor=1 - rightTitleFactor;//尺寸   CGFloat maxExtraScale=kMaxTitleScale - 1;   leftTitleButton。null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

iOS仿新闻标签标题栏效果