自定义滚动标签

最新推荐文章于 2021-07-13 20:31:06 发布
最新推荐文章于 2021-07-13 20:31:06 发布
阅读量371 收藏
点赞数 1
分类专栏： ios开发

#import <UIKit/UIKit.h>

@class SGTopTitleView;


@protocol SGTopTitleViewDelegate <NSObject>

// delegate 方法

- (void)SGTopTitleView:(SGTopTitleView *)topTitleView didSelectTitleAtIndex:(NSInteger)index;


@end


@interface SGTopTitleView : UIScrollView

/** 静止标题数组 */

@property (nonatomic, strong) NSArray *staticTitleArr;

/** 滚动标题数组 */

@property (nonatomic, strong) NSArray *scrollTitleArr;

/** 存入所有Label */

@property (nonatomic, strong) NSMutableArray *allTitleLabel;


#pragma mark - - - 以下属性一定要设置在 -> 标题数组 <- 之后, 否则无效果

/** 文字以及指示器颜色设置(默认为红色)*/

@property (nonatomic, strong) UIColor *titleAndIndicatorColor;

/** 是否隐藏指示器(默认为NO) 指示器的宽度是根据标题内容的宽度变化而变化的, 所以设置这个属性一定要在 -> 标题数组属性之后 */

@property (nonatomic, assign) BOOL isHiddenIndicator;

/** 背景指示器样式(默认指示器在标题文字下方, 设置此属性指示器显示在文字后方) */

@property (nonatomic, assign) BOOL showsTitleBackgroundIndicatorStyle;


@property (nonatomic, weak) id<SGTopTitleViewDelegate> delegate_SG;


/** 类方法 */

+ (instancetype)topTitleViewWithFrame:(CGRect)frame;



#pragma mark - - - 给外界ScrollView提供的方法以及自身方法实现

/** 静止标题选中颜色改变以及指示器位置变化 */

- (void)staticTitleLabelSelecteded:(UILabel *)label;

/** 滚动标题选中颜色改变以及指示器位置变化 */

- (void)scrollTitleLabelSelecteded:(UILabel *)label;

/** 滚动标题选中居中 */

- (void)scrollTitleLabelSelectededCenter:(UILabel




.#


#import "SGTopTitleView.h"

#import "UIView+SGExtension.h"


#define labelFontOfSize [UIFont systemFontOfSize:17]

#define SG_screenWidth [UIScreen mainScreen].bounds.size.width

#define selectedTitleAndIndicatorViewColor [UIColor redColor]


@interface SGTopTitleView ()

/** 静止标题Label */

@property (nonatomic, strong) UILabel *staticTitleLabel;

/** 滚动标题Label */

@property (nonatomic, strong) UILabel *scrollTitleLabel;

/** 选中标题时的Label */

@property (nonatomic, strong) UILabel *selectedTitleLabel;

/** 指示器 */

@property (nonatomic, strong) UIView *indicatorView;

@end


@implementation SGTopTitleView


/** label之间的间距(滚动时TitleLabel之间的间距) */

static CGFloat const labelMargin = 15;

/** 指示器的高度 */

static CGFloat const indicatorHeight = 2;


- (NSMutableArray *)allTitleLabel {

    if (_allTitleLabel == nil) {

        _allTitleLabel = [NSMutableArray array];

    }

    return _allTitleLabel;

}


- (instancetype)initWithFrame:(CGRect)frame {

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

        self.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.9];

        self.showsHorizontalScrollIndicator = NO;

        self.bounces = NO;

    }

    return self;

}


+ (instancetype)topTitleViewWithFrame:(CGRect)frame {

    return [[self alloc] initWithFrame:frame];

}



/**

 *  计算文字尺寸

 *

 *  @param text    需要计算尺寸的文字

 *  @param font    文字的字体

 *  @param maxSize 文字的最大尺寸

 */

- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize {

    NSDictionary *attrs = @{NSFontAttributeName : font};

    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;

}



#pragma mark - - - 重写静止标题数组的setter方法

- (void)setStaticTitleArr:(NSArray *)staticTitleArr {

    _staticTitleArr = staticTitleArr;

    

    // 计算scrollView的宽度

    CGFloat scrollViewWidth = self.frame.size.width;

    CGFloat labelX = 0;

    CGFloat labelY = 0;

    CGFloat labelW = scrollViewWidth / self.staticTitleArr.count;

    CGFloat labelH = self.frame.size.height - indicatorHeight * 0.5;

    

    for (NSInteger j = 0; j < self.staticTitleArr.count; j++) {

        // 创建静止时的标题Label

        self.staticTitleLabel = [[UILabel alloc] init];

        _staticTitleLabel.userInteractionEnabled = YES;

        _staticTitleLabel.text = self.staticTitleArr[j];

        _staticTitleLabel.textAlignment = NSTextAlignmentCenter;

        _staticTitleLabel.tag = j;

        

        // 设置高亮文字颜色

        _staticTitleLabel.highlightedTextColor = selectedTitleAndIndicatorViewColor;

        

        // 计算staticTitleLabel的x值

        labelX = j * labelW;

        

        _staticTitleLabel.frame = CGRectMake(labelX, labelY, labelW, labelH);

        

        // 添加到titleLabels数组

        [self.allTitleLabel addObject:_staticTitleLabel];

        

        // 添加点按手势

        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(staticTitleClick:)];

        [_staticTitleLabel addGestureRecognizer:tap];

        

        // 默认选中第0个label

        if (j == 0) {

            [self staticTitleClick:tap];

        }

        

        [self addSubview:_staticTitleLabel];

    }

    

    // 取出第一个子控件

    UILabel *firstLabel = self.subviews.firstObject;

    

    // 添加指示器

    self.indicatorView = [[UIView alloc] init];

    _indicatorView.backgroundColor = selectedTitleAndIndicatorViewColor;

    _indicatorView.SG_height = indicatorHeight;

    _indicatorView.SG_y = self.frame.size.height - indicatorHeight;

    [self addSubview:_indicatorView];

    

    

    // 指示器默认在第一个选中位置

    // 计算TitleLabel内容的Size

    CGSize labelSize = [self sizeWithText:firstLabel.text font:labelFontOfSize maxSize:CGSizeMake(MAXFLOAT, labelH)];

    _indicatorView.SG_width = labelSize.width;

    _indicatorView.SG_centerX = firstLabel.SG_centerX;

}


/** staticTitleClick的点击事件 */

- (void)staticTitleClick:(UITapGestureRecognizer *)tap {

    // 0.获取选中的label

    UILabel *selLabel = (UILabel *)tap.view;

    

    // 1.标题颜色变成红色,设置高亮状态下的颜色， 以及指示器位置

    [self staticTitleLabelSelecteded:selLabel];

    

    // 2.代理方法实现

    NSInteger index = selLabel.tag;

    if ([self.delegate_SG respondsToSelector:@selector(SGTopTitleView:didSelectTitleAtIndex:)]) {

        [self.delegate_SG SGTopTitleView:self didSelectTitleAtIndex:index];

    }

}


/** 静止标题选中颜色改变以及指示器位置变化 */

- (void)staticTitleLabelSelecteded:(UILabel *)label {

    // 取消高亮

    _selectedTitleLabel.highlighted = NO;

    

    // 颜色恢复

    _selectedTitleLabel.textColor = [UIColor blackColor];

    

    // 高亮

    label.highlighted = YES;

    

    _selectedTitleLabel = label;

    

    // 改变指示器位置

    [UIView animateWithDuration:0.20 animations:^{

        // 计算内容的Size

        CGSize labelSize = [self sizeWithText:_selectedTitleLabel.text font:labelFontOfSize maxSize:CGSizeMake(MAXFLOAT, self.frame.size.height - indicatorHeight)];

        self.indicatorView.SG_width = labelSize.width;

        self.indicatorView.SG_centerX = label.SG_centerX;

    }];

}



#pragma mark - - - 重写滚动标题数组的setter方法

- (void)setScrollTitleArr:(NSArray *)scrollTitleArr {

    _scrollTitleArr = scrollTitleArr;

    

    CGFloat labelX = 0;

    CGFloat labelY = 0;

    CGFloat labelH = self.frame.size.height - indicatorHeight * 0.5;

    

    for (NSUInteger i = 0; i < self.scrollTitleArr.count; i++) {

        /** 创建滚动时的标题Label */

        self.scrollTitleLabel = [[UILabel alloc] init];

        _scrollTitleLabel.userInteractionEnabled = YES;

        _scrollTitleLabel.text = self.scrollTitleArr[i];

        _scrollTitleLabel.textAlignment = NSTextAlignmentCenter;

        _scrollTitleLabel.tag = i;

        

        // 设置高亮文字颜色

        _scrollTitleLabel.highlightedTextColor = selectedTitleAndIndicatorViewColor;

        

        // 计算内容的Size

        CGSize labelSize = [self sizeWithText:_scrollTitleLabel.text font:labelFontOfSize maxSize:CGSizeMake(MAXFLOAT, labelH)];

        // 计算内容的宽度

        CGFloat labelW = labelSize.width + 2 * labelMargin;

        

        _scrollTitleLabel.frame = CGRectMake(labelX, labelY, labelW, labelH);

        

        // 计算每个label的X值

        labelX = labelX + labelW;

        

        // 添加到titleLabels数组

        [self.allTitleLabel addObject:_scrollTitleLabel];

        

        // 添加点按手势

        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollTitleClick:)];

        [_scrollTitleLabel addGestureRecognizer:tap];

        

        // 默认选中第0个label

        if (i == 0) {

            [self scrollTitleClick:tap];

        }

        

        [self addSubview:_scrollTitleLabel];

    }

    

    // 计算scrollView的宽度

    CGFloat scrollViewWidth = CGRectGetMaxX(self.subviews.lastObject.frame);

    self.contentSize = CGSizeMake(scrollViewWidth, self.frame.size.height);

    

    // 取出第一个子控件

    UILabel *firstLabel = self.subviews.firstObject;

    

    // 添加指示器

    self.indicatorView = [[UIView alloc] init];

    _indicatorView.backgroundColor = selectedTitleAndIndicatorViewColor;

    _indicatorView.SG_height = indicatorHeight;

    _indicatorView.SG_y = self.frame.size.height - indicatorHeight;

    [self addSubview:_indicatorView];

    

    

    // 指示器默认在第一个选中位置

    // 计算TitleLabel内容的Size

    CGSize labelSize = [self sizeWithText:firstLabel.text font:labelFontOfSize maxSize:CGSizeMake(MAXFLOAT, labelH)];

    _indicatorView.SG_width = labelSize.width;

    _indicatorView.SG_centerX = firstLabel.SG_centerX;

}


/** scrollTitleClick的点击事件 */

- (void)scrollTitleClick:(UITapGestureRecognizer *)tap {

    // 0.获取选中的label

    UILabel *selLabel = (UILabel *)tap.view;

    

    // 1.标题颜色变成红色,设置高亮状态下的颜色， 以及指示器位置

    [self scrollTitleLabelSelecteded:selLabel];

    

    // 2.让选中的标题居中 (当contentSize 大于self的宽度才会生效)

    [self scrollTitleLabelSelectededCenter:selLabel];

    

    // 3.代理方法实现

    NSInteger index = selLabel.tag;

    if ([self.delegate_SG respondsToSelector:@selector(SGTopTitleView:didSelectTitleAtIndex:)]) {

        [self.delegate_SG SGTopTitleView:self didSelectTitleAtIndex:index];

    }

}


/** 滚动标题选中颜色改变以及指示器位置变化 */

- (void)scrollTitleLabelSelecteded:(UILabel *)label {

    

    // 取消高亮

    _selectedTitleLabel.highlighted = NO;

    

    // 颜色恢复

    _selectedTitleLabel.textColor = [UIColor blackColor];

    

    // 高亮

    label.highlighted = YES;

    

    _selectedTitleLabel = label;

    

    // 改变指示器位置

    if (_showsTitleBackgroundIndicatorStyle == YES) {

        [UIView animateWithDuration:0.20 animations:^{

            self.indicatorView.SG_width = label.SG_width - labelMargin;

            self.indicatorView.SG_centerX = label.SG_centerX;

        }];

    } else {

        [UIView animateWithDuration:0.20 animations:^{

            self.indicatorView.SG_width = label.SG_width - 2 * labelMargin;

            self.indicatorView.SG_centerX = label.SG_centerX;

        }];

    }

}


/** 滚动标题选中居中 */

- (void)scrollTitleLabelSelectededCenter:(UILabel *)centerLabel {

    // 计算偏移量

    CGFloat offsetX = centerLabel.center.x - SG_screenWidth * 0.5;

    

    if (offsetX < 0) offsetX = 0;

    

    // 获取最大滚动范围

    CGFloat maxOffsetX = self.contentSize.width - SG_screenWidth;

    

    if (offsetX > maxOffsetX) offsetX = maxOffsetX;

    

    // 滚动标题滚动条

    [self setContentOffset:CGPointMake(offsetX, 0) animated:YES];

}



#pragma mark - - - setter

- (void)setIsHiddenIndicator:(BOOL)isHiddenIndicator {

    if (isHiddenIndicator == YES) {

        [self.indicatorView removeFromSuperview];

    }

}


- (void)setTitleAndIndicatorColor:(UIColor *)titleAndIndicatorColor {

    _titleAndIndicatorColor = titleAndIndicatorColor;

    

    for (UIView *subViews in self.allTitleLabel) {

        UILabel *label = (UILabel *)subViews;

        label.highlightedTextColor = titleAndIndicatorColor;

    }

    _indicatorView.backgroundColor = titleAndIndicatorColor;

}


- (void)setShowsTitleBackgroundIndicatorStyle:(BOOL)showsTitleBackgroundIndicatorStyle {

    _showsTitleBackgroundIndicatorStyle = showsTitleBackgroundIndicatorStyle;

    

    if (showsTitleBackgroundIndicatorStyle == YES) {

        

        [self.indicatorView removeFromSuperview];

        

        // 取出第一个子控件

        UILabel *firstLabel = self.subviews.firstObject;

        

        // 添加指示器

        self.indicatorView = [[UIView alloc] init];

        _indicatorView.backgroundColor = selectedTitleAndIndicatorViewColor;

        _indicatorView.SG_height = indicatorHeight;

        _indicatorView.SG_y = self.frame.size.height - indicatorHeight;

        [self addSubview:_indicatorView];

        

        // 指示器默认在第一个选中位置

        // 计算TitleLabel内容的Size

        CGSize labelSize = [self sizeWithText:firstLabel.text font:labelFontOfSize maxSize:CGSizeMake(MAXFLOAT, self.frame.size.height)];

        _indicatorView.SG_width = labelSize.width + labelMargin;

        _indicatorView.SG_centerX = firstLabel.SG_centerX;

        

        CGFloat indicatorViewHeight = 25;

        self.indicatorView.SG_height = indicatorViewHeight;

        self.indicatorView.SG_y = (self.frame.size.height - indicatorViewHeight) * 0.5;

    }

    

    self.indicatorView.alpha = 0.3;

    self.indicatorView.layer.cornerRadius = 5;

    self.indicatorView.layer.masksToBounds = YES;

}


*)



*/

