美文网首页iOS开发 UPUPUP!
iOS开发 调整按钮中图片在上, 文字在下

iOS开发 调整按钮中图片在上, 文字在下

作者: 霸_霸霸 | 来源:发表于2018-07-12 16:22 被阅读13次

    我们要做的是, 将图片和文字调整成图片在上, 文字在下, 整体居中
    一般的默认按钮是这样的, 图片和文字左右排列, 整体居中


    image.png

    第一步: 将图片和文字调整到左上角

    //使图片和文字居左上角
    button.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    
    image.png

    第二步: 调整偏移(两种情况)

    情况一: ImageView的宽度 < Button的宽度

    简图

    image.png
    标出ImageView和TitleLabel的偏移量
    image.png
    从图中我们可以看到
    2.1. ImageView的在竖直方向的偏移量是x1
    float iVOffsetY = CGRectGetHeight(button.frame) / 2.0 - (CGRectGetHeight(button.imageView.frame) + CGRectGetHeight(button.titleLabel.frame)) / 2.0;
    

    2.2. ImageView在水平方向的偏移量是x2

    float iVOffsetX = CGRectGetWidth(button.frame) / 2.0 - CGRectGetWidth(button.imageView.frame) / 2.0;
    

    2.3. TitleLabel在水平方向的偏移量是x3

    float titleOffsetX = CGRectGetWidth(button.frame) / 2.0 - CGRectGetWidth(button.imageView.frame) - CGRectGetWidth(button.titleLabel.frame) / 2.0;
    

    2.4. TitleLabel在竖直方向的偏移量x4比 ImageView在竖直方向的偏移量还多一个ImageView的高度

    float titleOffsetY = iVOffsetY + CGRectGetHeight(button.imageView.frame);
    

    情况二: ImageView的宽度 >= Button的宽度

    image.png

    仅仅是TitleLabel在水平方向的偏移量发生变化
    x5 = ImageView.width + TitleLabel.width - Button.width/2.0 - TitleLabel.width/2.0

    所有代码

    - (void)adjustButtonImageViewUPTitleDownWithButton:(UIButton *)button {
        [button.superview layoutIfNeeded];
        //使图片和文字居左上角
        button.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;
        button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        
        CGFloat buttonHeight = CGRectGetHeight(button.frame);
        CGFloat buttonWidth = CGRectGetWidth(button.frame);
        
        CGFloat ivHeight = CGRectGetHeight(button.imageView.frame);
        CGFloat ivWidth = CGRectGetWidth(button.imageView.frame);
        
        CGFloat titleHeight = CGRectGetHeight(button.titleLabel.frame);
        CGFloat titleWidth = CGRectGetWidth(button.titleLabel.frame);
        //调整图片
        float iVOffsetY = buttonHeight / 2.0 - (ivHeight + titleHeight) / 2.0;
        float iVOffsetX = buttonWidth / 2.0 - ivWidth / 2.0;
        [button setImageEdgeInsets:UIEdgeInsetsMake(iVOffsetY, iVOffsetX, 0, 0)];
        
        //调整文字
        float titleOffsetY = iVOffsetY + CGRectGetHeight(button.imageView.frame) + 10;
        float titleOffsetX = 0;
        if (CGRectGetWidth(button.imageView.frame) >= (CGRectGetWidth(button.frame) / 2.0)) {
            //如果图片的宽度超过或等于button宽度的一半
            titleOffsetX = -(ivWidth + titleWidth - buttonWidth / 2.0 - titleWidth / 2.0);
        }else {
            titleOffsetX = buttonWidth / 2.0 - ivWidth - titleWidth / 2.0;
        }
        [button setTitleEdgeInsets:UIEdgeInsetsMake(titleOffsetY , titleOffsetX, 0, 0)];
    }
    

    结果


    image.png

    相关文章

      网友评论

        本文标题:iOS开发 调整按钮中图片在上, 文字在下

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