22.UIButton的标题和图片位置的调整/Image和BackgroundImage
2016-02-23 17:11
405 查看
按钮(UIButton)的标题(tittle)和按钮的图片(image)如何设调整位置和间距?本文还涉及到setImage和setBackgroundImage的区别。
1.通过contentHorizontalAlignment/contentVerticalAlignment来调整title的位置
UIControl.h 中有如下参数:
@property(nonatomic) UIControlContentVerticalAlignment contentVerticalAlignment; // how to position content vertically inside control. default is center
@property(nonatomic) UIControlContentHorizontalAlignment contentHorizontalAlignment; // how to position content hozontally inside control. default is center
2.通过setTitleEdgeInsets/setImageEdgeInsets来调整title位置及图片(image)位置。
效果图:
通过效果图可以发现 image 和 title 是左右分布的, 但若写成上下分布:
效果图:
可见 title 显示不出来, 但通过修改发现当 button 宽度修改为100时,可以显示出来如图:
所以,要解决这个问题需要将 title 的 EdgeInsets 的 left改为负距离便可。将上面代码中改为[button setTitleEdgeInsets:UIEdgeInsetsMake(70, -80, 0, 0)];,效果如图:
3.setImage和setBackgroundImage的区别
setBackgroundImage:
效果图:
经过上面测试,发现用setImage方法设置的图片,图片不会随着按钮的放大而放大,图片始终是原始图片尺寸,而用setBackgroundImage方法设置的图片,图片会随着按钮的变大而拉伸变大。故setBackgroundImage没有设置 EdgeInsets 这个方法。
1.通过contentHorizontalAlignment/contentVerticalAlignment来调整title的位置
UIControl.h 中有如下参数:
@property(nonatomic) UIControlContentVerticalAlignment contentVerticalAlignment; // how to position content vertically inside control. default is center
@property(nonatomic) UIControlContentHorizontalAlignment contentHorizontalAlignment; // how to position content hozontally inside control. default is center
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(50, 50, 100, 50); [button setTitle:@"title" forState:UIControlStateNormal]; button.backgroundColor = [UIColor cyanColor]; [self.view addSubview:button]; //水平方向布局 button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft; //垂直方向布局 button.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom; //
2.通过setTitleEdgeInsets/setImageEdgeInsets来调整title位置及图片(image)位置。
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(50, 50, 150, 50); button.backgroundColor = [UIColor greenColor]; [self.view addSubview:button]; [button setImage:[UIImage imageNamed:@"11.png"] forState:UIControlStateNormal]; [button setTitle:@"按钮" forState:UIControlStateNormal]; [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 50)]; [button setTitleEdgeInsets:UIEdgeInsetsMake(0, 20, 0, 0)]; //
效果图:
通过效果图可以发现 image 和 title 是左右分布的, 但若写成上下分布:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(50, 50, 50, 150); button.backgroundColor = [UIColor greenColor]; [self.view addSubview:button]; [button setImage:[UIImage imageNamed:@"11.png"] forState:UIControlStateNormal]; [button setTitle:@"按钮" forState:UIControlStateNormal]; [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 70, 0)]; [button setTitleEdgeInsets:UIEdgeInsetsMake(70, 0, 0, 0)]; //
效果图:
可见 title 显示不出来, 但通过修改发现当 button 宽度修改为100时,可以显示出来如图:
所以,要解决这个问题需要将 title 的 EdgeInsets 的 left改为负距离便可。将上面代码中改为[button setTitleEdgeInsets:UIEdgeInsetsMake(70, -80, 0, 0)];,效果如图:
3.setImage和setBackgroundImage的区别
setBackgroundImage:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(50, 50, 100, 150); button.backgroundColor = [UIColor greenColor]; [self.view addSubview:button]; [button setBackgroundImage:[UIImage imageNamed:@"11.png"] forState:UIControlStateNormal]; [button setTitle:@"按钮" forState:UIControlStateNormal]; [button setTitleEdgeInsets:UIEdgeInsetsMake(70, 0, 0, 0)];
效果图:
经过上面测试,发现用setImage方法设置的图片,图片不会随着按钮的放大而放大,图片始终是原始图片尺寸,而用setBackgroundImage方法设置的图片,图片会随着按钮的变大而拉伸变大。故setBackgroundImage没有设置 EdgeInsets 这个方法。
相关文章推荐
- Animation动画详解(五)——ValueAnimator高级进阶(一)
- [Sequence Alignment Methods] Dynamic time warping (DTW)
- 《iOS Human Interface Guidelines》——Keyboards and Input Views
- UINavigationController实现全屏滑动返回功能
- iOS UIKit - 通知机制
- iOS UIKit - 键盘处理
- iOS UIKit - 手势处理
- iOS UIKit - TabBarController
- iOS UIKit - UINavigationController
- iOS UIKit - UICollectionView
- iOS UIKit - UITableView
- iOS UIKit - UIScrollView
- iOS UIKit - Autolayout
- iOS UIKit - 视图结构
- iOS UI设计 - 设计步骤
- iOS-UITableView方法总结
- 打开虚拟机时报硬盘UUID 已经存在的解决办法
- iPhone UI开发的一些注意事项
- iOS-UITextField不同的键盘布局(iOS9最新)
- UGUI滑动条细节以及UGUI Atlas脚本