কীভাবে একটি অ্যান্ড্রয়েড নেভিগেশন উপাদান তৈরি করবেন

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

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

নেভিগেশন কম্পোনেন্টকে হ্যালো বলুন।

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

পাল সেট করতে প্রস্তুত? ⛵️

দড়ি শেখা

ন্যাভিগেশন উপাদানটি অ্যান্ড্রয়েড স্টুডিও 3.3 এবং তার পরে উপলব্ধ। আপনি এটি ব্যবহার করতে, আপনার প্রকল্পে নিম্নলিখিত নির্ভরতা যোগ করুন:

android {
    ...
}

dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.0.0'
    implementation 'androidx.navigation:navigation-ui-ktx:2.0.0'
}

কাজ করার জন্য কিছু করার জন্য, আসুন কল্পনা করি আমরা নিম্নলিখিত কাঠামোর সাথে একটি অ্যাপ্লিকেশন ডিজাইন করেছি:

• স্টার্ট ফ্র্যাগমেন্ট
• খণ্ড A
• খণ্ড বি

ব্যবহারকারী হয় স্টার্ট ফ্র্যাগমেন্ট থেকে ফ্র্যাগমেন্ট এ বা ফ্র্যাগমেন্ট বি-তে যেতে পারেন।

আমরা যদি ন্যাভিগেশন কম্পোনেন্ট ছাড়াই এই সমস্ত কিছু করতে চাই, আমাদের একটি বাটনে ক্লিক করার সময় একটি টুকরো খোলার খুব পরিচিত কোড যোগ করতে হবে৷

val myFragment : MyFragment = MyFragment()
supportFragmentManager.beginTransaction().add(R.id.container, myFragment).commit()

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

সমস্ত জাহাজ

ন্যাভিগেশন কম্পোনেন্ট ব্যবহার শুরু করতে, আমাদের একটি নেভিগেশন গ্রাফ তৈরি করতে হবে। এই গ্রাফটি আমাদের ম্যাপ হিসাবে কাজ করবে, আমাদের অ্যাপ্লিকেশনে ব্যবহারকারীর প্রবাহের রূপরেখা দেবে। একটি তৈরি করতে, রেস ফোল্ডারে ডান ক্লিক করুন এবং একটি নতুন সংস্থান ফাইল তৈরি করুন। আমরা আমাদের নাম দেব:user_flow_graph.xml . ফাইলের ধরনটিকে নেভিগেশন হিসেবে চিহ্নিত করা নিশ্চিত করুন।

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/user_flow_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

আমরা একটি ফ্র্যাগমেন্ট উপাদান যোগ করেছি যা থাকবে যেখানে আমাদের টুকরোগুলি প্রদর্শিত হবে এবং অদলবদল করা হবে। নেভিগ্রাফ -এ মনোযোগ দিন বৈশিষ্ট্য, যা আমরা আমাদের পূর্বে তৈরি করা XML ফাইলের সাথে লিঙ্ক করেছি।

এখন আমাদের একটি প্রারম্ভিক গন্তব্য যোগ করতে হবে, কারণ আমরা না করলে আমাদের অ্যাপ্লিকেশন কম্পাইল হবে না।

user_flow_graph.xml খোলার সাথে, আমাদের নেভিগেশন এডিটরের ছোট প্লাস আইকনে ক্লিক করতে হবে:

পপ আপ হওয়া মেনুতে আপনি দেখতে পাবেন যে আমরা হয় একটি স্থানধারক তৈরি করতে পারি যা পরে পূরণ করতে হবে অথবা আমরা আমাদের কাছে থাকা যেকোনো অংশ থেকে বেছে নিতে পারি:

আমাদের ব্যবহারকারীর প্রবাহ স্টার্ট ফ্র্যাগমেন্ট থেকে শুরু হয়, তাই প্রথমে এটি বেছে নেওয়া যাক।

আসুন আমাদের অন্য দুটি খণ্ড, খণ্ড A এবং খণ্ড B.

আমরা একটি গন্তব্যের উপর ঘোরাঘুরি করার সময় প্রদর্শিত বিন্দুতে ক্লিক করে এবং এটিকে অন্যটিতে টেনে নিয়ে আমরা দুটি গন্তব্য সংযোগ করি৷

আমরা এইমাত্র স্টার্ট ফ্র্যাগমেন্ট এবং খণ্ড A এবং B এর মধ্যে যা তৈরি করেছি, তা হল ক্রিয়া .

শিভার মি টিম্বার

আপনি হয়তো নিজেকে জিজ্ঞাসা করেছেন, যদি শুধুমাত্র গন্তব্যগুলিকে সংযুক্ত করার মাধ্যমে এখানে আমাদের কাজ করা হয় এবং কিছু জাদুকরী উপায়ে, সবকিছু কাজ করবে।

