🧗🏻 💼 🤲🏼 स्विफ्टयूआई का उपयोग करते हुए नपुंसकता। भाग 1 🤗 🧙 👩🏾‍🤝‍👩🏽

सलाम, ख़बरों को! उन्नत पाठ्यक्रम "IOS डेवलपर" के लॉन्च की प्रत्याशा में , हमने एक और दिलचस्प अनुवाद तैयार किया है।

गैर-रूपात्मक डिजाइन शायद हाल के महीनों की सबसे दिलचस्प प्रवृत्ति है, हालांकि, सच में, Apple ने WWDC18 में अपने डिजाइन के रूप में इसका इस्तेमाल किया। इस लेख में, हम इस बात पर ध्यान देंगे कि आप स्विफ्टयूआई का उपयोग करके गैर-रूपात्मक डिज़ाइन को कैसे लागू कर सकते हैं, आप ऐसा क्यों करना चाहते हैं, और - सबसे महत्वपूर्ण बात - हम इस डिज़ाइन को कैसे परिष्कृत कर सकते हैं ताकि इसकी पहुंच बढ़ सके।

महत्वपूर्ण : नियोमॉर्फिज्म - जिसे कभी-कभी न्यूरोमोर्फिज्म भी कहा जाता है - पहुंच के लिए गंभीर परिणाम होते हैं, इसलिए इस लेख के पहले भाग को पढ़ने और बाकी को छोड़ देने के प्रलोभन के बावजूद, मैं आपसे लेख को अंत तक पढ़ने और दोनों फायदे और नुकसान का अध्ययन करने का आग्रह करता हूं ताकि आप पूरी तस्वीर देख सकें ।

नियोमॉर्फिज्म की मूल बातें

इससे पहले कि हम कोड पर आगे बढ़ें, मैं डिजाइन में इस दिशा के दो मूल सिद्धांतों को संक्षिप्त रूप से रेखांकित करना चाहता हूं, क्योंकि वे हमारे साथ चलते हुए प्रासंगिक होंगे:

स्क्रीन पर वस्तुओं के आकृतियों को निर्धारित करने के लिए नियोमॉर्फिज्म चकाचौंध और छाया का उपयोग करता है।
कंट्रास्ट घटता जाता है; पूरी तरह से सफेद या काले रंग का उपयोग नहीं किया जाता है, जो आपको हाइलाइट और छाया को उजागर करने की अनुमति देता है।

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

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

ठीक है, पर्याप्त निष्क्रिय बात - चलो कोड पर चलते हैं।

एक गैर-आकार का नक्शा बनाना

सबसे सरल प्रारंभिक बिंदु एक गैर-आकार का नक्शा बनाना है: एक गोल आयताकार जिसमें कुछ जानकारी होगी। इसके बाद, हम यह देखेंगे कि हम इन सिद्धांतों को SwiftUI के अन्य भागों में कैसे स्थानांतरित कर सकते हैं।

आइए सिंगल व्यू ऐप टेम्पलेट का उपयोग करके एक नया आईओएस प्रोजेक्ट बनाकर शुरू करें। सुनिश्चित करें कि आप उपयोगकर्ता इंटरफ़ेस के लिए SwiftUI का उपयोग करते हैं, और फिर प्रोजेक्ट Neumorphism का नाम दें।

युक्ति: यदि आपके पास Xcode में SwiftUI का पूर्वावलोकन करने की सुविधा है, तो मेरा सुझाव है कि आप इसे तुरंत सक्रिय कर दें - आपके लिए प्रयोग करना बहुत आसान हो जाएगा।

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

इसे जोड़ें :ColorContentView

extension Color {
    static let offWhite = Color(red: 225 / 255, green: 225 / 255, blue: 235 / 255)
}

हाँ, यह लगभग सफ़ेद है, लेकिन जब हमें इसकी आवश्यकता होती है, तो यह वास्तविक सफेद दिखने के लिए पर्याप्त होता है।

अब हम ContentViewइसे प्रदान करके शरीर को भर सकते हैं ZStack, जो पूरे स्क्रीन को घेरता है, पूरे स्थान को भरने के लिए हमारे नए अर्ध-श्वेत रंग का उपयोग करता है:

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.offWhite
        }
        .edgesIgnoringSafeArea(.all)
    }
}

अपने नक्शे का प्रतिनिधित्व करने के लिए, हम इसे स्क्रीन पर सुंदर और स्पष्ट बनाने के लिए 300x300 के रिज़ॉल्यूशन में एक गोल आयत का उपयोग करेंगे। इसलिए इसे ZStackरंग के नीचे जोड़ें :

RoundedRectangle(cornerRadius: 25)
    .frame(width: 300, height: 300)

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

इसलिए इसे इस तरह बदलें:

RoundedRectangle(cornerRadius: 25)
    .fill(Color.offWhite)
    .frame(width: 300, height: 300)

एक महत्वपूर्ण बिंदु: हम छाया, एक अंधेरे और एक प्रकाश का उपयोग करके आकार का निर्धारण करते हैं, जैसे कि स्क्रीन के ऊपरी बाएं कोने से प्रकाश डाली जाती है।

स्विफ्टयूआई हमें कई बार संशोधक लागू करने की अनुमति देता है, जो कि न्यूमॉर्फिज़्म के कार्यान्वयन की सुविधा प्रदान करता है। अपनी गोलाकार आयत में निम्नलिखित दो संशोधक जोड़ें:

.shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
.shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)

वे निचले दाएं कोने में अंधेरे छाया की ऑफसेट और ऊपरी बाएं कोने में प्रकाश छाया की ऑफसेट का प्रतिनिधित्व करते हैं। प्रकाश छाया दिखाई देता है क्योंकि हमने एक अर्ध-श्वेत पृष्ठभूमि का उपयोग किया था, और अब यह मानचित्र दिखाई देता है।

हमने कोड की कुछ पंक्तियाँ लिखी हैं, लेकिन हमारे पास पहले से ही एक गैर-मार्फ़िक नक्शा है - मुझे उम्मीद है कि आप इस बात से सहमत होंगे कि SwiftUI आश्चर्यजनक रूप से प्रक्रिया को सुविधाजनक बनाता है!

एक साधारण गैर-आकार का बटन बनाना

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

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

हम एक बटन शैली को परिभाषित करने जा रहे हैं जो वास्तव में खाली होगी: स्विफ्टयूआई हमें बटन के लिए लेबल देगा, जो पाठ, छवि या कुछ और हो सकता है, और हम इसे बिना बदलाव के वापस भेज देंगे।

इस संरचना को कहीं बाहर जोड़ें ContentView:

struct SimpleButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
    }
}

यह configuration.labelवह है जो बटन की सामग्री रखता है, और जल्द ही हम कुछ और जोड़ेंगे। सबसे पहले, एक बटन परिभाषित करें जो इसका उपयोग करता है ताकि आप देख सकें कि डिजाइन कैसे विकसित हो रहा है:

Button(action: {
    print("Button tapped")
}) {
    Image(systemName: "heart.fill")
        .foregroundColor(.gray)
}
.buttonStyle(SimpleButtonStyle())

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

configuration.label
    .padding(30)
    .background(
        Circle()
            .fill(Color.offWhite)
            .shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
            .shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
    )

यह हमें वांछित प्रभाव के काफी करीब लाता है, लेकिन यदि आप एप्लिकेशन चलाते हैं, तो आप देखेंगे कि व्यवहार में व्यवहार अभी भी सही नहीं है - दबाए जाने पर बटन नेत्रहीन प्रतिक्रिया नहीं करता है, जो सिर्फ अजीब दिखता है।

इसे ठीक करने के लिए, हमें configuration.isPressedअपनी कस्टम बटन शैली के अंदर की संपत्ति को पढ़ने की जरूरत है , जो बताती है कि बटन वर्तमान में दबाया गया है या नहीं। हम बटन को दबाए जाने के कुछ दृश्य संकेत देने के लिए अपनी शैली को बेहतर बनाने के लिए इसका उपयोग कर सकते हैं।

आइए एक सरल के साथ शुरू करें: हम Groupपृष्ठभूमि के लिए बटन का उपयोग करेंगे , फिर configuration.isPressedबटन दबाए जाने पर या तो एक फ्लैट सर्कल की जांच करें और वापस आ जाएं, या हमारे वर्तमान काले घेरे को अन्यथा:

configuration.label
    .padding(30)
    .background(
        Group {
            if configuration.isPressed {
                Circle()
                    .fill(Color.offWhite)
            } else {
                Circle()
                    .fill(Color.offWhite)
                    .shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
                    .shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
            }
        }
    )

चूंकि राज्य में isPressedअर्ध-सफेद रंग के साथ चक्र का उपयोग किया जाता है , यह बटन दबाए जाने पर हमारे प्रभाव को अदृश्य बना देता है।

चेतावनी: जिस तरह से स्विफ्टयूआई ने टैप करने योग्य क्षेत्रों की गणना की है, उसके कारण हमने अनायास ही हमारे बटन के लिए क्लिक क्षेत्र को बहुत छोटा बना दिया है - अब आपको स्वयं छवि पर टैप करने की आवश्यकता है, न कि इसके आस-पास के असमान डिज़ाइन पर। इसे ठीक करने के लिए , SwiftUI को सभी उपलब्ध नल स्थान का उपयोग करने के लिए मजबूर करने के .contentShape(Circle())तुरंत बाद एक संशोधक जोड़ें .padding(30)।

अब हम छाया को प्रवाहित करके कृत्रिम संघात का प्रभाव पैदा कर सकते हैं - shadowआधार प्रभाव से दो संशोधक की प्रतिलिपि बनाकर , सफेद और काले रंग के लिए एक्स और वाई मूल्यों का आदान-प्रदान, जैसा कि यहां दिखाया गया है:

if configuration.isPressed {
    Circle()
        .fill(Color.offWhite)
        .shadow(color: Color.black.opacity(0.2), radius: 10, x: -5, y: -5)
        .shadow(color: Color.white.opacity(0.7), radius: 10, x: 10, y: 10)
} else {
    Circle()
        .fill(Color.offWhite)
        .shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
        .shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
}

परिणाम का अनुमान लगाएं।

एक बटन क्लिक के लिए आंतरिक छाया बनाएँ

हमारा वर्तमान कोड, सिद्धांत रूप में, पहले से ही काम करता है, लेकिन लोग अलग तरह से प्रभाव की व्याख्या करते हैं - कुछ इसे अवतल बटन के रूप में देखते हैं, अन्य लोग देखते हैं कि बटन अभी भी दबाया नहीं गया है, बस प्रकाश एक अलग कोण से आता है।

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

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

extension LinearGradient {
    init(_ colors: Color...) {
        self.init(gradient: Gradient(colors: colors), startPoint: .topLeading, endPoint: .bottomTrailing)
    }
}

इसके साथ, हम बस विकर्ण दिशा में अपने रैखिक ढाल को वापस पाने के लिए रंगों की एक परिवर्तनशील सूची प्रदान कर सकते हैं।

अब महत्वपूर्ण बिंदु के बारे में: हमारे दबाए गए सर्कल में दो फ़्लिप किए गए छाया को जोड़ने के बजाय, हम एक धुंधला (स्ट्रोक) के साथ एक नया सर्कल ओवरले करने जा रहे हैं, और फिर मास्क के रूप में एक ढाल के साथ एक और सर्कल लागू करें। यह थोड़ा पेचीदा मामला है, लेकिन मुझे इसे स्पष्ट करने के लिए समझाना चाहिए:

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

जब आप एक दृश्य को दूसरे के लिए मास्क के रूप में लागू करते हैं, तो SwiftUI मास्क के अल्फा चैनल का उपयोग यह निर्धारित करने के लिए करता है कि आधार दृश्य में क्या प्रदर्शित किया जाना चाहिए।

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

याद रखें कि दो छाया का उपयोग neomorphism में गहराई की भावना पैदा करने के लिए किया जाता है: एक प्रकाश और एक अंधेरा, इसलिए हम अलग-अलग रंगों के साथ आंतरिक छाया के इस प्रभाव को दो बार जोड़ देंगे।

सर्कल configuration.isPressको इस प्रकार बदलें :

Circle()
    .fill(Color.offWhite)
    .overlay(
        Circle()
            .stroke(Color.gray, lineWidth: 4)
            .blur(radius: 4)
            .offset(x: 2, y: 2)
            .mask(Circle().fill(LinearGradient(Color.black, Color.clear)))
    )
    .overlay(
        Circle()
            .stroke(Color.white, lineWidth: 8)
            .blur(radius: 4)
            .offset(x: -2, y: -2)
            .mask(Circle().fill(LinearGradient(Color.clear, Color.black)))
    )

यदि आप एप्लिकेशन को फिर से चलाते हैं, तो आप देखेंगे कि एक बटन दबाने का प्रभाव अधिक स्पष्ट है और बेहतर दिखता है।

इस पर, अनुवाद का पहला भाग समाप्त हो गया। आने वाले दिनों में हम निरंतरता को प्रकाशित करेंगे, और अब हम आपको आगामी पाठ्यक्रम के बारे में और जानने के लिए आमंत्रित करते हैं ।

स्विफ्टयूआई का उपयोग करते हुए नपुंसकता। भाग 1

नियोमॉर्फिज्म की मूल बातें

एक गैर-आकार का नक्शा बनाना

एक साधारण गैर-आकार का बटन बनाना

एक बटन क्लिक के लिए आंतरिक छाया बनाएँ

More articles: