且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

iPhone / iPad圆形自定义按钮和png文件

更新时间:2023-12-03 23:44:46

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

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 $ c $时才会提高图像的分辨率。 c>图像可用。因此,图标图像的尺寸在视网膜和非视网膜显示器上都是相同的。
也就是说,如果你在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

  • buttonImage_Tag_iPhone@2x.png ---因此,128x128

  • larger_button_image_tag_iPad.png ---说96x96的

  • larger_button_image_tag_iPad@2x.png ---因此,192x192

  • buttonImage_Tag_iPhone.png --- Say 64x64
  • buttonImage_Tag_iPhone@2x.png --- Therefore, 128x128
  • larger_button_image_tag_iPad.png --- Say 96x96
  • larger_button_image_tag_iPad@2x.png --- 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.