自定义Segment

自定义一个继承自UIView的类用来写Segment的UI和动效:

SegmentView.h

#import <UIKit/UIKit.h>

@interface SegmentView : UIView

- (void)setTitleViewWithArray:(NSArray *)titleArray;

- (void)beginMoveWithProgress:(CGFloat)progress;

@end

SegmentView.m

#import "SegmentView.h"

@interface SegmentView()

@property (nonatomic, strong)UIScrollView *myScrollView;

@end

@implementation SegmentView
{
    CGFloat AW;
    NSMutableArray *labelArray;//存放标题的数组
    UIView *lineView;//标题下划线
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.myScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        self.myScrollView.showsHorizontalScrollIndicator = NO;
        [self addSubview:self.myScrollView];
    }
    return self;
}

//Segment标题布局
- (void)setTitleViewWithArray:(NSArray *)titleArray {
    //存放标题宽度的数组
    NSMutableArray *textWArray = [NSMutableArray array];
    labelArray = [NSMutableArray array];
    
    //计算scrollView.contentSize.width
    AW = 0;
    
    for (NSString *str in titleArray) {
        CGFloat textW = [str boundingRectWithSize:CGSizeMake(MAXFLOAT, self.frame.size.height) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14]} context:nil].size.width;
        [textWArray addObject:@(textW)];
        //计算所有标题宽度总和
        AW = textW + AW;
    }
    
    AW = AW + titleArray.count * 20 + 20;
    
    self.myScrollView.contentSize = CGSizeMake(AW, 0);
    
    for (int i = 0; i < textWArray.count; i++) {
        //创建标题label,间隔20距离
        UILabel *lastLabel;
        
        CGFloat startW;//按钮frame.x的位置

        if (i > 0) {
            lastLabel = labelArray[i - 1];
            startW = CGRectGetMaxX(lastLabel.frame) + 20;
        }else {
            startW = 20;
        }
   
        CGFloat W = [textWArray[i] floatValue];
        UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(startW, 0, W, self.frame.size.height)];
        titleLabel.text = titleArray[i];
        titleLabel.textColor = [UIColor blackColor];
        titleLabel.font = [UIFont systemFontOfSize:14];
        [self.myScrollView addSubview:titleLabel];
        [titleLabel sizeToFit];
        titleLabel.center = CGPointMake(titleLabel.center.x, 40/2);
        [labelArray addObject:titleLabel];
    }
    
    lineView = [[UIView alloc]initWithFrame:CGRectMake(20, 38, [textWArray.firstObject floatValue], 1)];
    lineView.backgroundColor = [UIColor blackColor];
    [self.myScrollView addSubview:lineView];
}

//标题下划线的动效
- (void)beginMoveWithProgress:(CGFloat)progress {
    CGFloat decimal = progress - (int)progress;
    UILabel *fromLabel;
    UILabel *nextLabel;
    if (progress == labelArray.count - 1) {//最后一页
        fromLabel = labelArray[(int)progress];
        nextLabel = labelArray[(int)progress];
    }else {
        fromLabel = labelArray[(int)progress];
        nextLabel = labelArray[(int)progress + 1];
    }
    
    CGRect newFrame = lineView.frame;
    
    if (decimal < 0.5) {//前半页
        newFrame.origin.x = CGRectGetMinX(fromLabel.frame);
        newFrame.size.width = fromLabel.frame.size.width + (20 + nextLabel.frame.size.width) * decimal * 2;
    }else {//后半页
        newFrame.origin.x = CGRectGetMinX(fromLabel.frame) + (20 + fromLabel.frame.size.width) * (decimal - 0.5) * 2;
        newFrame.size.width = nextLabel.frame.size.width + (20 + fromLabel.frame.size.width) * (1 - decimal) * 2;
    }
    
    lineView.frame = newFrame;
    
    //选中的标题移动到屏幕中间
    [self setSelectLabelCenter:fromLabel];
}

- (void)setSelectLabelCenter:(UILabel *)selectLabel {
    if (selectLabel.center.x < UI_SCREEN_WIDTH/2) {
        [self.myScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
    }else if ((selectLabel.center.x + UI_SCREEN_WIDTH/2) < self.myScrollView.contentSize.width) {
        [self.myScrollView setContentOffset:CGPointMake(selectLabel.center.x - UI_SCREEN_WIDTH/2, 0) animated:YES];
    }else {
        [self.myScrollView setContentOffset:CGPointMake(self.myScrollView.contentSize.width - UI_SCREEN_WIDTH, 0) animated:YES];
    }
}

@end

创建Segment类:

- (void)createView {
    //创建SegmentView
    NSArray *titleArray = @[@"一",@"两个",@"三个字",@"四个字的",@"一",@"两个",@"三个字",@"四个字的"];
    segmentView = [[SegmentView alloc]initWithFrame:CGRectMake(0, 64, UI_SCREEN_WIDTH, 40)];
    segmentView.backgroundColor = [UIColor whiteColor];
    [segmentView setTitleViewWithArray:titleArray];
    [self.view addSubview:segmentView];
    
    //创建一个Scrollview作为主界面
    UIScrollView *myScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(segmentView.frame), UI_SCREEN_WIDTH, UI_SCREEN_HEIGHT - segmentView.frame.size.height - 64)];
    myScrollView.contentSize = CGSizeMake(UI_SCREEN_WIDTH * titleArray.count, 0);
    myScrollView.showsHorizontalScrollIndicator = NO;//隐藏滚轮
    myScrollView.pagingEnabled = YES;
    myScrollView.delegate = self;
    [self.view addSubview:myScrollView];
    
    for (int i = 0; i < titleArray.count; i++) {
        UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(i*UI_SCREEN_WIDTH, 0, UI_SCREEN_WIDTH, myScrollView.frame.size.height)];
        //随机背景色
        bgView.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0];
        [myScrollView addSubview:bgView];
    }
}

在scrollViewDidScroll中调用SegmentView的类方法,实现标题下划线动效:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView.contentOffset.x < 0 || scrollView.contentOffset.x > scrollView.contentSize.width - scrollView.bounds.size.width) {
        return;
    }

    CGFloat progress = scrollView.contentOffset.x/UI_SCREEN_WIDTH;
    [segmentView beginMoveWithProgress:progress];
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • 如果你还在为系统的UISegmentedControl蹩脚的功能而耿耿于怀,如果你还在仅仅为了制作一个简单的标签而...
    MrFire_阅读 2,790评论 2 12
  • 在我们开发中经常会遇到这样的需求 如下图: 下面是我自定义这个控件的过程: 新建一个UIView 新建一个XIB文...
    Hither阅读 9,262评论 14 13
  • 引言 自定义封装了一个Segment,使用简单,下面是效果图。 代码部分 首先定义一个SegmentStyle,把...
    听丶死亡在唱歌阅读 2,791评论 1 3
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,090评论 4 62
  • 小荷悦儿之家是滁州市唯一一家践行华德福理念的家庭园,早在多多一岁多时,我已经开始关注这家小小的园,慢慢的认...
    瑾大妞阅读 672评论 0 2