AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[控件] 多选一的标签

2016-04-15 1401
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

多选一的标签

效果:

特点:

1. 自动根据文本长度计算按钮宽度

2. 良好的设计

 

缺点(靠你来修改了):

1. 没有解禁更多的参数设置(懒)

2. 动态计算没有做彻底(懒)

3. 没有做动画设置(懒)

 

源码:

ClassesScrollView.h 与 ClassesScrollView.m

//
//  ClassesScrollView.h
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol ClassesScrollViewDelegate <NSObject>
@optional
- (void)classesScrollViewChooseTag:(int)tag title:(NSString *)title;
@end

@interface ClassesScrollView : UIView


@property (nonatomic, weak)   id<ClassesScrollViewDelegate>  delegate;
@property (nonatomic, strong) NSArray                       *classesTitleArray; // 班级标题数组

// 创建出view
- (void)buildViews;

// 设置一开始高亮显示的班级
- (void)firstTag:(int)tag;

@end


//
//  ClassesScrollView.m
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ClassesScrollView.h"
#import "ClassButtonView.h"

#define  BASE_TAG 0x1122

@interface ClassesScrollView ()<ClassButtonViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;

@end

@implementation ClassesScrollView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
        [self addSubview:self.scrollView];
        self.scrollView.showsHorizontalScrollIndicator = NO;
        self.scrollView.showsVerticalScrollIndicator   = NO;
        
        self.scrollView.backgroundColor = [UIColor colorWithRed:0.749 green:0.906 blue:0.969 alpha:1];
    }
    return self;
}

- (void)buildViews {
    
    UIFont *font = [UIFont systemFontOfSize:14.f];
    
    CGFloat currentX = 5;
    
    for (int i = 0; i < self.classesTitleArray.count; i++) {
        NSString *string = self.classesTitleArray[i];
        
        // 按钮宽度
        CGFloat width = [string widthWithLabelFont:font] + BUTTON_GAP + BUTTON_INER_GAP;
        
        
        // 创建出View
        ClassButtonView *buttonView = [[ClassButtonView alloc] initWithFrame:CGRectMake(currentX, 0, 200, 30)];
        buttonView.title            = string;
        buttonView.font             = font;
        [buttonView makeToUse];
        
        if (i == 0) {
            [buttonView changeToHighlight];
        } else {
            [buttonView changeToNormal];
        }
        
        
        buttonView.tag              = i + BASE_TAG;
        buttonView.delegate         = self;
        
        [self.scrollView addSubview:buttonView];

        currentX += width;
    }
    
    self.scrollView.contentSize = CGSizeMake(currentX + 5, self.height);
}

- (void)classButtonViewButtonEventWithTitle:(NSString *)title buttonView:(ClassButtonView *)buttonView {

    
    if (_delegate && [_delegate respondsToSelector:@selector(classesScrollViewChooseTag:title:)]) {
        [_delegate classesScrollViewChooseTag:(int)(buttonView.tag - BASE_TAG) title:title];
    }
    
    
    for (int i = 0; i < self.classesTitleArray.count; i++) {
        ClassButtonView *tmpButtonView = (ClassButtonView *)[self.scrollView viewWithTag:i + BASE_TAG];
        
        if (buttonView.tag == tmpButtonView.tag) {
            [tmpButtonView changeToHighlight];
        } else {
            [tmpButtonView changeToNormal];
        }
    }
}

- (void)firstTag:(int)tag {
    for (int i = 0; i < self.classesTitleArray.count; i++) {
        ClassButtonView *tmpButtonView = (ClassButtonView *)[self.scrollView viewWithTag:i + BASE_TAG];
        
        if (tmpButtonView.tag == tag + BASE_TAG) {
            [tmpButtonView changeToHighlight];
        } else {
            [tmpButtonView changeToNormal];
        }
    }
}

@end

ClassButtonView.h 与 ClassButtonView.m
//
//  ClassButtonView.h
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "UIView+SetRect.h"
#import "NSString+StringHeight.h"


#define BUTTON_INER_GAP  25
#define BUTTON_GAP       10

@class ClassButtonView;

@protocol ClassButtonViewDelegate <NSObject>
@optional
- (void)classButtonViewButtonEventWithTitle:(NSString *)title buttonView:(ClassButtonView *)buttonView;
@end

@interface ClassButtonView : UIView

@property (nonatomic, weak)     id<ClassButtonViewDelegate> delegate;

@property (nonatomic, strong)   NSString   *title;  // 标题
@property (nonatomic, strong)   UIFont     *font;   // 字体
@property (nonatomic, strong)   UIButton   *button; // 按钮

@property (nonatomic, readonly) CGFloat     buttonWidth; // 按钮宽度

// 让参数开始生效(重新计算尺寸)
- (void)makeToUse;

// 改变到普通状态
- (void)changeToNormal;

// 改变到高亮状态
- (void)changeToHighlight;

@end


//
//  ClassButtonView.m
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ClassButtonView.h"

@interface ClassButtonView ()

@property (nonatomic) CGFloat buttonWidth;

@end

@implementation ClassButtonView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 初始化按钮
        self.button                    = [[UIButton alloc] initWithFrame:self.bounds];
        self.button.height             = 23.f;
        self.button.layer.cornerRadius = 23.f / 2.f;
        [self addSubview:self.button];
        
        
        [self.button addTarget:self
                        action:@selector(buttonEvent)
              forControlEvents:UIControlEventTouchUpInside];
    }
    
    return self;
}

- (void)buttonEvent {    
    if (_delegate && [_delegate respondsToSelector:@selector(classButtonViewButtonEventWithTitle:buttonView:)]) {
        [_delegate classButtonViewButtonEventWithTitle:self.title buttonView:self];
    }
}

- (void)makeToUse {
    // 获取宽度
    _buttonWidth = [self.title widthWithLabelFont:self.button.titleLabel.font];
    
    
    self.width = _buttonWidth + BUTTON_INER_GAP + BUTTON_GAP;

    
    self.button.width  = _buttonWidth + BUTTON_INER_GAP;
    self.button.center = self.middlePoint;
}

- (void)changeToNormal {
    [self.button setTitleColor:[UIColor colorWithRed:0.788 green:0.788 blue:0.788 alpha:1] forState:UIControlStateNormal];
    [self.button setBackgroundColor:[UIColor colorWithRed:1.000 green:1.000 blue:1.000 alpha:1]];
}

- (void)changeToHighlight {
    [self.button setTitleColor:[UIColor colorWithRed:0.996 green:0.996 blue:0.988 alpha:1] forState:UIControlStateNormal];
    [self.button setBackgroundColor:[UIColor colorWithRed:0.192 green:0.682 blue:0.902 alpha:1]];
}

// 重写setter，getter方法
@synthesize title = _title;
- (void)setTitle:(NSString *)title {
    _title = title;
    [self.button setTitle:title forState:UIControlStateNormal];
}

- (NSString *)title {
    return _title;
}

@synthesize font = _font;
- (void)setFont:(UIFont *)font {
    _font = font;
    self.button.titleLabel.font = font;
}
- (UIFont *)font {
    return _font;
}

@end

工具类:

UIView+SetRect.h 与 UIView+SetRect.m

//
//  UIView+SetRect.h
//  TestPch
//
//  Created by YouXianMing on 14-9-26.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface UIView (SetRect)

// Frame
@property (nonatomic) CGPoint viewOrigin;
@property (nonatomic) CGSize  viewSize;

// Frame Origin
@property (nonatomic) CGFloat x;
@property (nonatomic) CGFloat y;

// Frame Size
@property (nonatomic) CGFloat width;
@property (nonatomic) CGFloat height;

// Frame Borders
@property (nonatomic) CGFloat top;
@property (nonatomic) CGFloat left;
@property (nonatomic) CGFloat bottom;
@property (nonatomic) CGFloat right;

// Center Point
#if !IS_IOS_DEVICE
@property (nonatomic) CGPoint center;
#endif
@property (nonatomic) CGFloat centerX;
@property (nonatomic) CGFloat centerY;

// Middle Point
@property (nonatomic, readonly) CGPoint middlePoint;
@property (nonatomic, readonly) CGFloat middleX;
@property (nonatomic, readonly) CGFloat middleY;
@property (nonatomic, assign) CGFloat cornerRadius;
@property (nonatomic ,assign) BOOL round;
@end


//
//  UIView+SetRect.m
//  TestPch
//
//  Created by YouXianMing on 14-9-26.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "UIView+SetRect.h"

@implementation UIView (SetRect)

#pragma mark Frame

- (CGPoint)viewOrigin
{
    return self.frame.origin;
}

- (void)setViewOrigin:(CGPoint)newOrigin
{
    CGRect newFrame = self.frame;
    newFrame.origin = newOrigin;
    self.frame = newFrame;
}

- (CGSize)viewSize
{
    return self.frame.size;
}

- (void)setViewSize:(CGSize)newSize
{
    CGRect newFrame = self.frame;
    newFrame.size = newSize;
    self.frame = newFrame;
}


#pragma mark Frame Origin

- (CGFloat)x
{
    return self.frame.origin.x;
}

