且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事
您所在的位置：首页 > iOS中 按钮和标题完美各种排列／完美教程

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

更新时间：2022-08-13 20:08:15

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

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

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

下面看教程：

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


[objc] view plain copy  iOS中 按钮和标题完美各种排列／完美教程iOS中 按钮和标题完美各种排列／完美教程
  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  iOS中 按钮和标题完美各种排列／完美教程iOS中 按钮和标题完美各种排列／完美教程
  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  iOS中 按钮和标题完美各种排列／完美教程iOS中 按钮和标题完美各种排列／完美教程
  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  iOS中 按钮和标题完美各种排列／完美教程iOS中 按钮和标题完美各种排列／完美教程
  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  iOS中 按钮和标题完美各种排列／完美教程iOS中 按钮和标题完美各种排列／完美教程
  1. - (void)testAction:(UIButton *)sender  
  2. {  
  3.     NSLog(@"testAction:%ld", (long)sender.tag);  
  4. }  
最终效果：

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

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

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

Demo下载地址：https://github.com/XiaoHanGe/UIButtonCenterTitleAndImage


上一篇 : ：iOS中大流中的自定义cell 技术分享下一篇 : iOS中 最新微信支付／最全的微信支付教程详解

相关阅读

推荐文章

网站首页网站地图Copyright © 2021-2022 且购网

免责声明：本站文章部分来源于互联网,如有侵权请联系站长,我们将在72小时内删除。