实现效果图:
- // 设置内容对齐方式,并设置内容距离四周距离(上左下右)
- button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
- button.contentEdgeInsets = UIEdgeInsetsMake(0,10, 0, 0);
- // 利用EdgeInsets属性将title和image放置在任意位置上,实现上图效果
- /*
- UIButton自带了UIImageView和UILabel两个控件,可以显示image和title,通过imageEdgeInsets和titleEdgeInsets属性可以将image和title放置在任意位置上
- 其实UIImageView和UILabel是相互联系的,在设置属性时需要将两者当做一个整体来考虑
- 实时计算图片宽高 CGSize imageSize = button.imageView.frame.size;
- 实时计算文字宽高 CGSize stringSize = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:button.titleLabel.font}];
- */
- #define UI_SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
- #define UI_BUTTON_HEIGH 49
- // 在默认情况下,图片在前文字在后显示,且中间没有间距(如button1)
- [button1 setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
- [button1 setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
- // 让图片和文字之间间距为10(如button2)
- [button2 setImageEdgeInsets:UIEdgeInsetsMake(0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2, 0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2+10)];
- [button2 setTitleEdgeInsets:UIEdgeInsetsMake(0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2+10, 0, (UI_SCREEN_WIDTH-imageSize.width-stringSize.width-10)/2)];
- // 让图片距离右侧边缘10,让文字距离左侧边缘10(如button3)
- [button3 setImageEdgeInsets:UIEdgeInsetsMake(0, UI_SCREEN_WIDTH-imageSize.width-10, 0, 10-stringSize.width)];
- [button3 setTitleEdgeInsets:UIEdgeInsetsMake(0, 10-imageSize.width, 0, UI_SCREEN_WIDTH-stringSize.width-10)];
- // 让图片距离上侧边缘10,让文字距离下侧边缘10(如button4)
- [button4 setImageEdgeInsets:UIEdgeInsetsMake(10, 0, UI_BUTTON_HEIGH-10-imageSize.height, 0)];
- [button4 setTitleEdgeInsets:UIEdgeInsetsMake(UI_BUTTON_HEIGH-10-stringSize.height, 0, 10, 0)];
- // 让图片和文字都居中显示,且图片距离上侧边缘5,文字距离下侧边缘5(如button5)
- [button5 setImageEdgeInsets:UIEdgeInsetsMake(5, (UI_SCREEN_WIDTH-imageSize.width)/2, UI_BUTTON_HEIGH-5-imageSize.height, (UI_SCREEN_WIDTH-imageSize.width)/2-stringSize.width)];
- [button5 setTitleEdgeInsets:UIEdgeInsetsMake(UI_BUTTON_HEIGH-5-stringSize.height, (UI_SCREEN_WIDTH-stringSize.width)/2-imageSize.width, 5, (UI_SCREEN_WIDTH-stringSize.width)/2)];