অ্যান্ড্রয়েড কোটলিন ফান্ডামেন্টালস 05.3: ভিউমডেল এবং লাইভডেটার সাথে ডেটা বাইন্ডিং

এই কোডল্যাবটি Android Kotlin Fundamentals কোর্সের অংশ। আপনি যদি কোডল্যাবগুলি ক্রমানুসারে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন৷ সমস্ত কোর্স কোডল্যাব অ্যান্ড্রয়েড কোটলিন ফান্ডামেন্টাল কোডল্যাব ল্যান্ডিং পৃষ্ঠায় তালিকাভুক্ত করা হয়েছে।

ভূমিকা

এই পাঠের পূর্ববর্তী কোডল্যাবগুলিতে, আপনি GuessTheWord অ্যাপের কোড উন্নত করেছেন। অ্যাপটি এখন ViewModel অবজেক্ট ব্যবহার করে, তাই অ্যাপ ডেটা ডিভাইস-কনফিগারেশন পরিবর্তন যেমন স্ক্রিন ঘূর্ণন এবং কীবোর্ডের প্রাপ্যতার পরিবর্তন থেকে বেঁচে থাকে। আপনি পর্যবেক্ষণযোগ্য LiveData যোগ করেছেন, তাই যখন পর্যবেক্ষণ করা ডেটা পরিবর্তন হয় তখন ভিউ স্বয়ংক্রিয়ভাবে সূচিত হয়।

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

এছাড়াও আপনি LiveData পর্যবেক্ষক পদ্ধতি ব্যবহার না করেই ডেটার পরিবর্তন সম্পর্কে UI-কে অবহিত করতে ডেটা-বাইন্ডিং উত্স হিসাবে LiveData ব্যবহার করতে GuessTheWord অ্যাপটি পরিবর্তন করেন।

আপনি ইতিমধ্যে কি জানা উচিত

  • কোটলিনে কীভাবে মৌলিক অ্যান্ড্রয়েড অ্যাপ তৈরি করবেন।
  • কার্যকলাপ এবং খণ্ড জীবনচক্র কিভাবে কাজ করে।
  • আপনার অ্যাপে ViewModel অবজেক্টগুলি কীভাবে ব্যবহার করবেন।
  • একটি ViewModel LiveData ব্যবহার করে ডেটা কীভাবে সংরক্ষণ করবেন।
  • LiveData ডেটাতে পরিবর্তনগুলি পর্যবেক্ষণ করতে পর্যবেক্ষক পদ্ধতিগুলি কীভাবে যুক্ত করবেন।

আপনি কি শিখবেন

  • ডেটা বাইন্ডিং লাইব্রেরির উপাদানগুলি কীভাবে ব্যবহার করবেন।
  • ডেটা বাইন্ডিংয়ের সাথে ViewModel কীভাবে একীভূত করবেন।
  • ডাটা বাইন্ডিং এর সাথে LiveData কিভাবে ইন্টিগ্রেট করা যায়।
  • একটি খণ্ডে ক্লিক শ্রোতাদের প্রতিস্থাপন করতে লিসেনার বাইন্ডিং কীভাবে ব্যবহার করবেন।
  • ডেটা-বাইন্ডিং এক্সপ্রেশনে কীভাবে স্ট্রিং ফর্ম্যাটিং যুক্ত করবেন।

আপনি কি করবেন

  • GuessTheWord লেআউটের ভিউ তথ্য রিলে করতে UI কন্ট্রোলার (টুকরা) ব্যবহার করে ViewModel অবজেক্টের সাথে পরোক্ষভাবে যোগাযোগ করে। এই কোডল্যাবে, আপনি অ্যাপের ViewModel অবজেক্টের সাথে আবদ্ধ করেন যাতে ভিউগুলি সরাসরি ViewModel অবজেক্টের সাথে যোগাযোগ করতে পারে।
  • আপনি ডেটা-বাইন্ডিং উত্স হিসাবে LiveData ব্যবহার করতে অ্যাপটি পরিবর্তন করেন। এই পরিবর্তনের পরে, LiveData অবজেক্টগুলি UI-কে ডেটার পরিবর্তন সম্পর্কে অবহিত করে এবং LiveData পর্যবেক্ষক পদ্ধতিগুলির আর প্রয়োজন নেই।

পাঠ 5 কোডল্যাবগুলিতে, আপনি স্টার্টার কোড দিয়ে শুরু করে GuessTheWord অ্যাপ তৈরি করেন। GuessTheWord হল একটি দুই-প্লেয়ার চ্যারেড -স্টাইলের খেলা, যেখানে খেলোয়াড়রা সম্ভাব্য সর্বোচ্চ স্কোর অর্জন করতে সহযোগিতা করে।

প্রথম প্লেয়ার অ্যাপে থাকা শব্দগুলি দেখে এবং পালাক্রমে প্রতিটি কাজ করে, নিশ্চিত করে যে শব্দটি দ্বিতীয় প্লেয়ারকে না দেখায়৷ দ্বিতীয় খেলোয়াড় শব্দটি অনুমান করার চেষ্টা করে।

গেমটি খেলতে, প্রথম প্লেয়ার ডিভাইসে অ্যাপটি খোলে এবং একটি শব্দ দেখতে পায়, উদাহরণস্বরূপ "গিটার", যেমনটি নীচের স্ক্রিনশটে দেখানো হয়েছে৷

প্রথম খেলোয়াড় শব্দটি কার্যকর করে, সতর্কতা অবলম্বন করে যে শব্দটি নিজেই না বলে।

  • যখন দ্বিতীয় প্লেয়ার সঠিকভাবে শব্দটি অনুমান করে, প্রথম প্লেয়ারটি Got It বোতাম টিপে, যা একটি দ্বারা গণনা বৃদ্ধি করে এবং পরবর্তী শব্দটি দেখায়।
  • দ্বিতীয় খেলোয়াড় শব্দটি অনুমান করতে না পারলে, প্রথম খেলোয়াড় স্কিপ বোতাম টিপে, যা সংখ্যা এক করে কমিয়ে পরের শব্দে চলে যায়।
  • গেমটি শেষ করতে, এন্ড গেম বোতাম টিপুন। (এই কার্যকারিতা সিরিজের প্রথম কোডল্যাবের জন্য স্টার্টার কোডে নেই।)

এই কোডল্যাবে, আপনি ViewModel অবজেক্টে LiveData এর সাথে ডেটা বাইন্ডিং সংহত করে GuessTheWord অ্যাপটিকে উন্নত করেন। এটি লেআউটের ভিউ এবং ViewModel অবজেক্টের মধ্যে যোগাযোগকে স্বয়ংক্রিয় করে এবং এটি আপনাকে LiveData ব্যবহার করে আপনার কোডকে সরল করতে দেয়।

শিরোনাম পর্দা

খেলা পর্দা

স্কোর স্ক্রীন

এই কাজটিতে, আপনি এই কোডল্যাবের জন্য আপনার স্টার্টার কোডটি সনাক্ত করুন এবং চালান। আপনি আপনার স্টার্টার কোড হিসাবে পূর্ববর্তী কোডল্যাবে তৈরি করা GuessTheWord অ্যাপটি ব্যবহার করতে পারেন, অথবা আপনি একটি স্টার্টার অ্যাপ ডাউনলোড করতে পারেন।

  1. (ঐচ্ছিক) আপনি যদি আগের কোডল্যাব থেকে আপনার কোড ব্যবহার না করেন, তাহলে এই কোডল্যাবের জন্য স্টার্টার কোডটি ডাউনলোড করুন । কোডটি আনজিপ করুন এবং অ্যান্ড্রয়েড স্টুডিওতে প্রকল্পটি খুলুন।
  2. অ্যাপটি চালান এবং গেমটি খেলুন।
  3. লক্ষ্য করুন যে Got It বোতামটি পরবর্তী শব্দটি দেখায় এবং একটি দ্বারা স্কোর বাড়ায় যখন Skip বোতামটি পরবর্তী শব্দটি প্রদর্শন করে এবং একটি দ্বারা স্কোর হ্রাস করে। এন্ড গেম বোতামটি গেমটি শেষ করে।
  4. সমস্ত শব্দের মধ্যে দিয়ে সাইকেল করুন, এবং লক্ষ্য করুন যে অ্যাপটি স্বয়ংক্রিয়ভাবে স্কোর স্ক্রিনে নেভিগেট করে।

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

বর্তমান অ্যাপ আর্কিটেকচার

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

উদাহরণ স্বরূপ:

  • Got It বোতামটিকে game_fragment.xml লেআউট ফাইলে একটি Button ভিউ হিসাবে সংজ্ঞায়িত করা হয়েছে।
  • ব্যবহারকারী যখন গট ইট বোতামে ট্যাপ করে, GameFragment ফ্র্যাগমেন্টের একজন ক্লিক শ্রোতা GameViewModel এ সংশ্লিষ্ট ক্লিক শ্রোতাকে কল করে।
  • GameViewModel এ স্কোর আপডেট করা হয়েছে।

Button ভিউ এবং GameViewModel সরাসরি যোগাযোগ করে না—তাদের জন্য GameFragment থাকা ক্লিক শ্রোতার প্রয়োজন।

ভিউমডেল ডেটা বাইন্ডিং-এ পাস করা হয়েছে

এটি সহজ হবে যদি লেআউটের ভিউগুলি মধ্যস্থতাকারী হিসাবে UI কন্ট্রোলারের উপর নির্ভর না করে ViewModel অবজেক্টের ডেটার সাথে সরাসরি যোগাযোগ করে।

ViewModel অবজেক্টগুলি GuessTheWord অ্যাপে সমস্ত UI ডেটা ধারণ করে৷ ViewModel অবজেক্টগুলিকে ডেটা বাইন্ডিং-এ পাস করে, আপনি ভিউ এবং ViewModel অবজেক্টের মধ্যে কিছু যোগাযোগ স্বয়ংক্রিয় করতে পারেন।

এই টাস্কে, আপনি GameViewModel এবং ScoreViewModel ক্লাসগুলিকে তাদের সংশ্লিষ্ট XML লেআউটের সাথে যুক্ত করেন। এছাড়াও আপনি ক্লিক ইভেন্টগুলি পরিচালনা করতে শ্রোতা বাইন্ডিং সেট আপ করেন৷

ধাপ 1: GameViewModel-এর জন্য ডেটা বাইন্ডিং যোগ করুন

এই ধাপে, আপনি GameViewModel সংশ্লিষ্ট লেআউট ফাইল, game_fragment.xml এর সাথে যুক্ত করেন।

  1. game_fragment.xml ফাইলে, GameViewModel ধরনের একটি ডেটা-বাইন্ডিং ভেরিয়েবল যোগ করুন। আপনার যদি অ্যান্ড্রয়েড স্টুডিওতে ত্রুটি থাকে তবে প্রকল্পটি পরিষ্কার করুন এবং পুনর্নির্মাণ করুন।
<layout ...>

   <data>

       <variable
           name="gameViewModel"
           type="com.example.android.guesstheword.screens.game.GameViewModel" />
   </data>
  
   <androidx.constraintlayout...
  1. GameFragment ফাইলে, GameViewModel ডেটা বাইন্ডিং-এ পাস করুন।

    এটি করার জন্য, binding.gameViewModel ভেরিয়েবলে viewModel বরাদ্দ করুন, যা আপনি পূর্ববর্তী ধাপে ঘোষণা করেছেন। viewModel শুরু হওয়ার পরে, onCreateView onCreateView() এর ভিতরে এই কোডটি রাখুন। আপনার যদি অ্যান্ড্রয়েড স্টুডিওতে ত্রুটি থাকে তবে প্রকল্পটি পরিষ্কার করুন এবং পুনর্নির্মাণ করুন।
// Set the viewmodel for databinding - this allows the bound layout access 
// to all the data in the ViewModel
binding.gameViewModel = viewModel

ধাপ 2: ইভেন্ট পরিচালনার জন্য লিসেনার বাইন্ডিং ব্যবহার করুন

লিসেনার বাইন্ডিং হল বাইন্ডিং এক্সপ্রেশন যা onClick() , onZoomIn() , বা onZoomOut() এর মতো ইভেন্ট ট্রিগার করা হলে চলে। লিসেনার বাইন্ডিংগুলি ল্যাম্বডা এক্সপ্রেশন হিসাবে লেখা হয়।

ডেটা বাইন্ডিং একজন শ্রোতা তৈরি করে এবং শ্রোতাকে ভিউতে সেট করে। যখন শোনার জন্য ঘটনা ঘটে, শ্রোতা ল্যাম্বডা অভিব্যক্তিকে মূল্যায়ন করে। লিসেনার বাইন্ডিংগুলি Android Gradle Plugin সংস্করণ 2.0 বা উচ্চতর সংস্করণের সাথে কাজ করে৷ আরও জানতে, লেআউট এবং বাইন্ডিং এক্সপ্রেশন পড়ুন।

এই ধাপে, আপনি game_fragment.xml ফাইলে লিসেনার বাইন্ডিং দিয়ে GameFragment এ ক্লিক শ্রোতাদের প্রতিস্থাপন করুন।

  1. game_fragment.xml এ, skip_buttononClick অ্যাট্রিবিউট যোগ করুন। একটি বাঁধাই অভিব্যক্তি সংজ্ঞায়িত করুন এবং GameViewModel-এ GameViewModel onSkip() পদ্ধতিতে কল করুন। এই বাঁধাই অভিব্যক্তি একটি শ্রোতা বাঁধাই বলা হয়.
<Button
   android:id="@+id/skip_button"
   ...
   android:onClick="@{() -> gameViewModel.onSkip()}"
   ... />
  1. একইভাবে, correct_button এর onCorrect () পদ্ধতিতে GameViewModel এর ক্লিক ইভেন্টকে আবদ্ধ করুন।
<Button
   android:id="@+id/correct_button"
   ...
   android:onClick="@{() -> gameViewModel.onCorrect()}"
   ... />
  1. end_game_buttononGameFinish () পদ্ধতিতে GameViewModel এর ক্লিক ইভেন্টকে আবদ্ধ করুন।
<Button
   android:id="@+id/end_game_button"
   ...
   android:onClick="@{() -> gameViewModel.onGameFinish()}"
   ... />
  1. GameFragment এ, ক্লিক শ্রোতাদের সেট করে এমন বিবৃতিগুলি সরান এবং ক্লিক শ্রোতারা যে ফাংশনগুলিকে কল করে সেগুলি সরিয়ে দিন। আপনার আর তাদের প্রয়োজন নেই।

সরানোর জন্য কোড:

binding.correctButton.setOnClickListener { onCorrect() }
binding.skipButton.setOnClickListener { onSkip() }
binding.endGameButton.setOnClickListener { onEndGame() }

/** Methods for buttons presses **/
private fun onSkip() {
   viewModel.onSkip()
}
private fun onCorrect() {
   viewModel.onCorrect()
}
private fun onEndGame() {
   gameFinished()
}

ধাপ 3: ScoreViewModel-এর জন্য ডেটা বাইন্ডিং যোগ করুন

এই ধাপে, আপনি ScoreViewModel কে সংশ্লিষ্ট লেআউট ফাইল, score_fragment.xml এর সাথে যুক্ত করেন।

  1. score_fragment.xml ফাইলে, ScoreViewModel টাইপের একটি বাইন্ডিং ভেরিয়েবল যোগ করুন। এই ধাপটি আপনি উপরের GameViewModel জন্য যা করেছেন তার অনুরূপ।
<layout ...>
   <data>
       <variable
           name="scoreViewModel"
           type="com.example.android.guesstheword.screens.score.ScoreViewModel" />
   </data>
   <androidx.constraintlayout.widget.ConstraintLayout
  1. score_fragment.xml এ, play_again_buttononClick অ্যাট্রিবিউট যোগ করুন। একটি শ্রোতা বাইন্ডিং সংজ্ঞায়িত করুন এবং ScoreViewModel-এ ScoreViewModel onPlayAgain() পদ্ধতিতে কল করুন।
<Button
   android:id="@+id/play_again_button"
   ...
   android:onClick="@{() -> scoreViewModel.onPlayAgain()}"
   ... />
  1. ScoreFragment এ, onCreateView onCreateView() এর ভিতরে, viewModel শুরু করুন। তারপর binding.scoreViewModel বাইন্ডিং ভেরিয়েবল শুরু করুন।
viewModel = ...
binding.scoreViewModel = viewModel
  1. ScoreFragment এ, playAgainButton এর জন্য ক্লিক লিসেনার সেট করে এমন কোডটি সরিয়ে দিন। যদি অ্যান্ড্রয়েড স্টুডিও একটি ত্রুটি দেখায়, প্রকল্পটি পরিষ্কার করুন এবং পুনর্নির্মাণ করুন।

সরানোর জন্য কোড:

binding.playAgainButton.setOnClickListener {  viewModel.onPlayAgain()  }
  1. আপনার অ্যাপ চালান। অ্যাপটি আগের মতো কাজ করা উচিত, কিন্তু এখন বোতামের দৃশ্যগুলি ViewModel অবজেক্টের সাথে সরাসরি যোগাযোগ করে। ScoreFragment বোতাম ক্লিক হ্যান্ডলারের মাধ্যমে ভিউ আর যোগাযোগ করে না।

ডেটা-বাইন্ডিং ত্রুটি বার্তার সমস্যা সমাধান করা

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

আপনি যদি একটি গোপন ত্রুটি বার্তা পান:

  1. অ্যান্ড্রয়েড স্টুডিও বিল্ড প্যানে থাকা বার্তাটি সাবধানে দেখুন। আপনি যদি এমন একটি অবস্থান দেখতে পান যা databinding -এ শেষ হয়, তাহলে ডেটা বাইন্ডিং-এ একটি ত্রুটি রয়েছে৷
  2. লেআউট XML ফাইলে, ডাটা বাইন্ডিং ব্যবহার করে এমন onClick অ্যাট্রিবিউটের ত্রুটিগুলি পরীক্ষা করুন৷ ল্যাম্বডা এক্সপ্রেশন যে ফাংশনটিকে কল করে তা সন্ধান করুন এবং নিশ্চিত করুন যে এটি বিদ্যমান।
  3. XML এর <data> বিভাগে, ডেটা-বাইন্ডিং ভেরিয়েবলের বানান পরীক্ষা করুন।

উদাহরণ স্বরূপ, নিচের অ্যাট্রিবিউট ভ্যালুতে onCorrect() ফাংশনের নামের ভুল বানানটি নোট করুন:

android:onClick="@{() -> gameViewModel.onCorrectx()}"

এছাড়াও XML ফাইলের <data> বিভাগে gameViewModel এর ভুল বানানটি নোট করুন:

<data>
   <variable
       name="gameViewModelx"
       type="com.example.android.guesstheword.screens.game.GameViewModel" />
</data>

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

error: cannot find symbol
import com.example.android.guesstheword.databinding.GameFragmentBindingImpl"

symbol:   class GameFragmentBindingImpl
location: package com.example.android.guesstheword.databinding

ViewModel অবজেক্টের সাথে ব্যবহার করা LiveData এর সাথে ডেটা বাইন্ডিং ভালোভাবে কাজ করে। এখন যেহেতু আপনি ViewModel অবজেক্টে ডেটা বাইন্ডিং যোগ করেছেন, আপনি LiveData অন্তর্ভুক্ত করতে প্রস্তুত।

এই টাস্কে, আপনি LiveData পর্যবেক্ষক পদ্ধতিগুলি ব্যবহার না করেই ডেটার পরিবর্তন সম্পর্কে UI-কে অবহিত করতে ডেটা-বাইন্ডিং উত্স হিসাবে LiveData ব্যবহার করতে GuessTheWord অ্যাপটি পরিবর্তন করেন।

ধাপ 1: game_fragment.xml ফাইলে LiveData শব্দ যোগ করুন

এই ধাপে, আপনি বর্তমান শব্দ টেক্সট ভিউকে সরাসরি ViewModel-এ LiveData অবজেক্টে ViewModel করেন।

  1. game_fragment.xml এ, word_text টেক্সট ভিউতে android:text অ্যাট্রিবিউট যোগ করুন।

বাইন্ডিং ভেরিয়েবল, GameViewModel ব্যবহার করে word থেকে LiveData অবজেক্টে এটি সেট gameViewModel

<TextView
   android:id="@+id/word_text"
   ...
   android:text="@{gameViewModel.word}"
   ... />

লক্ষ্য করুন যে আপনাকে word.value ব্যবহার করতে হবে না। পরিবর্তে, আপনি প্রকৃত LiveData অবজেক্ট ব্যবহার করতে পারেন। LiveData অবজেক্ট word বর্তমান মান প্রদর্শন করে। word মান শূন্য হলে, LiveData অবজেক্ট একটি খালি স্ট্রিং প্রদর্শন করে।

  1. GameFragment এ, onCreateView onCreateView() -এ, gameViewModel শুরু করার পরে, বর্তমান কার্যকলাপকে binding ভেরিয়েবলের জীবনচক্র মালিক হিসাবে সেট করুন। এটি উপরের LiveData অবজেক্টের সুযোগকে সংজ্ঞায়িত করে, অবজেক্টটিকে লেআউট, game_fragment.xml এ স্বয়ংক্রিয়ভাবে ভিউ আপডেট করতে দেয়।
binding.gameViewModel = ...
// Specify the current activity as the lifecycle owner of the binding.
// This is used so that the binding can observe LiveData updates
binding.lifecycleOwner = this
  1. GameFragment এ, LiveData word জন্য পর্যবেক্ষককে সরিয়ে দিন।

সরানোর জন্য কোড:

/** Setting up LiveData observation relationship **/
viewModel.word.observe(this, Observer { newWord ->
   binding.wordText.text = newWord
})
  1. আপনার অ্যাপটি চালান এবং গেমটি খেলুন। এখন বর্তমান শব্দটি UI কন্ট্রোলারে একটি পর্যবেক্ষক পদ্ধতি ছাড়াই আপডেট করা হচ্ছে।

ধাপ 2: score_fragment.xml ফাইলে স্কোর লাইভডেটা যোগ করুন

এই ধাপে, আপনি স্কোর ফ্র্যাগমেন্টের স্কোর টেক্সট ভিউতে LiveData score আবদ্ধ করুন।

  1. score_fragment.xml এ, স্কোর টেক্সট ভিউতে android:text অ্যাট্রিবিউট যোগ করুন। text অ্যাট্রিবিউটে scoreViewModel.score বরাদ্দ করুন। যেহেতু score একটি পূর্ণসংখ্যা, এটিকে String.valueOf() ব্যবহার করে একটি স্ট্রিংয়ে রূপান্তর করুন।
<TextView
   android:id="@+id/score_text"
   ...
   android:text="@{String.valueOf(scoreViewModel.score)}"
   ... />
  1. ScoreFragment এ, scoreViewModel আরম্ভ করার পরে, binding ভেরিয়েবলের লাইফসাইকেল মালিক হিসাবে বর্তমান কার্যকলাপ সেট করুন।
binding.scoreViewModel = ...
// Specify the current activity as the lifecycle owner of the binding.
// This is used so that the binding can observe LiveData updates
binding.lifecycleOwner = this
  1. ScoreFragment , score অবজেক্টের জন্য পর্যবেক্ষককে সরান।

সরানোর জন্য কোড:

// Add observer for score
viewModel.score.observe(this, Observer { newScore ->
   binding.scoreText.text = newScore.toString()
})
  1. আপনার অ্যাপটি চালান এবং গেমটি খেলুন। লক্ষ্য করুন যে স্কোর ফ্র্যাগমেন্টে স্কোরটি সঠিকভাবে প্রদর্শিত হয়েছে, স্কোর খণ্ডে একজন পর্যবেক্ষক ছাড়াই।

ধাপ 3: ডেটা বাইন্ডিংয়ের সাথে স্ট্রিং ফর্ম্যাটিং যোগ করুন

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

  1. string.xml এ, নিম্নলিখিত স্ট্রিংগুলি যোগ করুন, যা আপনি word ফর্ম্যাট করতে এবং টেক্সট ভিউ score করতে ব্যবহার করবেন। %s এবং %d হল বর্তমান শব্দ এবং বর্তমান স্কোরের স্থানধারক।
<string name="quote_format">\"%s\"</string>
<string name="score_format">Current Score: %d</string>
  1. game_fragment.xml এ, quote_format স্ট্রিং রিসোর্স ব্যবহার করতে word_text টেক্সট ভিউ-এর text অ্যাট্রিবিউট আপডেট করুন। gameViewModel.word এ পাস করুন। এটি বর্তমান শব্দটিকে ফরম্যাটিং স্ট্রিং-এ একটি যুক্তি হিসাবে পাস করে।
<TextView
   android:id="@+id/word_text"
   ...
   android:text="@{@string/quote_format(gameViewModel.word)}"
   ... />
  1. word_text এর অনুরূপ score টেক্সট ভিউ ফরম্যাট করুন। game_fragment.xml এ, score_text টেক্সট ভিউতে text অ্যাট্রিবিউট যোগ করুন। স্ট্রিং রিসোর্স score_format ব্যবহার করুন, যা একটি সংখ্যাসূচক আর্গুমেন্ট নেয়, %d স্থানধারক দ্বারা উপস্থাপিত হয়। LiveData অবজেক্টে পাস করুন, score , এই ফর্ম্যাটিং স্ট্রিংটির যুক্তি হিসাবে।
<TextView
   android:id="@+id/score_text"
   ...
   android:text="@{@string/score_format(gameViewModel.score)}"
   ... />
  1. GameFragment ক্লাসে, onCreateView onCreateView() পদ্ধতির ভিতরে, score পর্যবেক্ষক কোডটি সরান।

সরানোর জন্য কোড:

viewModel.score.observe(this, Observer { newScore ->
   binding.scoreText.text = newScore.toString()
})
  1. আপনার অ্যাপটি পরিষ্কার করুন, পুনর্নির্মাণ করুন এবং চালান, তারপর গেমটি খেলুন। লক্ষ্য করুন যে বর্তমান শব্দ এবং স্কোর গেম স্ক্রিনে ফরম্যাট করা হয়েছে।

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

অ্যান্ড্রয়েড স্টুডিও প্রকল্প: GuessTheWord

  • ডেটা বাইন্ডিং লাইব্রেরি ViewModel এবং LiveData মতো অ্যান্ড্রয়েড আর্কিটেকচার উপাদানগুলির সাথে নির্বিঘ্নে কাজ করে৷
  • আপনার অ্যাপের লেআউটগুলি আর্কিটেকচার উপাদানগুলির ডেটার সাথে আবদ্ধ হতে পারে, যা ইতিমধ্যেই আপনাকে UI কন্ট্রোলারের জীবনচক্র পরিচালনা করতে এবং ডেটাতে পরিবর্তনগুলি সম্পর্কে অবহিত করতে সহায়তা করে৷

ViewModel ডেটা বাইন্ডিং

  • আপনি ডেটা বাইন্ডিং ব্যবহার করে একটি লেআউটের সাথে একটি ViewModel যুক্ত করতে পারেন।
  • ViewModel অবজেক্ট UI ডেটা ধরে রাখে। ViewModel অবজেক্টগুলিকে ডেটা বাইন্ডিং-এ পাস করে, আপনি ভিউ এবং ViewModel অবজেক্টের মধ্যে কিছু যোগাযোগ স্বয়ংক্রিয় করতে পারেন।

একটি লেআউটের সাথে একটি ViewModel কীভাবে সংযুক্ত করবেন:

  • লেআউট ফাইলে, ViewModel টাইপের একটি ডেটা-বাইন্ডিং ভেরিয়েবল যোগ করুন।
   <data>

       <variable
           name="gameViewModel"
           type="com.example.android.guesstheword.screens.game.GameViewModel" />
   </data>
  • GameFragment ফাইলে, GameViewModel ডেটা বাইন্ডিং-এ পাস করুন।
binding.gameViewModel = viewModel

লিসেনার বাইন্ডিং

  • লিসেনার বাইন্ডিং হল লেআউটের বাইন্ডিং এক্সপ্রেশন যা onClick() এর মত ক্লিক ইভেন্ট ট্রিগার হলে রান হয়।
  • লিসেনার বাইন্ডিংগুলি ল্যাম্বডা এক্সপ্রেশন হিসাবে লেখা হয়।
  • লিসেনার বাইন্ডিং ব্যবহার করে, আপনি UI কন্ট্রোলারে ক্লিক লিসেনারকে লেআউট ফাইলে লিসেনার বাইন্ডিং দিয়ে প্রতিস্থাপন করেন।
  • ডেটা বাইন্ডিং একজন শ্রোতা তৈরি করে এবং শ্রোতাকে ভিউতে সেট করে।
 android:onClick="@{() -> gameViewModel.onSkip()}"

ডেটা বাইন্ডিং-এ LiveData যোগ করা হচ্ছে

  • LiveData অবজেক্টগুলি ডেটা-বাইন্ডিং সোর্স হিসাবে ব্যবহার করা যেতে পারে যাতে ডেটাতে পরিবর্তনগুলি সম্পর্কে স্বয়ংক্রিয়ভাবে UI কে অবহিত করা যায়।
  • আপনি ViewModel এ সরাসরি LiveData অবজেক্টে ভিউ আবদ্ধ করতে পারেন। যখন LiveData এর ViewModel পরিবর্তিত হয়, তখন UI কন্ট্রোলারে পর্যবেক্ষক পদ্ধতি ছাড়াই লেআউটের ভিউ স্বয়ংক্রিয়ভাবে আপডেট হতে পারে।
android:text="@{gameViewModel.word}"
  • LiveData ডেটা বাইন্ডিং কাজ করতে, UI কন্ট্রোলারে binding ভেরিয়েবলের লাইফসাইকেল মালিক হিসাবে বর্তমান কার্যকলাপ (UI কন্ট্রোলার) সেট করুন।
binding.lifecycleOwner = this

ডাটা বাইন্ডিং সহ স্ট্রিং ফরম্যাটিং

  • ডেটা বাইন্ডিং ব্যবহার করে, আপনি স্ট্রিং এর জন্য %s এবং পূর্ণসংখ্যার জন্য %d এর মত স্থানধারক সহ একটি স্ট্রিং সংস্থান ফর্ম্যাট করতে পারেন।
  • ভিউ-এর text অ্যাট্রিবিউট আপডেট করতে, ফরম্যাটিং স্ট্রিং-এর আর্গুমেন্ট হিসেবে LiveData অবজেক্টে পাস করুন।
 android:text="@{@string/quote_format(gameViewModel.word)}"

উদাসীনতা কোর্স:

অ্যান্ড্রয়েড বিকাশকারী ডকুমেন্টেশন:

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

  • প্রয়োজনে হোমওয়ার্ক বরাদ্দ করুন।
  • শিক্ষার্থীদের সাথে যোগাযোগ করুন কিভাবে হোমওয়ার্ক অ্যাসাইনমেন্ট জমা দিতে হয়।
  • হোমওয়ার্ক অ্যাসাইনমেন্ট গ্রেড.

প্রশিক্ষকরা এই পরামর্শগুলিকে তারা যতটা কম বা যতটা চান ব্যবহার করতে পারেন, এবং তাদের উপযুক্ত মনে করে অন্য কোনও হোমওয়ার্ক বরাদ্দ করতে নির্দ্বিধায় করা উচিত।

আপনি যদি নিজে থেকে এই কোডল্যাবের মাধ্যমে কাজ করে থাকেন, তাহলে আপনার জ্ঞান পরীক্ষা করার জন্য এই হোমওয়ার্ক অ্যাসাইনমেন্টগুলি ব্যবহার করুন।

এই প্রশ্নগুলোর উত্তর দাও

প্রশ্ন 1

নিচের কোন বিবৃতিটি লিসেনার বাইন্ডিং সম্পর্কে সত্য নয় ?

  • লিসেনার বাইন্ডিং হল বাইন্ডিং এক্সপ্রেশন যা কোনো ঘটনা ঘটলে চলে।
  • লিসেনার বাইন্ডিংগুলি Android Gradle প্লাগইনের সমস্ত সংস্করণের সাথে কাজ করে৷
  • লিসেনার বাইন্ডিংগুলি ল্যাম্বডা এক্সপ্রেশন হিসাবে লেখা হয়।
  • লিসেনার বাইন্ডিং মেথড রেফারেন্সের মতই, কিন্তু তারা আপনাকে নির্বিচারে ডেটা-বাইন্ডিং এক্সপ্রেশন চালাতে দেয়।

প্রশ্ন 2

ধরে নিন আপনার অ্যাপটিতে এই স্ট্রিং রিসোর্স রয়েছে:
<string name="generic_name">Hello %s</string>

ডেটা-বাইন্ডিং এক্সপ্রেশন ব্যবহার করে স্ট্রিং ফরম্যাট করার জন্য নিচের কোনটি সঠিক সিনট্যাক্স?

  • android:text= "@{@string/generic_name(user.name)}"
  • android:text= "@{string/generic_name(user.name)}"
  • android:text= "@{@generic_name(user.name)}"
  • android:text= "@{@string/generic_name,user.name}"

প্রশ্ন 3

যখন একটি শ্রোতা-বাঁধাই অভিব্যক্তি মূল্যায়ন এবং চালানো হয়?

  • যখন LiveData দ্বারা রাখা ডেটা পরিবর্তন করা হয়
  • যখন একটি কনফিগারেশন পরিবর্তন দ্বারা একটি কার্যকলাপ পুনরায় তৈরি করা হয়
  • যখন একটি ইভেন্ট যেমন onClick() ঘটে
  • যখন কার্যকলাপ ব্যাকগ্রাউন্ডে যায়

পরবর্তী পাঠ শুরু করুন: 5.4: লাইভডেটা রূপান্তর

এই কোর্সে অন্যান্য কোডল্যাবগুলির লিঙ্কগুলির জন্য, Android Kotlin Fundamentals codelabs ল্যান্ডিং পৃষ্ঠাটি দেখুন।