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

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

در این آموزش ، ما برنامه ای می سازیم که شامل TabLayout ، ViewPager و Fragment ها باشد. در این برنامه عملکردی را پیاده سازی خواهیم کرد که داده را از یک فرگمنت به فرگمنت دیگر منتقل می کند.

Intent ها فقط برای ارسال داده بین اکتیویتی ها قابل استفاده هستند. برای انتقال داده ها بین فرگمنت ها باید اینترفیس های خودمان را ایجاد کنیم. فرایند ارسال داده های رشته ای از یک فرگمنت به فرگمنت دیگر در زیر مشخص شده است.

• FragmentOne (ارسال کننده) : داخل این فرگمنت اینترفیسی با نام SendMessage تعریف شده است. این اینترفیس دارای متدی به نام sendData(String) است. برای ارسال رشته string به FragmentTwo باید متد sendData از اینترفیس SendMessage را فراخوانی کنید.
• MainActiity (انتقال دهنده): این اکتیویتی دارای یک ViewPager است. این ViewPager دارای دو فرگمنت (فرگمنت های FragmentOne و FragmentTwo) است. این اکتیویتی اینترفیس SendMessage را پیاده سازی می کند و در متد sendData ی آن ، string دریافتی را با فراخوانی متد displayReceiedData از فرگمنت FragmentTwo ، به آن منتقل می کند
• FragmentTwo (دریافت کننده): این فرگمنت دارای متدی به نام displayReceiedData(String) است که داده دریافتی را نمایش می دهد.

پیاده سازی فرایند فوق را شروع می کنیم.

ساختار پروژه

کد xml برای کلاس MainActivity.java در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.clicksite.passingdatabetweenfragments.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/MyStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />

    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

استایل های TabLayout و ToolBar همانطور که در زیر نشان داده شده است ، در فایل styles.xml تعریف شده اند:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="MyStyle" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">#FFFF</item>
        <item name="tabIndicatorHeight">5dp</item>
        <item name="tabPaddingStart">8dp</item>
        <item name="tabPaddingEnd">8dp</item>
    </style>

</resources>

ViewPagerAdapter.java جایی است که Fragment ها در آن مقداردهی می شوند. کد در زیر آورده شده است:

// clicksite.ir@gmail.com
public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        if (position == 0) {
            fragment = new FragmentOne();
        } else if (position == 1) {
            fragment = new FragmentTwo();
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        String title = null;
        if (position == 0) {
            title = "Tab-1";
        } else if (position == 1) {
            title = "Tab-2";
        }
        return title;
    }
}

FragmentOne اطلاعات وارد شده در EditText را به FragmentTwo ارسال می کند.

لایوت xml برای fragment_one.xml در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <EditText
            android:id="@+id/inMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/btnPassData"
            android:layout_margin="16dp"
            android:hint="Enter here" />

        <Button
            android:id="@+id/btnPassData"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="PASS DATA TO FRAGMENT TWO" />


    </RelativeLayout>
</ScrollView>

کد لایوت xml برای fragment_two.xml در زیر آورده شده است:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txtData"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_centerInParent="true"
        android:text="No data received" />


</RelativeLayout>

کد کلاس FragmentOne.java در زیر آورده شده است:

// clicksite.ir@gmail.com
package com.clicksite.passingdatabetweenfragments;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;

public class FragmentOne extends Fragment {

    SendMessage SM;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(
                R.layout.fragment_one, container, false);
        return rootView;


    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        Button btnPassData = (Button) view.findViewById(R.id.btnPassData);
        final EditText inData = (EditText) view.findViewById(R.id.inMessage);
        btnPassData.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                SM.sendData(inData.getText().toString().trim());
            }
        });

    }

    interface SendMessage {
        void sendData(String message);
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        try {
            SM = (SendMessage) getActivity();
        } catch (ClassCastException e) {
            throw new ClassCastException("Error in retrieving data. Please try again");
        }
    }
}

اینترفیس سفارشی ما یعنی SendMessage در متد onAttach در بالا مقدار دهی می شود. این رابط در MainActivity.java پیاده سازی می شود که به زودی شاهد آن خواهیم بود.

کد کلاس FragmentTwo.java در زیر آورده شده است:

// clicksite.ir@gmail.com
package com.clicksite.passingdatabetweenfragments;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FragmentTwo extends Fragment {

    TextView txtData;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(
                R.layout.fragment_two, container, false);
        return rootView;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        txtData = (TextView)view.findViewById(R.id.txtData);
    }

    protected void displayReceivedData(String message)
    {
        txtData.setText("Data received: "+message);
    }
}

همانطور که در کد زیر می بینید ، متد DisplayReceivedData از FragmentTwo درون متد sendData ی اینترفیس SendMessage  در اکتیویتی MainActivity  فراخوانی می شود. کد MainActivity به صورت زیر است:

// clicksite.ir@gmail.com
package com.clicksite.passingdatabetweenfragments;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity implements FragmentOne.SendMessage{

    TabLayout tabLayout;
    ViewPager viewPager;
    ViewPagerAdapter viewPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }

    @Override
    public void sendData(String message) {
        String tag = "android:switcher:" + R.id.viewPager + ":" + 1;
        FragmentTwo f = (FragmentTwo) getSupportFragmentManager().findFragmentByTag(tag);
        f.displayReceivedData(message);
    }
}

به محض فشار دادن دکمه در FragmentOne ، متد sendData در کد بالا فعال می شود. ما FragmentTwo را که قبلاً در ViewPagerAdapter مقداردهی شده بود ،  با استفاده از متد findFragmentByTag واکشی می کنیم.

خروجی برنامه فوق در عمل در زیر آورده شده است: