UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。 如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是能试出来的,但是如果改变了图片大小或文字长度,又要再来一遍。 作为程序猿,我们不应该放弃任何一个偷懒的机会。
- 默认情况下,是图片在左,文字在右,垂直居中显示,如下图:
button.titleEdgeInsets = UIEdgeInsetsZero;
button.imageEdgeInsets = UIEdgeInsetsZero;
- 设置如下布局后,图片和文字都居中显示。
CGFloat imageViewWidth = button.imageView.frame.size.width;
// CGFloat titleLabelWidth = button.titleLabel.frame.size.width;
// 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
CGFloat titleLabelWidth = button.titleLabel.intrinsicContentSize.width;
button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageViewWidth, 0, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -titleLabelWidth);
- 如果想图片在上,文字在下,水平居中显示,则按下面设置即可:
CGFloat imageViewWidth = button.imageView.frame.size.width;
CGFloat imageViewHight = button.imageView.frame.size.height;
// CGFloat titleLabelWidth = button.titleLabel.frame.size.width;
// 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
CGFloat titleLabelWidth = button.titleLabel.intrinsicContentSize.width;
CGFloat titleLabelHight = button.titleLabel.intrinsicContentSize.height;
button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageViewWidth, -imageViewHight, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(-titleLabelHight, 0, 0, -titleLabelWidth);
如果觉得图片和文字离的太近了,稍微分开一点:
CGFloat imageViewWidth = button.imageView.frame.size.width;
CGFloat imageViewHight = button.imageView.frame.size.height;
// CGFloat titleLabelWidth = button.titleLabel.frame.size.width;
// 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
CGFloat titleLabelWidth = button.titleLabel.intrinsicContentSize.width;
CGFloat titleLabelHight = button.titleLabel.intrinsicContentSize.height;
CGFloat offset = 40.0f;
button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageViewWidth, -imageViewHight-offset/2, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(-titleLabelHight-offset/2, 0, 0, -titleLabelWidth);
- 文字左对齐,图片右对齐
CGFloat imageViewWidth = button.imageView.frame.size.width;
// CGFloat titleLabelWidth = button.titleLabel.frame.size.width;
// 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
CGFloat titleLabelWidth = button.titleLabel.intrinsicContentSize.width;
CGFloat buttonWidth = button.frame.size.width;
button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageViewWidth - buttonWidth + titleLabelWidth, 0, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -titleLabelWidth - buttonWidth + imageViewWidth);
本文转载于:
如何布局包含Image和Title的UIButton