간단한 질문입니다. 탭 표시 줄 항목 텍스트를 제거하고 이미지 만 표시하려면 어떻게해야합니까?
Instagram 앱에서 좋아하는 바 항목을 원합니다.
xcode 6의 검사기에서 제목을 제거하고 @ 2x (50px) 및 @ 3x (75px) 이미지를 선택합니다. 그러나 이미지는 제거 된 텍스트의 여유 공간을 사용하지 않습니다. 인스 타 그램 앱에서와 같이 동일한 탭 막대 항목 이미지를 얻는 방법에 대한 아이디어가 있습니까?
간단한 질문입니다. 탭 표시 줄 항목 텍스트를 제거하고 이미지 만 표시하려면 어떻게해야합니까?
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 가 설정된 경우 각 UITabBarItem
s title
속성을 설정 ""
하고 업데이트하는 방법을 사용하면 imageInsets
제대로 작동하지 않습니다 self.title
. 예를 들어 self.viewControllers
UITabBarController가 포함되어 UINavigationController
있고 탐색 모음에 제목을 표시해야하는 경우 입니다 . 이 경우 , not을 UINavigationItem
사용하여 직접 제목을 설정하십시오 .self.navigationItem.title
self.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)
}
}
}
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
앱의 수명 내내 모든 탭 바 버튼에 영향을 미치도록 이것을 넣으십시오 .
Swift 의 최소한의 안전한 UITabBarController 확장 (@ korgx9 답변 기반) :
extension UITabBarController {
func removeTabbarItemsText() {
tabBar.items?.forEach {
$0.title = ""
$0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
에 기초 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()
뷰 컨트롤러 를 호출하기 만하면 됩니다.
이 페이지의 모든 훌륭한 답변을 바탕으로 제목을 다시 표시 할 수있는 또 다른 솔루션을 만들었습니다. 제목의 내용을 제거하는 대신 글꼴 색상을 투명으로 변경합니다.
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"
제목 설정 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"
}
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에서).
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)
}
}
위의 몇 가지 옵션은 텍스트 숨기기를 처리하는 솔루션을 나열합니다.