آموزش پیاده سازی فرگمنت ها (Fragment) در اندروید استودیو

سلام بر عزیزان کدایت من در این بخش از آموزش کاتلین قصد دارم مبحث فرگمنت (Fragment) چیست را برای شما عزیزان توضیح دهیم . همچنین در نظر داریم مانند مباحث قبل Fragment  را با ساخت یک پروژه کوچک بهتر تشریح کنیم.

فرگمنت (Fragment) چیست ؟ و در برنامه نویسی اندروید چه کاربردی دارد.

اول از همه باید این رو بدونیم که فرگمنت یک زیر شاخه یا قسمتی از یک اکتیویتی میباشد . و این به این معنی میباشد که فرگمنت ها درواقع قسمتی از UI یا همان رابط کاربری میباشند .نکته ای که باید بدونید این هست که تمامی رفتار های fragment ها شبیه به اکتیویتی ها میباشد . مثلا یه مانند اکتیویتی یکسری ورودی از کاربر میگیرد و از یک قسمت لایه که همون XML هست و یک لایه برای کد های جاوا تشکیل میشود و ما میتوانیم در یک اکتیویتی از تعدادی زیادی فرگمنت استفاده کنیم.

فرگمنت چیست و چه کارایی در اپلیکیشن های اندرویدی دارد.

در واقع این فرگمنت ها به ما کمک میکنند تا به برنامه خودمون انعطاف پذیری زیادی دهیم . این فرگمنت ها بدون اکتیویتی ها کارایی ندارند یعنی اینکه مستقل نیستندو باید به یک Activity متصل شوند . فرض کنید ما یک صفحه داریم و برای اینکه بتوانیم چندین کار مختلف در این صفحه انجام دهیم بهترین را بدون اینکه اکتیویتی ما درگیری زیادی پیدا کنه و به نوعی Back Stack اون Activity ما کار های بیشتری انجام بدهید باید از fragment ها استفاده کنیم.
به طور مثال فرض کنید اپلیکیشنی مانند اینستاگرام دارید و در یک فرگمنت پست های منشتر شده را مشاهده میکنید در فرگمنت دیگر قسمت explorer خودتون و در بخشی میتوانید پست خود را به اشتراک بگذارید . این ها همه از مزیت های فرگمنت ها میباشد .

آموزش پیاده سازی فرگمنت در اندروید استودیو :

هدف ما امروز بر این هست که ساخت پروژه کوجک به شما عزیزان نشان دهیم که فرگمنت (Fragment) چیست و دقیقا چگونه در برنامه نویسی به ما کمک میکند . ما در این پروژه با استفاده از Fragment چندین صفحه در یک اکتیویتی ایجاد میکنیم و به کمک آن کار هایی که باید در چندین اکتیویتی انجام شود را در یک اکتیویتی و در چندین فرگمنت انجام میدهیم .

ابتدا یک پروژه جدید ایجاد کنید و در لایه XML اکتیویتی خودتون یک FragmentContainerView  و همچنین 3 تا Button برای تغیر وضعیت بین این فرگمنت ها ایجاد کنید . کد این قسمت مانند زیر میباشد .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".fragment">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/Id_fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="4"
        android:padding="10dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/id_fragment1Btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:text="فرگمت 1" />

        <Button
            android:id="@+id/id_fragment2Btn"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:layout_height="wrap_content"
            android:text="فرگمت 2" />

        <Button
            android:id="@+id/id_fragment3Btn"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:layout_height="wrap_content"
            android:text="فرگمت 3" />


    </LinearLayout>

</LinearLayout>

کاری که ما قصد داریم انجام دهیم این هست که با کلیک به روی هر یک از Button ها یکی از فرگمنت ها ظاهر بشود و کار مدنظر مارا انجام دهد . برای همین کار ما باید سه تا لایه XML برای fragment های خودمون ایجاد کنیم . محتوای این فرگمنت ها یکسری اطلاعات مختلفی از کاربران دریافت میکند . برای ایجاد این لایه مانند تصویر زیر عمل کنید .

ساخت لایه XML برای فرگمنت ها در اندروید استودیو

ما مانند تصویر بالا 3 تا لایه XML به نام های fragment 1 , fragment2,fragment3 ایجاد میکنیم و کد های لایه XMl این لایه ها مانند زیر میباشد .