centerLabel;
ZhangHaoChuanBK
关注
专栏目录
Android ViewPager + Fragment 自定义滑动标签
limushan的博客
07-07 505
Fragment+ViewPager+HorizontalScrollView 简单的分类导航页实现 效果图：
JS实现自动滚动内容，并高亮当前段落
只如初见0706的博客
07-23 2460
1.应用场景： 设置div固定高度，通过网络请求不断获取文本内容呈现在div中，当内容多到一定程度时出现滚动条，并且随着内容的增多滚动条自动滑动即始终位于最底部，并且当前段落内容高亮显示 2.实现效果如下： 3、实现代码如下： <!DOCTYPE html > <html> <head> <script src="js/jquery.min.j...
android自定义控件学习(一）单行横向标签并做溢出处理
debguhao的专栏
01-15 1678
正式开发android也有一个月左右了，公司的一个小的app基本完成，没什么事干，想起了搞点事。看到别人写的自定义控件用着挺爽的，也想着自己写一个，无奈能力有限，写了第一个属于自己的自定义控件费尽了心事。废话不多说，先上来效果图。（背景控件原型知乎app，而又不同于其效果） （知乎原型图） （我的效果图） 下面我说下我的思路： 制作标签横向列表，通过动态添加
css[自定义滚动条样式]
墨水白云的博客
07-23 204
而不是使用系统的默认滚动条，如下： 只需要给产生滚动条的标签加上一个css类即可。如：m-scroll 类的样式内容如下：
ios 设置导航titleView偏移问题
梦儿飞的博客
04-19 6222
从A页面push到B页面后，B页面的标题往右偏了，因为自定义的返回键，有点纳闷，后来查了一下，是因为上一个页面的标题太长了，虽然到B页面的时候我给做偏移隐藏了，但是还是会到影响到B页面的title显示，所以，还是得把返回文字的标题设置为空字符串。 解决办法就是在A页面设置如下代码： [objc] view plain copy    
自定义滚动条
swallowliyan的专栏
10-21 2867
在页面制作中，开发人员会各种偷懒（我本人就很懒），觉得能用原生的就用原生的，否则会很麻烦。最后还是会被追求美感的设计师抓住不放。经常听到‘‘怎么没有做成设计图上的样子呢..这个自带的滚动条多丑呀，必须要做成设计图上的样子...”通常这种情况我再会先跟设计解释，原生的怎么怎么好用,尽量说服他们。有时会碰到一些固执的设计师，我只坐下来嗷嗷的写代码了。 今天先记录一下自定义滚动条的效果。 思考：滚动
uniapp自定义滚动标签栏tab
shinjie1210的博客
07-13 1118
目录 新建组件 配置组件 编写css样式 本文主要介绍如何在uniapp里自定义一个向vant组件库里的标签栏滚动 ←点击查看 新建组件 首先在component文件夹里新建组件同名文件夹和组件 配置组件 通过uni自带的scroll-view标签，用v-for展示数据（数据自己编一组就行） 标签属性说明看这里 ←点击查看 <template> <view> <scroll-view scroll-x="true" class="...
datagridview 自定义滚动条
12-17
标题中的“datagridview 自定义滚动条”指的是在C#编程环境下，使用Windows Forms或WPF中的DataGridView控件时，对内置滚动条进行自定义样式和功能的调整。DataGridView是.NET框架提供的一种数据网格视图控件，常...
jQuery自定义滚动条完整实例
11-23
在网页设计中，为了提升用户体验和界面美观，有时我们需要自定义滚动条来替代浏览器默认的样式。本实例将深入讲解如何使用jQuery实现自定义滚动条的功能。首先，我们需要理解jQuery库的基本用法，这里我们使用的是...
winform自定义滚动条
05-16
"winform自定义滚动条"就是一个这样的例子，它涉及到对系统默认滚动条的扩展和定制，以提供更个性化的用户体验。这里我们将深入探讨如何在C#中创建自定义的滚动条控件，并结合提供的标签和压缩包文件内容进行解析。 ...
jquery自定义滚动条插件示例分享
10-26
jQuery 自定义滚动条插件就是为此目的而设计的工具。本文将详细讲解如何使用 jQuery 自定义滚动条插件，并提供一个示例来帮助开发者理解和实现。 首先，要创建自定义滚动条，我们需要引入必要的库和样式表。在提供...
各种函数声明和定义模块
最新发布
09-16
各种函数声明和定义模块
湖北工业大学在河南2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
1805.06605v2 DEFENSE-GAN.pdf
09-16
1805.06605v2 DEFENSE-GAN.pdf
【语音去噪】FIR和IIR低通+带通+高通语音信号滤波（含时域频域分析）【含Matlab源码 4943期】.mp4
09-16
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 语音处理系列程序定制或科研合作方向：语音隐藏、语音压缩、语音识别、语音去噪、语音评价、语音加密、语音合成、语音分析、语音分离、语音处理、语音编码、音乐检索、特征提取、声源定位、情感识别、语音采集播放变速等；
java-ssm+jsp幼儿园管理系统实现源码(项目源码-说明文档)
09-16
管理员成功登录后台管理界面，选择“教师管理”，出现教师列表。在教师管理页面，管理员可以添加、修改、查询及删除教师信息。 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
hadoop_3_2_0-yarn-resourcemanager-3.3.4-1.el7.x86_64.rpm
09-16
Ambari+Bigtop 一站式编译和部署解决方案 https://gitee.com/tt-bigdata/ambari-env
DelphiWebMVC-master.zip
09-16
delphi在web系统开发上没有像java或php 这样方便，对于一直使用delphi的工程师来说是个遗憾，因此使用delphi技术开发了一套Web框架，使用MVC模式，让工程师只需把精力放在模型与视图的设计上，让delphi开发web系统更方便。
自定义滚动条样式生成工具
在实际应用中，滚动条代码生成器会提供一个用户界面，允许用户选择颜色、阴影和其他视觉效果，然后自动生成相应的CSS代码，开发者只需将这段代码插入到网页的样式表中，即可实现自定义滚动条效果。 滚动条代码生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值