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

时间：2017-07-12 00:17:09

标签： ios

所以我有一个.png，即428x176 px：

enter image description here

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

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

更新

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

6 个答案:

答案 0 :(得分：5)

将此问题的答案how to make UITabBar selection indicator image fill the whole space?作为参考：

UITabBarController的子类

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

备注：

  1. 制作图片＆＃39;渲染模式为Original。

  2. 如果您以编程方式执行屏幕，请将以下类分配给故事板中的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
    }

}

答案 1 :(得分：2)

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

启动iOS 11时，标签栏的高度会更小，标题会在landscape模式下向右移动。

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

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

以下是博客文章中的一些图片，以帮助说清楚 - enter image description here enter image description here enter image description here

希望这有帮助。

答案 2 :(得分：1)

使用以下两行。

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"]];

答案 3 :(得分：1)

您是否尝试过将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)

如果我们谈论身高＆amp;标签标签的宽度为 320 * 49/640 * 98 @ 2x。因此，如果你想保持相同的尺寸，请试试这些宽度/高度比。

答案 4 :(得分：0)

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

  1. 创建资产目录
  2. 拖动＆amp;将图像放入资产目录。
  3. 在资产目录中选择该图像，然后单击＆＃34;显示切片＆＃34;右下方的按钮Slicing Button
  4. 点击＆＃34;开始切片＆＃34;并切片图像

答案 5 :(得分：-1)

尝试将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)


}
相关问题
最新问题