SwiftUI দিয়ে একটি রবাস্ট ডিজাইন সিস্টেম বানান: একটি পূর্ণ গাইড

এই ধরনের অর্ডারিং আর্কিটেকচার বিভিন্ন লেভেলের মধ্যে কাপলিং-এর ডিগ্রি কমিয়ে দেয়, যা সম্ভাব্য রিভিশনের জন্য বেশি ফ্লেক্সিবিলিটি এবং ডাইনামিক্স প্রদান করে। আমি লেভেলগুলো নিচ থেকে উপরের দিকে এই ক্রমে স্ট্রাকচার করি: ম্যাটেরিয়াল → বেস → টোকেন। কিন্তু টিম যেভাবে কনফর্টেবল সেভাবেই করা যায়।

কোডে নেমে পড়া

নিচের সেকশনটি আমাদের অভিজ্ঞতায় ভিত্তি করে হাইলাইট করা কিছু পয়েন্টের তালিকা। পূর্ণ কোডের জন্য GitHub রিপো দেখুন। যেকোনো ফিডব্যাক বা সমালোচনা উন্নতির জন্য স্বাগত।

১. হায়ারার্কি লেভেলের আর্কিটেকচার

নিম্ন লেভেলের ম্যাটেরিয়ালকে স্ট্যাক করে হigest লেভেলের টোকেন কনস্ট্রাক্ট করার দুটি পদ্ধতি আছে:

• enum ব্যবহার করুন টাইপ সেফটি এবং কোড লিটারেসির জন্য

গ্রুপিং র‍্যাপার বা ফাংশনে প্যারামিটার হিসেবে কোডে enum ব্যবহারের সুবিধা ইতিমধ্যে ভালোভাবে স্বীকৃত। এখানে লেভেল অফ হায়ারার্কি ইমপ্লিমেন্টেশনের একটি পয়েন্ট উল্লেখ করা যোগ্য।

আমরা সবসময় র‍ Voltaire raw values, ফন্ট সাইজ (CGFloat) এবং ফন্ট নাম (String) নিম্নতম লেভেলে স্টোর করি, কারণ আমরা সেটির সাথে গুলিয়ে ফেলতে চাই না। কিন্তু raw value অবশ্যই enum-এ লিটেরেল হতে হবে, তাই আমরা অন্য enum-এ থেকে একটি মান দিয়ে একটা case অ্যাসাইন করতে পারি না।

এই সমস্যাটি সমাধান করার জন্য, আমরা একটি getValue ফাংশন ইমপ্লিমেন্ট করি, যা প্রয়োজনে switch কেসে raw value রিটার্ন করে।

• struct ব্যবহার করুন সহজ স্ট্রাকচারের জন্য

এনাম চমৎকার হলেও, কিছু কেসে আমাদের তার ইউনিক ফিচার প্রয়োজন নেই। উদাহরণস্বরূপ, যেহেতু Xcode ডাইনামিক কালার প্রসেস করার ভারী কাজ নিজে করে, এবং API এন্ডপয়েন্টে কোনো প্যারামিটার অপশন প্রয়োজন নেই, আমরা সিম্পল দুই লেভেলের স্ট্রাক্ট দিয়ে কালার প্যালেট সেট আপ করতে পারি।

২. API এন্ডপয়েন্টের স্পষ্ট ও সরল নামকরণ

নেমিং কনভেনশন আলোচনা ও বিতর্কের একটি ব্যাপক টপিক। বেসিক Swift কনভেনশনের পাশাপাশি, আমরা শুধু দুটি নিয়ম মেনে চলি: ১) কোনো এক্রোনিম নয় এবং ২) সিম্পল রাখুন। উদাহরণস্বরূপ, টাইপোগ্রাফি এবং কালার সিস্টেম ব্যবহার করতে নতুন এন্ডপয়েন্ট তৈরি না করে, আমরা Font এবং Color স্ট্রাক্ট থেকে এক্সটেনশন তৈরি করি। এই পদ্ধতি ডেভেলপারদের অপরিচিত API নাম মেমোরাইজ করার esfuer কমিয়ে দেয়।

৩. দুটি মোডে ডাইনামিক্যালি কালার সেট ম্যানেজ করুন

ডার্ক মোড এখন ইন্ডাস্ট্রি স্ট্যান্ডার্ড, এবং iOS এবং Android উভয় টিমই এই ফিচার ইমপ্লিমেন্ট করেছে। এটি ইউজারদের জন্য ভালো ট্রেন্ড, কিন্তু ডিজাইনার এবং ডেভেলপারদের কিছু চ্যালেঞ্জ নিয়ে আসতে পারে, যার মধ্যে কালার সেট ম্যানেজ ও নামকরণ, বিশেষত গ্রে স্কেল موارد।

গ্রে স্কেল কালার ডাইনামিক্যালি চিন্তা ও যোগাযোগ করার জন্য, সাদা, হালকা, কালো বা গাঢ় শব্দগুলো কাজ করে না। কারণ যদি আমরা একটি ডাইনামিক কালার #000000 (HEX-এ কালো) কে light color scheme-এ কালো বা গাঢ় বলি, তবে dark color scheme-এ এই নির্দিষ্ট কালারটি #FFFFFF (HEX-এ সাদা) হওয়া উচিত, সেটিকে কী বলবেন? defaultDark নাকি lightDark?

পারাম্পরিক পদ্ধতিতে গ্রে স্কেল ডাইনামিক কালার সেটের নামকরণ খুব কনফিউজিং। এই বিভ্রান্তি এড়াতে, আমরা একটি কালার সেটকে light এবং dark স্কিমে ম্যানেজ করার জন্য theme এবং contrast ব্যবহার করি।

লক্ষ্য করুন, একটি গ্রে স্কেল কালার সবসময় বিপরীত কালার মোডে রিভার্স হতে হয় না। এসব পরিস্থিতিতে যেখানে হালকা কালার হালকা থাকে এবং গাঢ় কালার গাঢ় থাকে, আমরা সেটিকে সহজে হালকা বা গাঢ় নামে ডাকি।

এই নামকরণ পদ্ধতির ধারণা পাওয়ার পর, Xcode-এ কালার প্যালেটের এই আর্কিটেকচার ম্যানেজ করা সহজ। একটি কালার সেট তৈরি করতে, শুধু একটি নতুন Asset Catalog ফাইল তৈরি করুন → একটি নতুন Color Set যোগ করুন → এবং Appearances-কে Any, Light, Dark-এ পরিবর্তন করুন।

৪. environment সেটিংস

SwiftUI ফ্রেমওয়ার্কের একটি চমৎকার ফিচার হলো environment মডিফায়ার, যা টার্গেট ভিউয়ে environment values কন্ট্রোল করার ক্ষমতা দেয়। ডিজাইন সিস্টেম বানানোর কথা বললে, এই ক্ষমতা অ্যাপের ফন্ট রুট লেভেলে পরিবর্তন করার সুবিধাজনক পদ্ধতি প্রদান করে। এবং environmentValue ব্যবহারের আরেকটি সুবিধা হলো ডেভেলপমেন্টে লাইট এবং ডার্ক কালার স্কিম পরিবর্তন ও টেস্ট করা।

৫. buttonStyle এবং বাটন লেবেল

UIKit-এর পুরনো দিনের তুলনায়, SwiftUI-এ রিঅয়ূজেবল বাটন কনস্ট্রাক্ট করা আপারেটিভভাবে সহজ। Button ভিউ দুটি অংশ থেকে গঠিত: action ক্লোজার (বাটন চাপায় ফায়ার হওয়া ইভেন্ট) এবং label (বাটনের বডি)। ভিউটি তারপর buttonStyle মডিফায়ারের সাথে চেইন করা যায়। রিঅয়ূজেবল বাটন বানানোর বিস্তারিত জানতে Alejandro-এর টিউটোরিয়াল পড়ুন, যা ব্যাপক এবং উপকারী।

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

অন্যদিকে, বাটন স্টাইলের চারটি প্রধান টাইপ আছে: সার্কেল আইকন, আইকন, ক্যাপসুল এবং টেক্সট। ButtonStyle প্রোটোকল ফলো করতে হলে একটি makeBody ফাংশন ইমপ্লিমেন্ট করতে হয়। এই ফাংশন আমাদের একটি configuration প্রপার্টি দেয়, যা নেটিভ isPressed ভ্যালু দিয়ে মনিটর করে যে বাটন চাপা হয়েছে কিনা।

শেষে, TokenButtonLabel এবং TokenButtonStyle-র উপরে স্ট্যাক করে, বাটন কম্পোনেন্ট API-এর এন্ডপয়েন্ট হবে TokenButton — একটি গ্রুপিং যা বাটনের কন্টেন্ট এবং স্টাইল একসাথে র‍্যাপ করে, ভিজ্যুয়াল ডিজাইন সিস্টেমের বাটন টাইপের সাথে কনফর্ম করে।

৬. AnyView র‍্যাপার হিসেবে

ButtonStyle প্রোটোকল দ্বারা আনা makeBody ফাংশন নিয়ে কাজ করার সময়, আমরা View-এর সাথে কাজ করার একটি উপকারী টিপ খুঁজে পেলাম। একটি ভিউ ভেরিয়েবলে স্টোর করতে, টাইপ অ্যানোটেশন AnyView হিসেবে ইঙ্গিত করা যেতে পারে, যা SwiftUI-এ ভিউগুলোর একটি জেনারেল কন্টেইনার হিসেবে কাজ করে।

আমাদের কেসে, যেহেতু আমরা সব টাইপের বাটনের জন্য configuration.label-এ opacity মডিফায়ার যোগ করতে চাই, প্রতিটি switch কেসে বারবার করা না করেই, এটা একসাথে চেইন করা বেশি মানে রাখে। আমরা AnyView-এর সুবিধা নিচের মত করে নিতে পারি:

৭. mutating ফাংশন দিয়ে ভিউ মডিফায়ার বানান

বাটন স্টাইল ডাইনামিক্যালি আপডেট করতে, আমরা আমাদের নিজস্ব মডিফায়ার বানাতে পারি। প্রথমে ভিউতে কাস্টোমাইজড মিউটেবল স্টেট প্রপার্টি ইনস্ট্যানশিয়েট করুন, তারপর একটি mutating ফাংশন তৈরি করুন যা টার্গেট স্টেট প্রপার্টি আপডেট করার পর Self টাইপ রিটার্ন করে।

৮. ঝামেলার বর্ডার স্টাইল

SwiftUI-এর একটি ড্রব্যাক হলো সার্কেল শেপকে সার্কুলার বর্ডার দিয়ে স্টাইল করা একদম सीধা নয়। আমি কিছুক্ষণ লড়েছি, এবং শেষে StackOverflow-এ সমাধান পেলাম। একটি clipShape এবং একটি overlay মডিফায়ার প্রয়োজন এটা কাজ করার জন্য।

উপসংহার

SwiftUI হলো অ্যাপল কর্তৃক একটি অবিশ্বাস্য উন্নতি। ত্রুটি থাকা সত্ত্বেও, এটি দিয়ে একটি রবাস্ট এবং ফ্লেক্সিবল ডিজাইন সিস্টেম বানানো, এবং অধিকন্তু জটিল iOS UI বানানো আগের চেয়ে অনেক বেশি এফিশিয়েন্ট। আশা করি এই আর্টিকেল যেকোনো iOS টিম যারা UI বানাতে চান তাদের জন্য সহায়ক হবে, এবং যেকোনো ফিডব্যাকের জন্য সবসময় ওপেন!

আরও পড়ুন vinceshao.com-এ / টুইটার বা লিঙ্কডইনে ফলো করুন