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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: