iOS仿新闻tab标题栏效果

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

预览

思路

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

- (void)viewDidLoad
{
 [super viewDidLoad];
 // Do any additional setup after loading the view.
 [self createTitleScrollView];
 [self createButtonLine];
 [self createContentScrollview];
}

#pragma mark - 初始化UI
- (void)createTitleScrollView
{
 // 根据是否有导航栏调整坐标
 CGFloat marginY = self.navigationController ? self.navigationController.view.frame.size.height : kUpMargin;

 // 标题栏,包括小横线的位置
 _titleScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, marginY, kFrameWidth, kTitleHeight + kButtonLineHeight)];
 _titleScrollView.showsHorizontalScrollIndicator = NO;
 _titleScrollView.bounces = NO;
 _titleScrollView.delegate = self;
 [self.view addSubview:_titleScrollView];

 // 添加button
 NSArray *titleArray = @[@"头条", @"社会", @"财经", @"科技", @"体育", @"娱乐", @"时尚", @"军事", @"教育", @"游戏"];
 _pageCount = titleArray.count;
 _titleScrollView.contentSize = CGSizeMake(kButtonWidth * _pageCount, kTitleHeight);
 for (int i = 0; i < _pageCount; i++)
 {
  UIButton *titleBtn = [[UIButton alloc] initWithFrame:CGRectMake(kButtonWidth * i, 0, kButtonWidth, kTitleHeight)];
  [titleBtn setTitle:titleArray[i] forState:UIControlStateNormal];
  [titleBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  titleBtn.titleLabel.font = [UIFont systemFontOfSize:16];
  [titleBtn addTarget:self action:@selector(titleButtonClicked:) forControlEvents:UIControlEventTouchDown];
  titleBtn.tag = 1000 + i; // button做标记,方便后面索引,为了不出冲突,就把这个数值设得大一些
  [_titleScrollView addSubview:titleBtn];
 };
}

- (void)createButtonLine
{
 // 初始时刻停在最左边与按钮对齐
 _buttonLine = [[UIView alloc] initWithFrame:CGRectMake(0, kTitleHeight, kButtonWidth, kButtonLineHeight)];
 _buttonLine.backgroundColor = [UIColor redColor];
 // 小横线加载scrollview上才能跟随button联动
 [_titleScrollView addSubview:_buttonLine];
}

- (void)createContentScrollview
{
 CGFloat marginY = self.navigationController ? self.navigationController.view.frame.size.height : kUpMargin;

 // 添加内容页面
 _contentScrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, marginY + kTitleHeight + kButtonLineHeight, kFrameWidth, kFrameHeight - marginY - kTitleHeight - kButtonLineHeight)];
 _contentScrollview.pagingEnabled = YES;
 _contentScrollview.bounces = NO;
 _contentScrollview.contentSize = CGSizeMake(kFrameWidth * _pageCount, kFrameHeight - marginY - kTitleHeight);
 _contentScrollview.showsHorizontalScrollIndicator = NO;
 _contentScrollview.delegate = self;
 [self.view addSubview:_contentScrollview];

 // 添加分页面
 for (int i = 0; i < _pageCount; i++)
 {
  PageViewController *pageViewController = [[PageViewController alloc] init];
  UIButton *button = [_titleScrollView viewWithTag:1000 + i];
  pageViewController.title = button.currentTitle;
  pageViewController.view.frame = CGRectMake(kFrameWidth * i, 0, kFrameWidth, kFrameHeight - marginY - kTitleHeight);
  [_contentScrollview addSubview:pageViewController.view];
 }

 // 初始化后选中某个栏目
 [self titleButtonClicked:[_titleScrollView viewWithTag:1000 + 0]];
}

#pragma mark - 标题button点击事件
- (void)titleButtonClicked:(UIButton *)sender
{
 // 根据点击的button切换页面和偏移
 printf("%s clicked\n", sender.currentTitle.UTF8String);

 // 以下不用了,因为scroll切换会自动处理好尺寸和颜色了
// for (int i = 0; i < _pageCount; i++)
// {
//  UIButton *button = [_titleScrollView viewWithTag:1000 + i];
//  // 重置button尺寸颜色
//  button.transform = CGAffineTransformMakeScale(1, 1);
//  [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
// }

 // 强调被选中的button
 // 放大聚焦
 sender.transform = CGAffineTransformMakeScale(kMaxTitleScale, kMaxTitleScale);
 // 变色
 [sender setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

 // 居中title
 [self settleTitleButton:sender];

 // 带动画切换到对应的内容,会触发scrollViewDidScroll
 NSInteger pageIndex = sender.tag - 1000;
 [_contentScrollview setContentOffset:CGPointMake(kFrameWidth * pageIndex, 0) animated:YES];
}

#pragma mark - scrollview滑动事件
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
 // 根据content内容偏移调整标题栏
 if (scrollView == _titleScrollView)
 {
  printf("title moved\n");

 }
 else if (scrollView == _contentScrollview)
 {
  printf("content moved\n");

  // 获得左右两个button的索引, 注意最后取整
  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.transform = CGAffineTransformMakeScale(1 + leftTitleFactor * maxExtraScale, 1 + leftTitleFactor * maxExtraScale);
  rightTitleButton.transform = CGAffineTransformMakeScale(1 + rightTitleFactor * maxExtraScale, 1 + rightTitleFactor * maxExtraScale);
  // 颜色
  UIColor *leftTitleColor = [UIColor colorWithRed:0 green:leftTitleFactor blue:0 alpha:1];
  UIColor *rightTitleColor = [UIColor colorWithRed:0 green:rightTitleFactor blue:0 alpha:1];
  [leftTitleButton setTitleColor:leftTitleColor forState:UIControlStateNormal];
  [rightTitleButton setTitleColor:rightTitleColor forState:UIControlStateNormal];
  // 小横线位移
  _buttonLine.frame = CGRectMake(kButtonWidth * (leftTitleIndex + rightTitleFactor), _buttonLine.frame.origin.y, kButtonWidth, kButtonLineHeight);
 }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
 // 内容区块滑动结束调整标题栏居中
 if (scrollView == _contentScrollview)
 {
  // 取得索引值
  NSInteger titleIndex = scrollView.contentOffset.x / kFrameWidth;
  // title居中
  [self settleTitleButton:[_titleScrollView viewWithTag:1000 + titleIndex]];
 }
}

#pragma mark - 标题按钮和横线居中偏移
- (void)settleTitleButton:(UIButton *)button
{
 // 标题
 // 这个偏移量是相对于scrollview的content frame原点的相对对标
 CGFloat deltaX = button.center.x - kFrameWidth / 2;
 // 设置偏移量,记住这段算法
 if (deltaX < 0)
 {
  // 最左边
  deltaX = 0;
 }
 CGFloat maxDeltaX = _titleScrollView.contentSize.width - kFrameWidth;
 if (deltaX > maxDeltaX)
 {
  // 最右边不能超范围
  deltaX = maxDeltaX;
 }
 [_titleScrollView setContentOffset:CGPointMake(deltaX, 0) animated:YES];

}

源代码下载

csdn:仿网易新闻tab效果

