ডেভস বনাম ডিজাইনার: আপনার যা জানা দরকার। পর্ব # 1।

আমরা কিউবার্তোর বিশ্বমানের দেবগণের মুখোমুখি চ্যালেঞ্জগুলি নিয়ে সিরিজ পোস্ট শুরু করছি যেখানে মূলধন ‘ডি’ এর নকশাকে প্রাধান্য দেওয়া হয়। আমরা নন-টেম্পলেট অ্যাপ্লিকেশন বিকাশের অভিজ্ঞতাগুলি ভাগ করব এবং আমাদের ব্যতিক্রমী বিকাশকারীরা কীভাবে উপন্যাসের ধারণাগুলিকে দৃ reality় বাস্তবতায় রূপান্তরিত করে তা আপনাকে একটি ঝলক দেব। দাবি অস্বীকার: আমাদের সমাধানগুলি মোবাইল অ্যাপ্লিকেশন বিকাশের জন্য কোনও গাইড বা রেফারেন্স হওয়ার উদ্দেশ্যে নয়।

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

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

সুতরাং আসুন এই উদাহরণটি একবার দেখুন:

আমরা যা দেখি:

  • বিভাগটির নামের সাথে ইউআইভিউউ নতুন ইউআইভিউউকন্ট্রোলারের শিরোনামে রূপান্তরিত করে।
  • এদিকে, ইউআইভিউ-র কিছুটা পরিবর্তন (পটভূমি এবং ফন্টের রঙ)।
  • বাকি বিভাগগুলি সহ ইউআইভিউগুলি নির্বাচিত ইউআইভিউয়ের পিছনে নিচের দিকে উড়ে যায়।

উন্নয়নের সময় আমরা আর কী বিবেচনা করেছি:

  • স্ক্রোলটি যে কোনও পজিশনে থাকতে পারে।
  • যে কোনও ধরণের বিভাগ থাকতে পারে। এই উদাহরণে, আমরা কেবল তিনটিতে ফোকাস করছি।
  • অ্যানিমেশনটি কেবল আইফোন 8-তে নয়, সমস্ত অ্যাপল ডিভাইসে সুন্দরভাবে কাজ করতে হবে।

এটি শিরোনাম (শিরোনাম, প্রোফাইল বোতাম), UITableViewCells (বিভাগ) এবং একটি পাদচরণ সহ ইউআইটিএবলভিউয়ের মতো দেখাচ্ছে। অবশ্যই, এটির সমস্ত জাদুতে ইউআইকোলিকেশনভিউ ব্যবহার করা সম্ভব তবে এই ক্ষেত্রে এটি কেবল একটি অযথা জটিলতা হত।

বাক্সের বাইরে ইউআইটিএবলভিউ ব্যবহার করা কেন ভাল ধারণা:

  • স্ক্রোল করুন (হ্যাঁ, এটি সুস্পষ্ট)
  • কক্ষের সীমাহীন সংখ্যা।
  • টানুন-টু-রিফ্রেশ করুন।
  • আমরা একই ইউআইভিউ ঘরের ভিতরে রাখতে পারি, যেমন এটি দ্বিতীয় স্ক্রিনের শিরোনামে ছিল।

শিরোলেখ এবং পাদলেখের পরিবর্তে কক্ষগুলি ব্যবহার করা সম্ভব, তবে আমরা আগে থেকেই জানতাম যে সেগুলি কেবল একবার ব্যবহার করা হবে, তাই একাধিক ঘরের প্রকার তৈরি করার বিষয়টি খুব কম বোঝা যায়।

আমরা একটি কাজের যাত্রাপথ একসাথে রেখেছি এবং আমাদের যা করতে হয়েছিল তা এখানে:

1. নির্বাচিত ঘরের উপস্থিতি (অন্ধকার থেকে আলো) পরিবর্তন করা হচ্ছে।

২. নির্বাচিত ঘরের অবস্থান পরিবর্তন করা (এটিকে একটি শিরোনামে রূপান্তর করা)।

৩. অবশিষ্ট কোষের অবস্থান পরিবর্তন করা (কোষগুলি নীচের দিকে সরানো)।

আমাদের ধাপে ধাপে সমাধান:

1. সাধারণ ইউআইভিউ.ট্রান্সিশন দিয়ে প্রকৃত ইউআইভিউতে ঘরের উপস্থিতি অ্যানিমেট করা সম্ভব।

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

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

কোডে এটি কীভাবে দেখায় এখন তা পরীক্ষা করা যাক।

একটি নির্বাচিত ঘরের উপস্থিতি পরিবর্তন করা:

// সর্বজনীন ইউআইভিউ পদ্ধতি, যা ঘরে রয়েছে।
ফানক সেট স্টাইল (_ স্টাইল: স্টাইল) {
         স্ব.স্টাইল = শৈলী
 
         স্যুইচ শৈলী
                    কেস। লাইট কনটেন্ট:
                                lblTitle.fontColor =। সাদা
                                ভিউ.ব্যাকগ্রাউন্ড কালার =। ব্ল্যাক
                    কেস। ডার্ক কনটেন্ট:
                                lblTitle.fontColor =। ব্ল্যাক
                                ভিউ.ব্যাকগ্রাউন্ড কালার =। হোয়াইট
         }
}

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

একটি নির্বাচিত ঘরের অবস্থান পরিবর্তন করা:

/ *
এই কোডটি লক্ষ্যমাত্রা ইউআইভিউউকন্ট্রোলারে রয়েছে।
 
প্রথমে, আমরা প্রাথমিক ইউআরভিউ কনট্রোলারের ব্যাকগ্রাউন্ডের রঙটিকে স্বচ্ছ করে দিয়েছি, প্রাথমিক নিয়ামকটির নীচে দৃশ্যমান করতে।
 
তারপরে আমরা টার্গেট কন্ট্রোলারের শিরোনাম সহ ইউআইভিউকে প্রাথমিক নিয়ামকের নির্বাচিত সেল পজিশনে স্থানান্তরিত করি। আমরা সেল লিঙ্কটি একটি ট্যাপ দিয়ে লক্ষ্য ইউআইভিউকন্ট্রোলারে রেখেছি।
 
শেষ পর্যন্ত অ্যানিমেশন সহ আমরা ইউআইভিউকন্ট্রোলারের পটভূমির রঙ এবং শিরোনামের অবস্থানটিকে প্রাথমিক অবস্থায় ফিরিয়ে দেব।
* /

ভিউ.ব্যাকগ্রাউন্ড কালার =। ক্লিয়ার
 
ফ্রেম = ভিউ.কনভার্ট (ক্যাটাগরিভিউ.সুপারভিউ থেকে ক্যাটাগরিভিউ.সুপারভিউ) তালিকাভুক্ত করা যাক
 
 
ইউআইভিউ.অ্যানিম্যাট (সহ সময়কাল: আইটেমের সময়সীমা, বিলম্ব: 0, বিকল্পসমূহ: [.কুরভেইজ আউট], অ্যানিমেশন: {
       স্ব.ভিউ.ব্যাকগ্রাউন্ড কালার =। অ্যাপবিজি কলরার
       স্ব.লিস্টক্যাটরিভিউ.টান্সফর্ম =। ঘটনা
 
})

কক্ষের অবস্থান পরিবর্তন করা:

কোষগুলিকে = কোষের জন্যঅ্যানিমেশন.ফিল্টার দিন {! is 0.এই নির্বাচিত}
tappedListCategoryView? .alpha = 0
আইটেমডিলে = সময়কাল / সময় অন্তর্ভুক্তি (3 * সর্বোচ্চ (1, সেলস কোড)
)
আইটেমটির সময়সীমা = সময়কাল - আইটেমডিলে * টাইম আন্তঃকাল (সর্বোচ্চ (1, সেলস কোড)
 - 1)
(সূচী, ঘর) জন্য ঘরগুলিতে.বিপরীত ()। গণিত () {
        ইউআইভিউ.অ্যানিম্যাট (সহ সময়কাল: আইটেম সময়কাল, বিলম্ব:
        টাইমইন্টারভাল (সূচক) * আইটেমডিলে, বিকল্পগুলি: [। কার্ভএজআউট],
        অ্যানিমেশন: {
                  সেল কন্টেন্টভিউ.সুবভিউস.ফার্স্ট।। ট্রান্সফর্ম =
        সিজিএফাইন ট্রান্সফর্ম (অনুবাদ এক্স: 0, y:
        স্ব-টেবিলভিউ.রোহাইট * 1.25)
        })
}

আমরা বেশ কয়েকটি কারণে বিপরীত অ্যানিমেশন তৈরি করি নি:

  1. টার্গেট ইউআইভিউউকন্ট্রোলারের তালিকার অনেকগুলি উপাদান রয়েছে। এর অর্থ হ'ল মূল স্ক্রিনে ফিরে আসার সময়, ব্যবহারকারী শিরোনামের বাইরেও শিরোনামটি স্ক্রোল করতে পারে এবং শিরোনামটি ঘরে কীভাবে রূপান্তর করা যায় তা স্পষ্ট নয়।
  2. ইন্টারেক্টিভ-পপ-অঙ্গভঙ্গিতে একটি বিপরীত অ্যানিমেশন প্রয়োগ করুন একটি দীর্ঘ, কঠিন প্রক্রিয়া প্রয়োজন। ইন্টারেক্টিভ-পপ-অঙ্গভঙ্গির জন্য এবং পিছনের বোতামটির জন্য আলাদা অ্যানিমেশন তৈরি করা যাইহোক, সেরা ধারণা নয়।

কিউবার্তো যা ঘটেছে তার মধ্যে একটি সহজ অ্যানিমেশন উদাহরণ আমরা প্যাক করে ফেলেছি। আমাদের পরবর্তী পোস্টে কিছুটা আরও বিস্তৃত এবং সার্বজনীন বৈশিষ্ট্যযুক্ত।

কিউবার্তো সৃজনশীল ওয়েবসাইট এবং মোবাইল অ্যাপ্লিকেশনগুলিতে প্রবণতা সেট করে। ডিজিটাল এবং মোবাইল দক্ষতা আমাদের পুরষ্কার-বিজয়ী ডিজাইন এবং উদ্ভাবনী উচ্চ-آخر পণ্যগুলিকে শক্তি দেয়। [email protected]

ড্রিবল এবং ইনস্টাগ্রামে আমাদের অনুসরণ করুন