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

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

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

여기에 이미지 설명 입력

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



답변

당신은 함께 플레이해야 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);
}


답변

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

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

여기에 이미지 설명 입력

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

여기에 이미지 설명 입력

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


답변

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


답변

빠른 버전 의 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)
        }
    }
}


답변

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

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