iPhone / iPad圆形自定义按钮和png文件 [英] iPhone/iPad rounded custom button and png files

问题描述

我正在使用Snow Leopard上的XCode 4.2开发一个通用应用程序，并希望显示嵌入了png文件的圆形按钮。圆形按钮来自cocoacontrols.com的UIGlossyButton类。 png文件既是视网膜也是非视网膜变种。我将UIButtons的高度和宽度设置为iPhone上的60,60和iPad上的120,120。我正在附加iPad模拟器（非视网膜版）的截图。我有点担心图标大小。它看起来很小。我希望该应用程序可以在iPad 2和Mini上运行，因为它们都是非视网膜显示器。这是在真正的iPad2设备上显示的正确方法吗？此外，圆形按钮在iPad上看起来是否完美？我还没有支付开发者许可证，我没有iPad。

I'm developing a universal app using XCode 4.2 on Snow Leopard and wanted to display rounded buttons with png files embedded within. The rounded buttons are from UIGlossyButton classes from cocoacontrols.com. The png files are both retina and non-retina varieties. I set the height and width of the UIButtons to 60, 60 on the iPhone and 120, 120 on the iPad. I'm attaching a screenshot from the iPad simulator (non retina version). I'm kind of worried on the icon sizes. It looks so tiny. I wanted the app to run on iPad 2 and also on Mini as both are non-retina displays. Is this the correct approach to display on a real iPad2 device?. Also, does the rounded button look perfect on iPad? I haven't paid for the developer license yet and I don't own a iPad.

以下是绘制圆形UIGlossy按钮的代码（参考圆形按钮类）：

The following is the code to draw the rounded UIGlossy button (with references to the rounded button classes):

UIGlossyButton *b;
    b = (UIGlossyButton*) [self.view viewWithTag: 78];
    b.tintColor = [UIColor colorWithRed:0.2 green:0.3 blue:0.7 alpha:1.0];
    [b useWhiteLabel: YES];
    b.buttonBorderWidth = 2.0f;
    b.buttonCornerRadius = 200.0f; //iPad. For iPhone, I'm using 40.0f
    [b setGradientType: kUIGlossyButtonGradientTypeLinearSmoothExtreme];
    [b setExtraShadingType:kUIGlossyButtonExtraShadingTypeRounded];
}

屏幕截图如下所示，

请帮助。

推荐答案

你是否担心按钮的小巧性，或者是小的 - 它们之上的灰度图像的强度？
如果您担心按钮的大小，那么更改按钮的框架会使它们更大。

Are you worried about the small-ness of the buttons, or the small-ness of the greyscale images on top of them? If you're worried about the size of the buttons, then changing the buttons' frames will make them bigger.

如果你担心按钮但请注意，Retina Display不会改变肉眼所感知的图像大小，只有在适当的 @ 2x 图像可用。因此，图标图像的尺寸在视网膜和非视网膜显示器上都是相同的。
也就是说，如果你在iPad 1和iPad 3上打开相同的应用程序，一切都会大小相同，但由于分辨率提高，iPad 3屏幕上的图像会显得更加平滑。

If you're worried about the button images though, do note that a "Retina Display" will not change the size of your images as perceived by the naked eye, it only improves the resolution of the images if an appropriate @2x image is available. Therefore the "size" of the icon image will be the same on both a retina and non-retina display. That is, if you open the same App on an iPad 1 and an iPad 3, everything will be the same size, but the images on the screen of the iPad 3 will appear smoother due to the increased resolution.

（这是因为当您设置 UIButton 的大小时，您将其设置为 points ，而不是像素。点数旨在与分辨率无关 - 请参阅点对战此处像素部分。）

(This is because when you set the size of a UIButton you set it in points, not pixels. Points are designed to be resolution-independent - see the Points Versus Pixels section here.)

当然，使用iPad Mini，一切都会显得略微小一些 - 但仍然是成比例的。

Of course, with the iPad Mini, everything will appear slightly smaller anyway - but still in proportion.

因此如果按钮上的图标看起来太小，您需要使用更大的叠加图像。如果你这样做，所有显示器，视网膜和非视网膜上的图标看起来都会更大。

Therefore if the icons on the buttons are looking too small, you'll need to use larger overlay images. If you do, the icons will look larger on all displays, retina and non-retina alike.

对于看起来完美的圆形按钮，我看不到任何东西如上所示，按钮上的光泽有问题，但我会说它们上的图标太小（很难看到蓝灰色）。因此，我会使用更大的图标图像。 - 但那是我个人的意见。

As for round buttons looking 'perfect', I don't see anything wrong with the gloss on the buttons as you've shown them above, but I would say the icons on them are much too small (and difficult to see grey-on-blue). Therefore, I would use larger icon images. - But that is my personal opinion.

回复评论：

@ 2x图像仅用于视网膜屏幕（iPad 3 +，iPhone 4+）。你不应该直接加载@ 2x图像，设备会处理这个问题。如果图标仅在iPad上显得很小，请尝试复制图像（正常和@ 2x），并在Photoshop /预览/等中手动缩放（例如1.5倍）。然后，修改您的代码，以便iPhone正常加载图像，但iPad加载这些稍大的图像。所以你的应用程序包可能包括：

@2x images are only used on retina screens (iPad 3+, iPhone 4+). You shouldn't ever load @2x images directly, the device takes care of that. If the icons only appear small on the iPad, try making copies of the images (both normal and @2x), and scale them up manually (say 1.5x) in Photoshop/Preview/etc. Then, modify your code so that the iPhone loads the images as normal, but the iPad loads these slightly-larger images. So your App bundle could include:

• buttonImage_Tag_iPhone.png ---说64x64


• [e-mail] ---因此，128x128


• larger_button_image_tag_iPad.png ---说96x96的


• [e-mail] ---因此，192x192

• buttonImage_Tag_iPhone.png --- Say 64x64
• [e-mail] --- Therefore, 128x128
• larger_button_image_tag_iPad.png --- Say 96x96
• [e-mail] --- Therefore, 192x192

然后您可以使用以下代码加载相应的图像：

Then you can use the following code to load the appropriate image:

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
    // Use larger_button_image_tag_iPad.png
}
else {
    // Use buttonImage_Tag_iPhone.png
}

当然你可以随意命名图像，我'我们只是让它们与例子不同。

Of course you can name the images whatever you like, I've just made them different for the example.

这篇关于iPhone / iPad圆形自定义按钮和png文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！