আচ্ছা, এটা হবে না।

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

প্রথমেই আমরা যা করতে যাচ্ছি, তা হল Safe Args নামে একটি গ্রেডল প্লাগইন যোগ করা . আমরা যখন আমাদের গন্তব্যের মধ্যে নেভিগেট করি তখন এটি টাইপ নিরাপত্তা নিশ্চিত করবে।

buildscript {
   /...
    }
    dependencies {
        ...
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.0.0"
        
    }
}

আমাদের অ্যাপ্লিকেশনের build.gradle:

apply plugin: "androidx.navigation.safeargs.kotlin"

এছাড়াও, নিশ্চিত করুন যে android.useAndroidX=true আপনার gradle.properties ফাইলে।

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

• StartFragmentDirections.actionStartFragmentToFragmentA()
• StartFragmentDirections.actionStartFragmentToFragmentB()

এখন যেহেতু আমাদের ক্রিয়াগুলি কোডে অনুবাদ করা হয়েছে, আসুন সেগুলি ব্যবহার করি:

val action = StartFragmentDirections.actionStartFragmentToFragmentA()

এই প্রক্রিয়ার শেষ ধাপে আমাদের NavController ব্যবহার করতে হবে। এই বস্তুটি আমাদের NavHost এর মধ্যে নেভিগেশন পরিচালনার দায়িত্বে রয়েছে। আপনি এই তিনটি পদ্ধতির একটি ব্যবহার করে এটি অ্যাক্সেস করতে পারেন:

• Fragment.findNavController()
• View.findNavController()
• Activity.findNavController(viewId:Int)

সুতরাং, একসাথে রাখুন আমাদের হবে:

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA()
    button.findNavController().navigate(action)
}

আপনার পাল ছাঁটা

যদি আমরা আমাদের গন্তব্যের মধ্যে ডেটা পাস করতে চাই? একটি দৃশ্যকল্প কল্পনা করুন যেখানে ব্যবহারকারী যদি একটি নির্দিষ্ট আইটেমে ক্লিক করে, আমরা আমাদের পরবর্তী গন্তব্যে সেই আইটেমটির সাথে কিছু করতে চাই। যে জন্য, আমাদের গন্তব্য আর্গুমেন্ট আছে. আমাদের user_flow_graph.xml খুলুন এবং ফ্র্যাগমেন্ট A-তে ক্লিক করুন। আপনি ডানদিকে লক্ষ্য করবেন, একটি মেনু যেখানে ফ্র্যাগমেন্ট A-এর বিভিন্ন বৈশিষ্ট্যের বিবরণ রয়েছে। সেই বৈশিষ্ট্যগুলির মধ্যে একটি হবে আর্গুমেন্ট।

একটি যুক্তি যোগ করতে, কেবল ➕ আইকনে ক্লিক করুন৷ একটি পপআপ উইন্ডো খোলে এবং এতে আমরা আমাদের আর্গুমেন্ট কনফিগার করতে পারি। আপনি এটিকে একটি নাম দিতে পারেন, এটির প্রকার চয়ন করতে পারেন এবং একটি ডিফল্ট মান যোগ করতে পারেন৷ ফ্র্যাগমেন্ট A-তে স্ট্রিং টাইপের একটি আর্গুমেন্ট যোগ করা যাক, এটি হবে স্টার্ট ফ্র্যাগমেন্ট থেকে পাস করা বার্তা।

আমাদের স্টার্ট ফ্র্যাগমেন্টে, যেখানে আমরা আমাদের ক্রিয়াকে সংজ্ঞায়িত করেছি এবং জেনারেট করা পদ্ধতিকে কল করছি, আমরা আমাদের যুক্তিতে পাস করব৷

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA("Hello From Start Fragment")
    button.findNavController().navigate(action)
}

ফ্র্যাগমেন্ট A-তে এটি অ্যাক্সেস করতে, আমাদের যেকোনো একটি করতে হবে:

• বান্ডেল অ্যাক্সেস করুন এবং আমাদের বার্তা মান পান

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val bundle = arguments
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = bundle?.getString("message")
        return root
    }
}

• NavArgs ব্যবহার করুন যদি আমরা -ktx নির্ভরতা ব্যবহার করি

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val args : FragmentAArgs by navArgs()
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = args.message
        return root
    }
}

✋ navArgs ব্যবহার করার সময়, আপনাকে আপনার build.gradle ফাইলে Java8 এর জন্য সমর্থন যোগ করতে হবে।

আপনি এই GitHub সংগ্রহস্থলে দেখানো সমস্ত কোড খুঁজে পেতে পারেন।