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

 更新时间:2018年05月21日 15:53:23   作者:忝  
这篇文章主要为大家详细介绍了iOS仿网易简单头部滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了iOS仿网易滚动效果片展示的具体代码,供大家参考,具体内容如下

仿网易的主要思想为:

1. 设置好按钮与线的宽度,
2. 将所需要的标题传入并生成按钮
3. 在点击的时候,通过计算偏移量,将自身进行偏移
4. 偏移量的设置需要注意不能小于0并且不成大于contengsize-frame的宽度

具体代码如下,可直接使用,需要注意的是需要先设置宽度,再传标题数组才可自动调整,否则会固定为默认的60

另外,BtnArr与linelabel设置为readonly比较合理,不过这里还需再进行研究,不要强制使用这两个属性即可

头文件如下:

//
// TitleScrollView.h
// @author 陈晋添
//
// Created by jkc on 16/7/14.
// Copyright © 2016年 cjt. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface TitleScrollView : UIScrollView

typedef void(^sectionTitleViewBlock)(NSInteger num);

@property (nonatomic, strong) NSMutableArray *BtnArr;   //形成的按钮数组
@property (nonatomic, strong) UILabel *linelabel;    //底部line
@property (nonatomic, strong) sectionTitleViewBlock clickBolck; //block回调

@property (nonatomic, assign) NSInteger LineWidth;    //设置线的长度
@property (nonatomic, assign) NSInteger ButtonWidth;   //按钮的宽度

/**
 * 通过标题数组进行设置头部滚动条
 *
 * @param array 需要加入的标题
 */
-(void)AddArrView:(NSArray*)array;

/**
 * 可直接用代码设置索引位置
 *
 * @param index 索引位置
 */
-(void)setByIndex:(NSInteger)index;
@end

.m文件如下

//
// TitleScrollView.m
// @author 陈晋添
//
// Created by jkc on 16/7/14.
// Copyright © 2016年 cjt. All rights reserved.
//

#import "TitleScrollView.h"

#define TitleBtnTag 300   //button的tag值
@implementation TitleScrollView

-(instancetype)initWithFrame:(CGRect)frame
{
 if (self = [super initWithFrame:frame]) {

  //初始化自身
  [self setBackgroundColor:[UIColor whiteColor]];
  self.showsHorizontalScrollIndicator = false;
  _ButtonWidth = _LineWidth = 60;

  self.linelabel = [[UILabel alloc] initWithFrame:CGRectMake(0, self.frame.size.height-1.5, _LineWidth, 1.5)];
  [self.linelabel setBackgroundColor:TintColor];
  [self addSubview:self.linelabel];
 }
 return self;
}

-(void)AddArrView:(NSArray*)array
{
 self.BtnArr = [NSMutableArray array];
 for (int i=0; i<array.count; i++) {
  //初始化所有btn
  UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(i*_ButtonWidth, 0, _ButtonWidth,34)];
  [btn addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
  btn.titleLabel.font = [UIFont systemFontOfSize:12];
  btn.titleLabel.textAlignment = NSTextAlignmentCenter;
  [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  [btn setTitle:array[i] forState:UIControlStateNormal];

  btn.tag = TitleBtnTag+i;

  [self addSubview:btn];
  [self.BtnArr addObject:btn];
 }
 //根据button个数设置内部大小
 [self setContentSize:CGSizeMake(array.count*_ButtonWidth, CGRectGetHeight(self.frame))];
}

-(void)click:(UIButton*)button
{
 //把所有的btn样式重置
 for (UIButton *btn in self.BtnArr) {
  btn.titleLabel.font = [UIFont systemFontOfSize:12];
  btn.titleLabel.textAlignment = NSTextAlignmentCenter;
  [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
 }

 //特殊设置点击的button样式
 [button setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];

 //计算获得偏移量,
 CGFloat index = (button.tag-TitleBtnTag)*_ButtonWidth-(self.frame.size.width-_ButtonWidth)/2;
 index = index<0?0:index;
 index = index>self.contentSize.width-CGRectGetWidth(self.frame)?self.contentSize.width-CGRectGetWidth(self.frame):index;

 //动画效果偏移
 [self setContentOffset:CGPointMake(index, 0) animated:YES];
 [UIView animateWithDuration:0.3 animations:^{
  self.linelabel.frame = CGRectMake((button.tag-TitleBtnTag)*_ButtonWidth, self.frame.size.height-1, _LineWidth, 1);
 }];

 self.clickBolck(button.tag);
}

//通过外部代码直接设置索引
-(void)setByIndex:(NSInteger)nowindex
{
 UIButton *button = self.BtnArr[nowindex];
 [self click:button];
}

@end

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

相关文章

  • IOS中使用 CocoaAsyncSocket​

    IOS中使用 CocoaAsyncSocket​

    ios原生的socket用起来不是很直观,所以我用的是CocoaAsyncSocket这个第三方库,对socket的封装比较好,只是好像没有带外传输(out—of-band) 如果你的服务器需要发送带外数据,可能得想下别的办法
    2016-02-02
  • IOS实现微信朋友圈相册评论界面的翻转过渡动画

    IOS实现微信朋友圈相册评论界面的翻转过渡动画

    现在很多人几乎每天都离不开微信,大家有没有发现在点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,于是学着做了一下,有需要一起看看。
    2016-08-08
  • iOS上下拉刷新控件MJRefresh使用方法详解

    iOS上下拉刷新控件MJRefresh使用方法详解

    这篇文章主要为大家详细介绍了iOS上下拉刷新控件MJRefresh的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案

    在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案

    这篇文章主要介绍了 在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案,需要的朋友可以参考下
    2017-01-01
  • 轻松搞定iOS远程消息推送

    轻松搞定iOS远程消息推送

    这篇文章主要帮助大家轻松搞定iOS远程消息推送,讨论远程推送的流程与配置过程,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • iOS中的UISlider滑块组件用法总结

    iOS中的UISlider滑块组件用法总结

    不仅是滑动开关,UISlider组件也是常用的进度条制作工具,这里我们就一起来看一下iOS中的UISlider滑块组件用法总结,需要的朋友可以参考下
    2016-06-06
  • IOS CocoaPods详解之进阶篇

    IOS CocoaPods详解之进阶篇

    这篇文章主要介绍了IOS CocoaPods详解之进阶篇,需要的朋友可以参考下
    2016-09-09
  • 实例解析iOS中音乐播放器应用开发的基本要点

    实例解析iOS中音乐播放器应用开发的基本要点

    这篇文章主要介绍了iOS开发中制作一个简单的音乐播放器的基本要点解析,代码基于传统的Objective-C,需要的朋友可以参考下
    2016-01-01
  • iOS利用摄像头获取环境光感参数的方法

    iOS利用摄像头获取环境光感参数的方法

    本篇文章主要介绍了iOS利用摄像头获取环境光感参数的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • iOS中的通知机制

    iOS中的通知机制

    网上经常说iOS的通知机制是使用了观察者模式,里面有两个角色,其一是poster(发送者),另一个是observer(接受信息的订阅者)。接下来通过本文给大家介绍iOS中的通知机制,感兴趣的朋友一起学习吧
    2016-04-04

最新评论