TabBarItems并设置其图像大小？

I am currently adding images to each one of my tab bar items. One image I like has a size that is much bigger then the area of the bar item. When I set the image of the bar item in the storyboard and run the emulator... the bar button with that image covers the entire screen.

我目前正在为每个标签栏项添加图像。我喜欢的一个图像的大小比条形项目的区域大得多。当我在故事板中设置条形图的图像并运行模拟器时...带有该图像的条形按钮覆盖整个屏幕。

Now I thought there was some automatic way of allowing the images to resize for each bar button. This is sadly not the case. Is there a way when the tab bar loads that I can resize the images within each tab bar?

现在我认为有一些自动方式允许图像调整每个条形按钮的大小。遗憾的是情况并非如此。有没有办法在标签栏加载时我可以调整每个标签栏中的图像大小？

4 个解决方案

#1

You should prepare 3 images icons for each tab bar item (1x, 2x and 3x).

您应该为每个标签栏项目（1x，2x和3x）准备3个图像图标。

First create the 3x at 75w 75h pixels (maximum: 144 x 96) and save it as [e-mail].

首先以75瓦75h像素（最大值：144 x 96）创建3x并将其保存为[e-mail]。

Then resize it to 50w 50h pixels (maximum: 96 x 64) and save it as [e-mail].

然后将其调整为50w 50h像素（最大值：96 x 64），并将其保存为[e-mail]。

Finally resize it to 25w 25h pixels (maximum: 48 x 32) and save it as iconTab0.png.

最后将其调整为25w 25h像素（最大值：48 x 32），并将其保存为iconTab0.png。

Now all you need is to select those 3 images at your finder and drag them to your image assets.

现在您只需要在您的取景器中选择这3张图像并将它们拖动到您的图像资源。

human interface guidelines

人机界面指南

#2

Another option is to create a vector image PDF. What you do is resize your vector image to the smallest size (22x22) and export it to a PDF file. You can do this with Adobe Illustrator, Sketch and many other vector image editing tools.

另一种选择是创建矢量图像PDF。您要做的是将矢量图像调整为最小尺寸（22x22）并将其导出为PDF文件。您可以使用Adobe Illustrator，Sketch和许多其他矢量图像编辑工具执行此操作。

Then you add the PDF file to your assets folder and in the Properties Inspector set "Scale Factors" to "Single Vector". That should do it!

然后将PDF文件添加到assets文件夹，并在Properties Inspector中将“Scale Factors”设置为“Single Vector”。应该这样做！

#3

Pretty easy to do this with ios8. In Storyboard, click on each tab item (the individual controller for the tab you want to change the image of.

用ios8很容易做到这一点。在Storyboard中，单击每个选项卡项（要更改其图像的选项卡的单个控制器）。

Set the insets accordingly...

相应地设置插图...

There is this issue though. Fixed with this.

但是有这个问题。固定这个。

#4

@LeoDabus provided a good answer.

@LeoDabus提供了一个很好的答案。

For resizing the image, a good and easy way to do this is to:

要调整图像大小，执行此操作的一种简单方法是：

1. Add your image to the 1x, 2x, 3x boxes in Assets.xcassets folder.
2. 将图像添加到Assets.xcassets文件夹中的1x，2x，3x框中。
3. Then, click on the image in each box and double-finger tap the trackpad/right-click which will reveal the options here:
4. 然后，单击每个框中的图像，双击触控板/右键单击，这将显示以下选项：

3. Click on 'Open with External Editor', which will bring you to Preview.
4. 单击“使用外部编辑器打开”，将进入预览。
5. Click on 'Tools' then 'Adjust Size'.
6. 点击“工具”，然后点击“调整尺寸”。

5. Adjust the size of your image based on your requirements. Then hit 'Save' and close the window. The image in Xcode should be auto-updated.
6. 根据您的要求调整图像大小。然后点击“保存”并关闭窗口。 Xcode中的图像应自动更新。