- (void)setX:(CGFloat)newX
{
    CGRect newFrame = self.frame;
    newFrame.origin.x = newX;
    self.frame = newFrame;
}

- (CGFloat)y
{
    return self.frame.origin.y;
}

- (void)setY:(CGFloat)newY
{
    CGRect newFrame = self.frame;
    newFrame.origin.y = newY;
    self.frame = newFrame;
}


#pragma mark Frame Size

- (CGFloat)height
{
    return self.frame.size.height;
}

- (void)setHeight:(CGFloat)newHeight
{
    CGRect newFrame = self.frame;
    newFrame.size.height = newHeight;
    self.frame = newFrame;
}

- (CGFloat)width
{
    return self.frame.size.width;
}

- (void)setWidth:(CGFloat)newWidth
{
    CGRect newFrame = self.frame;
    newFrame.size.width = newWidth;
    self.frame = newFrame;
}


#pragma mark Frame Borders

- (CGFloat)left
{
    return self.x;
}

- (void)setLeft:(CGFloat)left
{
    self.x = left;
}

- (CGFloat)right
{
    return self.frame.origin.x + self.frame.size.width;
}

- (void)setRight:(CGFloat)right
{
    self.x = right - self.width;
}

- (CGFloat)top
{
    return self.y;
}

- (void)setTop:(CGFloat)top
{
    self.y = top;
}

- (CGFloat)bottom
{
    return self.frame.origin.y + self.frame.size.height;
}

- (void)setBottom:(CGFloat)bottom
{
    self.y = bottom - self.height;
}


#pragma mark Center Point

#if !IS_IOS_DEVICE
- (CGPoint)center
{
    return CGPointMake(self.left + self.middleX, self.top + self.middleY);
}

- (void)setCenter:(CGPoint)newCenter
{
    self.left = newCenter.x - self.middleX;
    self.top = newCenter.y - self.middleY;
}
#endif

- (CGFloat)centerX
{
    return self.center.x;
}

- (void)setCenterX:(CGFloat)newCenterX
{
    self.center = CGPointMake(newCenterX, self.center.y);
}

- (CGFloat)centerY
{
    return self.center.y;
}

- (void)setCenterY:(CGFloat)newCenterY
{
    self.center = CGPointMake(self.center.x, newCenterY);
}


#pragma mark Middle Point

- (CGPoint)middlePoint
{
    return CGPointMake(self.middleX, self.middleY);
}

- (CGFloat)middleX
{
    return self.width / 2;
}

- (CGFloat)middleY
{
    return self.height / 2;
}

- (void)setCornerRadius:(CGFloat)cornerRadius
{
    self.layer.masksToBounds = YES;
    self.layer.cornerRadius  = cornerRadius;
}

- (void)setRound:(BOOL)round
{
    [self setCornerRadius:self.height/2];
}

- (CGFloat)cornerRadius
{
    return  self.layer.cornerRadius ;
}

- (BOOL)round
{
    return NO;
}

@end

NSString+StringHeight.h 与 NSString+StringHeight.m
//
//  NSString+StringHeight.h
//  USA
//
//  Created by YouXianMing on 14/12/10.
//  Copyright (c) 2014年 fuhuaqi. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface NSString (StringHeight)

/**
 *  计算文本高度
 *
 *  @param font   字体
 *
 *  @return 宽度
 */
- (CGFloat)heightWithLabelFont:(UIFont *)font withLabelWidth:(CGFloat)width;

/**
 *  计算文本宽度
 *
 *  @param font   字体
 *
 *  @return 宽度
 */
- (CGFloat)widthWithLabelFont:(UIFont *)font;

@end


//
//  NSString+StringHeight.m
//  USA
//
//  Created by YouXianMing on 14/12/10.
//  Copyright (c) 2014年 fuhuaqi. All rights reserved.
//

#import "NSString+StringHeight.h"

@implementation NSString (StringHeight)

- (CGFloat)heightWithLabelFont:(UIFont *)font withLabelWidth:(CGFloat)width {
    CGFloat height = 0;
    
    if (self.length == 0) {
        height = 0;
    } else {

        // 字体
        NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:18.f]};
        if (font) {
            attribute = @{NSFontAttributeName: font};
        }
        
        // 尺寸
        CGSize retSize = [self boundingRectWithSize:CGSizeMake(width, MAXFLOAT)
                                            options:
                          NSStringDrawingTruncatesLastVisibleLine |
                          NSStringDrawingUsesLineFragmentOrigin |
                          NSStringDrawingUsesFontLeading
                                         attributes:attribute
                                            context:nil].size;
        
        height = retSize.height;
    }
    
    return height;
}

