非视网膜显示屏上的自定义导航按钮失真（使用可拉伸图像方法）

Posted 2023-02-24

【中文标题】非视网膜显示屏上的自定义导航按钮失真（使用可拉伸图像方法）

【英文标题】：Distorted custom Navigation buttons on non-retina display (using stretchable image method)

【发布时间】：2012-01-09 18:18:22

【问题描述】：

我正在通过以下代码向我的导航栏添加自定义导航按钮。

//Instance method in CustomNavButton Class

-(UIButton*)setupButtonWithImage:(UIImage*)image andFrame:(CGRect)frame

    UIButton *button = [[[UIButton alloc]initWithFrame:frame]autorelease];
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake((frame.size.width-20)/2, (frame.size.height-20)/2, 20, 20)];
    imageView.image = image;

    UIImage *buttonImageNormal = [UIImage imageNamed:@"customBtn_black"];
    UIImage *stretchableButtonImageNormal = [buttonImageNormal
                                         stretchableImageWithLeftCapWidth:12 topCapHeight:0];

    button.titleLabel.font = [UIFont boldSystemFontOfSize:12];
    [button setBackgroundImage:stretchableButtonImageNormal
                  forState:UIControlStateNormal];

    [button setTitleShadowColor:[UIColor whiteColor] forState:UIControlStateNormal];

    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

    [button addSubview:imageView];

    return button;



//Call CustomNavButton and add to Navbar
- (void)viewDidLoad

    [super viewDidLoad];
    //Add left invite friends button 
    CustomNavButton *leftButton = [[CustomNavButton alloc]initWithImage:[UIImage imageNamed:@"friends_1"] andFrame:CGRectMake(0, 0, 40, 32)];
    [leftButton.customNavButton addTarget:self action:@selector(inviteButtonPressed) forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc]initWithCustomView:leftButton];

    self.navigationItem.leftBarButtonItem = leftBarButton;
    [leftButton release];

导航按钮在我的 iPhone（带有 Retina 显示屏的 ios5）上显示良好

但是，我的模拟器（或非视网膜显示屏）上的按钮看起来变形了

我该如何解决这个问题？即使是非视网膜显示器，我如何才能正确显示按钮？

请注意，我也为此创建了 @2x 按钮

编辑：

问题似乎与图像的拉伸有关

UIImage *stretchableButtonImageNormal = [buttonImageNormal
                                     stretchableImageWithLeftCapWidth:12 topCapHeight:0];

如果我将 leftCapWidth 值更改为 0，模拟器上的按钮看起来会更好（但仍然很糟糕）。

但是这样做会导致我的视​​网膜显示按钮看起来有点扭曲（好像我赢不了）。

谁能告诉我问题是否真的出在这里，以及我如何更改这些值以使其适用于视网膜和非视网膜显示器？

【参考方案1】：

你有两个文件吗？ MyImage.png 和 [e-mail]？看起来系统正在尝试通过缩小@2x 文件来调整它的大小，当它被简单地缩小时，这通常会导致一些像这样的锯齿状。

MyImage.png 应该是 [e-mail] 大小的一半。

【讨论】：

我正在使用基本图像并使用 UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];那个拉伸部分似乎是导致问题的部分，但不知道如何解决它

是的，看起来我用左大写宽度选择的像素数会导致问题

【参考方案2】：

您没有设置文件格式 .png 或您拥有的任何文件格式。正如克里斯所说，您需要两个常规文件和@2x。