নেভিগেশন এডিটর

Android Studio-তে একটি GUI আছে যা আপনাকে নেভিগেশন গ্রাফ তৈরি ও এডিট করতে দেয়। এটি মূলত অন্তর্নিহিত XML রিসোর্স ফাইলের জন্য একটি এডিটর।

এক নজরে

আপনার অ্যাপে XML গ্রাফ যোগ করার পরে, Android Studio নেভিগেশন এডিটরে গ্রাফটি খোলে। নেভিগেশন এডিটরে, আপনি নেভিগেশন গ্রাফ ভিজ্যুয়ালি এডিট করতে অথবা সরাসরি অন্তর্নিহিত XML এডিট করতে পারবেন।

ছবি ১. নেভিগেশন এডিটর
  1. গন্তব্য প্যানেল: আপনার নেভিগেশন হোস্ট ও গ্রাফ এডিটরে থাকা সব গন্তব্যের তালিকা দেখায়।
  2. গ্রাফ এডিটর: আপনার নেভিগেশন গ্রাফের ভিজ্যুয়াল উপস্থাপনা থাকে। আপনি ডিজাইন ভিউ এবং টেক্সট ভিউতে থাকা অন্তর্নিহিত XML উপস্থাপনার মধ্যে পরিবর্তন করতে পারবেন।
  3. অ্যাট্রিবিউট: নেভিগেশন গ্রাফে বেছে নেওয়া আইটেমের অ্যাট্রিবিউট দেখায়।

সংশ্লিষ্ট XML দেখতে টেক্সট ট্যাবে ক্লিক করুন, এটি নিচে দেওয়া স্নিপেটের মতো দেখাবে:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav_graph">

</navigation>

<navigation> এলিমেন্ট হল নেভিগেশন গ্রাফের মূল এলিমেন্ট। আপনার গ্রাফে ডেস্টিনেশন ও কানেক্টিং অ্যাকশন যোগ করার সাথে সাথে, আপনি এখানে সংশ্লিষ্ট <destination> ও <action> এলিমেন্টকে চাইল্ড এলিমেন্ট হিসেবে দেখতে পাবেন। আপনার নেস্টেড গ্রাফ থাকলে, সেগুলি চাইল্ড <navigation> এলিমেন্ট হিসেবে দেখা যায়।

গন্তব্য যোগ করা

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

এই উদাহরণে দেখানো হয়েছে কীভাবে নতুন গন্তব্য তৈরি করতে হয়। Navigation Editor ব্যবহার করে নতুন গন্তব্য যোগ করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

  1. নেভিগেশন এডিটরে, নতুন গন্তব্য আইকনে ক্লিক করুন এবং তারপরে নতুন গন্তব্য তৈরি করুন বিকল্পে ক্লিক করুন।
  2. নতুন Android কম্পোনেন্ট ডায়ালগে আপনার ফ্র্যাগমেন্ট তৈরি করুন। ফ্র্যাগমেন্ট সম্পর্কে আরও জানতে, ফ্র্যাগমেন্টের ওভারভিউ দেখুন।

নেভিগেশন এডিটরে ফিরে গিয়ে, লক্ষ্য করুন যে Android Studio গ্রাফে এই ডেস্টিনেশন যোগ করেছে।

ছবি ২-এ একটি গন্তব্য ও প্লেসহোল্ডার গন্তব্যের উদাহরণ দেখানো হয়েছে।

ছবি ২. গন্তব্য ও প্লেসহোল্ডার

আপনার নেভিগেশন গ্রাফে গন্তব্য যোগ করার অন্যান্য উপায় জানতে, অতিরিক্ত গন্তব্য দেখুন।

আগে থেকে থাকা ফ্র্যাগমেন্ট বা অ্যাক্টিভিটি থেকে ডেস্টিনেশন তৈরি করা

নেভিগেশন এডিটরে, আপনার যদি এমন কোনও গন্তব্য প্রকার থাকে যা আপনি নেভিগেশন গ্রাফে যোগ করতে চান, তাহলে নতুন গন্তব্য বিকল্পে ক্লিক করুন।

