标签云

最新推荐文章于 2024-06-03 17:32:07 发布
最新推荐文章于 2024-06-03 17:32:07 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： IOS开发笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woaifen3344/article/details/38554383
版权 
//
//  HYBCloudView.h
//  CloudShopping
//
//  Created by ljy-335 on 14-8-11.
//  Copyright (c) 2014年 uni2uni. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <objc/runtime.h>

@protocol HYBCloudViewDelegate <NSObject>

- (void)onCloudViewTagClickedWithText:(NSString *)text;

@end
/*!
 * @brief 标签云效果视图定制
 * @create date  2014-08-11
 * @author huangyibiao
 */
@interface HYBCloudView : UIView

@property (nonatomic, weak) id<HYBCloudViewDelegate> delegate;
@property (nonatomic, assign) NSUInteger tagCounts;
/*!
 * @brief 刷新所有标签值
 * @param tagsArray 标签值数组
 */
- (void)reloadCloudTagsWithTags:(NSArray *)tagsArray;

@end

//-----------------------------------------------------------------------------//
// @brief 浮动标签定制
// @author huangyibiao
//-----------------------------------------------------------------------------//
@interface HYBBubbleLabel : UILabel

@property (nonatomic, weak) id delegate;

@end

//-----------------------------------------------------------------------------//
// @brief NSObject 扩展
// @author huangyibiao
//-----------------------------------------------------------------------------//
@interface NSObject (KVC)

- (id)valueForUndefinedKey:(NSString *)key;
- (void)setValue:(id)value forUndefinedKey:(NSString *)key;

@end


//
//  HYBCloudView.m
//  CloudShopping
//
//  Created by ljy-335 on 14-8-11.
//  Copyright (c) 2014年 uni2uni. All rights reserved.
//

#import "HYBCloudView.h"

#define kBubbleGapX   35
#define kBubbleGapY   10
#define kFontHeight   35
#define kDuration     16
#define kFlowInterval 2
#define kFont         [UIFont systemFontOfSize:16]
@interface HYBCloudView () {
    NSMutableArray *_datasources;
    NSInteger      _currentIndex;
}

@end

@implementation HYBCloudView

// 点下标签暂停动画
- (void)onBubbleTouchDown:(HYBBubbleLabel *)sender {
    CFTimeInterval pausedTime = [sender.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    sender.layer.speed = 0.0;
    sender.layer.timeOffset = pausedTime;
    NSLog(@"暂停动画");
    return;
}

// 点击标签
- (void)onBubbleTouchUpInside:(HYBBubbleLabel *)sender {
    NSLog(@"点击了");
    if ([self.delegate respondsToSelector:@selector(onCloudViewTagClickedWithText:)]) {
        [self.delegate onCloudViewTagClickedWithText:sender.text];
    }
    [self performSelector:@selector(onBubbleTouchUpOutside:) withObject:sender afterDelay:0.4];
    return;
}

// 点离标签继续动画
- (void)onBubbleTouchUpOutside:(HYBBubbleLabel *)sender {
    CFTimeInterval pausedTime = [sender.layer timeOffset];
    sender.layer.speed = 1.0;
    sender.layer.timeOffset = 0.0;
    sender.layer.beginTime = 0.0;
    CFTimeInterval timeSincePause = [sender.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    timeSincePause -= pausedTime;
    sender.layer.beginTime = timeSincePause;
    NSLog(@"点离了");
    return;
}

// 根据界面宽度选择显示的标签,最多选择3个
- (NSArray *)selectAtMostThreeBubbles {
    NSInteger tempIndex = _currentIndex;
    
    NSString *ob1 = [self objectArray:_datasources atIndex:tempIndex];
    CGFloat width1 = [ob1 sizeWithFont:kFont constrainedToSize:CGSizeMake(1000, kFontHeight)].width;
    
    ++tempIndex;
    NSString *ob2 = [self objectArray:_datasources atIndex:tempIndex];
    CGFloat width2 = [ob2 sizeWithFont:kFont constrainedToSize:CGSizeMake(1000, kFontHeight)].width;
    
    ++tempIndex;
    NSString *ob3 = [self objectArray:_datasources atIndex:tempIndex];
    CGFloat width3 = [ob3 sizeWithFont:kFont constrainedToSize:CGSizeMake(1000, kFontHeight)].width;
    
    if (width1 + width2 + width3 > 280) {// 如果三条显示的长度太长 就取两条显示
        //如果两条显示的长度太长 就取一条显示
        if (width1 + width2 > 280) {
            ++_currentIndex;
            return @[ob1];
        } else {
            _currentIndex += 2;
            return @[ob1, ob2];
        }
    }
    _currentIndex += 3;
    return @[ob1, ob2, ob3];
}

// 添加动画
- (NSArray *)bubbleArrayAnimatedUp {
    _currentIndex %= _datasources.count;
    
    NSArray *tempArray = [self selectAtMostThreeBubbles];
    NSMutableArray *resultArray = [[NSMutableArray alloc] init];
    for (int i = 0; i < tempArray.count; i++) {
        NSString *text = [tempArray objectAtIndex:i];
        CGFloat width = [text sizeWithFont:kFont constrainedToSize:CGSizeMake(1000, kFontHeight)].width;
        HYBBubbleLabel *label = [[HYBBubbleLabel alloc] init];
        label.frame = CGRectMake(self.width / 2 - width / 2, self.height - kFontHeight, width, kFontHeight);
        label.text = text;
        label.delegate = self;
        label.font = kFont;
        [label setTextColor:[UIColor whiteColor]];
        label.backgroundColor = [UIColor clearColor];
        [self addSubview:label];
        [resultArray addObject:label];
        
        CGFloat width0 = [[tempArray objectAtIndex:0] sizeWithFont:kFont
                                                constrainedToSize:CGSizeMake(1000, kFontHeight)].width;
        CGRect rect = label.frame;
        // 如果只有两个，那么左边一个、右边一个
        if ([tempArray count] == 2) {
            if (i == 0) { // 左边的
                rect.origin.x = self.width / 4 - width / 2;
            } else if (i == 1) {// 右边的
                rect.origin.x = self.width / 4.0 * 3.0 - width / 2;
            }
            rect.origin.y -= kFontHeight / 2;
        } else {// 如果是有1个或者3个
            if (i == 1) {
                rect.origin.x = self.width / 2 - width0 / 2;
                rect.origin.x -= (width - kBubbleGapX);
            } else if (i == 2) {
                rect.origin.x = self.width / 2 - width0 / 2;
                rect.origin.x += width0 - kBubbleGapX;
            }
            rect.origin.y -= (kFontHeight - kBubbleGapY);
        }
        label.frame = rect;
        
        CABasicAnimation *basicScale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        basicScale.fromValue = [NSNumber numberWithFloat:.65];
        basicScale.toValue = [NSNumber numberWithFloat:1.];
        basicScale.autoreverses = YES;
        basicScale.duration = kDuration / 2;
        basicScale.fillMode = kCAFillModeForwards;
        basicScale.removedOnCompletion = NO;
        basicScale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [label.layer addAnimation:basicScale forKey:@"s"];
        
        CABasicAnimation *basicOpa = [CABasicAnimation animationWithKeyPath:@"opacity"];
        basicOpa.fromValue = [NSNumber numberWithFloat:0.3];
        basicOpa.toValue = [NSNumber numberWithFloat:1.];
        basicOpa.autoreverses = YES;
        basicOpa.duration = kDuration / 2;
        basicOpa.fillMode = kCAFillModeForwards;
        basicOpa.removedOnCompletion = NO;
        basicOpa.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [label.layer addAnimation:basicOpa forKey:@"o"];
        
        UIBezierPath *path=[UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(label.originX + width / 2, label.originY + kFontHeight / 2)];
        switch (i) {
            case 0: {
                if ([tempArray count] == 1 || [tempArray count] == 3) {// 此时中间的走直线
                    [path addLineToPoint:CGPointMake(label.originX + width / 2, kFontHeight / 2)];
                } else if ([tempArray count] == 2) {// 没有中间 走左弧
                    [path addCurveToPoint:CGPointMake(label.originX + width / 2, kFontHeight / 2)
                            controlPoint1:CGPointMake(label.originX + width / 2, label.originY + kFontHeight / 2)
                            controlPoint2:CGPointMake(0, self.height / 2)];
                }
            }
                break;
            case 1: {
                if ([tempArray count] == 3) {// i==1 走左弧
                    [path addCurveToPoint:CGPointMake(label.originX + width / 2, kFontHeight / 2)
                            controlPoint1:CGPointMake(label.originX + width / 2, label.originY + kFontHeight / 2)
                            controlPoint2:CGPointMake(0, self.height / 2)];
                } else if ([tempArray count] == 2) {// 走右弧
                    [path addCurveToPoint:CGPointMake(label.originX + width / 2, kFontHeight / 2)
                            controlPoint1:CGPointMake(label.originX + width / 2, label.originY + kFontHeight / 2)
                            controlPoint2:CGPointMake(self.width, self.height / 2)];
                }
            }
                break;
            case 2:
                [path addCurveToPoint:CGPointMake(label.originX + width / 2, kFontHeight / 2)
                        controlPoint1:CGPointMake(label.originX + width / 2, label.originY + kFontHeight / 2)
                        controlPoint2:CGPointMake(self.width, self.height / 2)];

                break;
        }
        
        CAKeyframeAnimation *keyPosition = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        keyPosition.path = path.CGPath;
        keyPosition.fillMode = kCAFillModeForwards;
        keyPosition.removedOnCompletion = NO;
        keyPosition.duration = kDuration;
        keyPosition.delegate = self;
        [keyPosition setValue:label forKeyPath:@"itslayer"];
        keyPosition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [label.layer addAnimation:keyPosition forKey:@"x"];
    }
    return resultArray;
}

#pragma mark - CAAnimationDelegate
- (void)animationDidStart:(CAAnimation *)anim {
    UIView *view = [anim valueForKeyPath:@"itslayer"];
    NSNumber *number = [view valueForKeyPath:@"timeoffset"];
    if (number != nil) {
        view.layer.timeOffset = number.floatValue;
    }
    return;
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (flag) {
        UIView *view = [anim valueForKeyPath:@"itslayer"];
        [view removeFromSuperview];
    }
    return;
}

- (NSUInteger)tagCounts {
    return _datasources.count;
}

#pragma mark - 更新数据
- (void)reloadCloudTagsWithTags:(NSArray *)tagsArray {
    if (tagsArray.count == 0) {
        return;
    }
    if (_datasources == nil) {
        _datasources = [[NSMutableArray alloc] init];
    }
    [_datasources removeAllObjects];
    [_datasources addObjectsFromArray:tagsArray];

    // 设置初始动画偏移量
    for (int i = 0; i < kDuration / kFlowInterval; i++) {
        NSArray *bubbleArray = [self bubbleArrayAnimatedUp];
        for (UIView *view in bubbleArray) {
            [view setValue:[NSNumber numberWithFloat:(i + 1) * kFlowInterval] forKeyPath:@"timeoffset"];
        }
    }
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:kFlowInterval
                                                      target:self
                                                    selector:@selector(bubbleArrayAnimatedUp)
                                                    userInfo:nil
                                                     repeats:YES];
    [timer fire];
    return;
}

- (id)objectArray:(NSArray *)objectArray atIndex:(NSUInteger)index {
    return [objectArray objectAtIndex:(index % objectArray.count)];
}

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
    for (UIView *view in self.subviews) {
        if (CGRectContainsPoint(((CALayer *)view.layer.presentationLayer).frame, point)) {
            return view;
        }
    }
    return nil;
}

@end

//-----------------------------------------------------------------------------//
// @brief 浮动标签定制
// @author huangyibiao
//-----------------------------------------------------------------------------//
@implementation HYBBubbleLabel

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesBegan:touches withEvent:event];
    
    if ([self.delegate respondsToSelector:@selector(onBubbleTouchDown:)]) {
        [self.delegate performSelector:@selector(onBubbleTouchDown:) withObject:self];
    }
    return;
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesMoved:touches withEvent:event];
    return;
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesEnded:touches withEvent:event];
    
    UITouch *touch = [touches anyObject];
    if (CGRectContainsPoint([(CALayer *)[self.layer presentationLayer] frame],
                            [touch locationInView:self.superview])) {
        if ([self.delegate respondsToSelector:@selector(onBubbleTouchUpInside:)]) {
           [self.delegate performSelector:@selector(onBubbleTouchUpInside:) withObject:self];
        }
    } else {
        if ([self.delegate respondsToSelector:@selector(onBubbleTouchUpOutside:)]) {
            [self.delegate performSelector:@selector(onBubbleTouchUpOutside:) withObject:self];
        }
    }
    return;
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesCancelled:touches withEvent:event];
    
    UITouch *touch = [touches anyObject];
    if (CGRectContainsPoint([(CALayer *)[self.layer presentationLayer] frame],
                            [touch locationInView:self.superview])) {
        if ([self.delegate respondsToSelector:@selector(onBubbleTouchUpInside:)]) {
            [self.delegate performSelector:@selector(onBubbleTouchUpInside:) withObject:self];
        }
    } else {
        if ([self.delegate respondsToSelector:@selector(onBubbleTouchUpOutside:)]) {
            [self.delegate performSelector:@selector(onBubbleTouchUpOutside:) withObject:self];
        }
    }
    return;
}

