欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-13 20:06:28
本文实例为大家分享了ios仿网易滚动效果片展示的具体代码,供大家参考,具体内容如下 仿网易的主要思想为: 1. 设置好按钮与线的宽度, 2. 将所需要的标题传...

本文实例为大家分享了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

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

上一篇:

下一篇: