溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

iOS仿網(wǎng)易簡單頭部滾動效果

發(fā)布時間:2020-09-03 14:05:59 來源:腳本之家 閱讀:183 作者: 欄目:移動開發(fā)

本文實例為大家分享了iOS仿網(wǎng)易滾動效果片展示的具體代碼,供大家參考,具體內容如下

仿網(wǎng)易的主要思想為:

1. 設置好按鈕與線的寬度,
2. 將所需要的標題傳入并生成按鈕
3. 在點擊的時候,通過計算偏移量,將自身進行偏移
4. 偏移量的設置需要注意不能小于0并且不成大于contengsize-frame的寬度

具體代碼如下,可直接使用,需要注意的是需要先設置寬度,再傳標題數(shù)組才可自動調整,否則會固定為默認的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;   //形成的按鈕數(shù)組
@property (nonatomic, strong) UILabel *linelabel;    //底部line
@property (nonatomic, strong) sectionTitleViewBlock clickBolck; //block回調

@property (nonatomic, assign) NSInteger LineWidth;    //設置線的長度
@property (nonatomic, assign) NSInteger ButtonWidth;   //按鈕的寬度

/**
 * 通過標題數(shù)組進行設置頭部滾動條
 *
 * @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];
 }
 //根據(jù)button個數(shù)設置內部大小
 [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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。

AI