[控件] 多选一的标签

最新推荐文章于 2022-06-21 14:00:49 发布
最新推荐文章于 2022-06-21 14:00:49 发布
阅读量124 收藏
点赞数
文章标签： ui
原文链接：https://yq.aliyun.com/articles/29529
版权

多选一的标签

效果:

特点:

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];

weixin_34405332
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多选
weixin_44814732的博客
11-27 709
//多选 ```javascript <el-checkbox-group v-model="form.checkbox"> <el-checkbox v-for="(option,num) in item.options" :label="option.id" ...
多选一事件
Star_trails的博客
12-09 529
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多选一
android 多选一按钮,Android入门之多选按钮(CheckBox)
weixin_39843847的博客
05-26 500
效果图： 代码如下：activity_main.xmlxmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"a...
标签控件 流式布局 实现多选
01-05
在IT领域，尤其是在UI设计和前端开发中，"标签控件"、"流式布局"以及"实现多选"是常见的技术概念。这里我们将详细探讨这些知识点，以便于理解和应用。 首先，**标签控件（Tag Control）**，通常用于展示和管理一...
Jquery多选控件
12-20
1. **多选功能**：jQuery多选控件允许用户同时选择多个选项，通过简单的鼠标点击或者配合键盘操作，可以方便地添加或移除选中项。 2. **树形结构**：控件支持展现为树形结构，这对于展示具有层级关系的数据尤为有用...
日期多选控件
06-01
标签"日期多选"进一步明确了控件的核心特性，即用户可以选取一个以上的日期。实现这样的功能通常涉及到数据结构的设计，例如使用数组或集合来存储选定的日期，并且需要处理好日期的增删逻辑，确保用户的选择始终保持...
文件夹多选OCX控件MultiselectFolderActiveX
08-28
标签" C#文件夹多选"明确了这个控件主要针对的是C#开发者。C#是一种广泛使用的编程语言，尤其在Windows应用开发中非常常见。然而，C#的标准对话框组件并没有内置多选文件夹的功能，因此MultiselectFolderActiveX控件...
标签展示与多选
01-22
在iOS应用中，我们可以使用`UILabel`、`UIButton`等原生控件进行简单标签的构建，但为了实现更复杂的功能，如多选和自适应宽度，通常需要自定义视图或者利用第三方库，如`TagListView`。 2. **多选功能**： 多选...
MFC.RadioButton控件实现多选一
L_S_R_的博客
06-21 2847
mfc radiobutton
CSS+checkbox 实现多选按钮 多选标签
一个很酷的人
09-20 6462
效果图：         CSS： input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); } input[type='checkbox'] + label { display: block; height: 30px; ...
CheckBox多选控件的使用方法
ck1298677502的博客
05-28 2699
CheckBox多选控件的使用方法     关键字isChecked()     对于你想选着的每一个选项，都应该用CheckBox实现              android:id="@+id/checkboxchinese"//使用id便于后面对其的操作         android:layout_width="wrap_content"         android:la
HTML单选框-多选框-按钮
qishi45的博客
05-17 7711
<!DOCTYPE html> <!-- 表单元素格式： 属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、 file、hidden、image、和button。默认为text name 指定表单元素的名称 value 元素的初始值。type 为 radio
常见表单标签 多选按钮 单选按钮 下拉框 文本域
a520songhai的博客
07-05 900
多选按钮 &lt;input type="checkbox" name="vehicle" value="Car" checked="checked" /&gt; I have a car 单选按钮 &lt;input id="man" type="radio" checked="checked" name="1" /&amp
多选标签 用到jQuery
菜菜专栏
11-15 2765
在逛论坛无意中看到一个问题,这里是原文 http://bbs.csdn.net/topics/391858832 如何实现【点击A标签使其改变颜色】多个A标签，例如（1，2，3，4，5…），我想点击的时候，不跳转，颜色改变，再次点击时，颜色恢复原来的颜色。可以多选标签但大婶写的不是用 a 超链接写的，是用checkbox 多选， 这样写起来方便些您说呢?不多说了直接上源码下载吧。 多选
多选一按钮的一个解决方法
ioszhuang2015的专栏
05-06 1874
导航栏许多按钮，点一个其他按钮状态跟着变化，被点按钮为选中状态。 说一下我的方法，觉得实现得一般，期待大家提出一个更好的方案。 - (IBAction)titleButtonTap:(UIButton *)sender { UIButton *btn = self.btnArray.firstObject; if (btn.tag != sender.tag) {
javascript实现多选
WQ的技术分享
11-21 1101
html代码 js代码 var app = new Vue({ el : “.box”, data : { cities : [“上海”,“北京”,“广州”,“重庆”,“西安”], arr : [] }, methods :{ checkedBox(i){ if(this.arr.includes(i)){ //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效 //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次
winform下拉框多选控件
最新发布
05-01
WinForm下拉框多选控件的实现方式可以有多种，比如在列表中添加复选框，或者使用标签和复选框组成一个多选组合框。不同的实现方法对于不同的应用场景会有不同的适用性。另外，在使用WinForm下拉框多选控件时，需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值