Basit soru, sekme çubuğu öğesi metnini nasıl kaldırabilirim ve yalnızca resmi gösterebilirim?
Çubuk öğelerinin instagram uygulamasında beğenilmesini istiyorum:
Xcode 6'daki denetçide başlığı kaldırıyorum ve bir @ 2x (50px) ve bir @ 3x (75px) resim seçiyorum. Ancak görüntü, kaldırılan metnin boş alanını kullanmaz. İnstagram uygulamasında olduğu gibi aynı sekme çubuğu öğesi görüntüsünün nasıl elde edileceğine dair bir fikriniz var mı?
""başlık için kullanmak , belki?
Yanıtlar:
imageInsetsMülkiyetiyle oynamalısınız UITabBarItem. İşte örnek kod:
let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)
İçerideki değerler UIEdgeInsetsresminizin boyutuna bağlıdır. İşte o kodun uygulamamdaki sonucu:
// 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);
}
İşte bir film şeridinde bunu nasıl yapacağınız.
Başlık metnini temizleyin ve resim ekini aşağıdaki ekran görüntüsü gibi ayarlayın
Simge boyutunun elma tasarım kılavuzuna uygun olması gerektiğini unutmayın
Bu, @ 1x için 25px x 25px, @ 2x için 50px x 50px, @ 3x için 75px x 75px olması gerektiği anlamına gelir
Görünüm denetleyicisinde ayarlanmışsa, her bir UITabBarItems titleözelliğini ""
ve güncellemesini ayarlayarak yaklaşımı kullanmak imageInsetsdüzgün çalışmayacaktır self.title. Örneğin self.viewControllers, UITabBarController'a gömülü ise UINavigationControllerve gezinme çubuğunda görüntülenecek başlığa ihtiyacınız varsa. Bu durumda UINavigationItembaşlığı doğrudan kullanarak ayarlayın self.navigationItem.title, değil self.title.
Ddiego cevabının hızlı versiyonu
İOS 11 ile uyumlu
ViewController başlığını ayarladıktan sonra, viewControllers öğesinin her ilk alt öğesinin viewDidLoad öğesinde bu işlevi çağırın
En iyi pratik:
@Daspianist'in yorumlarda önerdiği gibi Alternativelly
Bu sınıf BaseTabBarController: UITabBarController, UITabBarControllerDelegate gibi bir alt sınıf oluşturun ve bu işlevi alt sınıfın viewDidLoad öğesine yerleştirin
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, UITabBarControllerDelegateve bu işlevi alt sınıfınviewDidLoad
Film şeridi kullanıyorsanız, bu en iyi seçenek olacaktır. Tüm sekme çubuğu öğeleri arasında döngü oluşturur ve her biri için başlığı sıfır olarak ayarlar ve görüntüyü tam ekran yapar. (Film şeridine bir resim eklemiş olmalısınız)
for tabBarItem in tabBar.items!
{
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
iOS 11, bu çözümlerin çoğunda bir karışıklık yaratıyor, bu yüzden iOS 11'deki sorunlarımı UITabBar'ı alt sınıflara ayırarak ve layoutSubviews'leri geçersiz kılarak düzelttim.
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'ın viewDidLoad'unda aşağıdaki kodu kullandım. Örneğimde 5 sekmem olduğunu ve seçilen resmin her zaman base_image + "_selected" olacağını unutmayın.
// 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... şöyle diyebilirdiniz; for tabBarItems in tabBar.items!
Swift 4 yaklaşımı
TabBarItem'i alan ve ona biraz biçimlendirme yapan bir işlevi uygulayarak hile yapabildim.
Görüntüyü daha ortalamak için biraz aşağı taşır ve ayrıca Sekme Çubuğunun metnini gizler. Başlığını boş bir dizeye ayarlamaktan daha iyi çalıştı, çünkü bir NavigationBar'ınız olduğunda da TabBar seçildiğinde viewController'ın başlığını geri alıyor
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)
}
En son sözdizimi
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)
}
}
Ve bunu sekme çubuğunuzda şu şekilde kullanın:
tabBarItem.setImageOnly()
İşte bunu yapmanın en iyi cevaptan başka daha iyi ve daha kusursuz bir yolu:
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateHighlighted];
Senin bu koy AppDelegate.didFinishLaunchingWithOptionssenin, uygulamanın ömrü boyunca tüm sekme çubuğu düğmeleri etkiler böylece.
Bir minimal, güvenli UITabBarController uzatma Swift (dayanan @ korgx9 yanıt):
extension UITabBarController {
func removeTabbarItemsText() {
tabBar.items?.forEach {
$0.title = ""
$0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
Dayanarak ddiego cevabında içinde, 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)
}
}
}
Ve sadece self.tabBarController?.cleanTitles()görünüm denetleyicinizi aramanız gerekir .
Bu sayfadaki tüm harika cevaplara dayanarak, başlığı tekrar göstermenize de izin veren başka bir çözüm geliştirdim. Başlık içeriğini kaldırmak yerine yazı tipi rengini şeffaf olarak değiştiriyorum.
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)
}
}
}
En kolay yol ve her zaman işe yarar:
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
}
}
}
}
}
}
Benim durumumda, aynı ViewController TabBar'da ve diğer gezinme akışında kullanıldı. ViewController'imin içinde, sekme çubuğuna eklerken self.title = "Some Title"başlığı nilveya boşluğu ayarlamadan TabBar'da görüneni ayarladım . Ayrıca imageInsetsaşağıdaki gibi belirledim :
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
Bu yüzden, ViewController'imin içinde gezinme başlığını şu şekilde ele aldım:
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'ın bir alt sınıfını yapın ve bunu tabBar'ınıza atayın, ardından viewDidLoad yöntemine şu kod satırını yerleştirin:
tabBar.items?.forEach({ (item) in
item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
})
Özel TabBar - iOS 13, Swift 5, XCode 11
Storyboard tabanlı. Programlı olarak da kolaylıkla elde edilebilir. İzlenecek yalnızca 4 Adım:
Sekme Çubuğu Simgeleri 3 boyutta ve siyah renkte olmalıdır. Genellikle fa2png.io'dan indiriyorum - boyutlar: 25x25, 50x50, 75x75. PDF görüntü dosyaları çalışmıyor!
Sekme çubuğu öğesi için Storyboard'da, Attributes Inspector aracılığıyla kullanmak istediğiniz simgeyi ayarlayın. (ekran görüntüsüne bakın)
UITabBarController sınıfı
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)
}
}
Sonuç
Sihirli numaralar kullanmadan sekmeleri ortalamak / görüntü girişlerini değiştirmek istiyorsanız, aşağıdakiler benim için çalıştı (Swift 5.2.2'de):
Bir UITabBarController alt sınıfında, görünüm denetleyicilerini ayarladıktan sonra görüntü girintilerini ekleyebilirsiniz.
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)
}
}
Yukarıdaki seçeneklerden birkaçı, metni gizlemekle ilgili çözümleri listelemektedir.