自定义UIButton 实现图片和文字 之间距离和不同样式
喜欢交朋友的加:微信号 dwjluck2013
1.UIButton+ImageTitleSpace.h
#import <UIKit/UIKit.h> // 定义一个枚举(包含了四种类型的button)
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
MKButtonEdgeInsetsStyleTop, // image在上,label在下
MKButtonEdgeInsetsStyleLeft, // image在左,label在右
MKButtonEdgeInsetsStyleBottom, // image在下,label在上
MKButtonEdgeInsetsStyleRight // image在右,label在左
}; @interface UIButton (ImageTitleSpace) /**
* 设置button的titleLabel和imageView的布局样式,及间距
*
* @param style titleLabel和imageView的布局样式
* @param space titleLabel和imageView的间距
*/
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space; @end
2.UIButton+ImageTitleSpace.m
#import "UIButton+ImageTitleSpace.h" @implementation UIButton (ImageTitleSpace) - (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space {
/**
* 知识点:titleEdgeInsets是title相对于其上下左右的inset,跟tableView的contentInset是类似的,
* 如果只有title,那它上下左右都是相对于button的,image也是一样;
* 如果同时有image和label,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。
*/ // 1. 得到imageView和titleLabel的宽、高
CGFloat imageWith = self.imageView.frame.size.width;
CGFloat imageHeight = self.imageView.frame.size.height; CGFloat labelWidth = 0.0;
CGFloat labelHeight = 0.0;
if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
// 由于iOS8中titleLabel的size为0,用下面的这种设置
labelWidth = self.titleLabel.intrinsicContentSize.width;
labelHeight = self.titleLabel.intrinsicContentSize.height;
} else {
labelWidth = self.titleLabel.frame.size.width;
labelHeight = self.titleLabel.frame.size.height;
} // 2. 声明全局的imageEdgeInsets和labelEdgeInsets
UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero; // 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值
/**
MKButtonEdgeInsetsStyleTop, // image在上,label在下
MKButtonEdgeInsetsStyleLeft, // image在左,label在右
MKButtonEdgeInsetsStyleBottom, // image在下,label在上
MKButtonEdgeInsetsStyleRight // image在右,label在左
*/
switch (style) {
case MKButtonEdgeInsetsStyleTop:
{
imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, , , -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(, -imageWith, -imageHeight-space/2.0, );
}
break;
case MKButtonEdgeInsetsStyleLeft:
{
imageEdgeInsets = UIEdgeInsetsMake(, -space/2.0, , space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(, space/2.0, , -space/2.0);
}
break;
case MKButtonEdgeInsetsStyleBottom:
{
imageEdgeInsets = UIEdgeInsetsMake(, , -labelHeight-space/2.0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, , );
}
break;
case MKButtonEdgeInsetsStyleRight:
{
imageEdgeInsets = UIEdgeInsetsMake(, labelWidth+space/2.0, , -labelWidth-space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(, -imageWith-space/2.0, , imageWith+space/2.0);
}
break;
default:
break;
} // 4. 赋值
self.titleEdgeInsets = labelEdgeInsets;
self.imageEdgeInsets = imageEdgeInsets;
} @end
3.使用
1.导入头文件
#import "UIButton+ImageTitleSpace.h"
2.在懒加载 按钮中调用
// 图片标题
- (UIButton *)imageTitleButton
{
if (!_imageTitleButton) {
_imageTitleButton = [[UIButton alloc]initWithFrame:CGRectZero];
_imageTitleButton.backgroundColor = [UIColor blackColor];
[_imageTitleButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[_imageTitleButton setImage:[UIImage imageNamed:@"nv"] forState:UIControlStateNormal];
_imageTitleButton.titleLabel.font = [UIFont systemFontOfSize:ImageTitleButtonFontSize];
//懒加载按钮中 调用即可
[_imageTitleButton layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleLeft imageTitleSpace:]; [_imageTitleButton setContentEdgeInsets:UIEdgeInsetsMake(, , , )];
_imageTitleButton.clipsToBounds = YES;
_imageTitleButton.layer.cornerRadius = ;
_imageTitleButton.alpha = 0.5; }
return _imageTitleButton;
}
自定义UIButton 实现图片和文字 之间距离和不同样式的更多相关文章
- UIButton的图片和文字相对位置调整
通常.假设直接设置UIButton的图片和文字,默认的两者相对位置可能不是我们想要的,那么须要进行调整. 须要用到的函数例如以下: UIEdgeInsetsMake(CGFloat top, CGFl ...
- 更改控件中DrawableLeft图片的大小,图片与文字的距离
Drawable drawable=getResources().getDrawable(R.drawable.xx); //获取图片 drawable.setBounds(left, top, ri ...
- UIButton上图片和文字的位置调整
UIButton 上默认是图片在左文字在右,而大多数情况这样默认的的显示形式都不能满足我们的需求,接下来我就这个问题分享一下我的心得. 默认情况下,不设置的效果,都是居中实现 UIButton *bu ...
- Android 自定义Android带图片和文字的ImageButton
经过分析,上述按钮效果实际上就是一个布局,一个最简单不过的垂直线性布局,上部分是一个ImageView,下部分是一个TextView,这个布局可点击.可设置监听. 我们首先要编写自己的ImageBut ...
- iOS开发小技巧--修改按钮内部图片和文字之间的间距(xib)
调整按钮的Edge属性,选择调整图片的Edge还是label的Edge,如图:
- UIButton左边图片右边文字的做法
UIImage *yuyinImage = [UIImage imageNamed:@"yuyin.png"]; [soundButton setImage:yuyinImage ...
- UIButton和UINavigationItem设置图片和文字位置
1.UIButton设置文字位置 有些时候我们想让UIButton的title居左对齐,我们设置 btn.textLabel.textAlignment = UITextAlignmentLeft 是 ...
- Android 巧妙实现图片和文字布局
之前写过一个博客是关于实现图片和文字左右或者上下布局的方法, 下面是博客的主要内容: 布局文件很简单,用来展示RadioButton的使用方法. 1 <?xml version="1. ...
- android TextView 例子代码(文字图片、文字省略、文字滚动)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
随机推荐
- ZOJ - 3932 Handshakes 【水】
题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3932 题意 给出 N 个人,然后 1-N 然后 从 1 - N ...
- 人生苦短之Python迭代器
迭代 在Python中,如果给定一个list或者touple,我们可以通过for循环来遍历,将值依次取出,这种遍历称为迭代. 在Python中是通过for...in..来进行遍历的,在Java中则是 ...
- laravel基础课程---3、路由(Laravel中的常见路由有哪几种)
laravel基础课程---3.路由(Laravel中的常见路由有哪几种) 一.总结 一句话总结: 6种:post,get,put,patch,delete,options Route::get($u ...
- web.xml 有什么用?
1.每个javaEE工程中都有web.xml文件,那么它的作用是什么呢?它是每个web.xml工程都必须的吗? 一个web中可以没有web.xml文件,也就是说,web.xml文件并不是web工程必须 ...
- H3C-交换机端口绑定
1.端口和MAC地址绑定: (1)使用am命令: [switch]am user-bind mac-address 00e0-fc23-f8d3 interface Ehternet 0/1 (2)使 ...
- 004-画图神器-graphviz
1 安装及基本使用 1) 下载安装 下载地址 可以下载安装版进行安装或者解压版直接使用 2) 添加系统path 为了能够在dos中使用命令, 需要添加环境变量 默认安装路径为 C:\Program F ...
- HDU1074(状态压缩DP)
Doing Homework Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- mysql函数之七:replace() MySQL批量替换指定字段字符串
mysql replace实例说明: UPDATE tb1 SET f1=REPLACE(f1, 'abc', 'def'); REPLACE(str,from_str,to_str) 在字符串 st ...
- 执行多个Sql脚本,Sqlplus
1.先制作需要执行的Sql文件list CMD 中输入[dir E:\FolderName >E:\ExcuteSqlList.txt ] 2.根据ExcuteSqlList.txt 中的文件名 ...
- 如何设置Xcode模拟器地图的当前位置
使用模拟器上的地图的话,需要设置当前位置,开启定位后,才能定位准确. 一.选中模拟器:Debug - Location - Custom Location 弹出的纬经度坐标.纬经度.纬经度坐标,默认显 ...