美文网首页
UIButton 上图片下文字显示

UIButton 上图片下文字显示

作者: T_aa | 来源:发表于2017-04-23 10:47 被阅读24次

    要实现的效果:

    Paste_Image.png

    图片在文字之上显示,图片和文字都居中显示,可控制图片和文字之间的间距。

    计算:

    Paste_Image.png

    正常图片不设置按钮的 image和title的edgeinset的话正常布局是这样子的,左边上图片右边紧贴文字,s1和s2间距是一样的,如果文字太长的话会省略号显示,但是还是有s1和s2的间隙,如果按钮的宽度设置小于图片本身的宽度,文字就基本看不到了,图片宽度占满按钮的宽度,图片会被压缩适应显示。

    Paste_Image.png

    算偏移【中心点偏移】
    图片的位置偏移:
    offx = (x1 + x2)0.5 - x10.5;
    offy = (y1 + y2)0.5 - y10.5;

    标题的位置偏移:
    offx = (x1 + x2)0.5 - x20.5;
    offy = (y1 + y2)0.5 - y20.5;

    
    - (void)verticalHeightOffset:(CGFloat)heightOffset ver_space:(CGFloat)v_space
    {
        
    //    self.backgroundColor = [UIColor redColor];
    //    self.imageView.backgroundColor = [UIColor blueColor];
    //    self.titleLabel.backgroundColor = [UIColor greenColor];
        
        
        CGSize imageSize = self.imageView.frame.size;
        
        CGSize titleSize1 = [[self currentTitle] boundingRectWithSize:CGSizeMake(FLT_MAX, FLT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:self.titleLabel.font} context:NULL].size;
        CGSize titleSize2 = self.titleLabel.frame.size;
        CGSize titleSize = CGSizeMake(ceil(MAX(titleSize1.width, titleSize2.width)), ceil(MAX(titleSize1.height, titleSize2.height)));
        
        CGSize btnSize = self.frame.size;
        
        float title_width = titleSize.width;
        float title_width_stretch = 0;
        
        if((imageSize.width + titleSize.width) > btnSize.width)
        {
            title_width = titleSize2.width;
            
            title_width_stretch = (titleSize.width - titleSize2.width)*0.5;
        }
        
        
        float imgOffset_x = (imageSize.width + title_width)*0.5 - imageSize.width*0.5;
        
        float height_content = imageSize.height + titleSize.height + v_space;
        
        float imgOffset_y = height_content*0.5 - imageSize.height*0.5 + v_space*0.5 + heightOffset;
        
        self.imageEdgeInsets = UIEdgeInsetsMake(-imgOffset_y , imgOffset_x, imgOffset_y, -imgOffset_x);
        
        
        
        float titleOffset_x = (imageSize.width + title_width)*0.5 - title_width*0.5;
        
        float titleOffset_y = height_content*0.5 - titleSize.height*0.5 - v_space *0.5 - heightOffset;
        
        
        self.titleEdgeInsets = UIEdgeInsetsMake(titleOffset_y, -titleOffset_x-title_width_stretch, -titleOffset_y, titleOffset_x-title_width_stretch);
    }
    
    

    如果有其他方法 欢迎留言。

    相关文章

      网友评论

          本文标题:UIButton 上图片下文字显示

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