自定义标签栏项目背景图像的正确尺寸是多少？答案

【问题标题】：What are the correct dimensions for a custom tab bar item background image?自定义标签栏项目背景图像的正确尺寸是多少？
【发布时间】：2017-07-12 00:17:09
【问题描述】：

所以我有一个.png，它是 428x176 像素：

我想在项目处于选中状态时将其用作标签栏背景图像。问题是图像太大。所以现在，我正在探索不同的分辨率后缀：@1x、@2x、@3x。但无论我将哪个附加到图像文件名，图像对于标签栏项目的背景来说仍然太大，尽管随着我增加分辨率因子它确实变小了。如何确定此图片的正确尺寸应该是多少？

请记住，这是任何特定UITabBarItem 处于选定状态时的背景图像。它是UITabBarItem 的整个宽度和高度。我的标签栏将在屏幕宽度上放置三个项目。

更新：

很多答案都提供了基于 swift 的解决方案，但我要问的是我的图像应该是什么尺寸（以像素为单位），换句话说，我应该在我的包中包含什么尺寸的图像，以便图像将适合所有屏幕尺寸的标签栏。我想，由于默认情况下UITabBar 期望UIImage 为其selectionIndicatorImage 字段而不是UIImageView，因此必须有一个不涉及绕过UITabBar 并添加UIImageView 的解决方案作为它的子视图，并根据当前选择的UITabBarItem 手动管理图像视图的位置。

【问题讨论】：

标签： ios

【解决方案1】：

将我对这个问题的回答 how to make UITabBar selection indicator image fill the whole space? 作为参考：

子类化 UITabBarController

即使旋转也适用于多个设备。

注意事项：

将图片的渲染模式设为Original。

将下面的此类分配给 Storyboard 中的 UITabBarController 或作为基类（如果您以编程方式制作屏幕）。

//
//  BaseTabBarController.swift
//  MyApp
//
//  Created by DRC on 1/27/17.
//  Copyright © 2017 PrettyITGirl. All rights reserved.
//

import UIKit

class BaseTabBarController: UITabBarController {

    let numberOfTabs: CGFloat = 4
    let tabBarHeight: CGFloat = 60

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        updateSelectionIndicatorImage()
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        updateSelectionIndicatorImage()
    }

    func updateSelectionIndicatorImage() {
        let width = tabBar.bounds.width
        var selectionImage = UIImage(named:"myimage.png")
        let tabSize = CGSize(width: width/numberOfTabs, height: tabBarHeight)

        UIGraphicsBeginImageContext(tabSize)
        selectionImage?.draw(in: CGRect(x: 0, y: 0, width: tabSize.width, height: tabSize.height))
        selectionImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        tabBar.selectionIndicatorImage = selectionImage
    }

}

【讨论】：

【解决方案2】：

对此没有明确的答案，因为标签栏本身在各种 iOS 版本和各种 iOS 设备上不是固定大小的。

从 iOS 11 开始，标签栏的高度会变小，标题会在landscape 模式下向右移动。

所以我们的想法是拥有一个可以沿所有边缘拉伸的stretchable 图像 - 顶部/前导/底部/尾随。

供您参考- http://macoscope.com/blog/stretchable-images-using-interface-builder/

以下是上述博客文章中的几张图片，以帮助说明清楚 -

希望这会有所帮助。

【讨论】：

是的，但是对于任何给定的设备，它都是固定大小的，并且因为我们可以在应用程序中确定设备，所以有一个明确的答案

【解决方案3】：

使用下面两行代码。

self.tabBarController.tabBar.autoresizesSubviews = NO;
self.tabBarController.tabBar.clipsToBounds = YES;

Xcode 使用的是点，而不是像素，因此宽度始终为 320。在视网膜显示的情况下，一个点是 2x2 像素，而在正常模式下是 1x1。

我认为标签栏的高度应该是正常的 320x49 和视网膜的 640x98。

视网膜图像应与普通图像同名，并以@2x 结尾。

将您的图像重命名为 tabbarBack@2x.png。这称为 Retina 显示屏的像素加倍。

没有@2x，iOS 不知道它应该应用一个比例因子，它会按原样使用，尽管它应该减半。

tabbarBack.png (45 px 左右)
tabbarBack@2x.png

[[[self tabBarController] tabBar] setBackgroundImage:[UIImage imageNamed:@"tabbarBack.png"]];

【讨论】：

【解决方案4】：

您是否尝试过将 imageView 添加为标签栏的子视图

var bgView: UIImageView = UIImageView(image: UIImage(named: "background.png"))
bgView.frame = CGRectMake(0, 420, 320, 60)//you might need to modify this frame to your tabbar frame
self.view.addSubview(bgView)

如果我们谈论标签栏的高度和宽度，标准标签栏是 320*49 / 640*98 @2x。因此，如果您想保持相同的尺寸，请尝试使用这些宽度/高度比。

【讨论】：

这个只当按钮处于选中状态，并且有多个item时

【解决方案5】：

添加到 Tarun Tyagi 的答案：如果您将图像添加到资产商店，您还可以使用系统工具进行视觉切片。

创建资产目录
将您的图片拖放到资产目录中。
在资产目录中选择该图像并单击右下角的“显示切片”按钮
点击“开始切片”并对该图像进行切片

【讨论】：

【解决方案6】：

尝试将image 调整为标签栏大小。或者将imageView 添加到tabBar 作为subview，然后使用imageView 中的图像。将TabBarController 子类化并在其中添加imageview：

class YourTabBarController: UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()

    let backgroundImage = UIImageView(image: UIImage(named: "gray background"))
    backgroundImage.frame = backgroundImage.bounds
    self.view.addSubview(backgroundImage)


}

【讨论】：