在UIButton中如何将imageView和titleView居中且上下分布

    //创建一个button

   UIButton *btn = [[UIButtonalloc]init];

    [self.viewaddSubview:btn];

    btn.frame =CGRectMake(100,200,90,90);

    btn.backgroundColor = [UIColorgrayColor];

    

    //添加图片

    [btn setImage:[UIImageimageNamed:@"tab_0"]forState:UIControlStateNormal];

    //添加文字

    [btn setTitle:@"首页"forState:UIControlStateNormal];

//    //设置文字的大小

    btn.titleLabel.font = [UIFontsystemFontOfSize:16];

    

   //为了能更好的显示图片和文字的位置我们设置一下图片和文字的背景颜色

    btn.titleLabel.backgroundColor = [UIColorpurpleColor];

    btn.imageView.backgroundColor = [UIColorcyanColor];

如图我们可以看到imageView和titleView的的分布关系 那么如何使imageView和titleView上下分布且居中呢，我想到的第一个方法就是设置frame值，但是设置frame值并没有什么用,这个可以自己试验一下。

那么我的第二种方法就是通过设置imageEdgeInsets和titleEdgeInsets来实现移动imageView和titleView

1.我们打印一下imageView和titleView的frame值，获得它们的位置和尺寸

NSLog(@"imageView:%@",NSStringFromCGRect(btn.imageView.frame));

NSLog(@"titleView:%@",NSStringFromCGRect(btn.titleLabel.frame));

得到如下结果

imageView:{{14, 30}, {30, 30}}

titleView:{{44, 35.5}, {32, 19.5}}

2.通过设置imageEdgeInsets和titleEdgeInsets来移动imageView和titleView

imageEdgeInsets和titleEdgeInsets时图片和文字在button中的内边距

typedefstruct UIEdgeInsets {

CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'

} UIEdgeInsets;

通过设置top, left, bottom, right可以实现向下，右，上，左移动，为什么是反方向，因为我们设置的是内

边距

注意：1.＋代表正向，－代表反向

下面我们做一个试验来，探索一下imageView和titleView的移动

btn.imageEdgeInsets =UIEdgeInsetsMake(0,0,0,0);

移动前

imageView:{{14, 30}, {30, 30}}

移动后:

imageView:{{14, 30}, {30, 30}}

得出结论 全部设置为0 不做任何的移动

btn.imageEdgeInsets =UIEdgeInsetsMake(1,0,0,0);

得到如下结果

移动前imageView:{{14, 30}, {30, 30}}

移动后imageView:{{14, 30.5}, {30, 30}}

得出结论:当改变一个值的时候，正值是向原有既定方向移动一半的改变值，负值是向反方向移动一半的改变值，前提是在没有设置button的对齐方式的时候，后面会有解释。

                       在设置button内部控件的对齐方式后，在设置内边距

btn.contentHorizontalAlignment =UIControlContentHorizontalAlignmentLeft;

 //UIControlContentHorizontalAlignmentLeft水平左对齐

btn.contentVerticalAlignment =UIControlContentVerticalAlignmentTop;

 //UIControlContentVerticalAlignmentTop垂直上对齐

NSLog(@"对齐后的imageView%@",NSStringFromCGRect(btn.imageView.frame));

NSLog(@"对齐后的titleLabel%@",NSStringFromCGRect(btn.titleLabel.frame));

设置对其方式后，button内部的控件分布如下图所示

对齐后的imageView{{0, 0}, {30, 30}}

对齐后的titleLabel{{30, 0}, {32, 19.5}}

此时我们在对imageView进行移动

//改变上内距的值

btn.imageEdgeInsets =UIEdgeInsetsMake(40,0,0,0);

移动后imageView:{{0, 40}, {30, 30}}

此时我们可以改变左内距的值

btn.imageEdgeInsets =UIEdgeInsetsMake(40,10,0,0);

移动后imageView:{{10, 40}, {30, 30}}

结论:1.必须设置一种对其方式，那么该方向的移动的距离才为我们设置的值

2.因此我们如果想移动button内部的控件先改变其对其方式，在进行移动。

                                          对button内部控件进行移动

//1.使imageView居中

    

 //获取imageView中的宽度和高度

    CGFloat imageW = btn.imageView.frame.size.width;

    CGFloat imageH = btn.imageView.frame.size.height;

    //获取titleLabel的宽度

    CGFloat labelW = btn.titleLabel.frame.size.width;

    CGFloat labelH = btn.titleLabel.frame.size.height;

    //计算移动距离

    CGFloat imageDistance = (btn.frame.size.width - imageW) * 0.5;

    //设置上内距

    CGFloat imageTop = (btn.frame.size.height - imageH - labelH) * 0.5;

    //进行移动

    btn.imageEdgeInsets = UIEdgeInsetsMake(imageTop, imageDistance, 0, 0);

    NSLog(@"移动后的imageView%@",NSStringFromCGRect(btn.imageView.frame));

移动后的imageView{{30, 20}, {30, 30}}

这时我们发现imageView的frame值相对于对齐后确实发生了改变

//使titleLabel居于imageView的正下方且居中

    //获取titleLabel的宽度

    CGFloat labelW = btn.titleLabel.frame.size.width;

    //计算移动距离

    CGFloat labelDistance = - imageW + (btn.frame.size.width - labelW) *0.5 ;

    //上内距

    CGFloat labelTop = imageTop + imageH;

    btn.titleEdgeInsets =UIEdgeInsetsMake(labelTop, labelDistance,0,0);

    NSLog(@"移动后的titleLabel%@",NSStringFromCGRect(btn.titleLabel.frame));

移动后的titleLabel{{30, 0}, {32, 19.5}}

此时我们发现移动后的titleLabelframe值和对齐后的frame值相同

结果图:

特别提醒：当我们设置button某一种对齐方式时 我们在该方向上的设置内边距才为我们实际上设置的值

比如我们设置了左对齐方式

btn.contentHorizontalAlignment =UIControlContentHorizontalAlignmentLeft;

那么我们设置的左内距，移动的才是我们设置的值