এরপরে, দেখানো ড্রপ-ডাউন মেনু থেকে সংশ্লিষ্ট গন্তব্যে ক্লিক করুন। আপনি এখন ডিজাইন ভিউতে গন্তব্যের প্রিভিউ দেখতে পাবেন। এর সাথে সাথে আপনার নেভিগেশন গ্রাফের টেক্সট ভিউতে সংশ্লিষ্ট XML-ও দেখতে পাবেন।

নতুন ফ্র্যাগমেন্ট ডেস্টিনেশন তৈরি করা

নেভিগেশন এডিটর ব্যবহার করে নতুন গন্তব্য যোগ করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

  1. নেভিগেশন এডিটরে, নতুন গন্তব্য আইকনে ক্লিক করুন।

    এরপরে, নতুন গন্তব্য তৈরি করুন বিকল্পে ক্লিক করুন।

  2. নতুন Android কম্পোনেন্ট ডায়ালগে আপনার ফ্র্যাগমেন্ট তৈরি করুন।

নেভিগেশন এডিটরে ফিরে গিয়ে, লক্ষ্য করুন যে Android Studio গ্রাফে এই ডেস্টিনেশন যোগ করেছে।

ছবি ৩-এ একটি গন্তব্য ও একটি প্লেসহোল্ডার গন্তব্যের উদাহরণ দেখানো হয়েছে।

ছবি ৩. গন্তব্য ও প্লেসহোল্ডার

গন্তব্যের গঠন

কোনও ডেস্টিনেশন বেছে নিতে সেটিতে ক্লিক করুন এবং অ্যাট্রিবিউট প্যানেলে নিম্নলিখিত অ্যাট্রিবিউটগুলি দেখুন:

  • টাইপ ফিল্ড থেকে জানা যায় যে আপনার সোর্স কোডে ডেস্টিনেশনটি ফ্র্যাগমেন্ট, অ্যাক্টিভিটি বা অন্য কাস্টম ক্লাস হিসেবে প্রয়োগ করা হয়েছে কিনা।
  • লেবেল ফিল্ডে গন্তব্যের ব্যবহারকারী-পাঠযোগ্য নাম থাকে। এটি UI-তে দেখানো হতে পারে—যেমন, আপনি NavGraph Toolbar-এর সাথে setupWithNavController() ব্যবহার করে কানেক্ট করলে। এই কারণে, এই ভ্যালুর জন্য রিসোর্স স্ট্রিং ব্যবহার করুন।
  • ID ফিল্ডে গন্তব্য আইডি থাকে, যা কোডে গন্তব্যকে রেফার করার জন্য ব্যবহার করা হয়।
  • ক্লাস ড্রপ-ডাউন মেনুতে সেই ক্লাসের নাম দেখানো হয় যেটি গন্তব্যের সাথে যুক্ত। এই ড্রপ-ডাউনে ক্লিক করে সংশ্লিষ্ট ক্লাসকে অন্য গন্তব্যের ধরনে পরিবর্তন করুন।

আপনার নেভিগেশন গ্রাফের XML ভিউ দেখতে টেক্সট ট্যাবে ক্লিক করুন। XML-এ গন্তব্যের জন্য একই id, name, label ও layout অ্যাট্রিবিউট আছে, যেমন নিচের স্নিপেটে দেখানো হয়েছে:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

এছাড়াও, আপনি নিম্নলিখিত কাজগুলি করে কোনও অ্যাক্টিভিটিতে NavHostFragment যোগ করতে লেআউট এডিটর ব্যবহার করতে পারেন:

  1. প্রজেক্ট ফাইলের তালিকায়, আপনার অ্যাক্টিভিটির লেআউট XML ফাইলে ডবল-ক্লিক করে লেআউট এডিটরে খুলুন।
  2. প্যালেট প্যানেলের মধ্যে, কন্টেনার বিভাগ বেছে নিন; অথবা, "NavHostFragment" সার্চ করুন।
  3. আপনার অ্যাক্টিভিটিতে NavHostFragment ভিউ টেনে আনুন।
  4. নেভিগেশন গ্রাফ ডায়ালগে গিয়ে এই NavHostFragment-এর সাথে যুক্ত সংশ্লিষ্ট নেভিগেশন গ্রাফ বেছে নিন এবং ঠিক আছে বিকল্পে ক্লিক করুন।

গন্তব্য কানেক্ট করা

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

অ্যাকশনের মাধ্যমে, ব্যবহারকারীরা আপনার অ্যাপের মাধ্যমে যে বিভিন্ন পথে যেতে পারেন তা আপনি উপস্থাপন করছেন। মনে রাখবেন যে গন্তব্যে আসলে নেভিগেট করতে, আপনাকে এখনও নেভিগেশন পারফর্ম করার জন্য কোড লিখতে হবে।

আপনি নিম্নলিখিত কাজগুলি করে দুটি গন্তব্য কানেক্ট করতে নেভিগেশন এডিটর ব্যবহার করতে পারেন:

  1. ডিজাইন ট্যাবে, ব্যবহারকারীরা যে গন্তব্য থেকে নেভিগেট করুক বলে আপনি চান সেটির ডানদিকে পয়েন্টারটি হোল্ড করুন। গন্তব্যের ডানদিকে একটি বৃত্ত দেখা যাবে, যেমনটি ৪ নম্বর ছবিতে দেখানো হয়েছে।

    ছবি ৪. অ্যাকশন কানেকশন সহ গন্তব্য বৃত্ত

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

    ছবি ৫. অ্যাকশনের সাথে গন্তব্য কানেক্ট করা

  3. অ্যাকশন হাইলাইট করতে তীরচিহ্নে ক্লিক করুন। অ্যাট্রিবিউট প্যানেলে নিম্নলিখিত অ্যাট্রিবিউটগুলি দেখা যায়:

    • টাইপ ফিল্ডে "অ্যাকশন" আছে।
    • ID ফিল্ডে অ্যাকশনের আইডি থাকে।
    • গন্তব্য ফিল্ডে গন্তব্য ফ্র্যাগমেন্ট বা অ্যাক্টিভিটির আইডি থাকে।

  4. XML ভিউতে টগল করতে টেক্সট ট্যাবে ক্লিক করুন। সোর্স ডেস্টিনেশনে এখন একটি অ্যাকশন এলিমেন্ট যোগ করা হয়েছে। অ্যাকশনের একটি আইডি ও একটি গন্তব্য অ্যাট্রিবিউট আছে যাতে পরবর্তী গন্তব্যের আইডি থাকে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

    xml <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" app:startDestination="@id/blankFragment"> <fragment android:id="@+id/blankFragment" android:name="com.example.cashdog.cashdog.BlankFragment" android:label="@string/label_blank" tools:layout="@layout/fragment_blank" > <action android:id="@+id/action_blankFragment_to_blankFragment2" app:destination="@id/blankFragment2" /> </fragment> <fragment android:id="@+id/blankFragment2" android:name="com.example.cashdog.cashdog.BlankFragment2" android:label="@string/label_blank_2" tools:layout="@layout/fragment_blank_fragment2" /> </navigation>

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

প্লেসহোল্ডার ডেস্টিনেশন

যেসব গন্তব্য এখনও প্রয়োগ করা হয়নি, সেগুলি বোঝাতে আপনি প্লেসহোল্ডার ব্যবহার করতে পারেন। একটি প্লেসহোল্ডার গন্তব্যের ভিজ্যুয়াল উপস্থাপনা হিসেবে কাজ করে। নেভিগেশন এডিটরের মধ্যে, আপনি ঠিক যেভাবে অন্য যেকোনও ডেস্টিনেশন ব্যবহার করেন, সেইভাবেই প্লেসহোল্ডার ব্যবহার করতে পারবেন।