देवों बनाम डिजाइनर: आपको क्या जानना चाहिए। अध्याय 1।

हम क्यूबेरो के विश्वस्तरीय देवों के सामने आने वाली चुनौतियों के बारे में कई श्रृंखलाएँ शुरू कर रहे हैं, जहाँ capital डी ’के साथ डिजाइन पूर्वता लेता है। हम गैर-टेम्पलेट ऐप विकास के अनुभवों को साझा करेंगे और आपको एक झलक देंगे कि कैसे हमारे असाधारण डेवलपर्स उपन्यास विचारों को ठोस वास्तविकता में बदलते हैं। अस्वीकरण: हमारे समाधान मोबाइल एप्लिकेशन विकास के लिए एक मार्गदर्शक या संदर्भ होने का इरादा नहीं रखते हैं।

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

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

तो आइए इस उदाहरण को देखें:

हम क्या देखते हैं:

  • अनुभाग नाम के साथ UIView शूट करता है और नए UIViewController पर शीर्षक में बदल जाता है।
  • इस बीच, यूआईवीवाई थोड़ा बदल जाता है (पृष्ठभूमि और फ़ॉन्ट रंग)।
  • शेष वर्गों के साथ UIView चयनित UIView के पीछे नीचे की ओर उड़ते हैं।

विकास के दौरान हमने और क्या लिया:

  • स्क्रॉल किसी भी स्थिति में हो सकता है।
  • इसमें कोई भी राशि हो सकती है। इस उदाहरण में, हम केवल तीन पर ध्यान केंद्रित कर रहे हैं।
  • एनीमेशन को सिर्फ iPhone 8 ही नहीं, बल्कि सभी Apple डिवाइसों पर खूबसूरती से काम करना है।

यह एक शीर्षक (शीर्षक, प्रोफ़ाइल बटन), UITableViewCells (खंड) और एक पाद के साथ UITableView की तरह दिखता है। बेशक, अपने सभी जादू के साथ UICollectionView का उपयोग करना संभव है, लेकिन इस मामले में यह सिर्फ एक अनावश्यक जटिलता होगी।

UITableView आउट-ऑफ-द-बॉक्स का उपयोग करना एक अच्छा विचार क्यों है:

  • स्क्रॉल करें (हां, यह स्पष्ट है)
  • कोशिकाओं की असीमित संख्या।
  • रीफ़्रेश करने के लिए खींचें।
  • हम सेल के अंदर एक ही उविव्यू डाल सकते हैं, क्योंकि यह दूसरी स्क्रीन पर हेडर में था।

हेडर और फुटर के बजाय कोशिकाओं का उपयोग करना संभव है, लेकिन हम पहले से जानते थे कि उनका उपयोग केवल एक बार किया जाएगा, इसलिए कई प्रकार के सेल बनाने से बहुत कम फायदा हुआ।

हम एक साथ एक कार्य यात्रा कार्यक्रम रखते हैं और यहाँ हमें क्या करना है:

1. चयनित सेल की उपस्थिति (अंधेरे से प्रकाश) में परिवर्तन।

2. चयनित सेल की स्थिति को बदलना (इसे एक शीर्षक में बदलना)।

3. शेष कोशिकाओं की स्थिति बदलना (कोशिकाओं को नीचे की ओर शिफ्ट करना)।

हमारा चरण-दर-चरण समाधान:

1. सेल की उपस्थिति वास्तविक UIView में एक साधारण UIView.transition के साथ संभव है।

2. हमें सेल को टाइटल पोजीशन में ले जाना है, और फिर उसके UIView को टाइटल में बदलना है। सेल को नए नियंत्रक शीर्षक में स्थानांतरित करने के बजाय, हमने शीर्षक को नीचे की ओर स्थानांतरित किया, और फिर बस इसे जगह में रखा। नियंत्रकों के बीच संक्रमण के लिए हमने UIViewControllerAnimatedTransitioning का उपयोग किया।

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

अब यह देखते हैं कि कोड में यह कैसा दिखता है।

चयनित सेल का स्वरूप बदलना:

// सार्वजनिक उविवि विधि, जो सेल में है।
func setStyle (_स्टाइल: स्टाइल) {
         स्व.स्टाइल = शैली
 
         स्विच शैली {
                    मामला।
                                lblTitle.fontColor = .white
                                view.backgroundColor = .black
                    मामला।
                                lblTitle.fontColor = .black
                                view.backgroundColor =। सफेद
         }
}

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

चयनित सेल की स्थिति बदलना:

/ *
यह कोड लक्ष्य UIViewController में है।
 
सबसे पहले, हमने प्रारंभिक कंट्रोलर को उसके नीचे दिखाई देने के लिए, लक्ष्य UIViewController के बैकग्राउंड को पारदर्शी में बदल दिया।
 
फिर हम प्रारंभिक नियंत्रक की चयनित सेल स्थिति में लक्ष्य नियंत्रक के शीर्षक के साथ यूआईवाईईई को शिफ्ट करते हैं। हम एक नल के साथ लक्ष्य UIViewController में सेल लिंक डाल दिया।
 
अंत में, एनीमेशन के साथ, हम प्रारंभिक अवस्था में UIViewController के बैकग्राउंड कलर और टाइटल पोजीशन को वापस करते हैं।
* /

view.backgroundColor = .clear
 
फ्रेम दें
 
 
UIView.animate (withDuration: itemDuration, देरी: 0, विकल्प: [.curveEaseOut], एनिमेशन: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform = .स्थिति
 
})

कोशिकाओं का स्थान बदलना:

चलो कोशिकाओं = cellsForAnimation.filter {! $ 0.isSlected}}
tappedListCategoryView? .लल्फा = 0
आइये आइटमडेलय = अवधि / टाइमइंटरवल (3 * अधिकतम (1, cells.count)
)
आईटम ड्यूरेशन = अवधि - आइटमडेल * टाइमइंटरवल (अधिकतम (1, cells.count)
 - (1)
(सूचकांक, सेल) के लिए cells.reversed () में। एनुमरेटेड () {
        UIView.animate (विचलन: आइटम अवधि, देरी:
        TimeInterval (इंडेक्स) * आइटमडेल, विकल्प: [। क्यूरएसेओट],
        एनिमेशन: {
                  cell.contentView.subviews.first ?transform =
        CGAffineTransform (अनुवाद x: 0, y:
        self.tableView.rowHeight * 1.25)
        })
}

हमने कई कारणों से एक रिवर्स एनीमेशन नहीं बनाया:

  1. लक्ष्य UIViewController में कई सूची तत्व हैं। इसका मतलब है कि जब मुख्य स्क्रीन पर लौटते हैं, तो उपयोगकर्ता हेडर को दृश्यता से परे स्क्रॉल कर सकता है, और यह स्पष्ट नहीं है कि शीर्षक को सेल में कैसे बदलना है।
  2. इंटरेक्टिव-पॉप-जेस्चर में एक रिवर्स एनीमेशन को लागू करना एक लंबी, कठिन प्रक्रिया की आवश्यकता होगी। इंटरैक्टिव-पॉप-जेस्चर के लिए और बैक बटन के लिए एक अलग एनीमेशन बनाना, वैसे भी सबसे अच्छा विचार नहीं है।

हमने सबसे सरल एनीमेशन उदाहरणों में से एक को खोल दिया, जो क्यूबर्टो ने बनाया था। हमारी अगली पोस्ट में कुछ अधिक विस्तृत और सार्वभौमिक विशेषता होगी।

क्यूब्रो क्रिएटिव वेबसाइट और मोबाइल ऐप में ट्रेंड सेट करता है। डिजिटल और मोबाइल विशेषज्ञता हमारे पुरस्कार विजेता डिजाइन और अभिनव उच्च अंत उत्पादों को अधिकार देती है। [email protected]

हमें ड्रिबल और इंस्टाग्राम पर फॉलो करें