自定义标签栏项目背景图片的正确尺寸是多少?

所以我有一个.png ,即428×176像素:

在此处输入图像描述

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

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

更新:

很多答案都提供了基于swift的解决方案,但我要求的是我的图像应该以像素为单位的尺寸,换句话说,我应该在包中包含什么尺寸的图像,以便图像适合于所有屏幕尺寸的标签栏。 我想,因为UITabBar默认需要一个UIImage用于其selectionIndicatorImage字段而不是UIImageView ,必须有一个解决方案,不涉及黑客攻击UITabBar并添加UIImageView作为它的子视图并管理图像视图的位置应该根据当前选择的UITabBarItem手动进入。

我对这个问题的答案如何让UITabBar选择指标图像填满整个空间? 作为参考:

UITabBarController的子类

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

备注

  1. 使图像的渲染模式为Original模式。
  2. 如果您以编程方式执行屏幕,请将下面的类分配给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 } } 

使用以下两行。

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

Xcode适用于点,而非像素,因此宽度始终为320.在视网膜显示的情况下,一个点是2×2像素,而在正常模式下,它是1×1。

我认为标签栏的高度正常为320×49,视网膜为640×98。

视网膜图像应与正常图像相同,最后使用@ 2x。

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

没有@ 2x iOS不知道它应该应用比例因子,它将按原样使用,虽然它应该减半。

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

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

您是否尝试将imageView添加为tabbar的子视图

 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) 

如果我们谈论tabbar的高度和宽度,对于标准tabbar,它是320 * 49/640 * 98 @ 2x。 因此,如果你想保持相同的尺寸,请试试这些宽度/高度比。

由于标签栏本身在各种iOS版本和各种iOS设备上的尺寸不固定,因此没有明确的答案。

从iOS 11开始,标签栏将具有较小的高度,标题将以landscape模式向右移动。

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

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

以下是博客文章中的一些图片,以帮助说清楚 – 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

希望这可以帮助。

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

  1. 创建资产目录
  2. 将图像拖放到资产目录中。
  3. 在资产目录中选择该图像,然后单击右下角的“显示切片”按钮 切片按钮
  4. 单击“开始切片”并切片该图像

尝试将image大小调整为标签栏大小。 或者将tabBar添加到tabBar作为subview ,然后使用该tabBar中的图像。 将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) }