github:仿网易新闻tab效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 仿ios状态栏颜色和标题栏颜色一致的实例代码

    首先创建一个工具类 import android.annotation.TargetApi; import android.app.Activity; import android.content.Context; import android.os.Build; import android.support.v4.content.ContextCompat; import android.view.View; import android.view.ViewGroup; public clas

  • iOS仿新闻tab标题栏效果

    iOS仿网易新闻之类的滑动标题栏,供大家参考,具体内容如下 预览 思路 两个scorllview,一个用于标题栏,一个拥有底下的page 标题栏文字和效果切换,渐变色和大小都是根据底下的page偏移量来归一化换算的 小横线直接加载标题栏所在的scorllview里面,小横线自身要有局部偏移,根据page来切换 标题栏的居中需要算一个scrollview的偏移量,小横线跟着scorllview偏移 监听scrollview的滑动和停止滑动进行相应的处理 - (void)viewDidLoad {

  • iOS仿微信添加标签效果(shape实现)

    一. 概述 可以说微信做的用户体验太棒了,可以做到老少皆宜,给个赞,我们也同时应该告诫自己,用户体验应该向微信看齐,微信就是我们的标杆,那我们今天也来仿一仿微信添加的标签功能.只能仿着做了,真是做不到微信的那种体验.甘拜下风. 我们上篇学习了shape属性的用法,那我们今天就用shape来做下微信的标签功能.先看一下效果. 我不仅用到了shape属性,还用到了翔哥的标签布局FlowLayout跟TagFlowLayout鸿洋的博客 二.效果图 三 .定义shape 添加标签 <?xml vers

  • iOS仿Uber筛选栏效果

    这个是之前项目中用的仿Uber筛选栏,现在要改了,改之前把这个记录下来,万一有人用到了,就可以直接拿来用了,这个是在大神的基础上改的,还行吧,但是觉得有点丑!有需要的可以看一下,方法有点笨,大神勿喷. 1.加载数据 * 加载数据 */ - (void)loadData{ timeArray = @[@"6小时之内",@"12小时之内",@"24小时之内"]; locationArray = @[@"全城",@"附近1

  • iOS 仿微博客户端红包加载界面 XLDotLoading效果

    一.显示效果 二.原理简介 1.思路 要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大.缩小的效果实现的这种有距离感的效果.思路如下: 一.这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做"相对运动"即可. 二.让硬币从左至右移动时先变小再回复正常:从右至左移动时先变大再回复正常:这样就实现了这用有距离感的"相对运动". 2.代码 第一步 要实现一个硬币在一定范围内实现左右往复运动,需要先固定一个范

  • jquery实现的仿天猫侧导航tab切换效果

    本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/ 具体代码如下: <!DOCTYPE h

  • Android仿IOS上拉下拉弹性效果的实例代码

    用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还是蛮实用的. 思路:其实原理很简单,实现一个自定义的Scrollview方法(来自网上大神),然后在布局文件中使用自定义方法Scrollview就可以了. 代码: 自定义View,继承自Scrollview.MyReboundScrollView类 package com.wj.myrebounds

  • iOS仿网易简单头部滚动效果

    本文实例为大家分享了iOS仿网易滚动效果片展示的具体代码,供大家参考,具体内容如下 仿网易的主要思想为: 1. 设置好按钮与线的宽度, 2. 将所需要的标题传入并生成按钮 3. 在点击的时候,通过计算偏移量,将自身进行偏移 4. 偏移量的设置需要注意不能小于0并且不成大于contengsize-frame的宽度 具体代码如下,可直接使用,需要注意的是需要先设置宽度,再传标题数组才可自动调整,否则会固定为默认的60 另外,BtnArr与linelabel设置为readonly比较合理,不过这里还需

  • iOS仿高德首页推拉效果实例代码

    目录 1.滑动view的调用 2.为视图添加滑动手势和tableview相关配置 3.设置允许同时响应多个手势 4.滑动相关逻辑处理 4.注意点 总结 上面是实现的效果,滑动的视图是新建的一个UIView子类 1.滑动view的调用 SlideView * slideView = [[SlideView alloc] initWithFrame:CGRectMake(0, kScreenHeight-140, kScreenWidth, kScreenHeight-100)]; slideVie

  • javascript+css 新闻显示tab 选项卡效果

    我们_新闻显示选项卡效果(javascript+css) 新闻排行 国内 国际 社会 网评 新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河 最高法:承诺不判赖昌星死刑没有超越法律程序 物权法:满70年住宅建设用地使用权将自动续期 弟弟被妻下药毒死男子买女尸为其配阴婚(图) 揭开郑州神枪手神秘面纱 头号狙击手是近视眼 美军高官:不排除和中国发生直接军事对抗可能 浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕 西方炒作"中国航母威胁论"称05年已正式服役 女孩生活无法自理请人大代表递交安乐死议案 建

随机推荐