आईओएस 7 साइड मेनू स्टेटस बार रंग संक्रमण। आईओएस 7 फेसबुक ऐप

Question

आईओएस 7 फेसबुक ऐप में एक दाहिने तरफ मेनू है जो दायें से बाएं स्वाइप करके या ऊपरी दाएं बटन पर क्लिक करके दिखाया जा सकता है। जब यह मेनू खोला जाता है तो पूरे स्टेटस बार में ब्लू से ब्लैक तक और रंग बंद होने पर विपरीत रंग रंग परिवर्तन होता है।

This image shows both status bar side-to-side

इस तरफ मेनू के साथ iOS ऐप्स के लिए एक बहुत अच्छा समाधान की तरह दिखता है।

इसे पूरा करने के तरीके के बारे में कोई विचार या तरीके?

मैं वर्तमान में JASidePanels का उपयोग कर रहा हूं। धन्यवाद!

Answer 1

मैं एक ही चीज़ को पूरा करने की कोशिश कर रहा हूं। विधि मैं यह करने के उपयोग कर रहा हूँ निम्नलिखित अवधारणाओं पर आधारित है:

1. 64 अंक की ऊंचाई के साथ एक पृष्ठभूमि छवि दोनों UINavigationBar और UIStatusBar भर जाएगा।
2. 44 अंकों की ऊंचाई वाला एक पृष्ठभूमि छवि UINavigationBar भर जाएगी और UIStatusBar काला छोड़ देगी।
3. आप वर्तमान नेविगेशन नियंत्रक के दृश्य के शीर्ष पर एक सबव्यूव जोड़ सकते हैं और यह UIStatusBar के नीचे बैठेगा।

तो, पहले, आप दो छवियों के अपने वांछित UINavigationBar देखो के साथ बनाने की जरूरत:

नेविगेशन पट्टी और स्थिति पट्टी (ImageA) को कवर करने के लिए एक 640x128px छवि

और नेविगेशन बार को कवर करने के लिए 640x88px छवि है लेकिन स्टेटस बार काला छोड़ दें (छवि बी)।

application:didFinishLaunchingWithOptions: विधि में, [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

पक्ष मेनू खोलने के लिए, आप UINavigationBar स्विच करना चाहते हैं तो यह का उपयोग करता जा रहे हैं शुरू होता है के साथ ImageA के साथ अपने UINavigationBar की पृष्ठभूमि सेट ImageB और एक दृश्य बनाएं जिसे आप UIStatusBar के नीचे जोड़ देंगे। यहाँ सिर्फ इतना है कि ऐसा करने के लिए कुछ नमूना कोड है:

// Add a property for your "temporary status bar" view 
@property (nonatomic, strong) UIView *temporaryStatusBar; 

और कोड जहां पक्ष मेनू खोलने के लिए शुरू होता है में:

// Create a temporary status bar overlay 
self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]]; 
self.temporaryStatusBar.backgroundColor = [UIColor yourColor]; 
[self.navigationController.view addSubview:self.temporaryStatusBar]; 

// Update both the current display of the navigationBar and the default appearance values 
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault]; 
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault]; 
[self.navigationController.navigationBar setNeedsDisplay]; 

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

मुझे बताएं कि यह आपके लिए काम करता है या नहीं!

Answer 2

मुझे ऐसा करने के लिए एक बहुत ही सरल, सुरुचिपूर्ण तरीका मिल गया, जो पूरी तरह से फेसबुक ऐप कार्यक्षमता की नकल करता है।

यहाँ मेरी दृष्टिकोण है:

• स्थिति पट्टी फ्रेम के साथ दृश्य बनाएँ
• सेट दृश्य पृष्ठभूमि काला करने के लिए रंग, 0
• को अस्पष्टता किसी भी रूट दृश्य को subview के रूप दृश्य जोड़ें (आप की जरूरत एक दृश्य जो केंद्र दृश्य और मेनू दोनों को कवर करेगा, ताकि यह किसी भी एकल दृश्य तक ही सीमित न हो - इसके लिए एक अच्छा विकल्प आपके मेनू नियंत्रक कार्यान्वयन द्वारा उपयोग किए जाने वाले कंटेनर व्यू कंट्रोलर है)
अपने मेनू नियंत्रक कार्यान्वयन के मेनू एनीमेशन विधि

में +०५३६९१३६३२१०

सेट दृश्य की अस्पष्टता यहाँ मेरी विशिष्ट कार्यान्वयन है, MMDrawerController का उपयोग कर:

मैं MMDrawerController (मैं वास्तव में पहले से ही MMDrawerController with storyboards प्रयोग करने के लिए एक उपवर्ग था) subclassed, और कहा वर्ग के init विधि के लिए इस कोड:

// Setup view behind status bar for fading during menu drawer animations 
if (OSVersionIsAtLeastiOS7()) { 
    self.statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]]; 
    [self.statusBarView setBackgroundColor:[UIColor blackColor]]; 
    [self.statusBarView setAlpha:0.0]; 
    [self.view addSubview:self.statusBarView]; 
} 

// Setup drawer animations 
__weak __typeof(&*self) weakSelf = self; // Capture self weakly 

[self setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) { 
    MMDrawerControllerDrawerVisualStateBlock block; 
    block = (drawerSide == MMDrawerSideLeft) ? [MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:15.0] : nil; // Right side animation : Left side animation 
    if(block){ 
     block(drawerController, drawerSide, percentVisible); 
    } 
    [weakSelf.statusBarView setAlpha:percentVisible]; // THIS IS THE RELEVANT CODE 
}]; 

मैं भी एक priva के रूप में self.statusBarView जोड़ा ते संपत्ति

• कोड का पहला खंड एक दृश्य बनाता है, यह कॉन्फ़िगर करता है, और MMDrawerController उपवर्ग के दृष्टिकोण की एक subview के रूप में यह कहते हैं। OSVersionIsAtLeastiOS7() विधि एक कस्टम विधि है जो यह देखने के लिए चेक को सरल बनाती है कि डिवाइस आईओएस 7 चला रहा है या नहीं (यदि ऐसा नहीं है, तो आपका कस्टम व्यू स्टेटस बार के नीचे दिखाई देगा, जो आप नहीं चाहते हैं)।

• कोड का दूसरा भाग MMDrawerController की setDrawerVisualStateBlock विधि है, जो मेनू खोलने और बंद होने पर एनीमेशन कोड सेट करने के लिए सेट करता है। कोड की पहली कुछ पंक्तियां बॉयलरप्लेट कोड हैं जो प्रत्येक मेनू में प्रीबिल्ट एनीमेशन ब्लॉक में से एक सेट करती हैं (मैं बाईं ओर लंबन चाहता था, लेकिन दाईं ओर कुछ भी नहीं)। प्रासंगिक कोड ब्लॉक की आखिरी पंक्ति है: [weakSelf.statusBarView setAlpha:percentVisible];, जो मेनू बार वर्तमान में खुलने वाले प्रतिशत से मेल खाने के लिए स्टेटस बार व्यू की अस्पष्टता सेट करता है। यह फेसबुक ऐप में दिखाई देने वाली चिकनी क्रॉस एनीमेशन की अनुमति देता है। आप यह भी देखेंगे कि मैंने self को एक चर weakSelf पर असाइन किया है, ताकि "बनाए रखने चक्र" कंपाइलर चेतावनी से बचने के लिए।

यह मेरा विशिष्ट दृष्टिकोण MMDrawerController और एक उपवर्ग, जो मैं सुविधा के लिए अधिक किया क्योंकि मैं पहले से ही, जगह में उपवर्ग था की तुलना में, क्योंकि यह जरूरी सबसे अच्छा तरीका या यह करने के लिए एक ही रास्ता है का उपयोग कर। इसे संभवतः कई अन्य तरीकों से लागू किया जा सकता है, बिना किसी सबक्लास के एमएमड्राउवर कंट्रोलर का उपयोग करना, या किसी अन्य साइड-ड्रावर मेनू कार्यान्वयन का उपयोग करना।

अंतिम परिणाम स्टेटस बार के पीछे काले एनीमेशन के लिए एक चिकनी लुप्तप्राय है, जैसा कि आप नए फेसबुक ऐप में देखते हैं।

Answer 3

आप इस डेमो परियोजना में इस भयानक स्लाइड मेनू पुस्तकालय

https://github.com/arturdev/AMSlideMenu

उपयोग कर सकते हैं आप कैसे करना है कोड के 4 लाइनों लिख कर कि देख सकते हैं।

 
- (void)viewWillAppear:(BOOL)animated 
{ 
    [super viewWillAppear:animated]; 

    // Setting navigation's bar tint color 
    self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex:@"#365491" alpha:1]; 

    // Making view with same color that navigation bar 
    UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 20)]; 
    statusBarView.backgroundColor = [UIColor colorWithHex:@"#365491" alpha:1]; 

    // Replace status bar view with created view and do magic :) 
    [[self mainSlideMenu] fixStatusBarWithView:statusBarView]; 
}