美文网首页
UIButton的titleEdgeInsets和imageEd

UIButton的titleEdgeInsets和imageEd

作者: Rookie_iOS | 来源:发表于2017-11-23 13:23 被阅读0次

    需求:修改按钮的布局文字在下,图片在上。
    实现方式:只会使用添加分类的方式去实现:

    以下内容仅针对title是单行的情况,以下内容仅针对title是单行的情况,以下内容仅针对title是单行的情况,多行我也不知道。

    注意:默认的情况下,文字在右,图片在左,但是你知道吗,图片和文字其实是均分按钮布局的。即将按钮图片和文字看做是一个整体的话,它其实是居中的。
    不信看图:


    按钮frame

    图片frame:


    图片frame
    文字frame:
    文字frame

    核心一:
    水平方向:300(按钮宽度) = 图片X坐标(27)*2 + 176(图片宽度) + (文字宽度69.5近似取70)70;
    水平方向:同理
    说以,要实现需求,分两步走战略。
    a.先将图片右移,移动距离其实就是文字宽度的一半(WTF?画图看看),但设置EdgeInsets的时候却需要设置整个宽度。然后上移,上移距离且听后文分解。
    b.移动文字同理。
    核心二:
    上移距离:先将图片文字看成上下排列的整体,移动后居中显示。其实就是在图片原有高度上的基础上增加了文字的高度,所以图片上移距离为文字高度的一半,文字下移图片高度的一半。此时图片文字无间距。(需要间距的话自己加上间距吧)。

    添加Button分类,作用是在分类里获取文字和图片的size。
    方式一、
    self.titleLabel.frame,self.imageView.frame获取,获取之前调用[self layoutIfNeeded]。否则可能获取不到。
    方式二、
    图片:
    UIImage *btnImage = [self imageForState:UIControlStateNormal];
    CGSize imageSize = btnImage.size;
    文字:
    NSString *title = [self titleForState:UIControlStateNormal];
    CGFloat fontSize = self.titleLabel.font.pointSize;
    CGSize titleSize = [title boundingRectWithSize:CGSizeMake(0, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:fontSize]} context:nil].size;
    设置EdgeInsets:
    self.titleEdgeInsets = UIEdgeInsetsMake(imageSize.height + 8, -(imageSize.width), 0, 0);
    self.imageEdgeInsets = UIEdgeInsetsMake(0,0,titleSize.height + 8,-(titleSize.width));

    注:文字完全显示时两种方式无差异,但是但文字显示不全时(单行),标题会以 "你个...."显示,这个时候方式一就不能正确获取到文字的宽度。

    相关文章

      网友评论

          本文标题:UIButton的titleEdgeInsets和imageEd

          本文链接:https://www.haomeiwen.com/subject/yyczvxtx.html