@end


//-----------------------------------------------------------------------------//
// @brief NSObject 扩展实现
// @author huangyibiao
//-----------------------------------------------------------------------------//
@implementation NSObject (KVC)

- (id)valueForUndefinedKey:(NSString *)key{
    return objc_getAssociatedObject(self, (__bridge const void *)(key));
}

- (void)setValue:(id)value forUndefinedKey:(NSString *)key{
    objc_setAssociatedObject(self,
                             (__bridge const void *)(key),
                             value,
                             OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    return;
}

@end


标哥-iOS攻城狮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D球状旋转旋转tag
02-23
3D球状旋转旋转tag
解析3D标签云，其实很简单
Smile_qianmo的博客
07-13 364
3D标签云点开查看
Uni-APP标签
小菜鸟的博客
11-24 8480
Uni-APP Uni-app是一个跨平台的开发框架，学会Uni-APP之后可以跨发除iOS，Android，h5，以及各种小程序的应用，不需要再去学习其他应用的框架 uni-app常用开发软件 对uni-app比较友好的软件 微信开发者工具 下载微信小程序的使用工具 创建项目 打开hbuilderx 创建项目选择uni-app选项 创建好一个项目后点击运行到谷歌 运行在微信小程序的时候需要先配置路径 并且在设置中打开端口号才行 这样环境都配完之后就可以运行了 目录文件 pages 存放所有
uni-app 3D模型 360°全景展示流程
uebdjkdjd的博客
03-20 1967
uni-app引入3D模型展示 插件的流程和需要注意的问题 以及如何更换展示背景图
uniapp插件实现无限滚动的标签云
最新发布
m0_58213953的博客
06-03 701
已上线DCloud 插件市场
vue实现标签云效果的方法详解
10-16
实现一个动态的标签云效果能够提升用户体验，让内容展示更加生动有趣。在本篇文章中，我们将探讨如何利用Vue.js框架来实现一个3D标签云效果，并且会涉及到SVG技术的使用。 首先，我们需要明确什么是标签云。标签云...
原生js标签云.zip
09-01
"原生js标签云.zip"是一个关于使用JavaScript（JS）实现动态标签云效果的项目。标签云是一种常见的网页设计元素，它将一系列标签以不同大小和颜色展示，以表示每个标签的重要性和频率。下面我们将深入探讨如何使用...
jquery标签云制作无规则标签云样式
11-23
本教程将聚焦于如何利用jQuery创建一个无规则的标签云，这种标签云不仅视觉效果独特，而且能有效地展示和突出网站上的关键词或主题。 首先，我们需要了解标签云的基本概念。标签云是一种可视化技术，用于显示网站或...
js简单实现标签云效果实例
10-23
【JavaScript标签云实现详解】 在Web开发中，标签云（Tag Cloud）是一种常见的展示标签或关键词的方式，它通过不同大小和颜色的字体来突出显示各个标签的热度或重要性。本实例将介绍如何使用JavaScript简单地创建一...
3d立体旋转标签云
01-10
js和css完成标签云的制作,标签云立体展示,不断旋转的立体效果
JS标签云实现选择功能
07-18
JS标签云
C＃中用于.NET Windows.Forms的词云（标签云）生成器控件
04-08
从一些输入文本生成词云。 词云是文本中使用的一组随机排列的词。 每个单词的大小和颜色表示其使用频率。 很少使用的单词小而苍白。 该控件是可单击的，并允许在鼠标下识别单词。
uniapp小程序展示3D模型
孙少的博客
09-20 6719
uniapp小程序展示3D模型-使用three.js 进行渲染 在开发的期间查阅了大量的资料、案例，大多都是无稽之谈....经过摸索...终于开发出来了适合本项目的3D模型案例 为了帮助有需要的同学 少走弯路 特地记录了一下哦
uniapp组件-uni-tag标签
热门推荐
03-02 1万+
官方示例：https://ext.dcloud.net.cn/plugin?id=35 Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态 一、实心标签 <template> <view> <uni-tag text="标签" style="width: 61px;text-align: center;" /> <uni-tag text="标签" type="primary" style="width: 61px;text
uni-app常用的标签注意事项
qq_37734787的博客
08-25 4250
template标签和block标签的区别 uni-app 支持在 template 模板中嵌套 和 ，用来进行 列表渲染 和 条件渲染。 和 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 在不同的平台表现存在一定差异，推荐统一使用 。 非官方示例 ...
微信小程序，标签云效果：自定义颜色，并随机显示不同颜色
阿里巴啦的博客
08-02 9484
微信小程序自定义颜色，标签云效果 - wxml代码结构 &amp;amp;amp;amp;amp;amp;amp;amp;lt;view class='content'&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;block wx:for=&amp;amp;amp;amp;amp;amp;amp;quot;{{labArr}}&amp;
jekyll-tagging, osm插件自动生成标签云和标签页面
dowemo的博客
11-11 1628
jekyll-tagging, osm插件自动生成标签云和标签页面 源代码名称: jekyll-tagging源代码网址: http://www.github.com/pattex/jekyll-tagging jekyll-tagging源代码文档 jekyll-tagging源代码下载 标记 By Eilermann 和 Jens Wille jens.wille@uni
3D标签云效果的实现
wenzhi的博客
12-08 6848
TagCloudView是一个完全基于Android ViewGroup编写的控件，支持将一组View展示为一个3D标签云，并支持全方向滚动。 GitHub中的链接地址：https://github.com/misakuo/3dTagCloudAndroid
Android ViewGroup自定义标签云教程与实现详解
"本文将深入探讨如何在Android开发中自定义ViewGroup来实现标签云功能。标签云是一种常见的UI元素，用于显示一组关键词或标签，其大小根据其重要性自动调整。在本文中，作者首先介绍了自定义控件ViewGroup的基础步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值