AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

iOS中 按钮和标题完美各种排列／完美教程

2016-05-17 1627
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

版权声明：本文为博主原创文章，未经博主允许不得转载。

每日更新关注:http://weibo.com/hanjunqiang  新浪微博！

前言：最近常常用到按钮和相应标题的组合，当按钮设置图片加标题时，触发范围较小，不易触发，最重要的是还要调试偏移量，相信研究过的开发者都很头疼这一点，那我我就想解决，于是在网上研究了一番，个人总结封装了一个，觉得很棒，推荐给大家！

下面看教程：

整体是对UIButton的自定义封装：


[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //UIButton+UIButtonSetEdgeInsets.h  
  2.   
  3. #import <UIKit/UIKit.h>  
  4.   
  5. @interface UIButton (CenterImageAndTitle)  
  6.   
  7. //上下居中，图片在上，文字在下  
  8. - (void)verticalCenterImageAndTitle:(CGFloat)spacing;  
  9. - (void)verticalCenterImageAndTitle; //默认6.0  
  10.   
  11. //左右居中，文字在左，图片在右  
  12. - (void)horizontalCenterTitleAndImage:(CGFloat)spacing;  
  13. - (void)horizontalCenterTitleAndImage; //默认6.0  
  14.   
  15. //左右居中，图片在左，文字在右  
  16. - (void)horizontalCenterImageAndTitle:(CGFloat)spacing;  
  17. - (void)horizontalCenterImageAndTitle; //默认6.0  
  18.   
  19. //文字居中，图片在左边  
  20. - (void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing;  
  21. - (void)horizontalCenterTitleAndImageLeft; //默认6.0  
  22.   
  23. //文字居中，图片在右边  
  24. - (void)horizontalCenterTitleAndImageRight:(CGFloat)spacing;  
  25. - (void)horizontalCenterTitleAndImageRight; //默认6.0  
  26.   
  27. @end  

每日更新关注:http://weibo.com/hanjunqiang  新浪微博！


[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //#import "UIButton+CenterImageAndTitle.m"  
  2. #import "UIButton+CenterImageAndTitle.h"  
  3.   
  4. @implementation UIButton (CenterImageAndTitle)  
  5.   
  6.   
  7. - (void)verticalCenterImageAndTitle:(CGFloat)spacing  
  8. {  
  9.     // get the size of the elements here for readability  
  10.     CGSize imageSize = self.imageView.frame.size;  
  11.     CGSize titleSize = self.titleLabel.frame.size;  
  12.       
  13.     // lower the text and push it left to center it  
  14.     self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height + spacing/2), 0.0);  
  15.       
  16.     // the text width might have changed (in case it was shortened before due to  
  17.     // lack of space and isn't anymore now), so we get the frame size again  
  18.     titleSize = self.titleLabel.frame.size;  
  19.       
  20.     // raise the image and push it right to center it  
  21.     self.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing/2), 0.0, 0.0, - titleSize.width);  
  22. }  
  23.   
  24. - (void)verticalCenterImageAndTitle  
  25. {  
  26.     const int DEFAULT_SPACING = 6.0f;  
  27.     [self verticalCenterImageAndTitle:DEFAULT_SPACING];  
  28. }  
  29.   
  30.   
  31. - (void)horizontalCenterTitleAndImage:(CGFloat)spacing  
  32. {  
  33.     // get the size of the elements here for readability  
  34.     CGSize imageSize = self.imageView.frame.size;  
  35.     CGSize titleSize = self.titleLabel.frame.size;  
  36.       
  37.     // lower the text and push it left to center it  
  38.     self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, imageSize.width + spacing/2);  
  39.       
  40.     // the text width might have changed (in case it was shortened before due to  
  41.     // lack of space and isn't anymore now), so we get the frame size again  
  42.     titleSize = self.titleLabel.frame.size;  
  43.       
  44.     // raise the image and push it right to center it  
  45.     self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + spacing/2, 0.0, - titleSize.width);  
  46. }  
  47.   
  48. - (void)horizontalCenterTitleAndImage  
  49. {  
  50.     const int DEFAULT_SPACING = 6.0f;  
  51.     [self horizontalCenterTitleAndImage:DEFAULT_SPACING];  
  52. }  
  53.   
  54.   
  55. - (void)horizontalCenterImageAndTitle:(CGFloat)spacing;  
  56. {  
  57.     // get the size of the elements here for readability  
  58.     //    CGSize imageSize = self.imageView.frame.size;  
  59.     //    CGSize titleSize = self.titleLabel.frame.size;  
  60.       
  61.     self.titleEdgeInsets = UIEdgeInsetsMake(0.0,  0.0, 0.0,  - spacing/2);  
  62.     self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing/2, 0.0, 0.0);  
  63. }  
  64.   
  65. - (void)horizontalCenterImageAndTitle;  
  66. {  
  67.     const int DEFAULT_SPACING = 6.0f;  
  68.     [self horizontalCenterImageAndTitle:DEFAULT_SPACING];  
  69. }  
  70.   
  71.   
  72. - (void)horizontalCenterTitleAndImageLeft:(CGFloat)spacing  
  73. {  
  74.     // get the size of the elements here for readability  
  75.     //    CGSize imageSize = self.imageView.frame.size;  
  76.     //    CGSize titleSize = self.titleLabel.frame.size;  
  77.       
  78.     self.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing, 0.0, 0.0);  
  79. }  
  80.   
  81. - (void)horizontalCenterTitleAndImageLeft  
  82. {  
  83.     const int DEFAULT_SPACING = 6.0f;  
  84.     [self horizontalCenterTitleAndImageLeft:DEFAULT_SPACING];  
  85. }  
  86.   
  87.   
  88. - (void)horizontalCenterTitleAndImageRight:(CGFloat)spacing  
  89. {  
  90.     // get the size of the elements here for readability  
  91.     CGSize imageSize = self.imageView.frame.size;  
  92.     CGSize titleSize = self.titleLabel.frame.size;  
  93.       
  94.     // lower the text and push it left to center it  
  95.     self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, 0.0);  
  96.       
  97.     // the text width might have changed (in case it was shortened before due to  
  98.     // lack of space and isn't anymore now), so we get the frame size again  
  99.     titleSize = self.titleLabel.frame.size;  
  100.       
  101.     // raise the image and push it right to center it  
  102.     self.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + imageSize.width + spacing, 0.0, - titleSize.width);  
  103. }  
  104.   
  105. - (void)horizontalCenterTitleAndImageRight  
  106. {  
  107.     const int DEFAULT_SPACING = 6.0f;  
  108.     [self horizontalCenterTitleAndImageRight:DEFAULT_SPACING];  
  109. }  
  110. @end  
每日更新关注:http://weibo.com/hanjunqiang  新浪微博！
使用方法非常简单：

[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //在使用的地方引入  
  2. #import "UIButton+CenterImageAndTitle.h"  
  3. #define kScreenHeight [[UIScreen mainScreen] bounds].size.height      //屏幕高度  
  4. #define kScreenWidth [[UIScreen mainScreen] bounds].size.width      //屏幕宽度  

为了展现所有效果，简单展示一下：

[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. for (int i = 0; i< 6; i++)  
  2.     {  
  3.         UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];  
  4.         button1.frame = CGRectMake(60, 80+i*60, kScreenWidth-60*2, 45);  
  5.         button1.tag = i;  
  6.         button1.backgroundColor = [UIColor greenColor];  
  7.         button1.titleLabel.font = [UIFont systemFontOfSize:15];  
  8.         [button1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];  
  9.         [button1 setImage:[UIImage imageNamed:@"good"] forState:UIControlStateNormal];  
  10.         [button1 setTitle:@"小韩哥的博客更新了" forState:UIControlStateNormal];  
  11.         [button1 addTarget:self action:@selector(testAction:) forControlEvents:UIControlEventTouchUpInside];  
  12.         [self.view addSubview:button1];  
  13.           
  14.         switch (i)  
  15.         {  
  16.             case 0:  
  17.             {  
  18.                 //系统默认图片在左，文字在右，间隔为0  
  19.             }  
  20.                 break;  
  21.                   
  22.             case 1:  
  23.             {  
  24.                 //上下居中，图片在上，文字在下  
  25.                 [button1 verticalCenterImageAndTitle:10.0f];  
  26.             }  
  27.                 break;  
  28.                   
  29.             case 2:  
  30.             {  
  31.                 //左右居中，文字在左，图片在右  
  32.                 [button1 horizontalCenterTitleAndImage:50.0f];  
  33.             }  
  34.                 break;  
  35.                   
  36.             case 3:  
  37.             {  
  38.                 //左右居中，图片在左，文字在右  
  39.                 [button1 horizontalCenterImageAndTitle:50.0f];  
  40.             }  
  41.                 break;  
  42.                   
  43.             case 4:  
  44.             {  
  45.                 //文字居中，图片在左边  
  46.                 [button1 horizontalCenterTitleAndImageLeft:50.0f];  
  47.             }  
  48.                 break;  
  49.                   
  50.             case 5:  
  51.             {  
  52.                 //文字居中，图片在右边  
  53.                 [button1 horizontalCenterTitleAndImageRight:50.0f];  
  54.             }  
  55.                 break;  
  56.                   
  57.             default:  
  58.                 break;  
  59.         }  
  60.     }  
每日更新关注:http://weibo.com/hanjunqiang  新浪微博！
最后是点击事件了：

[objc]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. - (void)testAction:(UIButton *)sender  
  2. {  
  3.     NSLog(@"testAction:%ld", (long)sender.tag);  
  4. }  
最终效果：

如有问题可通过微博互动联系我哦！

每日更新关注:http://weibo.com/hanjunqiang  新浪微博！

Demo下载地址：https://github.com/XiaoHanGe/UIButtonCenterTitleAndImage
文章标签：
iOS开发
开发者
关键词：
iOS按钮
iOS教程
iOS标题
iOS按钮教程
iOS标题排列
ghost丶桃子
目录
相关文章
iOS开发欢乐使者
|
8月前
|
iOS开发 开发者
【教程】苹果 iOS 证书制作教程
【教程】苹果 iOS 证书制作教程
iOS开发欢乐使者
754 2
iOS开发欢乐使者
|
8月前
|
iOS开发 开发者
一键制作 iOS 上架 App Store 描述文件教程
一键制作 iOS 上架 App Store 描述文件教程
iOS开发欢乐使者
188 2
哈你真皮
|
22天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
哈你真皮
50 7
众所周知
|
2月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例，介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时，按钮将从圆形变为椭圆形，颜色从蓝色渐变到绿色；释放按钮时，动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果，实现平滑自然的过渡。
众所周知
62 1
龙大吉
|
3月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例，介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时，按钮将从圆形变为椭圆形并从蓝色渐变为绿色；释放按钮时，动画恢复原状。通过UIView的动画方法和弹簧动画效果，实现平滑自然的动画过渡。
龙大吉
63 5
职说测试
|
5月前
|
测试技术 开发工具 虚拟化
iOS自动化测试方案(一)：MacOS虚拟机保姆级安装Xcode教程
这篇文章提供了一份保姆级的教程，指导如何在MacOS虚拟机上安装Xcode，包括环境准备、基础软件安装以及USB扩展插件的使用，以实现iOS自动化测试方案的第一步。
职说测试
243 0
iOS自动化测试方案(一)：MacOS虚拟机保姆级安装Xcode教程
星河造梦坊丨程序开发
|
5月前
|
图形学 数据安全/隐私保护 iOS开发
Unity与IOS⭐Xcode打包，上架TestFlight的完整教程
Unity与IOS⭐Xcode打包，上架TestFlight的完整教程
星河造梦坊丨程序开发
156 0
handsome0916
|
7月前
|
iOS开发 开发者
ios证书申请最简单的教程
使用uniapp进行开发的时候，点击uniapp打包界面的教程，提示需要Mac电脑申请ios证书，但是手上没有mac电脑，几经周折，终于找到了不需要mac电脑生成ios证书的解决方案。今天将解决方案整理出来。
handsome0916
115 10
郏国上
|
8月前
|
iOS开发
iOS13.6.1系统XR手机图文按钮显示不全问题
iOS13.6.1系统XR手机图文按钮显示不全问题
郏国上
80 0
郏国上
|
8月前
按钮的image图片是非圆角，直接对UIButton设置圆角，iOS13系统没有圆角效果的问题及解决方案
按钮的image图片是非圆角，直接对UIButton设置圆角，iOS13系统没有圆角效果的问题及解决方案
郏国上
56 0