Câu hỏi đơn giản, làm cách nào để xóa văn bản mục trên thanh tab và chỉ hiển thị hình ảnh?
Tôi muốn các mục thanh thích trong ứng dụng instagram:
Trong trình kiểm tra trong xcode 6, tôi xóa tiêu đề và chọn hình ảnh @ 2x (50px) và @ 3x (75px). Tuy nhiên hình ảnh không sử dụng không gian trống của văn bản đã bị loại bỏ. Bất kỳ ý tưởng làm thế nào để đạt được hình ảnh mục thanh tab giống như trong ứng dụng instagram?
""cho tiêu đề, có thể?
Câu trả lời:
Bạn nên chơi với imageInsetstài sản của UITabBarItem. Đây là mã mẫu:
let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)
Giá trị bên trong UIEdgeInsetsphụ thuộc vào kích thước hình ảnh của bạn. Đây là kết quả của mã đó trong ứng dụng của tôi:
// 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);
}
Đây là cách bạn thực hiện trong bảng phân cảnh.
Xóa văn bản tiêu đề và đặt hình ảnh giống như ảnh chụp màn hình bên dưới
Hãy nhớ kích thước biểu tượng phải tuân theo nguyên tắc thiết kế apple
Điều này có nghĩa là bạn nên có 25px x 25px cho @ 1x, 50px x 50px cho @ 2x, 75px x 75px cho @ 3x
Sử dụng phương pháp với thiết mỗi UITabBarItems titletài sản để ""
và cập nhật imageInsetssẽ không hoạt động đúng nếu theo quan điểm điều khiển self.titleđược thiết lập. Ví dụ: nếu self.viewControllersUITabBarController được nhúng vào UINavigationControllervà bạn cần tiêu đề được hiển thị trên thanh điều hướng. Trong trường hợp này, đặt UINavigationItemtiêu đề trực tiếp bằng cách sử dụng self.navigationItem.title, không phải self.title.
Phiên bản Swift của ddiego answer
Tương thích với iOS 11
Gọi hàm này trong viewDidLoad của mọi con đầu tiên của viewControllers sau khi đặt tiêu đề của viewController
Thực hành tốt nhất:
Hay thay thế như @daspianist đã đề xuất trong nhận xét
Tạo một lớp con giống như lớp này BaseTabBarController: UITabBarController, UITabBarControllerDelegate và đặt hàm này trong viewDidLoad của lớp con
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, UITabBarControllerDelegatevà đưa chức năng này vào những lớp conviewDidLoad
Nếu bạn đang sử dụng bảng phân cảnh, đây sẽ là lựa chọn tốt nhất cho bạn. Nó lặp lại qua tất cả các mục trên thanh tab và đối với mỗi mục, nó đặt tiêu đề thành không và làm cho hình ảnh toàn màn hình. (Bạn phải thêm một hình ảnh vào bảng phân cảnh)
for tabBarItem in tabBar.items!
{
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
iOS 11 tạo ra một điểm khó khăn trong nhiều giải pháp này, vì vậy tôi vừa khắc phục sự cố của mình trên iOS 11 bằng cách phân lớp phụ UITabBar và ghi đè layoutSubviews.
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
}
}
}
Tôi đã sử dụng mã sau trong viewDidLoad của BaseTabBarController. Lưu ý rằng trong ví dụ của tôi, tôi có 5 tab và hình ảnh được chọn sẽ luôn là 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... , bạn có thể chỉ cần nói; for tabBarItems in tabBar.items!
Cách tiếp cận Swift 4
Tôi đã có thể thực hiện thủ thuật bằng cách triển khai một hàm sử dụng TabBarItem và thực hiện một số định dạng cho nó.
Di chuyển hình ảnh xuống một chút để làm cho nó được căn giữa hơn và cũng ẩn văn bản của Tab Bar. Hoạt động tốt hơn là chỉ đặt tiêu đề của nó thành một chuỗi trống, vì khi bạn có NavigationBar, TabBar sẽ lấy lại tiêu đề của viewController khi được chọn
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)
}
Cú pháp mới nhất
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)
}
}
Và chỉ cần sử dụng nó trong tabBar của bạn như:
tabBarItem.setImageOnly()
Đây là một cách tốt hơn, dễ hiểu hơn để làm điều này ngoài câu trả lời hàng đầu:
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateHighlighted];
Đặt điều này vào của bạn AppDelegate.didFinishLaunchingWithOptionsđể nó ảnh hưởng đến tất cả các nút trên thanh tab trong suốt vòng đời ứng dụng của bạn.
Tiện ích mở rộng UITabBarController tối thiểu, an toàn trong Swift (dựa trên câu trả lời @ korgx9):
extension UITabBarController {
func removeTabbarItemsText() {
tabBar.items?.forEach {
$0.title = ""
$0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
Dựa trên câu trả lời của ddiego , trong 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)
}
}
}
Và bạn chỉ cần gọi self.tabBarController?.cleanTitles()trong bộ điều khiển chế độ xem của mình.
Dựa trên tất cả các câu trả lời tuyệt vời trên trang này, tôi đã tạo ra một giải pháp khác cũng cho phép bạn hiển thị lại tiêu đề. Thay vì xóa nội dung của tiêu đề, tôi chỉ thay đổi màu chữ thành trong suốt.
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)
}
}
}
Cách dễ nhất và luôn hoạt động:
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
}
}
}
}
}
}
Trong trường hợp của tôi, cùng một ViewController đã được sử dụng trong TabBar và các luồng điều hướng khác. Bên trong ViewController của tôi, tôi đã đặt self.title = "Some Title"nó xuất hiện trong TabBar bất kể đặt tiêu đề nilhay trống trong khi thêm nó vào thanh tab. Tôi cũng đã đặt imageInsetsnhư sau:
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
Vì vậy, bên trong ViewController của tôi, tôi đã xử lý tiêu đề điều hướng như sau:
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"
}
tạo một lớp con của UITabBarController và gán nó cho tabBar của bạn, sau đó trong phương thức viewDidLoad, hãy đặt dòng mã này:
tabBar.items?.forEach({ (item) in
item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
})
TabBar tùy chỉnh - iOS 13, Swift 5, XCode 11
Dựa trên bảng phân cảnh. Nó cũng có thể đạt được một cách dễ dàng theo lập trình. Chỉ 4 bước để làm theo:
Biểu tượng Thanh tab phải có 3 kích thước, màu đen. Thông thường, tôi tải xuống từ fa2png.io - các kích thước: 25x25, 50x50, 75x75. Tệp hình ảnh PDF không hoạt động!
Trong Bảng phân cảnh cho mục thanh tab, hãy đặt biểu tượng bạn muốn sử dụng thông qua Trình kiểm tra thuộc tính. (xem ảnh chụp màn hình)
Lớp 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)
}
}
Kết quả
Nếu bạn đang tìm cách căn giữa các tab / thay đổi các tấm ảnh mà không cần sử dụng các con số kỳ diệu, thì cách sau đã phù hợp với tôi (trong Swift 5.2.2):
Trong một lớp con UITabBarController , bạn có thể thêm phần chèn hình ảnh sau khi đặt bộ điều khiển chế độ xem.
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)
}
}
Một số tùy chọn ở trên liệt kê các giải pháp để đối phó với việc ẩn văn bản.