탭 표시 줄 항목 텍스트 제거, 이미지 만 표시


90

간단한 질문입니다. 탭 표시 줄 항목 텍스트를 제거하고 이미지 만 표시하려면 어떻게해야합니까?

Instagram 앱에서 좋아하는 바 항목을 원합니다.

여기에 이미지 설명 입력

xcode 6의 검사기에서 제목을 제거하고 @ 2x (50px) 및 @ 3x (75px) 이미지를 선택합니다. 그러나 이미지는 제거 된 텍스트의 여유 공간을 사용하지 않습니다. 인스 타 그램 앱에서와 같이 동일한 탭 막대 항목 이미지를 얻는 방법에 대한 아이디어가 있습니까?



1
""제목에 사용 할까요?
holex

1
오프셋 설정은 트릭 일 뿐이며 정답은 약간 아래에 있습니다. navigationItem.title = "some title"을 사용해야합니다.
Davit Siradeghyan 2018

답변:


129

당신은 함께 플레이해야 imageInsets의 재산입니다 UITabBarItem. 다음은 샘플 코드입니다.

let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)

내부 값 UIEdgeInsets은 이미지 크기에 따라 다릅니다. 내 앱에서 해당 코드의 결과는 다음과 같습니다.

여기에 이미지 설명 입력


25
속성에서 이미지 삽입을 조정할 수도 있습니다.
Upvote

매직 넘버는 나쁜 생각입니다. 동일한 작업을 수행하는 보편적으로 호환되는 방법에 대한 내 대답을 참조하십시오.
Ezekiel Victor

4
iOS 11에서는 더 이상 작동하지 않습니다. 활성 탭을 두 번 클릭하면 어떤 이유로 든 삽입이 두 배가됩니다.
Ben Gotow

@ BenGotow 같은 문제가 어떤 해결책이 있습니까?
Dixit Akabari

@DixitAkabari 다른 사람들은 이미 아이폰 OS (11)에 대한 몇 가지 좋은 솔루션을 게시 한
PRANAV 카셋

78
// 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);
}

1
제목을 제거하는 대신 텍스트 색상을 지우도록 변경하십시오. 제목이 유용 할 수 있습니다.
Eduardo Mauro

1
Kodos에서 Eduardo로! 좋은 옵션은 항목의 titlePositionAjustement에 수직 UIOffset을 설정하는 것임을 깨달았습니다
Julius

2
사용자 정의 TabBar 컨트롤러에 이것을 어디에 넣습니까?
UKDataGeek

69

다음은 스토리 보드에서 수행하는 방법입니다.

제목 텍스트를 지우고 아래 스크린 샷과 같이 이미지 삽입을 설정합니다.

여기에 이미지 설명 입력

아이콘 크기는 애플 디자인 가이드 라인을 따라야합니다.

여기에 이미지 설명 입력

즉, @ 1x의 경우 25px x 25px, @ 2x의 경우 50px x 50px, @ 3x의 경우 75px x 75px가 있어야합니다.


45

in view controller 가 설정된 경우 각 UITabBarItems title속성을 설정 "" 하고 업데이트하는 방법을 사용하면 imageInsets제대로 작동하지 않습니다 self.title. 예를 들어 self.viewControllersUITabBarController가 포함되어 UINavigationController있고 탐색 모음에 제목을 표시해야하는 경우 입니다 . 이 경우 , not을 UINavigationItem사용하여 직접 제목을 설정하십시오 .self.navigationItem.titleself.title


2
이것은 더 깨끗한 방법처럼 보입니다. +1 @Oleg 이것은 답변으로 표시되어야합니다.
akseli

29

빠른 버전 의 ddiego 답변

iOS 11과 호환

viewController의 제목을 설정 한 후 viewController의 모든 첫 번째 자식의 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)
        }
    }
}

2
훌륭한 기능! 당신은 다른 방법이 등의 서브 클래스를 만들 수 class BaseTabBarController: UITabBarController, UITabBarControllerDelegate및 서브 클래스의이 기능을 넣어viewDidLoad
daspianist

26

스토리 보드를 사용하는 경우 이것이 최선의 선택이 될 것입니다. 모든 탭 막대 항목을 반복하고 각 항목에 대해 제목을 아무것도 설정하지 않고 이미지를 전체 화면으로 만듭니다. (스토리 보드에 이미지를 추가해야합니다.)

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

상단 및 하단 삽입을 모두 설정하지 않으면 이미지가 뒤틀리게됩니다.
Julius

16

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

이것이 나를 위해 일한 유일한 일이지만 MyTabBarController의 하위 클래스의 'override func viewDidLayoutSubviews'안에 코드를 넣어야했습니다. 나는 tabBarController를 서브 클래 싱과 이름이
랜스 사마리아를

솔루션이 훌륭하게 작동했습니다. 이 추가 간단 그래서 나는 확장자로 사용
마이클 Gumny에게

이 날 탭 표시 줄 컨트롤러 코드를 만지지 않고도 일 @LanceSamaria
PRANAV 카셋

12

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

1
을 사용하는 대신 for var i = 0; i < tabBar... 방금 말할 수 있습니다. for tabBarItems in tabBar.items!
Jesse Onolemen

10

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

6

다음은 상위 답변 이외의 더 나은 방법입니다.

[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateHighlighted];

AppDelegate.didFinishLaunchingWithOptions앱의 수명 내내 모든 탭 바 버튼에 영향을 미치도록 이것을 넣으십시오 .


3
이것은 제목 만 숨기고 이미지의 위치를 ​​조정하지 않습니다.
mustafa 2016-09-22

2
예, 그러나 질문은 이미지 조정에 대해 아무것도 말하지 않았습니다. 텍스트를 숨기는 것뿐입니다. 그리고 뷰 컨트롤러에서 제목을 제거하는 데 해를 끼치면서 텍스트를 숨기는 것은 잘못된 것 같습니다. 해당 제목을 사용할 수 있습니다 특히 때 navigationviewcontroller의 일부로 보여
Dan1one

6

Swift 의 최소한의 안전한 UITabBarController 확장 (@ korgx9 답변 기반) :

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

2

에 기초 ddiego의 대답 에, 스위프트 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()뷰 컨트롤러 를 호출하기 만하면 됩니다.


1

이 페이지의 모든 훌륭한 답변을 바탕으로 제목을 다시 표시 할 수있는 또 다른 솔루션을 만들었습니다. 제목의 내용을 제거하는 대신 글꼴 색상을 투명으로 변경합니다.

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

    }

}

0

여기에 이미지 설명 입력

암호:

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

0

가장 쉬운 방법과 항상 작동합니다.

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

0

제 경우에는 TabBar 및 기타 탐색 흐름에서 동일한 ViewController가 사용되었습니다. 내 ViewController 내 에서 탭 막대에 추가하는 동안 self.title = "Some Title"제목 설정 nil또는 공백에 관계없이 TabBar에 나타나는 것을 설정 했습니다. 또한 다음 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"
}

0

UITabBarController의 하위 클래스를 만들고 tabBar에 할당 한 다음 viewDidLoad 메서드에 다음 코드 줄을 배치합니다.

tabBar.items?.forEach({ (item) in
        item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
    })

0

사용자 정의 TabBar-iOS 13, Swift 5, XCode 11

  • 텍스트가없는 TabBar 항목
  • 세로로 가운데에있는 TabBar 항목
  • 둥근 TabBar보기
  • TabBar 동적 위치 및 프레임

스토리 보드 기반. 프로그래밍 방식으로도 쉽게 달성 할 수 있습니다. 따라야 할 단 4 단계 :

  1. 탭 표시 줄 아이콘은 검정색의 3 가지 크기 여야합니다. 일반적으로 fa2png.io에서 다운로드합니다-크기 : 25x25, 50x50, 75x75. PDF 이미지 파일이 작동하지 않습니다!

    여기에 이미지 설명 입력

  2. 탭 모음 항목의 스토리 보드에서 Attributes Inspector를 통해 사용할 아이콘을 설정합니다. (스크린 샷 참조)

여기에 이미지 설명 입력

  1. Custom TabBarController-> New File-> Type : UITabBarController-> Set on storyboard. (스크린 샷 참조)

여기에 이미지 설명 입력

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

    }

  2. 결과 여기에 이미지 설명 입력


0

매직 넘버를 사용하지 않고 탭을 중앙에 놓거나 이미지 삽입을 변경하려는 경우 다음이 저에게 효과적이었습니다 (Swift 5.2.2에서).

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

위의 몇 가지 옵션은 텍스트 숨기기를 처리하는 솔루션을 나열합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.