SwiftUI-এর একটি অপরিহার্য নির্দেশিকা: কাস্টম মডিফায়ার সহ পুনঃব্যবহারযোগ্য UI

কাস্টম ভিউ মডিফায়ার তৈরি করার ক্ষমতা হল SwiftUI-তে একটি শক্তিশালী বৈশিষ্ট্য। এই প্রবন্ধে, আমরা উদাহরণগুলি কভার করব কীভাবে এই বৈশিষ্ট্যটি ব্যবহার করে UI তৈরি করা আরও সহজ করে তোলা যেতে পারে। আপনি যদি SwiftUI- তে ViewModifiers এবং কীভাবে কাস্টম তৈরি করতে হয় তার সাথে পরিচিত না হন, আপনি সেগুলি সম্পর্কে এখানে পড়তে পারেন

এই নিবন্ধটির লক্ষ্য হল SwiftUI-তে কাস্টম মডিফায়ার এবং শৈলী তৈরি করার বিভিন্ন উপায় এবং কীভাবে একটি পরিষ্কার এবং সামঞ্জস্যপূর্ণ চূড়ান্ত আউটপুট অর্জন করার সময় UI বিল্ডিংকে আরও ঘোষণামূলক করতে ব্যবহার করা যেতে পারে তা কভার করা।

আমরা যে চূড়ান্ত UI তৈরি করতে চাই তা হল:

আসুন পর্দায় সমস্ত পৃথক উপাদান বিবেচনা করা যাক:

• চিত্র: কিছু কোণার ব্যাসার্ধ সহ একটি আদর্শ চিত্র উপাদান
• পাঠ্য: আমাদের একটি শিরোনাম এবং একটি বডি টেক্সট আছে
• বোতাম: একটি পূর্ণ-প্রস্থ বোতাম

প্লেইন SwiftUI কোড

আপনি যদি এই স্ক্রিনটি কোনও সংশোধক ছাড়াই তৈরি করেন তবে কোডটি এরকম কিছু দেখাবে:

 struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .resizable() .aspectRatio(contentMode: .fill) .frame(minWidth: 0, maxWidth: .infinity) .frame(height: 220) .cornerRadius(12) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) Spacer() Button(action: { }) { Text("Label") .font(.system(size: 14, weight: .medium)) } .frame(minWidth: 0, maxWidth: .infinity) .padding(.horizontal, 10) .padding(.vertical, 12) .background(Color.blue) .foregroundColor(Color.white) .cornerRadius(12) } .padding(.all, 16) } }

এই পদ্ধতির সাথে কয়েকটি সমস্যা রয়েছে:

• কিছু উপাদানের জন্য স্টাইলিং (উদাহরণস্বরূপ শিরোনাম এবং বিবরণ পাঠ্য) সদৃশ হতে হবে

• কিছু সাধারণ স্টাইলিং (এলিমেন্ট প্যাডিং, কোণার ব্যাসার্ধ ইত্যাদি) পরিবর্তন একাধিক জায়গায় করতে হবে

  
  

এখন আপনি কাস্টম ভিউ তৈরি করে UIKit পদ্ধতিতে এই সমস্যাটি সমাধান করতে পারেন, কিন্তু আমি এই পদ্ধতির অনুরাগী নই কারণ এটি অন্তর্নির্মিত ভিউ থেকে দূরে সরে যাওয়া এবং নতুন দলের সদস্যদের অনবোর্ডিং আরও ঘর্ষণমূলক করে তোলে। একটি সহজ উপায় হল কিছু সার্বজনীন ভিউ মডিফায়ারকে সংজ্ঞায়িত করা যা শৈলীগুলির পরিবর্তে প্রয়োগ করা যেতে পারে।

আসুন আমাদের প্রয়োজনীয় সাধারণ স্টাইলিং ভেঙে দেওয়া যাক:

• স্ক্রীন কন্টেইনার: স্ক্রীনে নিজেই সার্বজনীন প্যাডিং আছে, এটি ঐচ্ছিক কিন্তু আমি পছন্দ করি যে সমস্ত স্ক্রীন একটি সর্বজনীন স্টাইল আছে
• কোণার ব্যাসার্ধ
• শিরোনাম এবং শরীরের পাঠ্য
• সম্পূর্ণ প্রস্থ: আইটেমগুলি তাদের পিতামাতার প্রস্থ পূরণ করতে সক্ষম হতে হবে (উপরের উদাহরণে বোতাম এবং চিত্র)
• বোতাম স্টাইলিং
• ইমেজ স্কেলিং

কাস্টম ভিউ মডিফায়ার

কোণার ব্যাসার্ধ দিয়ে শুরু করা যাক:

 struct CommonCornerRadius: ViewModifier { func body(content: Content) -> some View { content .cornerRadius(12) } }

এটি একটি বরং সহজ, এটি আমাদের উপাদানগুলির জন্য একটি সর্বজনীন কোণার ব্যাসার্ধ প্রয়োগ করতে দেয়। এটি কাস্টম ভিউ তৈরি না করে বা কোডবেস জুড়ে একাধিক পরিবর্তন না করেই বিশ্বব্যাপী অ্যাপ শৈলী পরিবর্তন করা সহজ করে তোলে।

 struct FullWidthModifier: ViewModifier { func body(content: Content) -> some View { content .frame(minWidth: 0, maxWidth: .infinity) } }

এটি পূর্ণ-প্রস্থের দৃশ্যগুলিকে বাস্তবায়ন করা সহজ করে তোলে, আর ম্যানুয়ালি .frame যোগ করা হয় না!

 struct TitleTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) } } struct BodyTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) } }

এটি সাধারণ পাঠ্য স্টাইলিংয়ের অনুমতি দেবে, সাধারণত আপনি কাস্টম পাঠ্য উপাদান বা ইউটিলিটি ফাংশন তৈরি করবেন এবং কোডের মাধ্যমে UI উপাদান যুক্ত করবেন।

 extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } }

ঠিক আছে, আপনি আমাকে বুঝেছেন...এটি একটি কাস্টম ভিউ মডিফায়ার নয় বরং একটি সাধারণ এক্সটেনশন। এর কারণ হল ViewModifiers অ্যাপল জেনেরিক ভিউ এবং কিছু ফাংশন যেমন resizable শুধুমাত্র ইমেজগুলিতে প্রযোজ্য, এক্সটেনশন এবং কাস্টম মডিফায়ারের সংমিশ্রণ ব্যবহার করে এটি প্রায় পেতে সাহায্য করে।

 struct FullWidthButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .fullWidth() .foregroundColor(Color.white) .font(.system(size: 14, weight: .medium)) .padding(.horizontal, 10) .padding(.vertical, 12) .background(configuration.isPressed ? Color.blue.opacity(0.2) : Color.blue) } } struct FullWidthButton: ViewModifier { func body(content: Content) -> some View { content .buttonStyle(FullWidthButtonStyle()) } }

অবশেষে, এটি বোতামের জন্য, মনে রাখবেন যে একই প্রভাবটি সম্পাদন করার জন্য আমরা সহজভাবে একটি ভিউমোডিফায়ার তৈরি করতে পারতাম যখন ট্যাপ করা হলে বোতামটির চেহারা পরিবর্তন হত না। এর কারণ হল একটি বোতামে .background সেট করা হলে সেটিকে ট্যাপ করা এবং আনট্যাপ করা অবস্থায় সেই ব্যাকগ্রাউন্ড ব্যবহার করতে বাধ্য করে। ButtonStyle আমাদের বোতাম টিপছে কি না তার উপর ভিত্তি করে এর অপাসিটি পরিবর্তন করতে দেয়।

এখন সুবিধার জন্য, আমি এই মডিফায়ারগুলি ব্যবহার করে এমন এক্সটেনশনগুলি তৈরি করতে পছন্দ করি:

 extension View { func commonCornerRadius() -> some View { modifier(CommonCornerRadius()) } func fullWidth() -> some View { modifier(FullWidthModifier()) } func title() -> some View { modifier(TitleTextModifier()) } func body() -> some View { modifier(BodyTextModifier()) } func fullWidthButton() -> some View { modifier(FullWidthButton()) } } extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } }

এখন সরাসরি স্টাইল করার পরিবর্তে কোডটিকে ব্যবহার করার জন্য রূপান্তর করা যাক:

 struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .aspectFill() .fullWidth() .frame(height: 220) .commonCornerRadius() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .title() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .body() Spacer() Button(action: { }) { Text("Awesome") } .fullWidthButton() .commonCornerRadius() } .padding(.all, 16) } }

অনেক ক্লিনার! এখন প্রথম নজরে, এটি কেবল ম্যানুয়ালি স্টাইলগুলি সেট করার চেয়ে আরও বেশি কোড এবং প্রচেষ্টার মতো মনে হয় তবে দীর্ঘমেয়াদে, এটি অনেক প্রচেষ্টা সাশ্রয় করবে। ব্যক্তিগতভাবে, এই পদ্ধতিটি আপনার অ্যাপের শৈলীকে স্টাইলিংয়ের ভিউ-বাই-ভিউ ভিত্তিতে সাধারণ সংশোধকগুলির উপর বেশি নির্ভর করে আরও সামঞ্জস্যপূর্ণ হতে উত্সাহিত করে।

এবং যে এটি সম্পর্কে! আশা করি, এটি আপনাকে আপনার অ্যাপগুলিকে দ্রুত এবং সহজে তৈরি করতে সাহায্য করবে, আরেকটি সুবিধা হল এই মডিফায়ারগুলিকে আপনার যেকোন অ্যাপে ফেলে দেওয়া যেতে পারে এবং এর শৈলী নির্দেশিকাগুলির সাথে মেলে তা টুইক করা যেতে পারে। আমি এটিকে আরও এগিয়ে নিয়ে যাওয়ার জন্য একটি লাইব্রেরিতেও কাজ করছি, আপনি এটি এখানে পরীক্ষা করে দেখতে পারেন (পিএস: এটি লেখার সময় লাইব্রেরিটি খুব প্রাথমিক পর্যায়ে রয়েছে রেপোটি খালি :p তবে সাথে থাকুন)