iOS开发基础10-UIButton内边距和图片拉伸模式

iOS 开发指南：深入理解 UIButton 的内边距及UIImage的拉伸

UIButton 是 iOS 开发中最常用的控件之一，通过合理设置内边距和图片拉伸属性，可以大大提升用户界面的美观和交互体验。本文将详细介绍 UIButton 的内边距属性及UIImage的拉伸方法，并进行底层逻辑分析。

一、UIButton的内边距

UIButton 为其内容和子控件提供了三种内边距属性：contentEdgeInsets、titleEdgeInsets 和 imageEdgeInsets。通过这些属性，可以调节按钮内部各个子控件的位置和间距。

1. contentEdgeInsets

contentEdgeInsets 属性设置的是按钮内容的整体内边距，即会将按钮内部的 UIImageView 和 UILabel 视为一个整体进行移动。

示例代码

UIButton *btn = [[UIButton alloc] init];
btn.frame = CGRectMake(50, 100, 200, 50);
[btn setTitle:@"按钮" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"icon"] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor blueColor];
btn.contentEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0);
[self.view addSubview:btn];

显示效果

设置 contentEdgeInsets 后，图片和文字整体会向下移动。

底层逻辑分析

• 整体移动：contentEdgeInsets 属性的设置相当于在按钮的内容区域周围增加了额外的边距，从而使按钮的内容整体移动。
• 布局影响：这种调整不会单独影响 UIImageView 或 UILabel，而是将它们作为一个整体来进行偏移。

2. titleEdgeInsets/imageEdgeInsets

titleEdgeInsets 和 imageEdgeInsets 属性分别用于设置 UIButton 内部 UILabel 和 UIImageView 的内边距，它们的设置不会影响彼此，只会对单独的子控件进行偏移。

示例代码

UIButton *btn = [[UIButton alloc] init];
btn.frame = CGRectMake(50, 100, 200, 50);
[btn setTitle:@"按钮" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"icon"] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor blueColor];
btn.titleEdgeInsets = UIEdgeInsetsMake(0, 30, 0, 0);
btn.imageEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0);
[self.view addSubview:btn];

显示效果

设置 titleEdgeInsets 后，按钮的文字会向右移动，而设置 imageEdgeInsets 后，按钮的图片会向下移动。

底层逻辑分析

• 独立移动：titleEdgeInsets 和 imageEdgeInsets 对 UILabel 和 UIImageView 进行独立的内边距设置，从而实现对单独子控件的移动控制。
• 不影响整体布局：这种调整不会影响按钮内容的整体布局，只会改变指定子控件的位置。

二、UIImage 的拉伸

在创建自适应 UI 时，经常需要对按钮背景图片进行拉伸。UIImage 的拉伸功能可以帮助我们实现这一需求，从而避免显示失真。

1. iOS 5 之前

在 iOS 5 之前，UIImage 的拉伸通过 stretchableImageWithLeftCapWidth:topCapHeight: 方法实现。

示例代码

UIButton *btn = [[UIButton alloc] init];
UIImage *image = [UIImage imageNamed:@"common_button_blue_highlighted"];
UIImage *newImage = [image stretchableImageWithLeftCapWidth:5 topCapHeight:5];
[btn setBackgroundImage:newImage forState:UIControlStateNormal];
btn.frame = CGRectMake(100, 100, 200, 80);
[self.view addSubview:btn];

底层逻辑分析

• 保护区域：stretchableImageWithLeftCapWidth:topCapHeight: 方法通过指定左边和顶部的保护区域，使得这些区域不会被拉伸。
• 拉伸剩余部分：除了保护区域其余部分会被拉伸，从而实现图片均匀扩展。

2. iOS 5 之后

在 iOS 5 之后，引入了 resizableImageWithCapInsets: 方法，这一方法更加直观和灵活。

示例代码

UIButton *btn = [[UIButton alloc] init];
UIImage *image = [UIImage imageNamed:@"common_button_blue_highlighted"];
UIEdgeInsets insets = UIEdgeInsetsMake(image.size.height * 0.5, image.size.width * 0.5, image.size.height * 0.5, image.size.width * 0.5);
UIImage *newImage = [image resizableImageWithCapInsets:insets];
[btn setBackgroundImage:newImage forState:UIControlStateNormal];
btn.frame = CGRectMake(100, 100, 200, 80);
[self.view addSubview:btn];

底层逻辑分析

• 易理解的设置：resizableImageWithCapInsets: 参数是 UIEdgeInsets，更加直观地指定四个边的保护区域。
• 默认平铺模式：默认情况下，拉伸模式为平铺。

3. iOS 6 之后

在 iOS 6 之后，resizableImageWithCapInsets:resizingMode: 方法进一步提供了拉伸模式的选择，包括平铺和平滑拉伸。

示例代码

UIButton *btn = [[UIButton alloc] init];
UIImage *image = [UIImage imageNamed:@"common_button_blue_highlighted"];
UIEdgeInsets insets = UIEdgeInsetsMake(5, 5, 5, 5);
UIImage *newImage = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];
[btn setBackgroundImage:newImage forState:UIControlStateNormal];
btn.frame = CGRectMake(100, 100, 200, 80);
[self.view addSubview:btn];

底层逻辑分析

• 拉伸模式：UIImageResizingModeStretch 是平滑拉伸模式，UIImageResizingModeTile 是平铺模式。
• 选择灵活：开发者可以根据实际需求灵活选择拉伸模式。

结论

通过理解 UIButton 的内边距设置和 UIImage 的拉伸方法，开发者可以更加灵活地控制按钮布局和图片展示效果。总之，正确设置内边距与图片拉伸不仅可以提升应用的美观度，还能改善用户体验。