一个简单的问题,如何删除选项卡栏项目文本并仅显示图像?
我希望酒吧项目在instagram应用中喜欢:
在xcode 6的检查器中,我删除了标题,并选择了@ 2x(50px)和@ 3x(75px)图像。但是,图像不使用已删除文本的可用空间。有什么想法可以实现与instagram应用程序中相同的选项卡栏项目图像吗?
一个简单的问题,如何删除选项卡栏项目文本并仅显示图像?
我希望酒吧项目在instagram应用中喜欢:
在xcode 6的检查器中,我删除了标题,并选择了@ 2x(50px)和@ 3x(75px)图像。但是,图像不使用已删除文本的可用空间。有什么想法可以实现与instagram应用程序中相同的选项卡栏项目图像吗?
""
标题,也许?
Answers:
您应该使用的imageInsets
属性UITabBarItem
。这是示例代码:
let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)
里面的值UIEdgeInsets
取决于您的图像尺寸。这是我的应用程序中该代码的结果:
// Remove the titles and adjust the inset to account for missing title
for(UITabBarItem * tabBarItem in self.tabBar.items){
tabBarItem.title = @"";
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
}
Swift版本的Ddiego答案
兼容iOS 11
设置viewController的标题后,在viewControllers的每个第一个子视图的viewDidLoad中调用此函数
最佳实践:
或者@daspianist在评论中建议
制作一个类似此类的子类BaseTabBarController:UITabBarController,UITabBarControllerDelegate并将此函数放在子类的viewDidLoad中
func removeTabbarItemsText() {
var offset: CGFloat = 6.0
if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
offset = 0.0
}
if let items = tabBar.items {
for item in items {
item.title = ""
item.imageInsets = UIEdgeInsets(top: offset, left: 0, bottom: -offset, right: 0)
}
}
}
class BaseTabBarController: UITabBarController, UITabBarControllerDelegate
,然后将此函数放入子类中viewDidLoad
如果您使用情节提要,这将是您的最佳选择。它遍历所有选项卡栏项,并且为每个项设置标题为空,并使图像全屏显示。(您必须在情节提要中添加了图像)
for tabBarItem in tabBar.items!
{
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
iOS 11在许多此类解决方案中都存在问题,因此我只是通过子类化UITabBar并覆盖layoutSubviews来解决了iOS 11上的问题。
class MainTabBar: UITabBar {
override func layoutSubviews() {
super.layoutSubviews()
// iOS 11: puts the titles to the right of image for horizontal size class regular. Only want offset when compact.
// iOS 9 & 10: always puts titles under the image. Always want offset.
var verticalOffset: CGFloat = 6.0
if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
verticalOffset = 0.0
}
let imageInset = UIEdgeInsets(
top: verticalOffset,
left: 0.0,
bottom: -verticalOffset,
right: 0.0
)
for tabBarItem in items ?? [] {
tabBarItem.title = ""
tabBarItem.imageInsets = imageInset
}
}
}
我在BaseTabBarController的viewDidLoad中使用了以下代码。请注意,在我的示例中,我有5个标签,并且所选图片始终为base_image +“ _selected”。
// Get tab bar and set base styles
let tabBar = self.tabBar;
tabBar.backgroundColor = UIColor.whiteColor()
// Without this, images can extend off top of tab bar
tabBar.clipsToBounds = true
// For each tab item..
let tabBarItems = tabBar.items?.count ?? 0
for i in 0 ..< tabBarItems {
let tabBarItem = tabBar.items?[i] as UITabBarItem
// Adjust tab images (Like mstysf says, these values will vary)
tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -6, 0);
// Let's find and set the icon's default and selected states
// (use your own image names here)
var imageName = ""
switch (i) {
case 0: imageName = "tab_item_feature_1"
case 1: imageName = "tab_item_feature_2"
case 2: imageName = "tab_item_feature_3"
case 3: imageName = "tab_item_feature_4"
case 4: imageName = "tab_item_feature_5"
default: break
}
tabBarItem.image = UIImage(named:imageName)!.imageWithRenderingMode(.AlwaysOriginal)
tabBarItem.selectedImage = UIImage(named:imageName + "_selected")!.imageWithRenderingMode(.AlwaysOriginal)
}
for var i = 0; i < tabBar...
,您可能只是说过;for tabBarItems in tabBar.items!
Swift 4方法
通过实现一个接受TabBarItem并对其进行一些格式化的功能,我能够做到这一点。
将图像稍微向下移动,使其更居中,并隐藏选项卡栏的文本。与仅将其标题设置为空字符串相比,它的工作效果更好,因为当您同时具有NavigationBar时,TabBar在被选中时会重新获得viewController的标题
func formatTabBarItem(tabBarItem: UITabBarItem){
tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .selected)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .normal)
}
最新语法
extension UITabBarItem {
func setImageOnly(){
imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .selected)
setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .normal)
}
}
只需在您的tabBar中将其用作:
tabBarItem.setImageOnly()
除了最佳答案,这是一种更好,更简单的方法:
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateHighlighted];
将其放入AppDelegate.didFinishLaunchingWithOptions
您的应用程序中,以便在应用程序的整个生命周期内影响所有选项卡栏按钮。
基于此页面上所有的出色答案,我制定了另一个解决方案,该解决方案还使您可以再次显示标题。我没有删除标题的内容,只是将字体颜色更改为透明。
extension UITabBarItem {
func setTitleColorFor(normalState: UIColor, selectedState: UIColor) {
self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: normalState], for: .normal)
self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: selectedState], for: .selected)
}
}
extension UITabBarController {
func hideItemsTitle() {
guard let items = self.tabBar.items else {
return
}
for item in items {
item.setTitleColorFor(normalState: UIColor(white: 0, alpha: 0), selectedState: UIColor(white: 0, alpha: 0))
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
func showItemsTitle() {
guard let items = self.tabBar.items else {
return
}
for item in items {
item.setTitleColorFor(normalState: .black, selectedState: .yellow)
item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
}
}
就我而言,在TabBar和其他导航流程中使用了相同的ViewController。在ViewController内部,我设置了将self.title = "Some Title"
其显示在TabBar中的方法,而不论在设置nil
它时如何设置标题或空白。我还设置imageInsets
如下:
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
因此,在ViewController中,我按以下方式处理了导航标题:
if isFromTabBar {
// Title for NavigationBar when ViewController is added in TabBar
// NOTE: Do not set self.title = "Some Title" here as it will set title of tabBarItem
self.navigationItem.title = "Some Title"
} else {
// Title for NavigationBar when ViewController is opened from navigation flow
self.title = "Some Title"
}
制作UITabBarController的子类,并将其分配给tabBar,然后在viewDidLoad方法中放置以下代码行:
tabBar.items?.forEach({ (item) in
item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
})
自定义TabBar-iOS 13,Swift 5,XCode 11
基于情节提要。也可以通过编程轻松实现。仅需遵循4个步骤:
标签栏图标必须为3种尺寸,黑色。通常,我从fa2png.io下载-尺寸:25x25、50x50、75x75。PDF图像文件不起作用!
在情节提要中的选项卡栏项中,设置要通过Attributes Inspector使用的图标。(请参见屏幕截图)
UITabBarController类
class RoundedTabBarViewController:UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
// Custom tab bar view
customizeTabBarView()
}
private func customizeTabBarView() {
let tabBarHeight = tabBar.frame.size.height
self.tabBar.layer.masksToBounds = true
self.tabBar.isTranslucent = true
self.tabBar.barStyle = .default
self.tabBar.layer.cornerRadius = tabBarHeight/2
self.tabBar.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let viewWidth = self.view.bounds.width
let leadingTrailingSpace = viewWidth * 0.05
tabBar.frame = CGRect(x: leadingTrailingSpace, y: 200, width: viewWidth - (2 * leadingTrailingSpace), height: 49)
}
}
如果您希望在制表符居中/不使用幻数的情况下更改图像插图,则以下对我有用(在Swift 5.2.2中):
在UITabBarController子类中,可以在设置视图控制器之后添加添加图像插图。
override var viewControllers: [UIViewController]? {
didSet {
addImageInsets()
}
}
func addImageInsets() {
let tabBarHeight = tabBar.frame.height
for item in tabBar.items ?? [] where item.image != nil {
let imageHeight = item.image?.size.height ?? 0
let inset = CGFloat(Int((tabBarHeight - imageHeight) / 4))
item.imageInsets = UIEdgeInsets(top: inset,
left: 0,
bottom: -inset,
right: 0)
}
}
上面的几个选项列出了用于隐藏文本的解决方案。