کد های بخش XML فرگمنت ها :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/backgroundColor1"
    android:orientation="vertical"
    android:padding="20dp"
    android:gravity="center"
    >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:gravity="right"
        android:hint="نام"
        android:padding="20dp"
        android:layout_margin="5dp"
        android:background="@drawable/background_edittext"
        android:textColorHint="#FFFFFF" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:gravity="right"
        android:hint="نام خانوادگی"
        android:layout_margin="5dp"

        android:padding="20dp"
        android:background="@drawable/background_edittext"

        android:textColorHint="#FFFFFF" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:gravity="right"
        android:background="@drawable/background_edittext"
        android:layout_margin="5dp"
        android:hint="شماره تلفن"
        android:padding="20dp"
        android:textColorHint="#FFFFFF" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/backgroundColor1"
    android:orientation="vertical"
    android:padding="20dp"
    android:gravity="center"
    >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:gravity="right"
        android:hint="آدرس محل سکونت"
        android:padding="20dp"
        android:layout_margin="5dp"
        android:background="@drawable/background_edittext"
        android:textColorHint="#FFFFFF" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:gravity="right"
        android:hint="آدرس محل کار"
        android:padding="20dp"
        android:background="@drawable/background_edittext"
        android:textColorHint="#FFFFFF" />


</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/backgroundColor1"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="20dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background_edittext"
        android:focusable="true"
        android:gravity="right"
        android:hint="کد پستی"
        android:padding="20dp"
        android:layout_margin="5dp"
        android:textColorHint="#FFFFFF" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background_edittext"
        android:focusable="true"
        android:gravity="right"
        android:hint="پست الکترونیکی"

        android:padding="20dp"
        android:textColorHint="#FFFFFF" />


</LinearLayout>

ما بعد ایجاد لایه های بالا باید کلاس هایی برای نوشتن کد های کاتلین خودمون ایجاد کنیم و من برای نمونه یک کلاس ایجاد میکنم و لایه XMl مربوط به آن وصل میکنیم و شما بقیه کلاس های فرگمنت را مانند آن ایجاد کنید . ابتدا مانند تصویر یک کلاس کاتلین ایجاد کنید و کد های که در قسمت پایین نوشته شده است را برای آن قرار دهید .

ساخت کلاس برای fragment ها

import androidx.fragment.app.Fragment

class Fragment1 : Fragment(R.layout.fragment1) {


}

بقیه کلاس های مربوط به فرگمنت های خودمون رامانند کلاس بالا درست میکنیم حالا نوبت کد های جاوای بخش اکتیویتی ما میباشد . ما باید در این اکتیویتی کاری کنیم که با کلیک به روی هر Button فرگمنت مربوط به جایگزین شود . درواقع ما در یک اکتیویتی از 3 تا fragment استفاده میکنیم تا کار های که بیشتری انجام دهیم . من در این قسمت از ViewBinding استفاده کردم که ابتدا برای لازم است در بخش build.gradle(Module)   کدزیر را وارد سازید . دقت کنید این کد در کنار  بلوک buildTypes و زیر آن قرار دهید .

 buildFeatures{
        viewBinding true
    }

در ادامه بحث فرگمنت (Fragment) چیست ؟ با ما همراه هستید الان نوبت کد های جاوای ما رسیده هست . این کد ها به مانند زیر میباشد .

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.example.stoptimer.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.idFragment1Btn.setOnClickListener {

            replaceFragment(Fragment1())


        }
        binding.idFragment2Btn.setOnClickListener {
            replaceFragment(Fragment2())


        }
        binding.idFragment3Btn.setOnClickListener {
            replaceFragment(Fragment3())


        }

    }

    private fun replaceFragment(fragment: Fragment) {

        val fragmentManager = supportFragmentManager
        val fragmentTransaction = fragmentManager.beginTransaction()
        fragmentTransaction.replace(R.id.Id_fragmentContainer, fragment)
        fragmentTransaction.commit()

    }


}

و اما چیزی که یاد رفته بود برای شما عزیزان بگیم این هست که ما برای EditText های خودمون Shape درست کردیم که کد های آن در قسمت پایین آورده شده است .

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/backgroundColor1"

        />
    <corners
        android:radius="10dp"
        />
    <stroke
        android:width="2dp"
        android:color="@color/white" />


</shape>

خروجی کد های ما به صورت زیر میباشد .

خلاصه مطالب

ما امروز در این پست یاد گرفتیم که فرگمنت (Fragment) چیست ؟ و فهمیدیم که فرگمنت ها درواقع یک زیر مجموعه از اکتیویتی ما میباشد . تا به ما کمک کند تا با استفاده از آنها کارهای زیاد در اکتیویتی خودمون انجام دهیم . و همچنین نکته مهم دیگر این که شما عزیزان میتوانید در یک آکتیویتی از چندیدن Fragment مختلف استفاده کنید و یک فرگمنت را در اکتیویتی های مختلف بسته به نیاز خودتون مورد استفاده قرار دهید و من برای  این مبحث یک پروژه ساده ایجاد کردم تا فهم آن برای شما عزیزان بهتر باشد .

تا مبحثی دیگر خدا یار و همراهتان.

مطالب بیشتر : گریدل چیست ؟ و چگونه مشکل sync گریدل در اندروید استودیو را حل کنیم.