Swift实现自由调整图标按钮中的图标和文字位置(扩展UIButton)

按钮UIButton是ios开发中最常见的控件之一,下面来介绍UIButton的详细内容,及开发中需要注意的问题。

UIButton简介:

   使用目标动作设计模式,target-action模式,3种回调的模式之一。

实现原理:

使用下面的方法封装,根据用户的点击移动等动作

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;创建按钮:

//构造器方法,调用该方法创建某个样式的按钮对象
+ (id)buttonWithType:(UIButtonType)buttonType

参数:
buttonType:按钮样式
枚举值:
UIButtonTypeCustom = 0, 自定义风格UIButtonTypeRoundedRect, 圆角矩形
UIButtonTypeDetailDisclosure, 蓝色小箭头按钮,主要做详细说明用
UIButtonTypeInfoLight, 亮色感叹号
UIButtonTypeInfoDark, 暗色感叹号
UIButtonTypeContactAdd, 十字加号按钮UIButtonTypeSystem ,系统默认样式,若使用此样式,在使用setImage时会显示异常

示例:
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
配置按钮标题
//获取按钮的标题文字,只读属性
@property(nonatomic, readonly, retain) UILabel *titleLabel,注意请勿直接使用titleLabel来修改title
//返回在某个状态下,按钮的标题文字
- (NSString *)titleForState:(UIControlState)state

参数:
state:控件状态
枚举值:
UIControlStateNormal                //常规状态显现
UIControlStateHighlighted           //高亮状态显现
UIControlStateDisabled              //禁用的状态才会显现
UIControlStateSelected              //选中状态 UIControlStateApplication            //当应用程序标志时
UIControlStateReserved              //为内部框架预留,可以不管他
返回值:此状态下按钮的标题文字

示例:
NSString *title = [button titleForState:UIControlStateNormal];
//设置按钮在某个状态下的标题文字
- (void)setTitle:(NSString *)title
        forState:(UIControlState)state

示例:
[button setTitle:@"按钮" forState:UIControlStateNormal];       
//返回在某个状态下,按钮标题的富文本
- (NSAttributedString *)attributedTitleForState:(UIControlState)state

参数:
state:控件的状态
返回值:富文本
NSAttirbutedString 为富文本,详情参见NSAttirbutedString文档

示例:
NSAttributedString *attributedString = [button attributedTitleForState:UIControlStateNormal];
//设值按钮在某个状态下的富文本标题
- (void)setAttributedTitle:(NSAttributedString *)title
                  forState:(UIControlState)state
//返回按钮在某个状态下的标题颜色
- (UIColor *)titleColorForState:(UIControlState)state

参数:
state:状态
返回值:颜色

示例:
UIColor *color = [button titleColorForState:UIControlStateNormal];
//设置按钮标题的颜色
- (void)setTitleColor:(UIColor *)color
             forState:(UIControlState)state

参数:
color:颜色描述对象
state:状态

示例:
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];            
//返回某个状态下按钮标题的阴影颜色
- (UIColor *)titleShadowColorForState:(UIControlState)state
//设置某个状态下按钮标题的阴影颜色
- (void)setTitleShadowColor:(UIColor *)color
                   forState:(UIControlState)state

参数:
color:颜色描述对象
state:状态

示例:
[button setTitleShadowColor:[UIColor grayColor] forState:UIControlStateNormal];
//标题的阴影改变时,按钮是否高亮显示。默认为NO
@property(nonatomic) BOOL reversesTitleShadowWhenHighlighted
配置按钮演示
//按钮高亮的情况下,图像的颜色是否要加深一点。默认是YES
@property(nonatomic) BOOL adjustsImageWhenHighlighted
//按钮禁用的情况下,图像的颜色是否要加深一点。默认是YES
@property(nonatomic) BOOL adjustsImageWhenDisabled
//按下按钮是否会发光。默认是NO
@property(nonatomic) BOOL showsTouchWhenHighlighted
//返回按钮在某个状态下的背景图片
- (UIImage *)backgroundImageForState:(UIControlState)state

参数:
state:状态
返回值:背景图像

示例:
UIImage *image = [button backgroundImageForState:UIControlStateNormal];
//获取按钮的填充图片
- (UIImage *)imageForState:(UIControlState)state
//设置按钮的背景图片
- (void)setBackgroundImage:(UIImage *)image
                  forState:(UIControlState)state

参数:
image:背景图片
state:状态

示例:
[button setBackgroundImage:image forState:UIControlStateNormal];
//设置按钮的填充图片
- (void)setImage:(UIImage *)image
        forState:(UIControlState)state
配置按钮边框效果
//设置按钮的内部内容(包含按钮图片和标题)离按钮边缘上下左右的距离。
@property(nonatomic) UIEdgeInsets contentEdgeInsets

结构体:
CGFloat top, left, bottom, right;
四个值,分别是上左下右
//设置按钮的内部标题离按钮边缘上下左右的距离
@property(nonatomic) UIEdgeInsets titleEdgeInsets
//设置按钮的内部图片离按钮边缘上下左右的距离
@property(nonatomic) UIEdgeInsets imageEdgeInsets
获取按钮当前状态(只读)
//获取按钮状态,只读属性
@property(nonatomic, readonly) UIButtonType buttonType
//获取按钮当前标题,只读属性
@property(nonatomic, readonly, retain) NSString *currentTitle
//获取按钮当前的富文本标题
@property(nonatomic, readonly, retain) NSAttributedString *currentAttributedTitle
//获取当前标题的颜色
@property(nonatomic, readonly, retain) UIColor *currentTitleColor
//获取当前标题的阴影颜色
@property(nonatomic, readonly, retain) UIColor *currentTitleShadowColor
//获取当前按钮的图片
@property(nonatomic, readonly, retain) UIImage *currentImage
//获取当前按钮的背景图片
@property(nonatomic, readonly, retain) UIImage *currentBackgroundImage
//获取当前按钮的图片框对象
@property(nonatomic, readonly, retain) UIImageView *imageView
重写绘制行为
你可以通过子类化按钮来定制属于你自己的按钮类。在子类化的时候你可以重载下面这些方法,这些方法返回CGRect结构,指明了按钮每一组成部分的边界。

注意:不要直接调用这些方法, 这些方法是你写给系统调用的。

//指定背景边界
- (CGRect)backgroundRectForBounds:(CGRect)bounds
//指定内容边界
- (CGRect)contentRectForBounds:(CGRect)bounds
//指定文字标题边界
- (CGRect)titleRectForContentRect:(CGRect)contentRect
//指定按钮图像边界
- (CGRect)imageRectForContentRect:(CGRect)contentRect

示例:
- (CGRect)imageRectForContentRect:(CGRect)bounds{
        return CGRectMake(0.0, 0.0, 44, 44);
    }
事件
//给按钮添加点击事件
[button addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];

枚举值:
UIControlEventTouchDown                 // 单点触摸按下事件:用户点触屏幕,或者又有新手指落下的时候。
    UIControlEventTouchDownRepeat       // 多点触摸按下事件,点触计数大于1:用户按下第二、三、或第四根手指的时候。
    UIControlEventTouchDragInside       // 当一次触摸在控件窗口内拖动时。
    UIControlEventTouchDragOutside      // 当一次触摸在控件窗口之外拖动时。
    UIControlEventTouchDragEnter        // 当一次触摸从控件窗口之外拖动到内部时
    UIControlEventTouchDragExit         // 当一次触摸从控件窗口内部拖动到外部时。
    UIControlEventTouchUpInside         // 所有在控件之内触摸抬起事件
    UIControlEventTouchUpOutside        // 所有在控件之外触摸抬起事件(点触必须开始与控件内部才会发送通知)。
    UIControlEventTouchCancel           //所有触摸取消事件,即一次触摸因为放上了太多手指而被取消,或者被上锁或者电话呼叫打断。

    UIControlEventValueChanged          // 当控件的值发生改变时,发送通知。用于滑块、分段控件、以及其他取值的控件。你可以配置滑块控件何时发送通知,在滑块被放下时发送,或者在被拖动时发送。

    UIControlEventEditingDidBegin       // 当文本控件中开始编辑时发送通知
    UIControlEventEditingChanged        // 当文本控件中的文本被改变时发送通知。
    UIControlEventEditingDidEnd         // 当文本控件中编辑结束时发送通知。
    UIControlEventEditingDidEndOnExit   // 当文本控件内通过按下回车键(或等价行为)结束编辑时,发送通知。

    UIControlEventAllTouchEvents        // 通知所有触摸事件。
    UIControlEventAllEditingEvents      // 通知所有关于文本编辑的事件。
    UIControlEventApplicationReserved   // range available for application use
    UIControlEventSystemReserved        // range reserved for internal framework use
    UIControlEventAllEvents             // 通知所有事件

复选框checkBox的实现:

首先给选中,何不选中的时候设置背景图片

点击按钮的时候,取反selected值即可

利用selected状态,反选即可

示例代码:

-(void)checkboxClick:(UIButton *)btn
{
    btn.selected = !btn.selected;
}

- (void)viewDidLoad {
UIButton *checkbox = [UIButton buttonWithType:UIButtonTypeCustom];
   
    CGRect checkboxRect = CGRectMake(135,150,36,36);
    [checkbox setFrame:checkboxRect];
   
    [checkbox setImage:[UIImage imageNamed:@"checkbox_off.png"] forState:UIControlStateNormal];
    [checkbox setImage:[UIImage imageNamed:@"checkbox_on.png"] forState:UIControlStateSelected];
   
    [checkbox addTarget:self action:@selector(checkboxClick:) forControlEvents:UIControlEventTouchUpInside];
   [self.view addSubview:checkbox];   
}

自由调整图标按钮中的图标和文字位置(扩展UIButton)

1,Custom类型的UIButton
我们使用定制类型(Custom)的按钮就可以设置文字前面的图标。但是图片和文字的相对位置是固定的(按钮在前,文字在后)。
(1)我们用下面的左图(64*64)制作一个带图标的按钮

//创建一个图片加文字的按钮
let btn1:UIButton = UIButton(frame: CGRect(x: 50, y: 50, width: 180, height: 32))
btn1.setImage(UIImage(named: "alert"), forState: UIControlState.Normal) //按钮图标
btn1.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
btn1.setTitle("带图标按钮", forState: UIControlState.Normal) //按钮文字
btn1.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
self.view.addSubview(btn1)

(2)图片与文字间的间距方式1 - 设置图片偏移量(imageEdgeInsets)

1

btn1.imageEdgeInsets = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)

(3)图片与文字间的间距方式2 - 设置文字偏移量(titleEdgeInsets) 

btn1.titleEdgeInsets= UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 0)

2,扩展UIButton

如果我们想要把文字和图片位置调换下(即文字在前、图片在后),或者文字和图片改成上下排列,那么同样通过设置 titleEdgeInsets 和 imageEdgeInsets 即可实现。
为方便快速的设置图片和文字的相对位置,以及间距,这里对UIButton进行扩展。

(1)扩展代码如下:
import UIKit
 
extension UIButton {
 
    @objc func set(image anImage: UIImage?, title: String,
        titlePosition: UIViewContentMode, additionalSpacing: CGFloat, state: UIControlState){
        self.imageView?.contentMode = .Center
        self.setImage(anImage, forState: state)
        
        positionLabelRespectToImage(title, position: titlePosition, spacing: additionalSpacing)
        
        self.titleLabel?.contentMode = .Center
        self.setTitle(title, forState: state)
    }
    
    private func positionLabelRespectToImage(title: String, position: UIViewContentMode,
        spacing: CGFloat) {
        let imageSize = self.imageRectForContentRect(self.frame)
        let titleFont = self.titleLabel?.font!
        let titleSize = title.sizeWithAttributes([NSFontAttributeName: titleFont!])
        
        var titleInsets: UIEdgeInsets
        var imageInsets: UIEdgeInsets
        
        switch (position){
        case .Top:
            titleInsets = UIEdgeInsets(top: -(imageSize.height + titleSize.height + spacing),
                left: -(imageSize.width), bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -titleSize.width)
        case .Bottom:
            titleInsets = UIEdgeInsets(top: (imageSize.height + titleSize.height + spacing),
                left: -(imageSize.width), bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -titleSize.width)
        case .Left:
            titleInsets = UIEdgeInsets(top: 0, left: -(imageSize.width * 2), bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0,
                right: -(titleSize.width * 2 + spacing))
        case .Right:
            titleInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -spacing)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        default:
            titleInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        }
        
        self.titleEdgeInsets = titleInsets
        self.imageEdgeInsets = imageInsets
    }
}

(2)使用样例

import UIKit
 
class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let btn1:UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 32))
        btn1.center = CGPointMake(view.frame.size.width/2, 60)
        btn1.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
        btn1.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
        btn1.set(image: UIImage(named: "alert"), title: "文字在左侧", titlePosition: .Left,
            additionalSpacing: 10.0, state: .Normal)
        view.addSubview(btn1)
        
        
        let btn2:UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 32))
        btn2.center = CGPointMake(view.frame.size.width/2, 120)
        btn2.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
        btn2.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
        btn2.set(image: UIImage(named: "alert"), title: "文字在右侧", titlePosition: .Right,
            additionalSpacing: 10.0, state: .Normal)
        view.addSubview(btn2)
        
        let btn3:UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 170, height: 70))
        btn3.center = CGPointMake(view.frame.size.width/2, 230)
        btn3.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
        btn3.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
        btn3.set(image: UIImage(named: "alert"), title: "文字在上方", titlePosition: .Top,
            additionalSpacing: 10.0, state: .Normal)
        view.addSubview(btn3)
        
        let btn4:UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 170, height: 70))
        btn4.center = CGPointMake(view.frame.size.width/2, 290)
        btn4.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
        btn4.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
        btn4.set(image: UIImage(named: "alert"), title: "文字在下方", titlePosition: .Bottom,
            additionalSpacing: 10.0, state: .Normal)
        view.addSubview(btn4)
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

 

时间: 2024-10-24 18:47:35

Swift实现自由调整图标按钮中的图标和文字位置(扩展UIButton)的相关文章

ios开发Swift修改导航栏“返回”按钮文字,图标

项目中常常会使用 UINavigationController 对各个页面进行导航,导航栏左侧的返回按钮默认标题文字是上级页面的title. 但如果上级页面的标题很长,那么这个返回按钮字很多就会很丑:    开发Swift修改导航栏"返回"按钮文字,图标-swift 导航栏返回按钮">      当文字极其长时返回文字就会变成"back":         一,要修改"返回按钮"的文字,有如下两种方式: 1,在父页面中设置 将na

WPS演示中怎么制作带图片的图标按钮

  WPS演示中怎么制作带图片的图标按钮           1.打开WPS演示,新建空白文档,把里面的文本框全部删除. 2.点击菜单栏--插入--形状. 3.选择一款图标样式. 4.鼠标按住不放,在空白处画出该图标. 5.右击图标,选择设置对象格式. 6.在颜色与线条标签,点击颜色后面的小三角符号,选择填充效果. 7.然后切换到图片标签,点击插入图片. 8.在本地选择一张精美的图片,插入. 9.OK了,看看制作的图标,是不是很精美呢?

鼠标选择toolbar上的图标按钮,命令提示是从文件中获取么?

问题描述 鼠标选择toolbar上的图标按钮,命令提示是从文件中获取么? 鼠标选择toolbar上的图标按钮,在对应的状态栏中显示对应的命令提示,命令提示是从文件中获取么?怎么把提示放在状态栏中呢? 解决方案 可以用fileread语句读取文件,并且显示.

PS抠图KNOCKOUT去除图标按钮背景图的底色

绝音:专业提供扣图药方,一帖见效,药到病除.当然,也推荐你看看优设今年下载量第一的抠图神器: PS抠图神器:KNOCKOUT 2.0汉化版下载及教程 功效:去除图标.按钮等背景图的底色威力:★★★★需求:很多时候我们需要用到一些全透明的素材,比如: 问题: 设计图中没有全透明的素材 魔术棒选区会带有一些半透明度,底色背景删不干净,我们可以直接手工选区,一点点的删除底色背景,但是效率好低. 思考: 有没有办法设置魔术棒工具选区但不带半透明,让底色删的干净点?嘿嘿,我苦练了半天,终于练出成果,请看练

图标设计中的常见错误

1.不同图标之间差异不明显 有时候,在一组图标中,各个图标看起来很相似,很难区分出哪个是哪个.如果你如果你错过了文字说明,你会发现很容易把这些图标弄混. 上面的图标来自Mac OS X的效率应用板块.我经常把它们搞混,以至于运行错误的程序. 如果在屏幕上显示小图标的话,分辨不出的问题更是严重. 2.一个图标中包含太多元素 越是简单简明的图标越好.最好是把一个图标中的元素控制到最少. 然而,微软的设计师,受到Windows Vista中新图标形式的鼓舞,决定采用大而膨胀的图标,以便为他们膨胀的预算

如何取消IE加速器图标按钮

  IE8浏览器以上版本都有一个这样的功能,就是在网页上选中任意文字就会出现一个蓝色的小箭头,这个就是IE加速器.但很网友却觉得这功能很多余并不想使用它,有没有办法关闭这个游览器加速图标按钮呢?下面给大家来介绍方法: 1.打开IE8浏览器,点击"工具"在弹出的下拉框中找到"Internet 选项". 2.在"Internet 选项"设置里面移动到"高级"选项卡里面. 3.移动到最下面后,取消"在选择是显示加速器按钮&

让网页设计中的图标更具吸引力的几大要素

图标在网页设计中的作用 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面 中的 图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅 长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面中的区域,最为重要的事,

调整win7任务栏输入法图标

  1.鼠标右键点击桌面右下方任务栏的输入法图标,然后选择"设置"选项,如下图所示: 2.在弹出文本服务和输入语言窗口中选取"中文(简体)美式键盘"选项,点击"属性"按钮,如下图所示: 3.进入键盘布局预览后,直接按下"更改图标"按钮,如下图所示: 4.打开更改图标选项后,不仅可以根据自己喜欢选择图标,还可以从网络上下载ico格式图标,点击"浏览"进行添加,选择完毕点击"确定"按钮,如下

图标提取工具:如何从应用程序中提取图标

电脑用得久了时不时就会碰到一些有着美丽外表的软件图标,光彩夺目,如何将这些美丽的图标据为己有?这就要求你得具备一些图标提取技能了~~下面且听小编慢慢道来--如何利用图标提取工具从应用程序中提取图标! 图标提取工具:Axialis IconWorkshop(集图标制作.处理.编辑和提取功能为一体的图标提取工具,能快速从应用程序内提取ico.icon等格式图标) Axialis IconWorkshopz 风信网http://www.aliyun.com/zixun/aggregation/1847