সুইফট এবং আইওএসে এক্সকোড অটো লেআউটের সাথে কাজ করা

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

স্বয়ংক্রিয় লেআউট সম্পূর্ণরূপে সীমাবদ্ধতার উপর নির্ভরশীল যেখানে বিকাশকারী এটির অবস্থান দখল করতে প্রতিবেশী বা পিতামাতার উপাদানগুলির মধ্যে একটি সম্পর্ক নির্ধারণ করে৷

কেন স্বয়ংক্রিয় বিন্যাস?

একটি iOS অ্যাপ্লিকেশন ডিজাইন করার সময় আপনাকে নিশ্চিত করতে হবে, আপনি যে UI বিকাশ করছেন তা সমস্ত স্ক্রীনের আকার এবং অভিযোজনের সাথে সমানভাবে সামঞ্জস্যপূর্ণ হওয়া উচিত। আপনি যখন এটি করতে চান তখন স্বয়ংক্রিয় লেআউট কাজে আসে৷

নীচের চিত্রগুলি বিবেচনা করুন। আইফোন 6-এ কেন্দ্রীয়ভাবে রাখা একটি বোতাম, অন্যান্য ডিভাইসের সাথে কেন্দ্রীয়ভাবে সারিবদ্ধ নয় এটি বিভিন্ন iOS ডিভাইসের ভিন্ন মাত্রার কারণে। এই পোস্টে আমরা সীমাবদ্ধতার উপর ফোকাস করব তাই আপনি যদি মাত্রা সম্পর্কে আরও পড়তে চান তবে আপনি https://iosres.com/

আমরা যে UI ডেভেলপ করেছি তা নিশ্চিত করার জন্য আমরা অটো লেআউট ব্যবহার করতে যাচ্ছি সমস্ত ডিভাইস এবং ওরিয়েন্টেশন জুড়ে অভিন্ন। তো, চলুন শুরু করা যাক।

ধাপ 1 − Xcode খুলুন → নতুন প্রকল্প → একক দৃশ্য অ্যাপ্লিকেশন → আসুন এটির নাম রাখি “অটোলেআউট”

ধাপ 2 − Main.storyboard খুলুন, নীচে দেখানো হিসাবে বোতাম যোগ করুন, রেফারেন্সের জন্য iPhone 7Plus হিসাবে ডিভাইস নির্বাচন করুন৷

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

Xcode অটো লেআউট সীমাবদ্ধতা → অটো লেআউট বার এবং কন্ট্রোল-ড্র্যাগ সংজ্ঞায়িত করার দুটি উপায় প্রদান করে। যদিও আমরা অটো লেআউট বারটি প্রায়শই ব্যবহার করব এবং এই ব্লগেও তবে আমি আপনাকে নিশ্চিত করব কিভাবে কন্ট্রোল-ড্র্যাগ ব্যবহার করতে হয়। ইন্টারফেস বিল্ডারের নীচের ডানদিকে আপনার Xcode-এ আপনি 5টি বোতাম দেখতে পাবেন এই বোতামগুলিকে লেআউট বোতাম হিসাবে পরিচিত যা সীমাবদ্ধতাগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়৷

সুতরাং, এখন আমরা উভয় বোতামে সীমাবদ্ধতা প্রদান করতে অটো লেআউট বার ব্যবহার করব।

মূল তত্ত্ব যার উপর সম্পূর্ণ সীমাবদ্ধতা ব্যবস্থা কাজ করে তা হল 4টি পরামিতি (প্রধান, পিছনে, শীর্ষ এবং নীচে), পাশাপাশি উচ্চতা, প্রস্থ এবং উল্লম্ব এবং অনুভূমিক কেন্দ্রগুলি৷

ধাপ 3 − সারিবদ্ধ করার বোতাম এবং ট্যাবে ক্লিক করুন, নীচে দেখানো হিসাবে অনুভূমিকভাবে এবং উল্লম্বভাবে কন্টেইনারে সক্ষম করুন৷

উভয় সীমাবদ্ধতা যোগ করার পরে আপনি আপনার বোতামটি পর্দার কেন্দ্রে সারিবদ্ধ দেখতে পাবেন।

ঐচ্ছিকভাবে আপনি নিয়ন্ত্রণ ড্র্যাগ বৈশিষ্ট্যের মাধ্যমেও এটি অর্জন করতে পারেন, যেমন নীচে দেখানো হয়েছে, UI উপাদান নির্বাচন করুন, নিয়ন্ত্রণ বোতামে আলতো চাপুন এবং সীমাবদ্ধতা দিতে টেনে আনুন, অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্র দিন৷

পদক্ষেপ 4৷ - এখন আমরা বোতামটির প্রস্থ এবং উচ্চতা নির্ধারণ করব। নীচে দেখানো হিসাবে নতুন সীমাবদ্ধতা বিকল্পটি নির্বাচন করুন এবং উচ্চতা এবং প্রস্থ যোগ করুন৷

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

ধাপ 5 − সুতরাং, আমরা সমস্ত প্রয়োজনীয় সীমাবদ্ধতা প্রদান করেছি, আমাদের সর্বদা 4টি প্রান্তগুলি মনে রাখা উচিত, X-অক্ষের সাথে সারিবদ্ধ করা, Y-অক্ষের সাথে সারিবদ্ধ করা, প্রস্থ এবং উচ্চতা আমাদের UI উপাদানটি জব্দ করতে হবে৷

এখন চলুন বিভিন্ন ডিভাইসে রান করি এবং ফলাফল দেখি। আমরা বিভিন্ন ডিভাইস এবং ওরিয়েন্টেশনে চলব।

আপনি এমনকি সীমাবদ্ধতাগুলি সম্পাদনা করতে পারেন, যদি আপনি একই পরিবর্তন বা অপসারণ করতে চান, ডান ফলকে ইউটিলিটি এলাকায় 5 নম্বর বিকল্পটি নির্বাচন করুন এবং ছবিতে দেখানো হিসাবে নীচে স্ক্রোল করুন৷

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