ลบข้อความรายการแถบแถบแสดงเฉพาะรูปภาพ

คำถามง่ายๆฉันจะลบข้อความรายการแถบแท็บและแสดงเฉพาะรูปภาพได้อย่างไร

ฉันต้องการรายการบาร์ในแอพ instagram:

ในตัวตรวจสอบใน xcode 6 ฉันลบชื่อและเลือกภาพ @ 2x (50px) และ @ 3x (75px) อย่างไรก็ตามรูปภาพไม่ได้ใช้พื้นที่ว่างของข้อความที่ลบออกไป มีความคิดอย่างไรในการบรรลุภาพรายการแถบแท็บเดียวกันเช่นในแอป Instagram?

คุณควรจะเล่นกับทรัพย์สินของ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);
}

นี่คือวิธีการทำในสตอรีบอร์ด

ล้างข้อความชื่อเรื่องและตั้งค่าการแทรกรูปภาพเช่นภาพหน้าจอด้านล่าง

โปรดจำไว้ว่าขนาดไอคอนควรเป็นไปตามแนวทางการออกแบบของ Apple

ซึ่งหมายความว่าคุณควรมี 25px x 25px สำหรับ @ 1x, 50px x 50px สำหรับ @ 2x, 75px x 75px สำหรับ @ 3x

ใช้วิธีการกับการตั้งค่าแต่ละ UITabBarItem s titleคุณสมบัติการ"" และการปรับปรุงimageInsetsจะไม่ทำงานอย่างถูกต้องหากในมุมมองของตัวควบคุมself.titleเป็นชุด ตัวอย่างเช่นหากself.viewControllersUITabBarController ฝังอยู่UINavigationControllerและคุณต้องการให้แสดงหัวเรื่องบนแถบนำทาง ในกรณีที่ชุดนี้UINavigationItemชื่อ s โดยตรงโดยใช้ไม่ได้self.navigationItem.titleself.title

คำตอบ ddiego เวอร์ชันที่รวดเร็ว

เข้ากันได้กับ iOS 11

เรียกใช้ฟังก์ชันนี้ใน viewDidLoad ของลูกคนแรกทุกคนของ viewControllers หลังจากตั้งชื่อเรื่องของ viewController

ปฏิบัติที่ดีที่สุด:

Alternativelly ตามที่ @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)
        }
    }
}

หากคุณใช้สตอรี่บอร์ดนี่จะเป็นตัวเลือกที่ดีที่สุดสำหรับคุณ มันวนผ่านรายการแถบแท็บทั้งหมดและสำหรับแต่ละรายการจะตั้งชื่อเรื่องเป็นไม่มีอะไรและทำให้ภาพเต็มหน้าจอ (คุณต้องเพิ่มรูปภาพในกระดานเรื่องราว)

for tabBarItem in tabBar.items!
{
   tabBarItem.title = ""
   tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}

iOS 11 ทำให้เกิดความผิดพลาดในโซลูชันเหล่านี้จำนวนมากดังนั้นฉันจึงเพิ่งแก้ไขปัญหาของฉันใน iOS 11 โดยการคลาสย่อย UITabBar และการแทนที่เค้าโครง

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
        }
    }
}

ฉันใช้รหัสต่อไปนี้ใน ViewDidLoad ของ BaseTabBarController โปรดทราบว่าในตัวอย่างของฉันฉันมี 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)
}

แนวทาง Swift 4

ฉันสามารถทำเคล็ดลับได้โดยใช้ฟังก์ชันที่ใช้ TabBarItem และทำการจัดรูปแบบบางอย่าง

เลื่อนภาพลงเล็กน้อยเพื่อให้อยู่กึ่งกลางมากขึ้นและซ่อนข้อความของ Tab Bar ด้วย ทำงานได้ดีกว่าการตั้งชื่อเรื่องเป็นสตริงว่างเปล่าเพราะเมื่อคุณมี 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เพื่อให้มีผลกับปุ่มแถบแท็บทั้งหมดตลอดอายุการใช้งานแอปของคุณ

ส่วนขยาย UITabBarController ขั้นต่ำและปลอดภัยในSwift (อ้างอิงจากคำตอบ @ korgx9):

extension UITabBarController {
  func removeTabbarItemsText() {
    tabBar.items?.forEach {
      $0.title = ""
      $0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    }
  }
}

จากคำตอบของ ddiegoในSwift 4.2 :

extension UITabBarController {
    func cleanTitles() {
        guard let items = self.tabBar.items else {
            return
        }
        for item in items {
            item.title = ""
            item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        }
    }
}

และคุณต้องเรียกใช้self.tabBarController?.cleanTitles()ตัวควบคุมมุมมองของคุณ

จากคำตอบที่ดีทั้งหมดในหน้านี้ฉันได้สร้างโซลูชันอื่นที่ช่วยให้คุณสามารถแสดงชื่อได้อีกครั้ง แทนที่จะลบเนื้อหาของชื่อฉันแค่เปลี่ยนสีฟอนต์เป็นแบบโปร่งใส

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)
        }

    }

}

รหัส:

private func removeText() {
    if let items = yourTabBarVC?.tabBar.items {
       for item in items {
          item.title = ""
       }
    }
 }

วิธีที่ง่ายที่สุดและใช้ได้ผลเสมอ:

class TabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        subviews.forEach { subview in
            if subview is UIControl {
                subview.subviews.forEach {
                    if $0 is UILabel {
                        $0.isHidden = true
                        subview.frame.origin.y = $0.frame.height / 2.0
                    }
                }
            }
        }
    }
}

ในกรณีของฉัน ViewController เดียวกันถูกใช้ใน TabBar และโฟลว์การนำทางอื่น ๆ ภายใน 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)
    })

Custom TabBar - iOS 13, Swift 5, XCode 11

• รายการ TabBar ที่ไม่มีข้อความ
• รายการ TabBar อยู่กึ่งกลางในแนวตั้ง
• มุมมอง TabBar ที่โค้งมน
• ตำแหน่งและเฟรม TabBar Dynamic

ตามสตอรี่บอร์ด สามารถทำได้อย่างง่ายดายโดยใช้โปรแกรมด้วย เพียง 4 ขั้นตอนในการปฏิบัติตาม:

1. ไอคอนแถบแท็บต้องมี 3 ขนาดเป็นสีดำ โดยปกติฉันดาวน์โหลดจาก fa2png.io - ขนาด: 25x25, 50x50, 75x75 ไฟล์ภาพ PDF ไม่ทำงาน!

   

2. ใน Storyboard สำหรับรายการแถบแท็บให้ตั้งค่าไอคอนที่คุณต้องการใช้ผ่าน Attributes Inspector (ดูภาพหน้าจอ)

3. Custom TabBarController -> ไฟล์ใหม่ -> ประเภท: UITabBarController -> ตั้งค่าบนกระดานเรื่องราว (ดูภาพหน้าจอ)

4. คลาส UITabBarController

   คลาส 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)
   }
   

   }

5. ผลลัพธ์

หากคุณต้องการจัดแท็บให้อยู่กึ่งกลาง / เปลี่ยนการแทรกภาพโดยไม่ใช้ตัวเลขวิเศษสิ่งต่อไปนี้ใช้ได้ผลสำหรับฉัน (ใน 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)
    }
}

หลายตัวเลือกข้างต้นแสดงรายการวิธีแก้ปัญหาสำหรับการจัดการกับการซ่อนข้อความ