UIButton 调整title和image的位置

想深入了解 UIButton 的image 和 titleLabel的关系必须知道的原理

(1)

Button有两个属性:titleEdgeInsets和imageEdgeInsets,通过设置这两个,就可以实现所有需要的Button的样式,如:image在上、image在下、image在左、image在右。


(2)

  1. titleEdgeInsets是titleLabel相对于其上下左右的inset,跟tableView的contentInset是类似的;
  2. 如果只有title,那titleLabel的 上下左右 都是 相对于Button 的;
  3. 如果只有image,那imageView的 上下左右 都是 相对于Button 的;
  4. 如果同时有image和label,那image的 上下左 是 相对于Button 的, 是 相对于label 的;
    label的 上下右 是 相对于Button的,  是 相对于label 的。

(3) 获取image的宽度和高度,获取titleLabel的宽度和高度

 // 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;
    }

- (void)createButtonOne{

    /*

           (1)button设置了image和title后都在button的中间

          */

     UIButton * button = [[UIButtonalloc]initWithFrame:CGRectMake(10100width_screen -100 , 60)];         button.titleLabel.adjustsFontSizeToFitWidth = YES;

   button.backgroundColor = [UIColor greenColor];

  [button setImage:[UIImage imageNamed:@"my_navigationicon"]forState:UIControlStateNormal];

  [button setTitle:@"立即导航" forState:UIControlStateNormal];

  [self.view addSubview:button];

  CGFloat imageWidth = button.imageView.frame.size.width;

  CGFloat imageHeight = button.imageView.frame.size.height;

  CGFloat labelWidth = 0.0;

  CGFloat labelHeight = 0.0;

  if([UIDevice currentDevice].systemVersion.floatValue > 8){

       labelWidth = button.titleLabel.intrinsicContentSize.width;

       labelHeight = button.titleLabel.intrinsicContentSize.height;

    }else{

        labelWidth = button.titleLabel.frame.size.width;

        labelHeight = button.titleLabel.frame.size.height;

    }

    //image的尺寸 35*40.  button 的高度是60   image 居中  Top:(60 - 20 )/2     image 要距离左侧15

    //image在右侧 title在左侧

//    button.imageEdgeInsets = UIEdgeInsetsMake(0,labelWidth,0,-labelWidth);

//    button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth)

    //image在上 title在下

//    button.imageEdgeInsets = UIEdgeInsetsMake(-imageHeight/2, labelWidth/2, imageHeight/2, -labelWidth/2);

//    button.titleEdgeInsets = UIEdgeInsetsMake(labelHeight/2, -imageWidth/2, -labelHeight/2, imageWidth/2);

    //button的宽度  减去  image的宽度  和  titleLabel的宽度

    /*         设置  图片距离左侧的距离是 15  然后文字紧挨着图片

      (1)计算出 helfWidth  =(整个按钮的宽度 - 图片和label的宽度)/ 2  的出的是是图片距离button左侧的距离

      (2)如果要让图片距离按钮的左侧 15,需要作出的偏移量,就是计算出img想左侧偏移的距离。这种计算以img的中心点为参照也好,以左侧或者右侧为参照都是可以的。需要明白的是,这里只是一个参照值

     */

//    成功的图片左侧距离15,title紧挨着图片

    CGFloat leftWidth = (button.frame.size.width - imageWidth - labelWidth)/2;

    button.imageEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-imageWidth/2-15), 0, leftWidth - 15 - imageWidth/2);

    button.titleEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-imageWidth-15), 0, leftWidth - 15 - imageWidth);

    //成功的图片在左侧距离15,title紧挨着图片

//    CGFloat leftWidth = (button.frame.size.width - imageWidth - labelWidth)/2;

//    button.imageEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-15), 0, leftWidth - 15);

//    button.titleEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-15), 0, leftWidth - 15);   

}


参考

  1. UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列,这篇博客里介绍了上面的原理,建议仔细看,理解之后就可以明白
  2. UIButton 的 imageEdgeInsets 和 titleEdgeInsets,这篇博客末尾有github地址,我写的时候没有理解原理,所以设置的时候,参照了他的代码
  3. 如何布局包含Image和Title的UIButton,这篇是我最开始参考的,只有代码,没有原理



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值