自定义标签栏项目背景图片的正确尺寸是多少?
所以我有一个.png
,即428×176像素:
当项目处于选定状态时,我想将其用作标签栏背景图像。 问题是图像太大了。 所以现在,我正在探索不同的分辨率后缀:@ 1x,@ 2x,@ 3x。 但无论我附加到图像文件名,图像对于标签栏项目的背景仍然太大,尽管随着我增加分辨率因子它会变小。 如何确定此图像的正确尺寸应该是多少?
请记住,这是任何特定UITabBarItem
处于选定状态时的背景图像。 它意味着UITabBarItem
的整个宽度和高度。 我的标签栏将在屏幕的宽度上放置三个项目。
更新:
很多答案都提供了基于swift的解决方案,但我要求的是我的图像应该以像素为单位的尺寸,换句话说,我应该在包中包含什么尺寸的图像,以便图像适合于所有屏幕尺寸的标签栏。 我想,因为UITabBar
默认需要一个UIImage
用于其selectionIndicatorImage
字段而不是UIImageView
,必须有一个解决方案,不涉及黑客攻击UITabBar
并添加UIImageView
作为它的子视图并管理图像视图的位置应该根据当前选择的UITabBarItem
手动进入。
我对这个问题的答案如何让UITabBar选择指标图像填满整个空间? 作为参考:
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 } }
使用以下两行。
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左右)
-
[[[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的答案:如果将图像添加到资产商店,您还可以使用系统工具进行可视切片。
- 创建资产目录
- 将图像拖放到资产目录中。
- 在资产目录中选择该图像,然后单击右下角的“显示切片”按钮
- 单击“开始切片”并切片该图像
尝试将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) }