自定义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 ...
随机推荐
- Block和inline元素对比
所有的HTML元素都属于block和inline之一.block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, ...
- JavaScript学习第三天
今天学习第三天. 凡事都是需要坚持的,坚持下去. 学习内容: 1.document.getElementById(""),document.getElementByTagName( ...
- SDUT OJ 进制转换
进制转换 Time Limit: 1000MS Memory limit: 65536K 题目描述 输入一个十进制数N,将它转换成R进制数输出. 输入 输入数据包含多个测试实例,每个测试实例包含两个整 ...
- LightOJ1370 Bi-shoe and Phi-shoe —— 欧拉函数
题目链接:https://vjudge.net/problem/LightOJ-1370 1370 - Bi-shoe and Phi-shoe PDF (English) Statistics ...
- IOC入门1
1.配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:/ ...
- 清理html中空白符/空格/换行在行内元素中产生的间距
问题:行内元素之间产生间隔 原因:换行符,Tab制表符,空格产生间隔 解决方法: 1.行内元素写成一行 2.设置font-size为0px 把父级文本设置为0px; 再为需要显示文字的行内元素设置文字 ...
- codevs 1214线段覆盖
1214 线段覆盖 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定x轴上的N(0<N<100)条线段,每 ...
- codevs 1155今明的预算方案(复习有依赖性的背包问题)
1155 金明的预算方案 [题目大意]买附件必须买主件. 在一定钱数内 求总价值最大. [题解]有依赖性的背包问题. [code] #include<iostream> #include& ...
- bzoj 4711 小奇挖矿 ——“承诺”类树形dp
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4711 对“承诺”有了更深的了解. 向外和向内要区分,所以 f [ i ][ j ] 表示根向 ...
- 在JS中将指定表单内的“具有name数据的表单元素的值”封装为Get形式的字符串
//封装post时候,表单中所有具有name数据的表单元素的值,并返回“n=1&p=a” function serialize(formid) { var arr = []; var ipts ...