自定义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 ...
随机推荐
- CAN协议与CANOpen协议
这里详细介绍了CAN协议中数据通信帧每位的含义,有图片,值得一看:https://www.cnblogs.com/pejoicen/p/3986587.html 这里介绍了CanOpen协议,http ...
- wifi 协议栈的历史的总结
google 了一下找到下面的网页关于wifi 协议栈的说明 https://www.lifewire.com/wireless-standards-802-11a-802-11b-g-n-and-8 ...
- ubuntu搜狗拼音安装
1.官方下载deb 2.双击安装 3.终端im-config,选择fcitx 4.重启 5.输入法设置中add一下sougoupinyin
- 录音-树莓派USB摄像头话筒
实测可用: sudo arecord --duration=10 --device=plughw:1,0 --format=cd aaa.wav sudo arecord --duration=10 ...
- [usaco2003feb]impster
FJ再也不用野蛮的方式为自己的奶牛编号了.他用一个B(1<=B<=16)位二进制编码给每头奶牛编号,并刻在奶牛耳朵上的金属条上.奶牛希望自己给自己选择一个编码.于是,瞒着FJ,他们制造了一 ...
- HDU4990 Reading comprehension —— 递推、矩阵快速幂
题目链接:https://vjudge.net/problem/HDU-4990 Reading comprehension Time Limit: 2000/1000 MS (Java/Others ...
- HTML页面下雪特效
1. [代码][HTML]代码 <a href="javascript:void(function(){var d = document,a = 'setAttribute' ...
- 使用Dubbo实现RPC调用
启动Dubbo服务有2个方式,1是通过xml配置,2是通过注解来实现,这点和Spring相似. 采用XML配置如下: <?xml version="1.0" encoding ...
- Linux-正则表达式与三剑客
1 固化命令文件 登录时执行文件的顺序 /etc/profile /etc/profile.d ~/.bash_profile ~/.bashrc /etc/bashrc 非登录shell ~/.ba ...
- Oracle数据常用操作
将用逗号隔开字段拆分成两行: select * from mp_fs_file_info a,dm_process_upload b where instr(b.attachment,a.file_i ...