खोज…


एक उदाहरण बनाएँ

एक 'टैब बार' आमतौर पर अधिकांश iOS ऐप में पाया जाता है और प्रत्येक टैब में अलग-अलग दृश्य प्रस्तुत करने के लिए उपयोग किया जाता है।

इंटरफ़ेस बिल्डर का उपयोग करके एक टैब बार नियंत्रक बनाने के लिए, ऑब्जेक्ट लाइब्रेरी से टैब बार नियंत्रक को कैनवास में खींचें।

टैब बार नियंत्रक

डिफ़ॉल्ट रूप से एक टैब बार नियंत्रक दो विचारों के साथ आता है। अतिरिक्त दृश्य जोड़ने के लिए, टैब बार कंट्रोलर से नए व्यू में ड्रैग को कंट्रोल करें और सेग-ड्रॉप डाउन में 'व्यू कंट्रोलर' चुनें।

विचारों के साथ टैब बार

टैब बार आइटम शीर्षक और चिह्न बदलना

स्टोरी बोर्ड का उपयोग करना:

संबंधित दृश्य नियंत्रक से टैब बार आइटम का चयन करें और गुण निरीक्षक पर जाएं

यदि आप एक अंतर्निहित आइकन और शीर्षक चाहते हैं, तो 'सिस्टम आइटम' को संबंधित मान पर सेट करें।

एक कस्टम आइकन के लिए, संपत्ति फ़ोल्डर में आवश्यक चित्र जोड़ें और पहले से 'कस्टम' में 'सिस्टम आइटम' सेट करें।

अब, 'चयनित छवि' ड्रॉप-डाउन से टैब चयनित होने और 'छवि' ड्रॉप-डाउन से डिफ़ॉल्ट टैब आइकन से दिखाए जाने वाले आइकन को सेट करें। 'शीर्षक' फ़ील्ड में संबंधित शीर्षक जोड़ें।

टैब बार आइटम निरीक्षक का समर्थन करता है

प्रोग्राम के रूप में:

viewDidLoad() दृश्य नियंत्रक की विधि में, निम्न कोड जोड़ें:

उद्देश्य सी:

self.title = @"item";

self.tabBarItem.image = [UIImage imageNamed:@"item"];
self.tabBarItem.selectedImage = [UIImage imageNamed:@"item_selected"];

स्विफ्ट:

self.title = "item"
self.tabBarItem.image = UIImage(named: "item")
self.tabBarItem.selectedImage = UIImage(named: "item_selected")

TabBar के साथ नेविगेशन नियंत्रक

नेविगेशन कंट्रोलर प्रत्येक टैब में स्टोरीबोर्ड का उपयोग करके इसे स्वयं एम्बेड कर सकता है। इसे स्क्रीनशॉट में जोड़ा जा सकता है।

टैब बार नियंत्रक से कनेक्ट होने वाले व्यू कंट्रोलर में नेविगेशन कंट्रोलर जोड़ने के लिए, यहाँ प्रवाह हैं

  • उस दृश्य नियंत्रक का चयन करें जिसके लिए हमें नेविगेशन नियंत्रक को जोड़ना होगा। यहां इसे चयन प्रदर्शन के रूप में खोज दृश्य नियंत्रक होने दें।
  • Xcode के संपादक मेनू से, एम्बेड करें >> नेविगेशन नियंत्रक विकल्प चुनें

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

टैब बार रंग अनुरूपण

[[UITabBar appearance] setTintColor:[UIColor whiteColor]];
[[UITabBar appearance] setBarTintColor:[UIColor tabBarBackgroundColor]];
[[UITabBar appearance] setBackgroundColor:[UIColor tabBarInactiveColor]];
[[UINavigationBar appearance] setBarTintColor:[UIColor appBlueColor]];
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
[[UINavigationBar appearance] setBarStyle:UIBarStyleBlack];

कस्टम रंग चयन के साथ UITabBarController

UITabBarController निर्माण Swift 3 में चयनित टैब रंग के साथ चयन के अनुसार छवि का रंग और शीर्षक बदलें।

import UIKit

class TabbarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.navigationController?.isNavigationBarHidden = true
        
        UITabBar.appearance().tintColor = UIColor.purple
        
        // set red as selected background color
        let numberOfItems = CGFloat(tabBar.items!.count)
        let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
        tabBar.selectionIndicatorImage = UIImage.imageWithColor(UIColor.lightText.withAlphaComponent(0.5), size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)
        
        // remove default border
        tabBar.frame.size.width = self.view.frame.width + 4
        tabBar.frame.origin.x = -2
        
    }
    
    override func viewWillAppear(_ animated: Bool) {
        // For Images
        let firstViewController:UIViewController = NotificationVC()
        // The following statement is what you need
        let customTabBarItem:UITabBarItem = UITabBarItem(title: nil, image: UIImage(named: "notification@2x")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal), selectedImage: UIImage(named: "notification_sel@2x"))
        firstViewController.tabBarItem = customTabBarItem
        
        for item in self.tabBar.items! {
            let unselectedItem = [NSForegroundColorAttributeName: UIColor.white]
            let selectedItem = [NSForegroundColorAttributeName: UIColor.purple]
            
            item.setTitleTextAttributes(unselectedItem, for: .normal)
            item.setTitleTextAttributes(selectedItem, for: .selected)
        }
    }

}


extension UIImage {
    class func imageWithColor(_ color: UIColor, size: CGSize) -> UIImage {
        let rect: CGRect = CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: size.width, height: size.height))
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
    
}

टैब बार के लिए छवि का चयन और यहाँ टैब शीर्षक सेट करें

कस्टम टैब बनाएं

टैब का चयन

दूसरे टैब का चयन करें

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

स्टोरीबोर्ड के बिना प्रोग्राम बार टैब बार कंट्रोलर बनाएं

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    
    var firstTabNavigationController : UINavigationController!
    var secondTabNavigationControoller : UINavigationController!
    var thirdTabNavigationController : UINavigationController!
    var fourthTabNavigationControoller : UINavigationController!
    var fifthTabNavigationController : UINavigationController!
    


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        Fabric.with([Crashlytics.self])
        
       window = UIWindow(frame: UIScreen.main.bounds)
        
        
        window?.backgroundColor = UIColor.black
            
        
        let tabBarController = UITabBarController()
        
        firstTabNavigationController = UINavigationController.init(rootViewController: FirstViewController())
        secondTabNavigationControoller = UINavigationController.init(rootViewController: SecondViewController())
        thirdTabNavigationController = UINavigationController.init(rootViewController: ThirdViewController())
        fourthTabNavigationControoller = UINavigationController.init(rootViewController: FourthViewController())
        fifthTabNavigationController = UINavigationController.init(rootViewController: FifthViewController())
        
        tabBarController.viewControllers = [firstTabNavigationController, secondTabNavigationControoller, thirdTabNavigationController, fourthTabNavigationControoller, fifthTabNavigationController]
        
        
        let item1 = UITabBarItem(title: "Home", image: UIImage(named: "ico-home"), tag: 0)
        let item2 = UITabBarItem(title: "Contest", image:  UIImage(named: "ico-contest"), tag: 1)
        let item3 = UITabBarItem(title: "Post a Picture", image:  UIImage(named: "ico-photo"), tag: 2)
        let item4 = UITabBarItem(title: "Prizes", image:  UIImage(named: "ico-prizes"), tag: 3)
        let item5 = UITabBarItem(title: "Profile", image:  UIImage(named: "ico-profile"), tag: 4)

        firstTabNavigationController.tabBarItem = item1
        secondTabNavigationControoller.tabBarItem = item2
        thirdTabNavigationController.tabBarItem = item3
        fourthTabNavigationControoller.tabBarItem = item4
        fifthTabNavigationController.tabBarItem = item5
                
        UITabBar.appearance().tintColor = UIColor(red: 0/255.0, green: 146/255.0, blue: 248/255.0, alpha: 1.0)
        
        self.window?.rootViewController = tabBarController
        
        window?.makeKeyAndVisible()

        return true
    }


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow