💅🏻 🐜 👨🏿‍🤝‍👨🏼 स्विफ्टयूआई का उपयोग करते हुए नपुंसकता। भाग 2: पहुंच के साथ क्या किया जा सकता है? 🔳 🆒 👨🏽‍🚀

सभी को नमस्कार! उन्नत पाठ्यक्रम "IOS डेवलपर" के लॉन्च की प्रत्याशा में , हम स्विफ्टयूआई ( पहले भाग को पढ़ें ) का उपयोग करते हुए नवशास्त्रवाद के बारे में लेख के दूसरे भाग का अनुवाद प्रकाशित करते हैं ।

डार्क थीम

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

एक्सटेंशन में पहले दो और रंग जोड़ें Colorताकि हमारे हाथ में कई स्थिर मूल्य हों:

static let darkStart = Color(red: 50 / 255, green: 60 / 255, blue: 65 / 255)
static let darkEnd = Color(red: 25 / 255, green: 25 / 255, blue: 30 / 255)

हम उन्हें एक पृष्ठभूमि के रूप में उपयोग कर सकते हैं ContentView, मौजूदा एक की जगह Color.white, जैसा कि यहाँ दिखाया गया है:

var body: some View {
    ZStack {
        LinearGradient(Color.darkStart, Color.darkEnd)

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

नया बैकग्राउंड दृश्य जिसे हम जोड़ने जा रहे हैं, वह हमें अपने दृश्य प्रभाव के लिए किसी भी आकार को निर्दिष्ट करने की अनुमति देगा, इसलिए अब हम मंडलियों से संलग्न नहीं हैं। यह इस बात पर भी नज़र रखेगा कि हमारे उत्तल प्रभाव (आवक या जावक) को अवतल करना है या नहीं, यह उस संपत्ति पर निर्भर करता है, isHighlightedजिसे हम बाहर से बदल सकते हैं।

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

struct DarkBackground<S: Shape>: View {
    var isHighlighted: Bool
    var shape: S

    var body: some View {
        ZStack {
            if isHighlighted {
                shape
                    .fill(Color.darkEnd)
                    .shadow(color: Color.darkStart, radius: 10, x: 5, y: 5)
                    .shadow(color: Color.darkEnd, radius: 10, x: -5, y: -5)

            } else {
                shape
                    .fill(Color.darkEnd)
                    .shadow(color: Color.darkStart, radius: 10, x: -10, y: -10)
                    .shadow(color: Color.darkEnd, radius: 10, x: 10, y: 10)
            }
        }
    }
}

संशोधन यह है कि जब बटन दबाया जाता है, तो छाया का आकार कम हो जाता है - हम 10 के बजाय 5 बिंदुओं की दूरी का उपयोग करते हैं।

फिर हम इसे DarkButtonStyleपैडिंग और सामग्री की मदद से लपेट सकते हैं , जैसा कि यहां दिखाया गया है:

struct DarkButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .padding(30)
            .contentShape(Circle())
            .background(
                DarkBackground(isHighlighted: configuration.isPressed, shape: Circle())
            )
    }
}

अंत में, हम ContentViewइसे बदलकर अपने बटन पर लागू कर सकते हैं ButtonStyle():

.buttonStyle(DarkButtonStyle())

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

कुछ प्रयोग

अब प्रभाव के साथ प्रयोग करने का समय है, क्योंकि यह आपको बेहतर ढंग से समझने में मदद करेगा कि स्विफ्टयूआई क्या विशेष रूप से सक्षम है।

उदाहरण के लिए, हम एक रैखिक ढाल जोड़कर एक चिकनी उत्तल बटन बना सकते हैं और दबाए जाने पर इसे फ्लिप कर सकते हैं:

if isHighlighted {
    shape
        .fill(LinearGradient(Color.darkEnd, Color.darkStart))
        .shadow(color: Color.darkStart, radius: 10, x: 5, y: 5)
        .shadow(color: Color.darkEnd, radius: 10, x: -5, y: -5)

} else {
    shape
        .fill(LinearGradient(Color.darkStart, Color.darkEnd))
        .shadow(color: Color.darkStart, radius: 10, x: -10, y: -10)
        .shadow(color: Color.darkEnd, radius: 10, x: 10, y: 10)
}

यदि आप इसे चलाते हैं, तो आप देखेंगे कि बटन को दबाने और छोड़ने पर सुचारू रूप से ऊपर और नीचे एनिमेशन होता है। मुझे लगता है कि एनीमेशन एक छोटे से ध्यान भंग है, इसलिए मैं यह विधि को यह संशोधक जोड़कर अक्षम करने की अनुशंसा makeBody()से DarkButtonStyleवहाँ संशोधक वर्तमान के बाद, background():

.animation(nil)

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

सबसे पहले, इस तथ्य के बावजूद कि यह नियोमॉर्फ़िक डिज़ाइन के कम-विपरीत सिद्धांत का विरोधाभासी है, मैं इसे बाहर खड़ा करने के लिए एक सफेद एक के साथ ग्रे आइकन को बदल दूंगा। तो, ContentViewआपको निम्नलिखित की आवश्यकता होगी:

Image(systemName: "heart.fill")
    .foregroundColor(.white)

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

यह लागू करने के लिए आपको संशोधक डालने की आवश्यकता overlay()के बाद fill()जब isHighlightedइसे यहाँ के रूप में, सही है:

if isHighlighted {
    shape
        .fill(LinearGradient(Color.darkEnd, Color.darkStart))
        .overlay(shape.stroke(LinearGradient(Color.darkStart, Color.darkEnd), lineWidth: 4))
        .shadow(color: Color.darkStart, radius: 10, x: 5, y: 5)
        .shadow(color: Color.darkEnd, radius: 10, x: -5, y: -5)

एक भी तेज देखो प्राप्त करने के लिए, आप shadow()दबाए गए राज्य के लिए दो संशोधक निकाल सकते हैं जो अन्यथा ओवरले पर ध्यान केंद्रित करते हैं।

तीसरा, आप अप्रकाशित स्थिति में ओवरले को भी जोड़ सकते हैं, बस यह चिह्नित करने के लिए कि यह एक बटन है। इसे तुरंत लगाएं fill(), जैसे:

} else {
    shape
        .fill(LinearGradient(Color.darkStart, Color.darkEnd))
        .overlay(shape.stroke(Color.darkEnd, lineWidth: 4))
        .shadow(color: Color.darkStart, radius: 10, x: -10, y: -10)
        .shadow(color: Color.darkEnd, radius: 10, x: 10, y: 10)
}

एक स्विच शैली जोड़ना

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

हमें configuration.isOnयह निर्धारित करने के लिए पढ़ना होगा कि क्या स्विच चालू है।
हमें स्विचिंग के कार्य को संभालने के लिए एक बटन प्रदान करने की आवश्यकता है, या कम से कम ऐसा कुछ onTapGesture()या ऐसा कुछ ।

इस संरचना को अपनी परियोजना में जोड़ें:

struct DarkToggleStyle: ToggleStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        Button(action: {
            configuration.isOn.toggle()
        }) {
            configuration.label
                .padding(30)
                .contentShape(Circle())
        }
        .background(
            DarkBackground(isHighlighted: configuration.isOn, shape: Circle())
        )
    }
}

हम उनमें से एक को रखना चाहते हैं ContentViewताकि आप इसे स्वयं परख सकें, इसलिए इस संपत्ति को जोड़कर शुरू करें:

@State private var isToggled = false

फिर मौजूदा बटन VStackको 40 के बराबर रिक्ति के साथ लपेटें और इसे नीचे रखें:

Toggle(isOn: $isToggled) {
    Image(systemName: "heart.fill")
        .foregroundColor(.white)
}
.toggleStyle(DarkToggleStyle())

आपकी संरचना ContentViewइस तरह दिखनी चाहिए:

struct ContentView: View {
    @State private var isToggled = false

    var body: some View {
        ZStack {
            LinearGradient(Color.darkStart, Color.darkEnd)

            VStack(spacing: 40) {
                Button(action: {
                    print("Button tapped")
                }) {
                    Image(systemName: "heart.fill")
                        .foregroundColor(.white)
                }
                .buttonStyle(DarkButtonStyle())

                Toggle(isOn: $isToggled) {
                    Image(systemName: "heart.fill")
                        .foregroundColor(.white)
                }
                .toggleStyle(DarkToggleStyle())
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

और यह सब - हमने दो स्थानों पर अपने सामान्य नियोमॉर्फिक डिजाइन को लागू किया!

पहुंच में सुधार

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

यह वह क्षण है जिसके आसपास मैं कुछ गलतफहमी का पालन करता हूं, इसलिए मैं पहले से कुछ बातें कहना चाहता हूं:

हां, मैं समझता हूं कि मानक Apple बटन नीले रंग के पाठ की तरह ही दिखते हैं और इसलिए कम से कम पहली नज़र में परिचित बटन नहीं मिलते हैं, लेकिन उनमें एक उच्च विपरीत अनुपात होता है।
« , , » — — « », , , - .
- SwiftUI, , VoiceOver Apple.

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

इसलिए, हम इस पर विचार करने जा रहे हैं कि हम क्या बदलाव कर सकते हैं ताकि तत्व वास्तव में बाहर खड़े हों।

सबसे पहले, मैं चाहूंगा कि आप हमारे एक्सटेंशन में दो नए रंग जोड़ें:

static let lightStart = Color(red: 60 / 255, green: 160 / 255, blue: 240 / 255)
static let lightEnd = Color(red: 30 / 255, green: 80 / 255, blue: 120 / 255)

दूसरे, मौजूदा एक को डुप्लिकेट करें DarkBackgroundऔर कॉपी को नाम दें ColorfulBackground। हम एक पल में इससे निपट लेंगे, लेकिन फिर, पहले हमें कुछ तैयारी करने की आवश्यकता है।

तीसरा,, बटन और स्विच के अंधेरे शैली नकल उन्हें नाम बदलने ColorfulButtonStyleऔर ColorfulToggleStyle, और फिर उन्हें नया एक का उपयोग कर ColorfulBackgroundपृष्ठभूमि के रूप में।

तो उन्हें इस तरह दिखना चाहिए:

struct ColorfulButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .padding(30)
            .contentShape(Circle())
            .background(
                ColorfulBackground(isHighlighted: configuration.isPressed, shape: Circle())
            )
            .animation(nil)
    }
}

struct ColorfulToggleStyle: ToggleStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        Button(action: {
            configuration.isOn.toggle()
        }) {
            configuration.label
                .padding(30)
                .contentShape(Circle())
        }
        .background(
            ColorfulBackground(isHighlighted: configuration.isOn, shape: Circle())
        )
    }
}

और अंत में, बटन को संपादित करें और ContentViewनई शैली का उपयोग करने के लिए स्विच करें :

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

Toggle(isOn: $isToggled) {
    Image(systemName: "heart.fill")
        .foregroundColor(.white)
}
.toggleStyle(ColorfulToggleStyle())

आप चाहें तो एप्लिकेशन चला सकते हैं, लेकिन इसका कोई मतलब नहीं है - यह वास्तव में नहीं बदला है।

हमारे जीवन के रंगीन संस्करण को लाने के लिए, हम मॉडिफायर्स को बदलने fill()और overlay()दबाए गए और अप्रभावित राज्यों के लिए जा रहे हैं । तो, जब isHighlightedसच है, बदलने के darkStartदोनों darkEndके लिए lightStartऔर lightEnd, इस तरह:

if isHighlighted {
    shape
        .fill(LinearGradient(Color.lightEnd, Color.lightStart))
        .overlay(shape.stroke(LinearGradient(Color.lightStart, Color.lightEnd), lineWidth: 4))
        .shadow(color: Color.darkStart, radius: 10, x: 5, y: 5)
        .shadow(color: Color.darkEnd, radius: 10, x: -5, y: -5)

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

ऐसा करने के लिए, मौजूदा overlay()गैर-तनावपूर्ण स्थिति को इसमें बदलें :

.overlay(shape.stroke(LinearGradient(Color.lightStart, Color.lightEnd), lineWidth: 4))

तो, समाप्त बटन शैली इस तरह दिखना चाहिए:

ZStack {
    if isHighlighted {
        shape
            .fill(LinearGradient(Color.lightEnd, Color.lightStart))
            .overlay(shape.stroke(LinearGradient(Color.lightStart, Color.lightEnd), lineWidth: 4))
            .shadow(color: Color.darkStart, radius: 10, x: 5, y: 5)
            .shadow(color: Color.darkEnd, radius: 10, x: -5, y: -5)
    } else {
        shape
            .fill(LinearGradient(Color.darkStart, Color.darkEnd))
            .overlay(shape.stroke(LinearGradient(Color.lightStart, Color.lightEnd), lineWidth: 4))
            .shadow(color: Color.darkStart, radius: 10, x: -10, y: -10)
            .shadow(color: Color.darkEnd, radius: 10, x: 10, y: 10)
    }
}

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

निष्कर्ष

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

मैंने बार-बार कहा है कि आपको हमेशा अपने एप्लिकेशन की उपलब्धता की निगरानी करनी चाहिए, और इसका मतलब है कि वॉइसओवर आपके यूजर इंटरफेस के साथ काम करता है। सुनिश्चित करें कि आपके बटन इंटरैक्टिव दिखते हैं, सुनिश्चित करें कि आपके पाठ लेबल और आइकन पृष्ठभूमि के लिए पर्याप्त विपरीत अनुपात रखते हैं (कम से कम 4.5: 1, लेकिन 7: 1 तक हैं), और सुनिश्चित करें कि आपके क्लिक करने योग्य क्षेत्र आरामदायक हैं और बड़ा (कम से कम 44x44 पिक्सेल)।

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

आप इस प्रोजेक्ट के लिए GitHub पर पूर्ण स्रोत कोड प्राप्त कर सकते हैं ।

पहले भाग को पढ़ें।

पाठ्यक्रम के बारे में अधिक जानें।

स्विफ्टयूआई का उपयोग करते हुए नपुंसकता। भाग 2: पहुंच के साथ क्या किया जा सकता है?

डार्क थीम

कुछ प्रयोग

एक स्विच शैली जोड़ना

पहुंच में सुधार

निष्कर्ष

More articles: