用UIButton实现各种图文结合功能

        iOS的UIButton是一个非常常见而且常用的控件，我们一般用他来实现某个功能的提交以及选择操作等。我们可以建立只有文字的Button，也可以建立只有图片的Button，具体的需求要看应用设计的具体情况。有时候我们希望应用的界面元素是丰富多彩的，因此可能需要建立一个即有图片也有文字的按钮出来，其实UIButton是支持具有图片和文字功能的按钮的，这个只需要分别调用setTitle:forState和setImage:forSate两个方法就可以实现具有图片和文字功能的按钮。但是系统默认的图文结合的按钮布局是图片在左边而文字在右边，而且整体水平和垂直居中，比如下面这个按钮：

       但是有的时候我们又希望图片在右边而文字在左边；或者图片在上边而文字在下面；或者图片在按钮的中间而文字在图片的下面等等，但我们又不想放弃使用按钮这个控件，这时候怎么办？ 事件总是能找到解决方法的， 有的人会先建立一个按钮控件铺在下面，而在上面分别覆盖一个UIImageView和UILabel来实现；而有的人则干脆在UIButton上建立一个UIImageView和UILabel两个子视图；而有的人则不会用UIButton来实现图文结合的功能。 前面说的几个方法看起来有效，也确实会解决问题，但缺点是代码量会增加，而且必须同时管理UIButton, UIImageView, UILabel这三个整体，如果哪天产品还希望有一个按钮按下高亮或者按下阴影效果时，估计你就傻眼了。。。

      那么我们是否要放弃UIButton呢？答案是否定的，其实UIButton本身是可以支持各种图文结合的，既然UIButton上能同时显示图片和文字，那就可以肯定的说UIButton里面本身一定有一个UIImageView和UILabel子视图。UIButton本身就是一个复合控件，他分别提供了两个属性：

@property(nonatomic,readonly,retain)UILabel     *titleLabelNS_AVAILABLE_IOS(3_0);

@property(nonatomic,readonly,retain)UIImageView *imageView NS_AVAILABLE_IOS(3_0);

需要注意的是这两个属性必须要调用完setTitle:forSate和setImage:forSate后才能获取到，否则有可能会返回nil。 其中的 titleLabel是用来保存文字的而imageView是用来保存图片的。那既然UIButton本身就带有一个图片控件和文本控件，那是不是我们只要分别通过调整子控件的frame值就能实现我们想要的图片文字的任何布局呢？ 答案是否定的。实验证明通过设置titleLabel，imageView的frame值根本不会改变按钮里面图片在左而文字在右的格局。 难道我们就要此放弃了吗？其实不用。在UIButton里面还有另外两个属性：

@property(nonatomic)         UIEdgeInsets titleEdgeInsets;                // default is UIEdgeInsetsZero

@property(nonatomic)         UIEdgeInsets imageEdgeInsets;                // default is UIEdgeInsetsZero

这两个属性是分别用来调整按钮中文本的偏移缩进以及图片的偏移缩进的，他们都是一个UIEdgeInsets对象，默认的值都是0，也就是默认的值都是0的情况下按钮的图片和文字垂直整体在按钮中居中，而且图片在左边文字在右边，而且图片文本整体水平居中。而我们则可以通过调整titleEdgeInsets和imageEdgeInsets的值来实现我们想要的任何图文布局的情况，甚至我们希望图片和文字之间还要保留一些间隙的情况。怎么调整？ 调整多少为最合适？

在调整之前我们先定义几个特定的值：

CGRect titleRect = titleLabel.frame;        //文本控件在按钮中的frame值。

CGRect imageRect = imageView.frame;  //图片控件在按钮中的frame值。

CGFloat padding;                                     //用于指定文本和图片的间隙值。

CGFloat selfWidth;                                   //按钮控件的宽度

CGFloat selfHeight;                                  //按钮控件的高度

CGFloat totalHeight=titleRect.size.height+padding+imageRect.size.height;  //图文上下布局时所占用的总高度，注意这里也算上他们之间的间隙值padding

同时还需要注意的是我们只是调整文本和视图的位置，并不会调整大小，如果我们想往右移动20的话，那么就应该设置left=20, right=-20，而如果我们想往上移动20的话，那么就应该设置top=-20,bottom=20

一、图片在左，文字在右 保持整体居中

       这种方式是按钮本来的图文布局方式，因为要设置图片和文本的间距，所以只需要文本右移padding/2而图片左移padding/2值就可以了。公式为：

      

      titleEdgeInsets =UIEdgeInsetsMake(0,

                                         padding/2,

                                         0,

                                         -padding/2);

                    

      imageEdgeInsets = UIEdgeInsetsMake(0,

                                         -padding/2,

                                         0,

                                         padding/2);

      

二、图片在右，文字在左 保持整体居中

         这种方式下我们只需要将文字往左偏移图片的宽度并且再往左偏移padding/2就可以了，而图片则只需要往右偏移文本的宽度并再往右偏移padding/2就可以了。公式为：

     

      titleEdgeInsets =UIEdgeInsetsMake(0,

                                         -(imageRect.size.width + padding/2),

                                         0,

                                         (imageRect.size.width + padding/2));

                

      imageEdgeInsets =UIEdgeInsetsMake(0,

                                         (titleRect.size.width+ padding/2),

                                         0,

                                         -(titleRect.size.width+ padding/2));

三、图片在上，文字在下 保持整体居中