自定义按钮之:文字图片位置随意定制

ABBAntje 3年前
   <p>可能有些看到这篇文章的朋友会觉得很不屑:“按钮谁不会自定义?还需要看你的?” 也确实,按钮是我们项目中最常见的控件之一,天天在使用。对于不同类型的按钮,我们是否有更加简便的方法来实现需求是我们需要做的。这里我提出自己的两种方法,您可以对你自己平时自定义按钮的方法做一下对比,看看哪种方法更加简单。</p>    <p>多说一句,千万不要觉得知识简单,觉得自己会了,没必要学习。’往往简单的东西存在大智慧’(这个比给满分),知识都是慢慢积累出来的。</p>    <p>按钮是应用中最常见的,最基本的一个控件。按钮的样式多种多样,系统默认样式为左右结构,图片在左边,文字在右边。系统按钮完全无法满足开发的需求,我们只能自己定制出想要的样式。既包含文字又包含图片的按钮有下面四种样式:</p>    <ul>     <li>图片在上,文字在下</li>     <li>图片在左,文字在右</li>     <li>图片在下,文字在上</li>     <li>图片在右,文字在左</li>    </ul>    <p>我们都知道,在按钮中可以通过设置图片和文字的内边距(UIEdgeInsetsMake)来改变图片和文字的位置来满足我们的需求。当然这只是其中一个方法。还有一种方法是使用继承,创建一个类继承自UIButton,通过重写layoutSubviews方法,来改变按钮内部子控件的位置,从而达到我们的需求。 话不多说, 开整。</p>    <p>方法一:通过分类的方式实现</p>    <p>新建一个UIButton的分类,下面是具体声明和实现</p>    <pre>  <code class="language-objectivec">#import <UIKit/UIKit.h>  // 定义一个枚举(包含了四种类型的button)  typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {      MKButtonEdgeInsetsStyleTop, // image在上,label在下      MKButtonEdgeInsetsStyleLeft, // image在左,label在右      MKButtonEdgeInsetsStyleBottom, // image在下,label在上      MKButtonEdgeInsetsStyleRight // image在右,label在左  };    @interface UIButton (ImageTitleSpacing)    /**   *  设置button的titleLabel和imageView的布局样式,及间距   *   *  @param style titleLabel和imageView的布局样式   *  @param space titleLabel和imageView的间距   */  - (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style                          imageTitleSpace:(CGFloat)space;    @end</code></pre>    <p>再来看看实现文件</p>    <pre>  <code class="language-objectivec">#import "UIButton+ImageTitleSpacing.h"    @implementation UIButton (ImageTitleSpacing)    - (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, 0, 0, -labelWidth);              labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);          }              break;          case MKButtonEdgeInsetsStyleLeft:          {              imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);              labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);          }              break;          case MKButtonEdgeInsetsStyleBottom:          {              imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);              labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);          }              break;          case MKButtonEdgeInsetsStyleRight:          {              imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);              labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);          }              break;          default:              break;      }        // 4. 赋值      self.titleEdgeInsets = labelEdgeInsets;      self.imageEdgeInsets = imageEdgeInsets;  }    @end</code></pre>    <p>使用方法:只需要新建一个分类将上面的代码拷贝,直接导入到需要使用的类中,调用方法就可以了,具体见下</p>    <pre>  <code class="language-objectivec">// 导入头文件  #import "UIButton+ImageTitleSpacing.h"  // 我们随意创建一个按钮比如button,在设置完按钮的图片、标题和frame后,只需要加上如下代码:  [button layoutButtonWithEdgeInsetsStyle: 这里填样式 imageTitleSpace: 这里填写图片和文字的间距];</code></pre>    <p>这样是不是很方便呢?</p>    <p>方法二:通过继承的方式实</p>    <p>新建一个继承自UIButton的类,重写layoutSubviews 方法,自己设置图片和文字的位置。</p>    <pre>  <code class="language-objectivec">#import "TSSquareButton.h"    @implementation TSSquareButton    - (instancetype)initWithFrame:(CGRect)frame {      if (self = [super initWithFrame:frame]) {          // 设置图片的其他属性          self.titleLabel.textAlignment = NSTextAlignmentCenter;          self.titleLabel.font = [UIFont systemFontOfSize:12.0];          [self setBackgroundColor:[UIColor whiteColor]];          [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];      }      return self;  }    // 重写layoutSubviews方法,手动设置按钮子控件的位置  - (void)layoutSubviews {      [super layoutSubviews];        self.imageView.TS_width = self.TS_width * 0.4;      self.imageView.TS_height = self.imageView.TS_width;      self.imageView.TS_y = self.TS_height * 0.25;      self.imageView.TS_centerX = self.TS_width * 0.5;        self.titleLabel.TS_width = self.TS_width;      self.titleLabel.TS_y = self.imageView.TS_buttom ;      self.titleLabel.TS_height = 25;      self.titleLabel.TS_x = 0;  }    @end</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d3276106359bde55573300ef254617a3.png"></p>    <p>两种方式运行结果</p>    <p>总结:</p>    <p>至此,设置图片的两种方法就已经讲完了。对比一下:</p>    <ul>     <li>第一种通过分类的方式设置按钮非常方便,只需要一行代码就足够了,不需要我们自己计算UIEngeInsetsMake,适用于纯代码创建的按钮。 如果是Xib创建的按钮就用不了了。</li>     <li>第二种通过继承的方式重写layoutSubviews的方式设置按钮好处是既适用于纯代码创建的按钮,也适用于Xib创建的按钮,但是这种方法有一定的局限性,它只适用于同一类型的按钮。一类比如我一个界面中有几种不同类型的按钮,这时候就需要我们创建不同的继承UIButton 的按钮类,在layoutSubviews设置不同的位置关系。这样就相对复杂了。</li>    </ul>    <p>两种方法各有利弊,各位可以根据自己的实际情况来选择使用。当然设置按钮图片和文字的位置并不止这两种方法,还有其他更好的方法等着我们去发现。如果你有什么更好的建议,也可以联系我,我们一同探讨学习。</p>    <p> </p>    <p> </p>    <p> </p>