टैब बार आइटम टेक्स्ट निकालें, केवल छवि दिखाएं

90

सरल प्रश्न, मैं टैब बार आइटम टेक्स्ट को कैसे निकाल सकता हूं और केवल छवि दिखा सकता हूं?

मैं चाहता हूँ कि बार आइटम इंस्टाग्राम ऐप में पसंद करें:

यहाँ छवि विवरण दर्ज करें

इंस्पेक्टर में xcode 6 में मैं शीर्षक हटाता हूं और एक @ 2x (50px) और एक @ 3x (75px) छवि चुनता हूं। हालाँकि छवि हटाए गए पाठ के खाली स्थान का उपयोग नहीं करती है। किसी भी विचार कैसे एक ही टैब बार आइटम छवि प्राप्त करने के लिए इंस्टाग्राम अनुप्रयोग में?

ios  swift  uitabbaritem 
— वोट दें
स्रोत
3
इसके साथ डुप्लिकेट: stackoverflow.com/questions/11811831/only-image-as-uitabbaritem/…
— algal
1
""शीर्षक के लिए उपयोग , शायद?
— १६:१६
1
ऑफसेट सेट करना सिर्फ एक ट्रिक है, सही उत्तर थोड़ा नीचे है। आपको नेविगेशन
— इटेम टेटल

जवाबों:

129

की imageInsetsसंपत्ति से खेलना चाहिए UITabBarItem। यहाँ नमूना कोड है:

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

अंदर के मान UIEdgeInsetsआपकी छवि के आकार पर निर्भर करते हैं। यहाँ मेरे ऐप में उस कोड का परिणाम है:

enter image description here

— मुस्तफा
स्रोत
25
आप निरीक्षक में छवि इनसेट को भी समायोजित कर सकते हैं।
— वोट दें
मैजिक नंबर एक बुरा विचार है। एक ही बात को पूरा करने के लिए एक सार्वभौमिक रूप से संगत तरीके से मेरा जवाब देखें।
— ईजेकील विक्टर
4
यह अब iOS 11 में काम नहीं करता है - यदि आप सक्रिय टैब पर डबल क्लिक करते हैं तो यह किसी कारण से इनसेट को दोगुना कर देगा।
— बेन गोटोव
@BenGotow वही समस्या जिसका आपको कोई हल मिला?
— दीक्षित अकबरी
@ दीक्षितअकबरी अन्य लोगों ने पहले ही iOS 11 के लिए कुछ अच्छे समाधान पोस्ट कर दिए हैं
— प्रणव कासत्ती
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);
}
— ddiego
स्रोत
1
शीर्षक को हटाने के बजाय पाठ का रंग बदलने के लिए साफ़ करें। शीर्षक उपयोगी हो सकता है।
— एडुआर्डो मौरो
1
कोडोस से एडुआर्डो! मुझे एहसास हुआ कि एक अच्छा विकल्प भी आइटम के शीर्षक पर एक UIOffset सेट करने के लिए हैअनुप्रयोग
— जूलियस
2
आप इसे अपने कस्टम टैबबार कंट्रोलर में कहाँ लगाते हैं?
— UKDataGeek
69

यहाँ आप इसे स्टोरीबोर्ड में कैसे करते हैं।

शीर्षक पाठ को साफ़ करें, और नीचे दिए गए स्क्रीनशॉट की तरह छवि इनसेट सेट करें

यहाँ छवि विवरण दर्ज करें

याद रखें कि आइकन का आकार ऐप्पल डिज़ाइन गाइडलाइन का पालन करना चाहिए

यहाँ छवि विवरण दर्ज करें

इसका मतलब है कि आपके पास @ 1x के लिए 25px x 25px, @ 2x के लिए 50px x 50px, @ 3x के लिए 75px x 75px होना चाहिए।

— nuynait
स्रोत
45

यदि दृश्य नियंत्रक सेट है, तो प्रत्येक UITabBarItems titleगुण को सेट करने "" और अद्यतन करने के लिए दृष्टिकोण का उपयोग imageInsetsठीक से काम नहीं करेगा self.title। उदाहरण के लिए अगर self.viewControllersUITabBarController में एम्बेडेड हैं UINavigationControllerऔर आपको नेविगेशन बार पर प्रदर्शित होने के लिए शीर्षक की आवश्यकता है। इस स्थिति में UINavigationItemसीधे शीर्षक का उपयोग कर सेट करें self.navigationItem.title, नहीं self.title।

— स्टीफन
स्रोत
2
यह एक तरह से क्लीनर विधि की तरह लगता है। +1 @ यदि यह उत्तर के रूप में चिह्नित किया जाना चाहिए।
— 19
29

Ddiego उत्तर का स्विफ्ट संस्करण

IOS 11 के साथ संगत

व्यूकंट्रोलर का शीर्षक सेट करने के बाद व्यूकंट्रोलर्स के हर पहले बच्चे के व्यूडीडलड में इस फ़ंक्शन को कॉल करें

सर्वश्रेष्ठ प्रणालियां:

वैकल्पिक रूप से @daspianist ने टिप्पणियों में सुझाव दिया

इस श्रेणी का एक उपवर्ग बनाएं बेसटैबकारकंट्रोलर: यूआईटैबबारकंट्रोलर, यूआईटैबकारकंट्रोलरडेलगेट और इस समारोह को उपवर्ग के नजरिए में डाल दें

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)
        }
    }
}
— korgx9
स्रोत
2
शानदार समारोह! आप वैकल्पिक रूप से इस तरह का एक उपवर्ग बना सकते हैं class BaseTabBarController: UITabBarController, UITabBarControllerDelegateऔर इस कार्य को उपवर्ग में डाल सकते हैंviewDidLoad
— daspianist
26

यदि आप स्टोरीबोर्ड का उपयोग कर रहे हैं तो यह आपके लिए सबसे अच्छा विकल्प होगा। यह सभी टैब बार आइटम के माध्यम से लूप करता है और प्रत्येक के लिए यह शीर्षक को कुछ भी नहीं सेट करता है और छवि को पूर्ण स्क्रीन बनाता है। (आपने स्टोरीबोर्ड में एक छवि जोड़ी होगी)

for tabBarItem in tabBar.items!
{
   tabBarItem.title = ""
   tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
— मार्कोस रेबुकास
स्रोत
ध्यान दें कि यदि आप ऊपर और नीचे दोनों को सेट नहीं करते हैं तो छवि समाप्त हो जाएगी।
— जुलियस
16

iOS 11 इन समाधानों में से कई में एक किंक फेंकता है, इसलिए मैंने अभी UITabBar को उप-लिंक करके और लेआउटसुबड्स को ओवरराइड करके 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
        }
    }
}
— atlwx
स्रोत
यह एकमात्र ऐसी चीज है जिसने मेरे लिए काम किया लेकिन मुझे MyTabBarController के उपवर्ग के 'ओवरराइड फंक व्यूडीडलाइयूटसाउटव्यू' के अंदर कोड डालना था। मैंने tabBarController को उपवर्गित किया और इसे नाम दिया
— लांस सामरिया
समाधान मेरे लिए, अच्छी तरह से काम किया। मैंने इसे एक्सटेंशन के रूप में उपयोग किया है इसलिए इसे जोड़ना सरल है
— मिशल गुम्नी
@ लांससमारिया ने मेरे बिना टैब बार कंट्रोलर कोड को छूने की आवश्यकता के बिना काम किया
— प्रणव कासत्ती
12

मैंने अपने BaseTabBarController's 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!
— जेसी ओनोलेमेन
10

स्विफ्ट 4 दृष्टिकोण

मैं एक फ़ंक्शन लागू करके चाल को करने में सक्षम था जो एक TabBarItem लेता है और इसे कुछ स्वरूपण करता है।

छवि को थोड़ा और नीचे ले जाता है ताकि वह अधिक केंद्रित हो जाए और टैब बार के पाठ को भी छुपा सके। अपना शीर्षक खाली स्ट्रिंग में सेट करने से बेहतर है, क्योंकि जब आपके पास एक नेविगेशनबेर होता है, तब टैबबर्ल चयनित होने पर व्यूकंट्रोलर का शीर्षक दोबारा प्राप्त करता है

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

और बस अपने टैबबार में इसका उपयोग करें:

tabBarItem.setImageOnly()
— जोस टैपिक्वेंट
स्रोत
6

यहाँ शीर्ष उत्तर के अलावा इसे करने का एक बेहतर, अधिक मूर्ख तरीका है:

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

AppDelegate.didFinishLaunchingWithOptionsइसे अपने में रखें ताकि यह आपके ऐप के पूरे जीवन में सभी टैब बार बटन को प्रभावित करे।

— ईजेकील विक्टर
स्रोत
3
यह केवल शीर्षक छुपाता है और छवि की स्थिति को समायोजित नहीं करता है।
— मुस्तफा
2
हाँ, लेकिन सवाल ने छवि को समायोजित करने के बारे में कुछ नहीं कहा। बस पाठ छिपा रहा है। और अच्छी तरह से एक दृश्य नियंत्रक से शीर्षक को हटाने के अवरोध पर पाठ को छिपाना गलत लगता है। खासकर जब आप इसे अपने नेविगेशनव्यूकंट्रोलर के हिस्से के रूप में दिखाने के लिए उस शीर्षक का उपयोग कर रहे हों
— Dan1one
6

स्विफ्ट में एक न्यूनतम, सुरक्षित UITabBarController एक्सटेंशन (@ korgx9 उत्तर पर आधारित):

extension UITabBarController {
  func removeTabbarItemsText() {
    tabBar.items?.forEach {
      $0.title = ""
      $0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    }
  }
}
— फेडेरिको ज़ानेटेलो
स्रोत
2

स्विफ्ट 4.2 में, ddiego के उत्तर के आधार पर :

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()अपने व्यू कंट्रोलर में कॉल करना होगा ।

— j_gonfer
स्रोत
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)
        }

    }

}
— Ladislas
स्रोत
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
                    }
                }
            }
        }
    }
}
— JulianKro
स्रोत
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

कस्टम टैबबार - आईओएस 13, स्विफ्ट 5, एक्सकोड 11

  • टैब्बर आइटम बिना टेक्स्ट के
  • TabBar आइटम लंबवत केंद्रित हैं
  • गोल तबार दृश्य
  • टैबबार डायनामिक पोजिशन और फ्रेम

स्टोरीबोर्ड आधारित। इसे आसानी से प्रोग्रामेटिक रूप से भी प्राप्त किया जा सकता है। केवल 4 चरणों का पालन करें:

  1. ब्लैक कलर में टैब बार आइकॉन 3 साइज में होने चाहिए। आमतौर पर, मैं fa2png.io से डाउनलोड करता हूं - आकार: 25x25, 50x50, 75x75। पीडीएफ छवि फ़ाइलें काम नहीं करती हैं!

    यहाँ छवि विवरण दर्ज करें

  2. टैब बार आइटम के लिए स्टोरीबोर्ड में वह आइकन सेट करें जिसे आप एट्रीब्यूट इंस्पेक्टर के माध्यम से उपयोग करना चाहते हैं। (स्क्रीनशॉट देखें)

यहाँ छवि विवरण दर्ज करें

  1. कस्टम TabBarController -> नई फ़ाइल -> प्रकार: UITabBarController -> स्टोरीबोर्ड पर सेट करें। (स्क्रीनशॉट देखें)

यहाँ छवि विवरण दर्ज करें

  1. UITabBarController वर्ग

    वर्ग 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. परिणाम यहाँ छवि विवरण दर्ज करें

— Doci
स्रोत
0

यदि आप टैब को केंद्र में रखना चाहते हैं / मैजिक नंबरों का उपयोग किए बिना इमेज इनसेट में बदलाव कर रहे हैं, तो निम्नलिखित में मेरे लिए काम किया है (स्विफ्ट 5.2 में):

एक में 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)
    }
}

पाठ को छिपाने के लिए सूची समाधान के ऊपर दिए गए विकल्पों में से कई।

— Campbell_Souped
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.