close
当前位置: 物联网在线 > 技术文库 > ios >

iOS_按钮文字图片任意布局,随意定制

按钮是应用中最常见的,最基本的一个控件。

按钮的样式多种多样,系统默认样式为左右结构,图片在左边,文字在右边。系统按钮完全无法满足开发的需求,我们只能自己定制出想要的样式。

在这里分享一个自定义按钮,文字图片位置随意定制的demo给大家。

酷我音乐中的部分按钮

iOS_按钮文字图片任意布局,随意定制

iOS_按钮文字图片任意布局,随意定制

图片文字,上下左右,C2 * C2 = 4,文字在图片内部的按钮,在酷我音乐中没找到,但实际上也是有的,光布局样式至少有5种。每种布局样式,文字图片大小尺寸位置也不尽相同。

实现方法

重写下面两个方法,返回正确的布局即可。

- (CGRect)titleRectForContentRect:(CGRect)contentRect; - (CGRect)imageRectForContentRect:(CGRect)contentRect;

虽然可以实现,每个按钮都重写一遍,一个项目中那需要自定义多个按钮,每个都算一下布局。这是有多无聊和痛苦,有什么好的办法可以一劳永逸,适用所有的样式吗?答案是肯定的!

先上效果图

iOS_按钮文字图片任意布局,随意定制

自定义按钮.gif

外界调用

1.xib创建

iOS_按钮文字图片任意布局,随意定制

2.纯代码创建

    //左右结构,图片在左边,文字在右边。     {         YLButton * searchBtn = [YLButtonbuttonWithType:UIButtonTypeCustom];         [searchBtnsetImage:[UIImageimageNamed:@"search"] forState:UIControlStateNormal];         [searchBtnsetTitle:@"搜索按钮图片在左边" forState:UIControlStateNormal];         searchBtn.titleLabel.font = [UIFontsystemFontOfSize:13];         [searchBtnsetTitleColor:[UIColorredColor] forState:UIControlStateNormal];         [searchBtnsetTitleColor:[UIColororangeColor] forState:UIControlStateHighlighted];         searchBtn.imageRect = CGRectMake(10, 10, 20, 20);         searchBtn.titleRect = CGRectMake(35, 10, 120, 20);         [self.viewaddSubview:searchBtn];         searchBtn.frame = CGRectMake(SCREEN_WIDTH * 0.5 - 80, 250, 160, 40);         searchBtn.backgroundColor = [UIColorcolorWithRed:255/255.0 green:242/255.0 blue:210/255.0 alpha:1];     }

实现原理

1.先看.h文件

#import   @interface YLButton : UIButton @property (nonatomic,assign) CGRecttitleRect; @property (nonatomic,assign) CGRectimageRect; @end

2.实现.m文件

@implementationYLButton   - (CGRect)titleRectForContentRect:(CGRect)contentRect{     if (!CGRectIsEmpty(self.titleRect) && !CGRectEqualToRect(self.titleRect, CGRectZero)) {         return self.titleRect;     }     return [super titleRectForContentRect:contentRect]; }   - (CGRect)imageRectForContentRect:(CGRect)contentRect{       if (!CGRectIsEmpty(self.imageRect) && !CGRectEqualToRect(self.imageRect, CGRectZero)) {         return self.imageRect;     }     return [super imageRectForContentRect:contentRect]; }   @end

总结

有没有一种快刀斩乱麻的感觉,有没有感觉很好用,欢迎Star。

补充

评论里很多人认为用分类来实现更好一些。

那我说说我的看法,分类和继承在这里没有明显的优劣差别。但分类的实现明显要复杂一些,首先要给titleRect,imageRect设置属性关联,其次需要交换方法,把titleRectForContentRect:和 imageRectForContentRect:替换掉(runtime交换方法) 或者 直接覆盖掉(覆盖系统方法,隐患较大,不建议。)

那在使用的时候有什么差别呢,毋庸置疑,分类和继承都需要导入头文件,继承,需要创建YLButton对象,而分类直接创建系统的UIButton即可。分类使用的时候可以直接拖到项目中去,继承的话一般都会改下类的前缀再使用。

有兴趣的朋友可以自己用分类实现一下,难度不大。


(责任编辑:ioter)

用户喜欢...

iOS开源:WJClipsButton-Clips 按钮的完整实现

效果 要求 Swift 3.0 iOS 8.0 Xcode 8.0 安装 WJClipsButton is available through CocoaPods . To install it, simply add the following line to your Podfile: pod "WJClipsButton" 使用 Code Import import WJClipsButton Init Setup let wjButton = WJCl...


iOS开源:CBPic2ker - 图片选择,不但酷而且美还支持人脸识别

效果 特性 酷 给你丝滑的美 人脸识别 版本要求 iOS 8.0 安装 CBPic2ker 已经支持了CocoaPods. 只要在你的 Podfile 文件中添加下面的语句即可: pod "CBPic2ker" 不要忘记在info.plist文件中添加描述: 使用...


iOS开源:iOSPalette-图片精确提取主色调算法

Objective-C版本的Google Palette算法在Java.A工具中提取了一个图像的主要颜色。与传统的算法相比,iOSPalette可以帮助您提取更有可能成为“主色”的主色。它不是 总是像素数中最大的。 2.Why iOS-...


如何打造易扩展的高性能图片组件

内容提要 图片组件可以说是app开发中使用最多的组件之一,它既简单也不简单,如何设计和开发一个具有高扩展性,高性能的图片组件呢?本次分享将会从架构设计到性能优化等多方面,全...


如何写出一个丝滑的图片浏览器

那时,我想要一个这样的图片浏览器: 从小图进入大图浏览时,使用转场动画 可加载网络图片,且过渡自然,不阻塞操作 可各种姿势玩弄图片,且过渡自然,不阻塞操作 可以在往下拉时,...


老司机出品—疯狂造轮子之图片异步下载类

SDWebImage,我估计没有一个做iOS的不知道这个三方库吧,他为我们提供了简洁的图片异步下载方式。在他为我一句api带来这么大便利的同时,你有没有想过他是怎么实现的呢?让我们先来看看...


加载GIF图片优化方案

前言 许多项目需要加载GIF图片,但是在直接使用UIImageView加载存在许多问题,于是查找资料做了一个加载GIF的Demo,思路来源 https://github.com/YouXianMing/Animations 在链接里边,已经给出了解决办法...


iOS开源:Paparazzo - 拍照、选取、编辑图片于一身的精简、实用组件

Paparazzois a component for picking and editing photos. Key Features :camera: Taking photos using camera :iphone: Picking photos from user's photo library :scissors: Photo cropping and rotation Contents Installation Usage Presenting entire module A...


iOS 用Swipe手势和动画实现循环播放图片

主要想法 添加3个ImageView展示图片,实现图片的无限循环。 使用Swipe手势识别用户向右或向左滑动图片。 使用CATransition给ImageView.layer添加动画,展示图片更换的效果。 实现 在storyboard添加三个...


iOS开发——多线程完成短信获取按钮倒计时

现在的APP应用中,用手机获取短信验证码是非常常见的一个功能,而往往要求的效果就是在按下获取验证码之后,验证码的按钮开始倒计时,例如30秒后重新获取。而我们如何来完成这个效果...