图像未使用resizableImageWithCapInsets正确调整大小

Question

我在处理/理解resizableImageWithCapInsets

时遇到了困难

我按如下方式设置了一个按钮：

facebookLoginButton = [[UIButton alloc] initWithFrame:CGRectMake(10, 20, 300,50)];
facebookLoginButton.autoresizingMask = UIViewAutoresizingFlexibleWidth;

UIImage *facebookButton = [[UIImage imageNamed:@"FacebookLogin"]
                           resizableImageWithCapInsets:UIEdgeInsetsMake(20,90,20,56)];
[facebookLoginButton setBackgroundImage:facebookButton forState:UIControlStateNormal];

[facebookLoginButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[facebookLoginButton setTitle:NSLocalizedString(@"FacebookLoginButton", "Facebook Login Button") forState:UIControlStateNormal];
[facebookLoginButton setTitleShadowColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:.35] forState:UIControlStateNormal];
[facebookLoginButton addTarget:self action:@selector(facebookLoginButton:) forControlEvents:UIControlEventTouchUpInside];

如上所示，按钮视图的框架为300x50像素。我为视网膜创建了一个图像（然后将缩小）。

图像是在PS中创建的png，大小为144x100px。这是帧的高度（对于uibutton）的两倍以及具有空间的Facebook F所需的宽度。我们的想法是让F在左侧保持静止，在下方突出显示可拉伸部分。

如果有帮助，这是图像本身;

目前的结果如下：

我正在尝试找出要输入的正确插图。我已经搜索了大量的教程，但没有一个解释得足以让我理解插图实际上是如何工作的。如果有人可以解释这个或链接到一个教程，如何计算它们会更好。

我目前将top和bottom设置为0，理论上他们不需要重复，只是静态左边大于静态右边。右边的插图仅用于圆形边框，中间部分需要重复。

Answer 1

如果您使用图像进行视网膜，请确保使用@2x作为后缀固定名称 另请注意，您需要以单位（而不是像素）指定意图。

UIImage *facebookButton = [[UIImage imageNamed:@"FacebookLogin"]
                         resizableImageWithCapInsets:UIEdgeInsetsMake(0,40,0,10)];