/**
 *  计算
 *
 *  @param string 文本
 *  @param font   字体
 *
 *  @return 宽度
 */
- (CGFloat)widthWithLabelFont:(UIFont *)font {
    CGFloat retHeight = 0;
    
    if (self.length == 0) {
        retHeight = 0;
    } else {
        
        // 字体
        NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:18.f]};
        if (font) {
            attribute = @{NSFontAttributeName: font};
        }
        
        // 尺寸
        CGSize retSize = [self boundingRectWithSize:CGSizeMake(MAXFLOAT, 0)
                                              options:
                          NSStringDrawingTruncatesLastVisibleLine |
                          NSStringDrawingUsesLineFragmentOrigin |
                          NSStringDrawingUsesFontLeading
                                           attributes:attribute
                                              context:nil].size;
        
        retHeight = retSize.width;
    }
    
    return retHeight;
}

@end

 使用:
// 高度设置成30，不要变化
    ClassesScrollView *scrollView = [[ClassesScrollView alloc] initWithFrame:CGRectMake(0, 65, 320, 30)];
    scrollView.classesTitleArray  = @[@"NoZuoNoDie", @"YouXianMing", @"iOS Developer", @"UI Designer"];
    scrollView.delegate           = self;
    [scrollView buildViews];
    
    [self.view addSubview:scrollView];

文章标签：
iOS开发
游贤明
目录
相关文章
特创码农
|
8月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
特创码农
112 0
zuoben
|
JavaScript
Threejs实现标签，自定义样式显示标签
Threejs实现标签，自定义样式显示标签
zuoben
1496 0
Threejs实现标签，自定义样式显示标签
朝阳39
|
6月前
Element UI 多选表格【翻页多选】简易版（不支持翻页多选数据反显）
Element UI 多选表格【翻页多选】简易版（不支持翻页多选数据反显）
朝阳39
142 0
聂聂脸
|
8月前
单选全选框如何实现
单选全选框如何实现
聂聂脸
47 1
带你读小助手
|
开发者 容器
标签控件| 学习笔记
快速学习标签控件。
带你读小助手
87 0
带你读小助手
|
开发者 容器
标签控件|学习笔记
快速学习标签控件
带你读小助手
115 0
标签控件|学习笔记
静Yu
按钮与标签组件
按钮与标签组件
静Yu
116 0
天隆金
图片单选多选选择动画
在线演示 本地下载
天隆金
838 0
老朱教授
|
C#
c# 如何隐藏TabControl控件的标签 (转)
老朱教授
2269 0
范大脚脚
复合控件、组合控件、自定义服务控件
范大脚脚
1192 0

热门文章

最新文章

  • 1
    【实战】锐捷AC+AP配置WLAN基本服务系列
  • 2
    丰富、连接、待集成—MaxCompute 生态再出发
  • 3
    Tomcat 7.0 64位免安装解压版 安装及配置
  • 4
    securecrt克隆会话与sshd 的 MaxSessions
  • 5
    安卓支持RISC-V架构的技术剖析
  • 6
    生成文件的另一种思路——共享文件同步
  • 7
    高阶自定义View --- 粒子变幻、隧道散列、组合文字
  • 8
    奇虎团队不到1分钟攻破谷歌Pixel 斩获12万美元奖金
  • 9
    npm使用指南
  • 10
    Visual Studio 2010快捷键大全
  • 1
    Smolagents：三行代码就能开发 AI 智能体，Hugging Face 开源轻量级 Agent 构建库
    122
  • 2
    Cognita：小白也能搭建 RAG 系统，提供交互界面的开源模块化 RAG 框架，支持多种文档检索技术
    29
  • 3
    SocraticLM：通过 AI 提问引导学生主动思考，中科大与科大讯飞联合推出苏格拉底式教育大模型
    27
  • 4
    SoulChat2.0：低成本构建 AI 心理咨询师，华南理工开源心理咨询师数字孪生大语言模型
    29
  • 5
    TryOffAnyone：快速将模特服装图还原为平铺商品图，生成标准化的服装展示效果
    30
  • 6
    VITRON：开源像素级视觉大模型，同时满足图像与视频理解、生成、分割和编辑等视觉任务
    32
  • 7
    Memory Layers：如何在不增加算力成本的情况下扩大模型的参数容量？Meta 开源解决方法
    25
  • 8
    ImBD：复旦联合华南理工推出 AI 内容检测模型，快速辨别文本内容是否为 AI 生成
    23
  • 9
    《量子硬件制造：降低退相干率与错误率的策略》
    22
  • 10
    《量子计算硬件：关键指标对人工智能应用性能的影响》
    89

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月