🐣 🖖🏻 🚣🏻 Google+ नेविगेशन 🍥 ☸️ 👩🏽‍✈️

मैंने हाल ही में iPad पर google + एप्लिकेशन इंस्टॉल किया है, और नेविगेशन मेनू से कुछ नया मिला है। सिद्धांत रूप में, स्क्रॉलव्यू पर पेजिंग के माध्यम से फ़ीड को अपडेट करना बहुत नई तकनीकों का प्रतिनिधित्व नहीं करता है, लेकिन ऊपरी पाठ पट्टी के साथ संयोजन में (जो, वैसे, फ़ॉन्ट को दिलचस्प तरीके से बदलता है) और चक्रीय व्यवहार, यह काफी सुविधाजनक और दिलचस्प लगता है। जिन लोगों को यह पता नहीं है कि यह Google + iphone क्लाइंट में कैसा दिखता है, आप नीचे दी गई छवि में इसकी कल्पना करने की कोशिश कर सकते हैं:

इसलिए, मैंने उसी सुविधाजनक नियंत्रण को बनाने के लिए कई घंटे बिताने का फैसला किया, भविष्य में मुझे लगता है कि यह कई बार काम आएगा। कार्यान्वयन उतना आसान नहीं था जितना मैं व्यक्तिगत रूप से उम्मीद करता था, इसलिए मैंने इस तरह के नियंत्रण को बनाने की विधि साझा करने का फैसला किया, मुझे लगता है कि कई डेवलपर्स को इसकी आवश्यकता होगी, या कम से कम सामान्य रूप से काम कर रहे चक्रीय स्क्रॉलवॉच में भी रुचि होगी। वैसे, मैंने पहली बात स्वाभाविक रूप से स्टैकओवरफ्लो और अन्य कोड संसाधनों पर समान इंजनों की तलाश शुरू की थी, लेकिन नहीं मिला। मैंने डिजाइन हिस्से पर ज्यादा जोर नहीं दिया, सब कुछ आदिम होगा, लेकिन एक ही समय में सार्वभौमिक।

पहला कदम । हमें एक UIViewController की आवश्यकता है - जिस पर मुख्य तत्व बाएं और दाएं स्क्रॉल करने के लिए एक UIScrollView होगा, 3 UIView (जो पृष्ठों के रूप में प्रदर्शित किया जाएगा) और फ्लोटिंग टेक्स्ट प्रदर्शित करने के लिए एक शीर्ष बार।

आइए एक सामान्य विवरण से शुरू करें:

 mainScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)]; [self.view addSubview:mainScroll]; mainScroll.backgroundColor = [UIColor clearColor]; mainScroll.contentSize = CGSizeMake(self.view.frame.size.width*3, self.view.frame.size.height); mainScroll.pagingEnabled = YES; mainScroll.scrollEnabled = YES; mainScroll.delegate = self; scrollBar = [[YOScrollBar alloc] initWithFrame:CGRectMake(0, 0, 320, 27)]; [self.view addSubview:scrollBar]; pages = [[NSMutableArray alloc] initWithCapacity:3]; UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)]; [mainScroll addSubview:view1]; view1.tag = 0; [pages addObject:view1]; view1.backgroundColor = [UIColor lightGrayColor]; [view1 release]; UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height)]; [mainScroll addSubview:view2]; [pages addObject:view2]; view2.tag = 1; view2.backgroundColor = [UIColor grayColor]; [view2 release]; UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width*2, 0, self.view.frame.size.width, self.view.frame.size.height)]; [mainScroll addSubview:view3]; [pages addObject:view3]; view3.tag = 2; view3.backgroundColor = [UIColor blackColor]; [view3 release]; pageIndex = (int)[pages count]/2; [mainScroll setContentOffset:CGPointMake(self.view.frame.size.width, 0)];

यहाँ मुझे लगता है कि कोई कठिनाई नहीं हो सकती है, हम 3 पृष्ठों पर सक्षम पेजिंग के साथ एक UIScrollView बनाते हैं, यह केवल ध्यान देने योग्य है कि प्रत्येक UIView को एक टैग सौंपा गया है, भविष्य में इसका उपयोग शीर्ष पट्टी के लिए किया जाएगा। इस उदाहरण में, परिणाम 3 पृष्ठों पर परीक्षण किया गया था, लेकिन भविष्य की बहुमुखी प्रतिभा के लिए पहले से ही पृष्ठों की एक सरणी मौजूद है।

दूसरा चरण । अब आपको पदों की गणना करने और पृष्ठों को बदलने के लिए UIScrollView से प्रतिनिधि को संसाधित करने की आवश्यकता है। शब्दों में थोड़ा:
UIScrollView निरंतर सामग्री रखता है जो कि MainScroll.frame.size. उपलब्धता * 3 के बराबर है
दाईं ओर बढ़ने पर, हम निम्नलिखित नियम का उपयोग करते हैं (सक्रिय स्थिति बोल्ड में हाइलाइट की जाती है):
व्यू 1, व्यू 2 , व्यू 3, ऑफसेट
view2, view2, view3 , अब रीकाउंटिंग होती है और हमें निम्नलिखित रचना मिलती है
व्यू 2, व्यू 3 , व्यू 1
बाईं ओर बढ़ने पर, पुनर्व्यवस्था विपरीत दिशा में होगी।

अब उपयुक्त कोड बनाएं। सबसे पहले, UIScrollView से प्रतिनिधि का उपयोग करें

 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { float indexF = (mainScroll.contentOffset.x / mainScroll.frame.size.width); int indexI = (int)indexF; float rez = indexF - (float)indexI; if (rez == 0.f) { //   } [scrollBar scroll:mainScroll.contentOffset]; }

पूछें कि ऐसा असामान्य तर्क क्यों? उत्तर: ताकि हमें "पेज परिवर्तन" जैसी घटना तभी मिले जब पेज को पूरी तरह से घसीट कर 320px पर गिरा दिया जाए। कोई फर्क नहीं पड़ता कि मैंने राउंडफ, ट्रंकफ, सीलीफ के साथ कैसे खेला, मुझे वह परिणाम नहीं मिला जिसकी मुझे जरूरत थी। अब हम उस क्षण को पकड़ सकते हैं जब अंतिम पृष्ठ केंद्रीय हो गया है और पेज सरणी को पुन: व्यवस्थित करने के लिए एक UIView क्रमोन्नति कर सकता है, और काल्पनिक रूप से UIScrollView स्थिति को केंद्र में वापस ले जा सकता है। उपरोक्त सभी नीचे दिए गए कोड में वर्णित हैं:

 int newPageIndex = indexI; int center; if (newPageIndex < pageIndex) { //     for (int i=0; i < [pages count]-1; i++) { UIView *moveView = [pages objectAtIndex:i]; moveView.frame = CGRectMake(moveView.frame.origin.x + moveView.frame.size.width, moveView.frame.origin.y, moveView.frame.size.width, moveView.frame.size.height); }//       UIView *moveView = [pages lastObject]; moveView.frame = CGRectMake(0, moveView.frame.origin.y, moveView.frame.size.width, moveView.frame.size.height); //   view for (int i=[pages count]-1; i > 0; i--) [pages exchangeObjectAtIndex:i-1 withObjectAtIndex:i]; //     center = (int)[pages count]/2; //    pageIndex = center; newPageIndex = pageIndex; //       UIView *view = [pages objectAtIndex:center]; [scrollBar changePage:view.tag]; [mainScroll setContentOffset:CGPointMake(center*mainScroll.frame.size.width, 0) animated:NO]; }else if (newPageIndex > pageIndex) { //     for (int i=1; i < [pages count]; i++) { UIView *moveView = [pages objectAtIndex:i]; moveView.frame = CGRectMake(moveView.frame.origin.x - moveView.frame.size.width, moveView.frame.origin.y, moveView.frame.size.width, moveView.frame.size.height); } UIView *moveView = [pages objectAtIndex:0]; moveView.frame = CGRectMake(([pages count]-1)*moveView.frame.size.width, moveView.frame.origin.y, moveView.frame.size.width, moveView.frame.size.height); //   view for (int i=0; i < [pages count]-1; i++) [pages exchangeObjectAtIndex:i withObjectAtIndex:i+1]; //     center = (int)[pages count]/2; //    pageIndex = center; newPageIndex = pageIndex; //       UIView *view = [pages objectAtIndex:center]; [scrollBar changePage:view.tag]; [mainScroll setContentOffset:CGPointMake(center*mainScroll.frame.size.width, 0) animated:NO]; }

दूसरा चरण खत्म हो गया है और हमारे पास पहले से ही तीन पृष्ठों के साथ पूरी तरह से काम कर रहे यूआईएसक्रॉल व्यू हैं जो कि चक्रीय रूप से दाएं और बाएं स्क्रॉल कर सकते हैं।

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

आइए कार्यान्वयन के लिए आगे बढ़ें। हैडर फ़ाइल:

 @interface YOScrollBar : UIView { UIImageView *background; NSMutableArray *labels; UILabel *labelLeft, *labelCenter, *labelRight, *labelMirrowLeft, *labelMirrowRight; float step; } - (void)scroll:(CGPoint)point; - (void)changePage:(int)pageIndex; - (void)selectCenter; @end

मिररिंग के लिए हमें 5 उइलाबेल 3 प्राथमिक और 2 सहायक की आवश्यकता होगी, उनके बीच का चरण 120 होगा। मैं रचना का पूरा पाठ नहीं दूंगा, केवल फ्रेम और शिलालेख, क्योंकि वे केवल एक शब्दार्थ भार ले जाते हैं, केंद्रीय शिलालेख के लिए फ़ॉन्ट हेल्वेटिका 14 है, बाकी हेल्वेटिका के लिए 12

 labelMirrowLeft = [[UILabel alloc] initWithFrame:CGRectMake(-109, 5, 60, 14)]; labelMirrowLeft.text = @""; labelLeft = [[UILabel alloc] initWithFrame:CGRectMake(9, 5, 60, 14)]; labelLeft.text = @""; labelCenter = [[UILabel alloc] initWithFrame:CGRectMake(129, 5, 60, 14)]; labelCenter.text = @""; labelRight = [[UILabel alloc] initWithFrame:CGRectMake(249, 5, 60, 14)]; labelRight.text = @""; labelMirrowRight = [[UILabel alloc] initWithFrame:CGRectMake(369, 5, 60, 14)]; labelMirrowRight.text = @"";

हम आंदोलन की मुख्य विधि से गुजरते हैं:

 - (void)scroll:(CGPoint)point { float k = step/320; CGPoint pointT = CGPointMake(-(point.x-320)*k, 0); float fontT = (step - abs((int)pointT.x))/step*2; if (pointT.x > 0) { //   labelLeft.font = [UIFont fontWithName:@"Helvetica" size:14.f-fontT]; }else if (pointT.x < 0) { //   labelRight.font = [UIFont fontWithName:@"Helvetica" size:14.f-fontT]; } labelCenter.font = [UIFont fontWithName:@"Helvetica" size:12.f+fontT]; labelLeft.frame = CGRectMake(9 + pointT.x, labelLeft.frame.origin.y, labelLeft.frame.size.width, labelLeft.frame.size.height); labelCenter.frame = CGRectMake(129 + pointT.x, labelCenter.frame.origin.y, labelCenter.frame.size.width, labelCenter.frame.size.height); labelRight.frame = CGRectMake(249 + pointT.x, labelRight.frame.origin.y, labelRight.frame.size.width, labelRight.frame.size.height); labelMirrowLeft.frame = CGRectMake(-111 + pointT.x, labelMirrowLeft.frame.origin.y, labelMirrowLeft.frame.size.width, labelMirrowLeft.frame.size.height); labelMirrowRight.frame = CGRectMake(369 + pointT.x, labelMirrowRight.frame.origin.y, labelMirrowRight.frame.size.width, labelMirrowRight.frame.size.height); }

और वह सब जो हमारे लिए करना है वह एक पूर्ण पृष्ठ बदलाव के साथ ग्रंथों के परिवर्तन को निर्धारित करना है, क्योंकि इस समय सामग्री ओफ़्सेट की जगह ले ली गई है।

 - (void)changePage:(int)pageIndex { if (pageIndex == 0) { labelMirrowLeft.text = @""; labelLeft.text = @""; labelCenter.text = @""; labelRight.text = @""; labelMirrowRight.text = @""; }else if (pageIndex == 1) { labelMirrowLeft.text = @""; labelLeft.text = @""; labelCenter.text = @""; labelRight.text = @""; labelMirrowRight.text = @""; }else if (pageIndex == 2) { labelMirrowLeft.text = @""; labelLeft.text = @""; labelCenter.text = @""; labelRight.text = @""; labelMirrowRight.text = @""; } }

खैर, अंत में, हमें एक पूर्ण इंजन मिला, न कि google + से अवर।
आप नीचे दिए गए वीडियो में परिणाम देख सकते हैं। स्क्रीन कैप्चर डेमो का उपयोग करने के लिए क्षमा करें। स्क्रीन फ़्लिक जिसे मैं हमेशा इस्तेमाल करता था भुगतान हो गया, मुझे एक वैकल्पिक समाधान की तलाश करनी थी।

आप यहाँ स्रोत परियोजना डाउनलोड कर सकते हैं: https://github.com/katleta3000/Google-Navi

Google+ नेविगेशन

More articles: