কীভাবে আপনার অ্যান্ড্রয়েড অ্যাপ তৈরি করা শুরু করবেন:মকআপ, ইউআই এবং এক্সএমএল লেআউট তৈরি করা

Kriptofolio অ্যাপ সিরিজ - পার্ট 2

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

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

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

সিরিজ বিষয়বস্তু

• পরিচয়:2018-2019 সালে একটি আধুনিক অ্যান্ড্রয়েড অ্যাপ তৈরি করার একটি রোডম্যাপ
• পর্ব 1:সলিড নীতিগুলির একটি ভূমিকা
• অংশ 2:কীভাবে আপনার অ্যান্ড্রয়েড অ্যাপ তৈরি করা শুরু করবেন:মকআপ, UI এবং XML লেআউট তৈরি করা (আপনি এখানে আছেন)
• ৩য় খণ্ড:সেই আর্কিটেকচার সম্বন্ধে সমস্ত কিছু:বিভিন্ন আর্কিটেকচার প্যাটার্ন অন্বেষণ করা এবং কীভাবে সেগুলি আপনার অ্যাপে ব্যবহার করবেন
• পার্ট 4:ড্যাগার 2 এর সাথে আপনার অ্যাপে ডিপেনডেন্সি ইনজেকশন কীভাবে প্রয়োগ করবেন
• অংশ 5:Retrofit, OkHttp, Gson, Glide এবং Coroutines ব্যবহার করে RESTful ওয়েব পরিষেবাগুলি পরিচালনা করুন

মকআপগুলি

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

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

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

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

আমার লক্ষ্য ছিল মকআপে সবকিছু সংজ্ঞায়িত করা যেমন এটি শেষ পণ্যে দেখা উচিত। সে জন্য আমি তাড়াহুড়ো না করে যতটা প্রয়োজন ততটা সময় দেওয়ার চেষ্টা করেছি। আমার ক্রিপ্টো কয়েন অ্যাপের জন্য এখানে আমার চূড়ান্ত মকআপ রয়েছে:

স্টক ডিজাইন — উপাদান

আর একটি গুরুত্বপূর্ণ বিষয় হল অ্যাপটির ভিজ্যুয়াল ডিজাইন। এই লেখার সময়, ম্যাটেরিয়াল ডিজাইন হল সমস্ত অ্যান্ড্রয়েড অ্যাপের জন্য Google দ্বারা সুপারিশকৃত স্টক ভিজ্যুয়াল ডিজাইন। এবং অনুমান করুন — আপনি স্টক ডিজাইনের সাথে ভুল করতে পারবেন না।

মাই ক্রিপ্টো কয়েন অ্যাপের জন্য আমরা মেটেরিয়াল ডিজাইন ব্যবহার করব। অ্যাপটি বিশদ অনলাইন নির্দেশিকাতে সংজ্ঞায়িত সেরা অনুশীলনগুলি অনুসরণ করে৷

Material.io/guidelines — অফিসিয়াল ম্যাটেরিয়াল ডিজাইন লিভিং স্পেক্স ডকুমেন্ট যা এই প্রোজেক্টের জন্য আমাদের ডিজাইন নির্দেশিকা হবে।

লেআউট

এখন যখন আমরা ইতিমধ্যেই আমাদের অ্যাপের ওয়্যারফ্রেম প্রস্তুত করে রেখেছি, তখন আসল UI তৈরি করার সময়। আবার আমরা কোড লেখার মধ্যে ঝাঁপিয়ে পড়তে পারি, কিন্তু তাড়াহুড়ো কেন? পরিবর্তে আমি আপনার সমস্ত XML লেআউট তৈরিতে মনোনিবেশ করার পরামর্শ দেব। এখানে আমার পরামর্শ হল যে আপনি XML-এ যত বেশি ব্যবহার করতে পারবেন তত কম কোড লিখতে হবে।

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

অবশেষে আপনি যখন আপনার সমস্ত XML লেআউট তৈরি করবেন, তখন আপনি অনুভব করবেন যে আপনি আপনার অ্যাপটি তৈরি করেছেন। আপনি এটি চালু করতে সক্ষম হবেন এবং দেখতে পাবেন যে এটি শেষ ব্যবহারকারীর জন্য কেমন অনুভব করে। এটা কোন ব্যাপার না যে এটি কিছু জাল ডেটা দেখাচ্ছে এবং কিছুই করে না। এখন আপনার কাছে কিছু কঠোর পরিবর্তন করার শেষ সুযোগ আছে।

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

এই অ্যাপের জন্য আমি বিভিন্ন কম্পোনেন্ট ব্যবহার করব যা সব আধুনিক অ্যান্ড্রয়েড অ্যাপে সাধারণ:

• কোঅর্ডিনেটর লেআউট — একটি সুপার-পাওয়ারড ফ্রেমলেআউট, যার প্রধান আবেদন হল এটির ভিউগুলির অ্যানিমেশন এবং ট্রানজিশন সমন্বয় করার ক্ষমতা।
• AppBarLayout — একটি উল্লম্ব লিনিয়ার লেআউট যা উপাদান ডিজাইনের অ্যাপ বার ধারণার অনেকগুলি বৈশিষ্ট্যকে প্রয়োগ করে, যথা স্ক্রলিং অঙ্গভঙ্গি।
• টুলবার — অ্যাপ্লিকেশন লেআউটের মধ্যে ব্যবহারের জন্য অ্যাকশন বারগুলির একটি সাধারণীকরণ।
• CollapsingToolbarLayout — টুলবারের জন্য একটি মোড়ক যা একটি ভেঙে পড়া অ্যাপ বার প্রয়োগ করে। এটি একটি AppBarLayout এর সরাসরি সন্তান হিসাবে ব্যবহার করার জন্য ডিজাইন করা হয়েছে৷
৷
• ConstraintLayout — একটি ভিউগ্রুপ যা আপনাকে নমনীয় উপায়ে উইজেটগুলির অবস্থান এবং আকার দিতে দেয়। স্টেরয়েডের উপর একটি আপেক্ষিক লেআউট কল্পনা করুন।
• SwipeRefreshLayout — উইজেট যা সোয়াইপ-টু-রিফ্রেশ ইউজার ইন্টারফেস প্যাটার্নকে সম্পূর্ণরূপে প্রয়োগ করার অনুমতি দেয়। এটি উল্লম্ব সোয়াইপ সনাক্ত করে, একটি স্বতন্ত্র অগ্রগতি বার প্রদর্শন করে এবং আপনার অ্যাপে কলব্যাক পদ্ধতিগুলিকে ট্রিগার করে৷
• FloatingActionButton — একটি বৃত্তাকার বোতাম যা আপনার অ্যাপের UI-তে প্রাথমিক অ্যাকশন ট্রিগার করে।

মূল স্ক্রিনের জন্য আমরা চমৎকার UI/UX তৈরি করতে এই সমস্ত উপাদানগুলির সংমিশ্রণ ব্যবহার করব। ব্যবহারকারীরা তাদের সমস্ত ক্রিপ্টোকারেন্সি পোর্টফোলিওর মোট মান খুঁজে বের করতে লেআউটের উপরের অংশটি প্রসারিত এবং সঙ্কুচিত করতে পারে। তারা গত 24 ঘন্টার মধ্যে মান পরিবর্তন করতে পারে এবং নির্বাচিত ফিয়াট মুদ্রা পরিবর্তন করতে পারে।

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

আমি প্রতিটি উপাদান সম্পর্কে কথা বলতে যাচ্ছি না, তবে আমার পরামর্শ হল আপনার নিজেরাই তদন্ত করুন। আমার জন্য সেগুলি বোঝার সর্বোত্তম উপায় হ'ল অ্যান্ড্রয়েড স্টুডিওতে স্বয়ংক্রিয় ড্র্যাগ অ্যান্ড ড্রপ সরঞ্জামগুলি ব্যবহার করার পরিবর্তে ম্যানুয়ালি XML লেআউটগুলি তৈরি করার চেষ্টা করা৷

শৈলী, রং, মাত্রা, স্ট্রিং, আইকন

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

তাই এখানে শুরু থেকেই নতুন ব্যবহারকারীদের ভালোবাসা অর্জনের একটি নিখুঁত সুযোগ রয়েছে। এই আমার টিপস:

• আপনার এক্সএমএল লেআউট ফাইলগুলি তৈরি করার সময়, আপনাকে চিনতে হবে যেখানে আপনি ভিউগুলির জন্য কিছু সাধারণ বৈশিষ্ট্য পুনরাবৃত্তি করছেন৷ আলাদা XML শৈলী হিসাবে সংজ্ঞায়িত করতে তাদের সরান। এইভাবে আপনার কাছে ছোট XML লেআউট ফাইল থাকবে। আপনি একটি পৃথক জায়গা থেকে সমস্ত অ্যাপ স্টাইলিং দিক নিয়ন্ত্রণ করতে পারেন। এটি আপনাকে কী সুবিধা দেবে তা কল্পনা করুন। উদাহরণস্বরূপ, আপনি ব্যবহারকারীকে অ্যাপ স্কিন (উজ্জ্বল, গাঢ়, ইত্যাদি) বেছে নেওয়ার অনুমতি দিতে পারেন।
• একটি পৃথক ফাইলেও আপনার সমস্ত অ্যাপের রঙ সংজ্ঞায়িত করুন, এবং অবিলম্বে তাদের পরিবর্তন করে চেহারা নিয়ে পরীক্ষা করার ক্ষমতা উপভোগ করুন। কখনও কখনও একই পণ্যকে নতুন জীবন দেওয়া যেতে পারে এবং নতুন রঙ দিয়ে কেবল রিফ্রেশ করে ব্যবহারকারীদের আবার যুক্ত করা যেতে পারে। বেশ কয়েকটি ওয়েবসাইট আছে যেগুলি আপনাকে সুন্দর রঙ চয়ন করতে সাহায্য করতে পারে, কিন্তু আমার প্রিয় একটি হল MaterialPalette.com, তাই একবার দেখুন৷
• একটি পৃথক ফাইলে আপনার অ্যাপের মাত্রা সংজ্ঞায়িত করুন। এটি আপনাকে বিভিন্ন আকারের স্ক্রিনে সুন্দর দেখাতে আপনার অ্যাপকে সামঞ্জস্য করার অনুমতি দেবে৷
• আপনার সমস্ত স্ট্রিং হার্ড-কোড করা উচিত নয় এবং আপনি ভুলে গেলে Android স্টুডিও আপনাকে জানাবে। যে উপেক্ষা করবেন না. যখন আপনার স্ট্রিংগুলি আলাদা করা হয় তখন সেরা অংশটি হল আপনি আপনার অ্যাপটিকে বিভিন্ন ভাষায় অনুবাদ করতে পারেন৷
৷
• আপনার অ্যাপের জন্য আইকন ব্যবহার করার সময়, সবসময় একটি XML ভেক্টর অঙ্কনযোগ্য বিন্যাস পছন্দ করুন। এটি নতুন প্রস্তাবিত মান এবং কোনো পিক্সেলেশন এড়াতে যাওয়ার একটি চতুর উপায়। সম্প্রদায় থেকে অনেক পেশাগতভাবে তৈরি উপাদান ডিজাইন শৈলী আইকন খুঁজে পেতে, অনুগ্রহ করে MaterialDesignIcons.com দেখুন। আমি আমার ক্রিপ্টো কয়েন অ্যাপের জন্য আইকন পেতে এই ওয়েবসাইটটি ব্যবহার করেছি৷
৷

RecyclerView

মাই ক্রিপ্টো কয়েন অ্যাপের প্রধান স্ক্রীনে ব্যবহারকারীর কাছে থাকা ক্রিপ্টোকারেন্সির একটি তালিকা থাকবে। এই উদ্দেশ্যে RecyclerView উইজেটটি সবচেয়ে উপযুক্ত। এটি একটি উইজেট যা বড় ডেটা সেটের উপর ভিত্তি করে উপাদানগুলির একটি স্ক্রলিং তালিকা প্রদর্শন করে (বা ঘন ঘন পরিবর্তিত ডেটা)।

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

আমাদের অ্যাপটি দৃশ্যত দেখতে, আমাদের কিছু কোড লিখে RecyclerView প্রয়োগ করতে হবে। এইগুলি হল RecyclerView:

1. একটি RecyclerView উপাদান যোগ করুন।

আমাদের MainActivity লেআউট হল activity_main.xml . এই লেআউটটিতে content_main.xml রয়েছে বিন্যাস যা একটি খণ্ড। এই MainActivityListFragment লেআউট ফুলে যায় fragment_main_list.xml . তাই আপনার এখানে RecyclerView উপাদান যোগ করা উচিত।

...
<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview_fragment_main_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorForMainListBackground"
    android:clipToPadding="false"
    android:paddingBottom="72dp"
    android:paddingTop="5dp"
    android:scrollbarStyle="outsideOverlay"
    android:scrollbars="vertical" />
...

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

2. RecyclerView সারি লেআউট তৈরি করুন।

আমাদের প্রাথমিক উদ্দেশ্যে আমরা শুধুমাত্র প্রতিটি সারির জন্য আইটেমের নাম সেট করব। আমাদের সরলীকৃত লেআউটটি এইরকম হওয়া উচিত।

<android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/main_cardview_list_item_outer_top_bottom_margin"
    android:layout_marginEnd="@dimen/main_cardview_list_item_outer_start_end_margin"
    android:layout_marginStart="@dimen/main_cardview_list_item_outer_start_end_margin"
    android:layout_marginTop="@dimen/main_cardview_list_item_outer_top_bottom_margin"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    app:cardBackgroundColor="@color/colorForMainListItemBackground">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/main_cardview_list_item_inner_margin">
        ...
        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/item_name"
            style="@style/MainListItemPrimeText"
            android:layout_marginEnd="@dimen/main_cardview_list_item_text_between_margin"
            android:layout_marginStart="@dimen/main_cardview_list_item_inner_margin"
            app:layout_constraintBottom_toTopOf="@+id/item_amount_symbol"
            app:layout_constraintEnd_toStartOf="@+id/guideline1_percent"
            app:layout_constraintStart_toEndOf="@+id/item_image_icon"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="spread"
            tools:text="@string/sample_text_item_name" />
        ...
    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

3. ডেটা অ্যাডাপ্টার ক্লাস তৈরি করুন।

আমাদের অ্যাডাপ্টার আপাতত স্ট্রিং ডেটা গ্রহণ করবে। পরে আমাদের আলাদা ক্লাস ডেটা মডেল তৈরি করতে হবে। আমাদের শুধুমাত্র একটি স্ট্রিংয়ের চেয়ে বেশি তথ্য পাস করতে হবে৷

class MainRecyclerViewAdapter(val dataList: ArrayList<String>) : RecyclerView.Adapter<MainRecyclerViewAdapter.CustomViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.fragment_main_list_item, parent, false)
        return CustomViewHolder(v)
    }

    override fun onBindViewHolder(holder: CustomViewHolder, position: Int) {
        holder.txtName?.text = dataList[position]
    }

    override fun getItemCount(): Int {
        return dataList.size
    }


    inner class CustomViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        val txtName = itemView.findViewById<TextView>(R.id.item_name)
    }
}

4. কাস্টম অ্যাডাপ্টারের সাথে RecyclerView সংযোগ করুন৷

class MainActivityListFragment : Fragment() {

    private lateinit var recyclerView: RecyclerView
    private lateinit var recyclerAdapter: MainRecyclerViewAdapter

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        val v: View = inflater.inflate(R.layout.fragment_main_list, container, false)

        recyclerView = v.findViewById(R.id.recyclerview_fragment_main_list)

        return v
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {

        super.onActivityCreated(savedInstanceState)

        setupList()
    }

    private fun setupList() {

        val data = ArrayList<String>()
        data.add("Bitcoin")
        data.add("Etherium")
        data.add("Ripple")
        data.add("Bitcoin Cash")
        data.add("Litecoin")
        data.add("NEO")
        data.add("Stellar")
        data.add("EOS")
        data.add("Cardano")
        data.add("Stellar")
        data.add("IOTA")
        data.add("Dash")
        data.add("Monero")
        data.add("TRON")
        data.add("NEM")
        data.add("ICON")
        data.add("Bitcoin Gold")
        data.add("Zcash")
        data.add("Verge")

        recyclerView.layoutManager = LinearLayoutManager(activity)
        recyclerAdapter = MainRecyclerViewAdapter(data)
        recyclerView.adapter = recyclerAdapter
    }
}

সম্পন্ন! এখন আমাদের প্রধান পর্দা এই মত দেখায়:

লিস্টভিউ

এই প্রজেক্টে, আমরা স্ক্রীনের জন্য ListView ব্যবহার করব যেখানে আপনি ক্রিপ্টো কয়েন (গুলি) যোগ করতে পারেন যা আপনি ইতিমধ্যেই ধরে রেখেছেন। সাম্প্রতিক বছরগুলিতে এর ত্রুটিগুলির কারণে এটি খুব কমই আর ব্যবহার করা হয়।

তাই আমি অনুমান করি যে এই মুহুর্তে আপনারা অনেকেই ভাবছেন যে কেন আমি এটিকে মাই ক্রিপ্টো কয়েন অ্যাপে ব্যবহার করার সিদ্ধান্ত নিয়েছি যখন আমরা রিসাইক্লারভিউ দিয়ে সহজেই একই কার্যকারিতা তৈরি করতে পারি।

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

আসুন লিস্টভিউ বাস্তবায়নের জন্য প্রয়োজনীয় অনুরূপ পদক্ষেপগুলি অনুসরণ করি:

1. একটি ListView উপাদান যোগ করুন।

প্রথম কাজটি হল AddSearchActivity এ একটি ListView যোগ করা . কার্যকলাপ বিন্যাস ফাইল activity_add_search.xml খুলুন এবং আপনি দেখতে পাবেন যে এতে রয়েছে content_add_search.xml . সেখানে আমরা ListView কম্পোনেন্ট যোগ করব।

...
<ListView
    android:id="@+id/listview_activity_add_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical" />
...

2. লিস্টভিউ সারি লেআউট তৈরি করুন।

আগের মত, শুধুমাত্র প্রাথমিক উদ্দেশ্যে, আমরা শুধুমাত্র প্রতিটি সারির জন্য আইটেমের নাম সেট করব। এখানে সরলীকৃত বিন্যাস:

<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/add_search_list_item_inner_margin">
    ...
    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/item_name"
        style="@style/AddSearchListItemPrimeText"
        android:layout_marginEnd="@dimen/add_search_list_item_text_between_margin_2x"
        android:layout_marginStart="@dimen/add_search_list_item_text_between_margin"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/item_symbol"
        app:layout_constraintStart_toEndOf="@+id/item_image_icon"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@string/sample_text_item_name" />
    ...
</android.support.constraint.ConstraintLayout>

3. ডেটা অ্যাডাপ্টার ক্লাস তৈরি করুন।

RecyclerView এর মত আমাদের লিস্টভিউ অ্যাডাপ্টার আপাতত আইটেমের নাম পেতে এবং স্ক্রিনে দেখানোর জন্য শুধুমাত্র স্ট্রিং ডেটা গ্রহণ করবে। পরে আমরা একটি পৃথক ক্লাস ডেটা মডেল ব্যবহার করব। এই অংশের জন্য, আমরা শুধুমাত্র ক্রিপ্টোকারেন্সি শিরোনাম প্রদর্শন করে একটি খুব সাধারণ তালিকা তৈরি করতে চাই। আমাদের কাস্টম অ্যাডাপ্টার তৈরি করার পরিবর্তে আমরা ডিফল্ট, ArrayAdapter ব্যবহার করতে পারি।

class AddSearchListAdapter(context: Context, private val dataSource: ArrayList<String>) : BaseAdapter() {

    private val inflater: LayoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view: View
        val holder: CustomViewHolder

        if (convertView == null) {

            view = inflater.inflate(R.layout.activity_add_search_list_item, parent, false)

            holder = CustomViewHolder()
            holder.nameTextView = view.findViewById(R.id.item_name)

            view.tag = holder

        } else {

            view = convertView
            holder = convertView.tag as CustomViewHolder
        }

        val nameTextView = holder.nameTextView

        nameTextView.text = getItem(position) as String

        return view
    }

    override fun getItem(position: Int): Any {
        return dataSource[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong();
    }

    override fun getCount(): Int {
        return dataSource.size
    }


    inner class CustomViewHolder {
        lateinit var nameTextView: AppCompatTextView
    }

}

আপনি অ্যাডাপ্টার কোডে দেখতে পাচ্ছেন, CustomViewHolder তৈরি করে অবজেক্ট আমি ভিউহোল্ডার প্যাটার্ন ব্যবহার করি। এটি তালিকা সারি দেখার রেফারেন্স সংরক্ষণ করে। findViewById() কল করা হচ্ছে পদ্ধতি মাত্র কয়েকবার ঘটে। এটি আমাদের তালিকা স্ক্রোল করার কাজটি মসৃণ এবং দক্ষতার সাথে করতে দেয়৷

লিস্টভিউ-এর জন্য আমাদের ভিউহোল্ডার প্যাটার্ন ব্যবহার করার প্রয়োজন নেই। রিসাইক্লারভিউ-এর অ্যাডাপ্টার ডিফল্টরূপে আমাদের সেই ধরনের সুরক্ষা দেয়, কারণ এটি আমাদের এটি ব্যবহার করতে বাধ্য করে৷

4. কাস্টম অ্যাডাপ্টারের সাথে লিস্টভিউ সংযুক্ত করুন৷

