iOS_按钮文字图片任意布局,随意定制

fcsdfse 3年前
   <p><strong>导读</strong></p>    <p>按钮是应用中最常见的,最基本的一个控件。</p>    <p>按钮的样式多种多样,系统默认样式为左右结构,图片在左边,文字在右边。系统按钮完全无法满足开发的需求,我们只能自己定制出想要的样式。</p>    <p>在这里分享一个自定义按钮,文字图片位置随意定制的demo给大家。</p>    <p><strong>酷我音乐中的部分按钮</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/657fab1aaa15d3815088849b93b3ae7d.png"></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0aa21ce2eb0e161dd97411620db66cfb.jpg"></p>    <ul>     <li>图片文字,上下左右,C2 * C2 = 4,文字在图片内部的按钮,在酷我音乐中没找到,但实际上也是有的,光布局样式至少有5种。每种布局样式,文字图片大小尺寸位置也不尽相同。</li>    </ul>    <p><strong>实现方法</strong></p>    <p>重写下面两个方法,返回正确的布局即可。</p>    <pre>  <code class="language-objectivec">- (CGRect)titleRectForContentRect:(CGRect)contentRect;  - (CGRect)imageRectForContentRect:(CGRect)contentRect;  </code></pre>    <p>虽然可以实现,每个按钮都重写一遍,一个项目中那需要自定义多个按钮,每个都算一下布局。这是有多无聊和痛苦,有什么好的办法可以一劳永逸,适用所有的样式吗?答案是肯定的!</p>    <p><strong>先上效果图</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/39a1bd0d2d0a3ffaed81c366fc71df0c.gif"></p>    <p style="text-align:center">自定义按钮.gif</p>    <p><strong>外界调用</strong></p>    <p>1.xib创建</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/323bee57ece4a6973d9bb951562acf4a.jpg"></p>    <p>2.纯代码创建</p>    <pre>  <code class="language-objectivec">    //左右结构,图片在左边,文字在右边。      {          YLButton * searchBtn = [YLButtonbuttonWithType:UIButtonTypeCustom];          [searchBtnsetImage:[UIImageimageNamed:@"search"] forState:UIControlStateNormal];          [searchBtnsetTitle:@"搜索按钮图片在左边" forState:UIControlStateNormal];          searchBtn.titleLabel.font = [UIFontsystemFontOfSize:13];          [searchBtnsetTitleColor:[UIColorredColor] forState:UIControlStateNormal];          [searchBtnsetTitleColor:[UIColororangeColor] forState:UIControlStateHighlighted];          searchBtn.imageRect = CGRectMake(10, 10, 20, 20);          searchBtn.titleRect = CGRectMake(35, 10, 120, 20);          [self.viewaddSubview:searchBtn];          searchBtn.frame = CGRectMake(SCREEN_WIDTH * 0.5 - 80, 250, 160, 40);          searchBtn.backgroundColor = [UIColorcolorWithRed:255/255.0 green:242/255.0 blue:210/255.0 alpha:1];      }  </code></pre>    <p><strong>实现原理</strong></p>    <p>1.先看.h文件</p>    <pre>  <code class="language-objectivec">#import     @interface YLButton : UIButton  @property (nonatomic,assign) CGRecttitleRect;  @property (nonatomic,assign) CGRectimageRect;  @end  </code></pre>    <p>2.实现.m文件</p>    <pre>  <code class="language-objectivec">@implementationYLButton     - (CGRect)titleRectForContentRect:(CGRect)contentRect{      if (!CGRectIsEmpty(self.titleRect) && !CGRectEqualToRect(self.titleRect, CGRectZero)) {          return self.titleRect;      }      return [super titleRectForContentRect:contentRect];  }     - (CGRect)imageRectForContentRect:(CGRect)contentRect{         if (!CGRectIsEmpty(self.imageRect) && !CGRectEqualToRect(self.imageRect, CGRectZero)) {          return self.imageRect;      }      return [super imageRectForContentRect:contentRect];  }     @end  </code></pre>    <p><strong>总结</strong></p>    <p>有没有一种快刀斩乱麻的感觉,有没有感觉很好用,欢迎Star。</p>    <p><strong>补充</strong></p>    <p>评论里很多人认为用分类来实现更好一些。</p>    <p>那我说说我的看法,分类和继承在这里没有明显的优劣差别。但分类的实现明显要复杂一些,首先要给titleRect,imageRect设置属性关联,其次需要交换方法,把titleRectForContentRect:和 imageRectForContentRect:替换掉(runtime交换方法) 或者 直接覆盖掉(覆盖系统方法,隐患较大,不建议。)</p>    <p>那在使用的时候有什么差别呢,毋庸置疑,分类和继承都需要导入头文件,继承,需要创建YLButton对象,而分类直接创建系统的UIButton即可。分类使用的时候可以直接拖到项目中去,继承的话一般都会改下类的前缀再使用。</p>    <p>有兴趣的朋友可以自己用分类实现一下,难度不大。</p>    <p> </p>    <p>来自:http://ios.jobbole.com/91082/</p>    <p> </p>