ডিফল্ট ArrayAdapter এর সাথে এটি দেখতে val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, data) এর মত হতে পারে . এটি ListView উপাদানটির সৌন্দর্য। আপনি যদি চান, আপনি আপনার নিজস্ব অ্যাডাপ্টার বা সারি লেআউট তৈরি না করেই খুব দ্রুত একটি সহজ তালিকা তৈরি করতে পারেন (ধাপ 2 এবং 3 এড়িয়ে যান)।

class AddSearchActivity : AppCompatActivity() {

    private lateinit var listView: ListView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_add_search)
        setSupportActionBar(toolbar2)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)

        val data = ArrayList<String>()
        data.add("Bitcoin")
        data.add("Etherium")
        data.add("Ripple")
        data.add("Bitcoin Cash")
        data.add("Litecoin")
        data.add("NEO")
        data.add("Stellar")
        data.add("EOS")
        data.add("Cardano")
        data.add("Stellar")
        data.add("IOTA")
        data.add("Dash")
        data.add("Monero")
        data.add("TRON")
        data.add("NEM")
        data.add("ICON")
        data.add("Bitcoin Gold")
        data.add("Zcash")
        data.add("Verge")

        val adapter = AddSearchListAdapter(this, data)

        listView = findViewById(R.id.listview_activity_add_search)
        listView.adapter = adapter

    }
    ...
}

লিস্টভিউ সেটআপ প্রস্তুত!

অনুসন্ধান দৃশ্য

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

1. XML-এ অনুসন্ধানযোগ্য কনফিগারেশন ঘোষণা করুন।

অনুসন্ধানযোগ্য কনফিগারেশন ফাইলটি xml নামে আপনার res ডিরেক্টরিতে যোগ করা উচিত। এখানে আপনি আপনার SearchView উপাদানের জন্য বৈশিষ্ট্যগুলি নির্দিষ্ট করতে পারেন যা এটি কীভাবে আচরণ করে তা নির্ধারণ করে৷

<searchable
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:label="@string/app_name"
    android:hint="@string/search_hint">
</searchable>

2. নতুন কার্যকলাপ তৈরি করুন যা আমাদের অনুসন্ধানযোগ্য কার্যকলাপে পরিণত হবে৷

আমরা নতুন ফাঁকা কার্যকলাপ তৈরি করতে যাচ্ছি যা AppCompatActivity() প্রসারিত করে . আমরা এটির নাম দেব AddSearchActivity .

3. অনুসন্ধানযোগ্য হওয়ার জন্য অ্যান্ড্রয়েড ম্যানিফেস্ট ফাইলে নতুন তৈরি কার্যকলাপ নির্দিষ্ট করুন৷

<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.baruckis.mycryptocoins">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
        <activity
            android:name=".AddSearchList.AddSearchActivity"
            android:launchMode="singleTop"
            android:parentActivityName=".MainList.MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.SEARCH" />
            </intent-filter>
            <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable" />
        </activity>
        ...
    </application>

</manifest>

আমরা অ্যান্ড্রয়েড সিস্টেমকে অনুসন্ধান প্রক্রিয়া পরিচালনা করতে দেব। তাই আমরা AddSearchActivity-এর কার্যকলাপের উপাদানে অভিপ্রায় ক্রিয়া অনুসন্ধান এবং মেটা-ডেটা যোগ করি . মেটা-ডেটাতে নাম এবং সংস্থান রয়েছে যা res/xml ফোল্ডারে অবস্থিত অনুসন্ধানযোগ্য কনফিগারেশন ফাইলের সাথে লিঙ্ক করা আছে।

4. সার্চ মেনু তৈরি করুন।

রেস/মেনু ফোল্ডারের ভিতরে আমরা একটি মেনু রিসোর্স ফাইল তৈরি করতে যাচ্ছি।

<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="@string/action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom|collapseActionView" />
</menu>

5. কার্যকলাপে অনুসন্ধান মেনু যোগ করুন।

আমরা একটি মেনু অ্যাকশন ভিউ হিসেবে অ্যান্ড্রয়েড সার্চ উইজেট যোগ করব।

class AddSearchActivity : AppCompatActivity() {
    ...
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {

        menuInflater.inflate(R.menu.menu_search, menu)

        val searchManager = getSystemService(Context.SEARCH_SERVICE) as SearchManager
        val searchView = menu?.findItem(R.id.search)?.actionView as SearchView
        searchView.setSearchableInfo(searchManager.getSearchableInfo(componentName))
        searchView.maxWidth = Integer.MAX_VALUE

        return true
    }
}

এখন সার্চ ভিউ অ্যাক্টিভিটিতে যুক্ত হয়েছে। এখনও অনুসন্ধান কার্যকারিতা কাজ করছে না. কিন্তু আমরা এই অংশের জন্য যেমনটি চেয়েছিলাম আমরা এটি বাস্তবায়ন করেছি।

সেটিংস

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

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

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

1. পছন্দের স্ক্রীন XML ফাইল তৈরি করুন৷

আমরা পছন্দের স্ক্রীন XML ফাইল তৈরি করতে যাচ্ছি যা res/xml ডিরেক্টরিতে স্থাপন করা উচিত।

<PreferenceScreen xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools">
    <PreferenceCategory android:title="@string/pref_general_category_title">
        <ListPreference
            android:defaultValue="@string/pref_default_language_value"
            android:entries="@array/pref_language_list_entries"
            android:entryValues="@array/pref_language_list_values"
            android:icon="@drawable/ic_translate"
            android:key="language_list"
            android:summary="@string/pref_default_language_entry"
            android:title="@string/pref_language_title"
            tools:summary="@string/pref_default_language_entry" />

        <ListPreference
            android:defaultValue="@string/pref_default_fiat_currency_value"
            android:entries="@array/pref_fiat_currency_list_entries"
            android:entryValues="@array/pref_fiat_currency_list_values"
            android:icon="@drawable/ic_cash"
            android:key="fiat_currency_list"
            android:summary="@string/pref_default_fiat_currency_entry"
            android:title="@string/pref_fiat_currency_title"
            tools:summary="@string/pref_default_fiat_currency_entry" />

        <ListPreference
            android:defaultValue="@string/pref_default_date_format_value"
            android:entries="@array/pref_date_format_list_entries"
            android:entryValues="@array/pref_date_format_list_values"
            android:icon="@drawable/ic_date_range"
            android:key="date_format_list"
            android:summary="@string/pref_default_date_format_entry"
            android:title="@string/pref_date_format_title"
            tools:summary="@string/pref_default_date_format_entry" />

        <SwitchPreference
            android:defaultValue="true"
            android:icon="@drawable/ic_calendar_clock"
            android:key="24h_switch"
            android:summary="@string/pref_24h_switch_summary"
            android:title="@string/pref_24h_switch_title" />

    </PreferenceCategory>

    <PreferenceCategory android:title="@string/pref_support_category_title">

        <Preference
            android:icon="@drawable/ic_star"
            android:title="@string/pref_rate_app_title" />

        <Preference
            android:icon="@drawable/ic_share"
            android:title="@string/pref_share_app_title" />

        <Preference
            android:icon="@drawable/ic_attach_money"
            android:summary="@string/pref_donate_view_summary"
            android:title="@string/pref_donate_view_title" />

        <Preference
            android:icon="@drawable/ic_currency_btc"
            android:summary="@string/pref_donate_crypto_summary"
            android:title="@string/pref_donate_crypto_title" />

    </PreferenceCategory>

    <PreferenceCategory android:title="@string/pref_support_about_title">

        <Preference
            android:icon="@drawable/ic_web"
            android:summary="@string/pref_website_summary"
            android:title="@string/pref_website_title" />

        <Preference
            android:icon="@drawable/ic_human_greeting"
            android:summary="@string/pref_author_summary"
            android:title="@string/pref_author_title" />

        <Preference
            android:icon="@drawable/ic_github_circle"
            android:summary="@string/pref_source_summary"
            android:title="@string/pref_source_title" />

        <Preference
            android:icon="@drawable/ic_file_multiple"
            android:title="@string/pref_open_source_title" />

        <Preference
            android:icon="@drawable/ic_copyright"
            android:summary="@string/pref_license_summary"
            android:title="@string/pref_license_title" />

        <Preference
            android:icon="@drawable/ic_info_outline"
            android:summary="@string/pref_app_summary"
            android:title="@string/pref_app_title" />

    </PreferenceCategory>

</PreferenceScreen>

2. পছন্দের খণ্ড তৈরি করুন৷

তারপরে আমাদের একটি সাধারণ ফাঁকা টুকরো তৈরি করা উচিত — SettingsFragment , যা PreferenceFragment() প্রসারিত করা উচিত . এই খণ্ডটি আমাদের তৈরি করা XML সংস্থান থেকে পছন্দগুলি তৈরি করবে। ভবিষ্যতে এই খণ্ডটিতে XML সেটিংস স্ফীত করার জন্য প্রয়োজনীয় সমস্ত পদ্ধতি থাকবে। সেটিংস পরিবর্তন করা হলে এটি কলব্যাকও প্রদান করবে।

class SettingsFragment : PreferenceFragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        addPreferencesFromResource(R.xml.pref_main);
    }
}

3. পছন্দের কার্যকলাপ তৈরি করুন।

সেটিংস ফ্র্যাগমেন্ট তৈরি করে চলুন নতুন কার্যকলাপ তৈরি করি — AppCompatPreferenceActivity , যা PreferenceActivity() প্রসারিত করে . এই ক্লাসটি সমস্ত ডিভাইস এবং সংস্করণ জুড়ে সামঞ্জস্য প্রদান করে৷

abstract class AppCompatPreferenceActivity : PreferenceActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        delegate.installViewFactory()
        delegate.onCreate(savedInstanceState)
        super.onCreate(savedInstanceState)
    }

    override fun onPostCreate(savedInstanceState: Bundle?) {
        super.onPostCreate(savedInstanceState)
        delegate.onPostCreate(savedInstanceState)
    }

    val supportActionBar: ActionBar?
        get() = delegate.supportActionBar

    fun setSupportActionBar(toolbar: Toolbar?) {
        delegate.setSupportActionBar(toolbar)
    }

    override fun getMenuInflater(): MenuInflater {
        return delegate.menuInflater
    }

    override fun setContentView(@LayoutRes layoutResID: Int) {
        delegate.setContentView(layoutResID)
    }

    override fun setContentView(view: View) {
        delegate.setContentView(view)
    }

    override fun setContentView(view: View, params: ViewGroup.LayoutParams) {
        delegate.setContentView(view, params)
    }

    override fun addContentView(view: View, params: ViewGroup.LayoutParams) {
        delegate.addContentView(view, params)
    }

    override fun onPostResume() {
        super.onPostResume()
        delegate.onPostResume()
    }

    override fun onTitleChanged(title: CharSequence, color: Int) {
        super.onTitleChanged(title, color)
        delegate.setTitle(title)
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        delegate.onConfigurationChanged(newConfig)
    }

    override fun onStop() {
        super.onStop()
        delegate.onStop()
    }

    override fun onDestroy() {
        super.onDestroy()
        delegate.onDestroy()
    }

    override fun invalidateOptionsMenu() {
        delegate.invalidateOptionsMenu()
    }

    private val delegate: AppCompatDelegate by lazy {
        AppCompatDelegate.create(this, null)
    }
}

4. সেটিংস কার্যকলাপ তৈরি করুন৷

class SettingsActivity : AppCompatPreferenceActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setupActionBar()

        fragmentManager.beginTransaction().replace(android.R.id.content, SettingsFragment()).commit()
    }

    private fun setupActionBar() {
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }

    override fun onMenuItemSelected(featureId: Int, item: MenuItem): Boolean {
        val id = item.itemId
        if (id == android.R.id.home) {
            if (!super.onMenuItemSelected(featureId, item)) {
                NavUtils.navigateUpFromSameTask(this)
            }
            return true
        }
        return super.onMenuItemSelected(featureId, item)
    }
}

5. প্রধান মেনুতে সেটিংস আইটেম যোগ করুন।

<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    tools:context="com.baruckis.mycryptocoins.MainList.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

6. ওভারফ্লো মেনু থেকে সেটিংস নির্বাচন করা হলে নতুন তৈরি সেটিংস কার্যকলাপ চালু করুন৷

class MainActivity : AppCompatActivity() {
    ...
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.menu_main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.action_settings -> {
                startActivity(Intent(this@MainActivity, SettingsActivity::class.java));
                return true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
}

7. Android ম্যানিফেস্ট ফাইলে নতুন তৈরি সেটিংস কার্যকলাপ নির্দিষ্ট করুন৷

<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.baruckis.mycryptocoins">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
        <activity
            android:name=".Settings.SettingsActivity"
            android:label="@string/title_activity_settings"
            android:parentActivityName=".MainList.MainActivity">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.baruckis.mycryptocoins.MainList.MainActivity" />
        </activity>
    </application>

</manifest>

অভিনন্দন, আপনি অবশেষে টুলবারের মেনু আইটেম থেকে সেটিংস চালু করতে পারেন।

3য় পক্ষের লাইব্রেরি ব্যবহার করা — Gmail স্টাইল ফ্লিপ সার্কেল বোতাম-ভিউ

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

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

আমার ক্রিপ্টো কয়েন অ্যাপের জন্য, এমন একটি পরিস্থিতি রয়েছে যেখানে আমি একটি বৃত্ত চিত্র দৃশ্য তৈরি করতে চাই। এই ছবিতে একটি বৃত্তের আকৃতির মধ্যে একটি নির্দিষ্ট ক্রিপ্টোকারেন্সি আইকন দেখানো উচিত। কিন্তু যদি আইকনটি না থাকে, তাহলে আমি ক্রিপ্টোকারেন্সি কোডের প্রথম তিনটি অক্ষর দেখাতে চাই।

সব ছাড়াও আমি তাদের ক্লিক করে ছবি নির্বাচন করতে সক্ষম হতে চাই. নির্বাচন একটি ছোট ফ্লিপ ভিউ অ্যানিমেশন হিসাবে উপস্থাপন করা উচিত।

আমি যে সমস্ত UX বর্ণনা করেছি তা মূলত আমার দ্বারা উদ্ভাবিত হয়নি। আপনি Gmail অ্যাপে অনুরূপ আচরণ খুঁজে পেতে পারেন এবং এটি সত্যিই ভাল দেখায়।

কিন্তু আমরা কিভাবে এটি তৈরি করব? আসলে, সার্কেল ইমেজ ভিউ এমনকি একটি ডিফল্ট উপাদান নয় যা আপনি অ্যান্ড্রয়েড স্টুডিও উপাদান প্যালেটে খুঁজে পেতে পারেন।

আপনি কঠিন পথে যেতে পারেন এবং সবকিছু নিজেই তৈরি করার চেষ্টা করতে পারেন, তবে এটি সময় এবং শক্তি নষ্ট করতে পারে। পরিবর্তে, আপনি এটির জন্য বিশেষভাবে তৈরি করা অনেকগুলি ওপেন সোর্স লাইব্রেরির মধ্যে একটি বাস্তবায়ন করতে পারেন৷

আমার UI/UX প্রয়োজনীয়তার জন্য, আমি GitHub davideas/FlipView-এ একটি লাইব্রেরি পেয়েছি। কিছু তদন্তের পরে আমি সিদ্ধান্ত নিয়েছি যে এটি সত্যিই পেশাদারভাবে তৈরি করা হয়েছিল। এটি প্রয়োগ করা সহজ এবং এটি চেষ্টা করার জন্য যথেষ্ট দীর্ঘ সমর্থিত। তাই এটি ব্যবহার শুরু করতে, আমরা এই সহজ পদক্ষেপগুলি অনুসরণ করব:

1. নির্ভরতা যোগ করুন।

আপনার প্রকল্পে লাইব্রেরি আমদানি করুন৷

dependencies {
  implementation 'eu.davidea:flipview:1.1.3'
}

2. এটি ব্যবহার করুন৷

অ্যান্ড্রয়েডের স্বাভাবিক এবং কাস্টম অ্যাপ বৈশিষ্ট্যগুলির সাথে ফ্লিপভিউ কনফিগার করুন। এটা কি সহজ নয়?

<android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    ...
        <eu.davidea.flipview.FlipView
            android:id="@+id/item_image_icon"
            style="@style/FlipView"
            android:clickable="true"
            android:focusable="true"
            app:layout_constraintBottom_toTopOf="@+id/item_ranking"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    ...
</android.support.v7.widget.CardView>

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

RTL সমর্থন সহ স্থানীয়করণ

যখন আমি এই অ্যাপটি তৈরি করার সিদ্ধান্ত নিয়েছি, তখন আমি এটিকে শুধুমাত্র একটি ডিফল্ট ইংরেজি UI দিয়ে তৈরি করার জন্যই নয়, বিকাশের শুরু থেকেই এটিকে আমার মাতৃভাষা, লিথুয়ানিয়ান ভাষায় অনুবাদ করার লক্ষ্যও স্থির করেছিলাম।

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

আপনি দেখতে পাবেন যে ইন্টারফেসটি খুব স্বজ্ঞাত। এখন আপনাকে আপনার strings.xml ফাইল থেকে প্রতিটি স্ট্রিং একটি নতুন ভাষায় অনুবাদ করতে হবে। একটি নতুন ফাইল IDE দ্বারা পৃথক ডিরেক্টরিতে তৈরি করা হবে। উদাহরণস্বরূপ, লিথুয়ানিয়ান ভাষার জন্য, এটি হল values-lt/strings.xml . এটাই! ?

আপনি যদি আপনার অ্যান্ড্রয়েড ডিভাইসের সিস্টেমের ভাষা পরিবর্তন করেন যা আপনি এইমাত্র অনুবাদ করেছেন এবং তারপরে আপনার অ্যাপটি চালান, সমস্ত UI স্বয়ংক্রিয়ভাবে আপনার অনুবাদগুলিতে আপডেট হবে৷ তাছাড়া, My Crypto Coins অ্যাপের জন্য, পরে আমি রান-টাইমে ভাষা পরিবর্তন করার ক্ষমতা যোগ করার পরিকল্পনা করি। সেজন্য আপনি সেটিংস স্ক্রিনের ভিতরে ভাষা পরিবর্তনকারীটি লক্ষ্য করবেন।

আপনার অ্যাপটিকে বিভিন্ন ভাষায় অনুবাদ করলে অবশ্যই আপনার শ্রোতা বৃদ্ধি পাবে। আরবি, হিব্রু বা ফার্সি-এর মতো ডান থেকে বাম (RTL) লেখা কয়েকটি বিশেষ ভাষার জন্য সমর্থন যোগ করে কেন আরও এগিয়ে যাবেন না।

আসলে RTL সমর্থন যোগ করা মোটেই কঠিন নয়। শুধু আপনার ম্যানিফেস্ট ফাইলে সমর্থন বৈশিষ্ট্য যোগ করুন:

<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.baruckis.mycryptocoins">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
    </application>

</manifest>

অভিনন্দন, আপনার অ্যাপ এখন আরটিএল সমর্থন করে। যাইহোক আপনি অন্ধভাবে বিশ্বাস করতে পারবেন না যে সবকিছু সরাসরি সঠিকভাবে কাজ করবে। এটি কতটা ভালোভাবে সমর্থন করছে তা আপনার পরীক্ষা করা উচিত। এটি করতে আপনার প্রাথমিক ডিভাইস ভাষা হিসাবে RTL ভাষাগুলির মধ্যে একটি নির্বাচন করুন৷

RTL এর জন্য কিছু টিপস:

• আপনার সমস্ত লেআউটে আপনাকে সমস্ত Left প্রতিস্থাপন করতে হবে এবং Right Start সহ লেআউট বৈশিষ্ট্য এবং End সমতুল্য. যেমন android:paddingLeft android:paddingStart দিয়ে প্রতিস্থাপন করা উচিত .
• আরটিএল-এর জন্য আপনার কাছে বিশেষ অঙ্কনযোগ্য না থাকলে, সম্ভবত আপনি একটি বিশেষ autoMirrored দিয়ে আপনার বর্তমানগুলিকে মিরর করতে চান। বৈশিষ্ট্য।

<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:autoMirrored="true"
    android:tint="@color/colorForPreferenceIcon"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z" />
</vector>

• আরটিএল-এর পরিবর্তে আপনার যদি কিছু নির্দিষ্ট জায়গা থাকে যেখানে আপনার এলটিআর প্রয়োজন, আপনি তাও করতে পারেন। উদাহরণস্বরূপ LTR-এ যেকোন লেআউটকে জোর করতে শুধু android:layoutDirection="ltr" যোগ করুন সেই দৃশ্যে আপনি যদি android:textDirection="ltr" ব্যবহার না করে পাঠ্য দৃশ্যের ভিতরে পাঠ্যের দিকনির্দেশ জোর করতে চান .

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

চূড়ান্ত চিন্তা

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

আপনি যদি এমন কিছু খুঁজে পান যা যথেষ্ট ভালভাবে আচ্ছাদিত নয়, আপনার নিজের গবেষণা করতে এটি একটি জাম্পিং অফ পয়েন্ট হিসাবে ব্যবহার করুন। ওয়েব থেকে শেখার জন্য সর্বদা প্রচুর ভাল সংস্থান রয়েছে৷ ?

ভাণ্ডার

আপনি এখানে এই অংশের জন্য তৈরি করা সমস্ত XML লেআউট এবং কোড খুঁজে পেতে পারেন:

GitHub-এ উৎস দেখুন

অ্যাচিউ! পড়ার জন্য ধন্যবাদ! আমি মূলত এই পোস্টটি আমার ব্যক্তিগত ব্লগ www.baruckis.com-এর জন্য 14 মে, 2018-এ প্রকাশ করেছি।