یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36644146

ساخت Fragment در اندروید

انتشار 09 دی 1397
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

Fragment چیست؟

Fragment را می توان بعنوان یک زیر مجموعه و یا یک بخش از اکتیویتی، در نظر گرفت.  Fragment نیز مانند اکتیویتی از دو قسمت xml وjava تشکیل شده.هر اکتیویتی می تواند چندین فرگمنت را در خود جای دهد و هر فرگمنت می تواند در چندین اکتیویتی استفاده شود.بنابراین فرگمنت به تنهایی قابلیت اجرا ندارد.

به عبارت دیگر می توان گفت وقتی می خواهیم در طراحی نرم افزار اندروید اکتیویتی ثابت باشد و تنها قسمتی از اکتیویتی تغییر کند از فرگمنت ها استفاده می کنیم. پس فرگمنت مانند یک برچسب روی اکتیویتی عمل می کند.

ساخت Fragment

برای ساخت Fragment  در اندروید لازم است کتابخانه ای بنام FragNavController را در گردل اد کنیم:

implementation 'com.ncapdevi:frag-nav:2.1.0'

 

در این پروژه سعی داریم دو فرگمنت ایجاد کنیم. ابتدا ظاهر فرگمنت ها را طراحی می کنیم.

یک Layout بنام fragment_one و یک Layout بنام fragment_two ایجاد کنید و سورس کدهای زیر را در آن ها وارد کنید:

fragment_one:

<?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:orientation="vertical"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="number1"/>
    
    
    <Button
        android:id="@+id/btn_fragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="openDialog"  />
 </LinearLayout

Fragment_two:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >
<TextView
 android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="number2"/>

    
<Button
    android:id="@+id/btn_fragment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="openDialog"
    />

</LinearLayout>

 

همانطور که می بینید، ظاهر هر فرگمنت از یک TextView و یک Button تشکیل شده است:

ظاهر فرگمنت ها را طراحی کردیم، حالا  میریم سراغ اکتیویتی که قراره فرگمنت داخل آن نمایش داده شود.

یک اکتیویتی بنام TestFragmentActivity ایجاد کرده و داخل xml آن سورس کد زیر را وارد کنید:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <FrameLayout
        android:id="@+id/fl_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/ll_button_nv">

    </FrameLayout>


 <LinearLayout
        android:id="@+id/ll_button_nv"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="2">

        <Button
            android:id="@+id/btn_openOneFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="number1" />

        <Button
            android:id="@+id/btn_openTwoFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="number2" />
</LinearLayout>
</RelativeLayout>

 

ابتدا یک RelativeLayout با طول و عرض match_parent تعریف می کنیم، سپس یک LinearLayout با طول match_parent و عرض 50 تعریف کرده و داخل آن دو Button قرار می دهیم و layout_alignParentBottom آن را true می کنیم تا پایین صفحه قرار گیرد. برای اینکه اندازه ی دو Button برابر باشد، داخل LinearLayout، weightSum را برابر 2 قرار می دهیم، همچنین داخل Button ها طول را برابر صفر و layout_weight را برابر 1 قرار می دهیم.

برای اینکه یک فرگمنت داخل اکتیویتی قرار دهیم باید یک لایه ی FrameLayout ایجاد کنیم پس یک FrameLayout با طول و عرض match_parent ایجاد کرده وآن را بالای LinearLayout قرار می دهیم.

ظاهر اکتیویتی را هم طراحی کردیم که بصورت زیر می باشد:

کد جاوای Fragment

دو کلاس بنام های OneFragment و TwoFragment ایجاد کرده و سورس کدهای زیر را در آن ها وارد کنید:

OneFragment:

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;



public class OneFragment extends Fragment {

    Button btn_fragment;
    OnTabButtons onTabButtons;

    public static OneFragment newInstance() {

        Bundle args = new Bundle();

        OneFragment fragment = new OneFragment();
        fragment.setArguments(args);
        return fragment;
    }

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

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

        btn_fragment = (Button) view.findViewById(R.id.btn_fragment);

        btn_fragment.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                onTabButtons.onTab();
            }
        });

    }

    
    public interface OnTabButtons{
        public void onTab();
    }

    public OneFragment setOnTabButtons(OnTabButtons onTabButtons){
        this.onTabButtons = onTabButtons;
        return this;
    }
}

TwoFragment:

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;


public class TwoFragment extends Fragment {

    Button btn_fragment;
    OnTabButtons onTabButtons;

    public static TwoFragment newInstance() {

        Bundle args = new Bundle();

        TwoFragment fragment = new TwoFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View fragmentView = inflater.inflate(R.layout.fragment_two , container , false);
        return fragmentView;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        
        btn_fragment = (Button) view.findViewById(R.id.btn_fragment);

        btn_fragment.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onTabButtons.onTab();
            }
        });
    }
    

    public interface OnTabButtons {

        public void onTab();
    }

    public TwoFragment setOnTabButtons(OnTabButtons onTabButtons){
        this.onTabButtons = onTabButtons;
        return this;
    }
}

 

ابتدا باید کلاس را extend کنیم به Fragment سپس Button داخل فرگمنت را تعریف کنیم.

برای ساخت هرفرگمنت به سه متد نیاز داریم:

  • newInstance
  • onCreateView
  • onViewCreated

برای نوشتن این متدها کافیست اسم آن ها را بنویسیم ، بصورت خودکار متدها را برامون میاره.

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

داخل متد onCreateView، با inflater ظاهر فرگمنت را فراخوانی کرده و آن را return می کنیم و در آخر هر کاری که می خواهیم روی فرگمنت انجام دهیم ، داخل متد onViewCreate می نویسیم.

داخل متد  onViewCreate، دکمه ای که برای فرگمنت قرار دادیم findViewById کرده و برای آن setonClickListener می نویسیم.

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

حالا داخل onClick که برای دکمه ی فرگمنت نوشتیم، تابع داخل interface را فراخوانی می کنیم.

همین عملیات را درTwoFragment نیز انجام می دهیم.

کد جاوای Activiity

حالا داخل اکتیویتی که می خواهید فرگمنت در آن نشان داده شود، سورس کد زیر را وارد کنید:

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Switch;
import android.widget.Toast;

import com.elahe.test.fragment.OneFragment;
import com.elahe.test.fragment.TwoFragment;
import com.ncapdevi.fragnav.FragNavController;

public class TestFragmentActivity extends AppCompatActivity {

    Context context = this;
    Button btn_openFrgOne , btn_openFrgTwo;

    FragNavController fragNavController;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_fragment);

        initView();
        onClick();
        initFragment(savedInstanceState);
    }

    private void initFragment(Bundle savedInstanceState) {

        fragNavController =  FragNavController.newBuilder(savedInstanceState , getSupportFragmentManager(),R.id.fl_fragment).transactionListener(new FragNavController.TransactionListener() {
            @Override
            public void onTabTransaction(Fragment fragment, int i) {

            }

            @Override
            public void onFragmentTransaction(Fragment fragment, FragNavController.TransactionType transactionType) {

            }
        }).rootFragmentListener(new FragNavController.RootFragmentListener() {
            @Override
            public Fragment getRootFragment(int i) {

                Fragment fragment = null;

                switch (i) {
                    case FragNavController.TAB1:
                        fragment = OneFragment.newInstance().setOnTabButtons(new OneFragment.OnTabButtons() {
                            @Override
                            public void onTab() {
                                Toast.makeText(context, "OneFragment", Toast.LENGTH_SHORT).show();

                            }
                        });
                        break;

                    case FragNavController.TAB2:
                        fragment = TwoFragment.newInstance().setOnTabButtons(new TwoFragment.OnTabButtons() {
                            @Override
                            public void onTab() {
                                Toast.makeText(context, "TwoFragment", Toast.LENGTH_SHORT).show();
                            }
                        });
                        break;
                }

                return fragment;
            }
        },2).build();
    }

    private void onClick() {

        btn_openFrgOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragNavController.switchTab(FragNavController.TAB1);
            }
        });

        btn_openFrgTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragNavController.switchTab(FragNavController.TAB2);
            }
        });

    }

    private void initView() {

        btn_openFrgOne = (Button) findViewById(R.id.btn_openOneFragment);
        btn_openFrgTwo = (Button) findViewById(R.id.btn_openTwoFragment);
    }


}

 

در این اکتیویتی ابتدا Context و Button ها وکتابخانه  FragNavController را تعریف می کنیم.

برای اینکه کدها نظم بهتری داشته باشند سه متد بنام های initView() وonClick() و initFragment(savedInstanceState) ایجاد کرده و آن ها را در onCreate فراخوانی می کنیم.

داخل متد initView ، Button ها را findViewById می کنیم.داخل متد  onClick برای Button ها setOnClickListener می نویسیم و داخل متد initFragment، کدهای مربوط به فرگمنت را می نویسیم.

برای ساخت فرگمنت، داخل متد initFragment با کد زیر، یک فرگمنت ایجاد می کنیم:

fragNavController =  FragNavController.newBuilder(savedInstanceState , getSupportFragmentManager(),R.id.fl_fragment).transactionListener(new FragNavController.TransactionListener() {

 

وقتی این خط رو نوشتیم دو تا متد onTabTransaction و onFragmentTransaction رو میاره که فعلا به این دو متد کاری نداریم.

بعد از ایمپورت کردن متدها یک خطا نشان داده می شود که برای رفع آن باید بعد ازپرانتز، کد زیر را بنویسیم:

.rootFragmentListener(new FragNavController.RootFragmentListener() {

 

با نوشتن این خط، یک متد بنام getRootFragment ، نوشته می شود که برای مشخص کردن تعداد فرگمنت ها و خود فرگمنت ها می باشد.

داخل متد getRootFragment ، ابتدا یک فرگمنت با مقدار null ایجاد کرده، سپس با دستور switch فرگمنت را مقدار دهی می کنیم.

کتابخانه ی FragNavController، بصورت خودکار 20، Tab ایجاد و آن ها را نام گذاری کرده. پس شماره ی Tab  را از کتابخانه می گیریم و می نویسیم اگر Tab1 بود مقدار فرگمنت را برابر OneFragment و اگرTab2 بود مقدار فرگمنت را برابر TwoFragment قرار دهد:

switch (i) {
    case FragNavController.TAB1:
        fragment = OneFragment.newInstance().setOnTabButtons(new OneFragment.OnTabButtons() {
            @Override
            public void onTab() {
                Toast.makeText(context, "OneFragment", Toast.LENGTH_SHORT).show();
            }
        });
        break;

    case FragNavController.TAB2:
        fragment = TwoFragment.newInstance().setOnTabButtons(new TwoFragment.OnTabButtons() {
            @Override
            public void onTab() {
                Toast.makeText(context, "TwoFragment", Toast.LENGTH_SHORT).show();
            }
        });
        break;
}

 

همچنین با فراخوانی متد     setOnTabButtons از داخل کلاس فرگمنت ، متد داخل interface ایمپورت می شود که این متد مربوط به زمانی است که روی دکمه ی داخل فرگمنت کلیک شود. ما برای آن یک Toast تنظیم کردیم، یعنی با کلیک بر روی دکمه ی داخل فرگمنت این Toast نشان داده می شود.

در آخر fragment را return می کنیم. با خطایی برخورد می کنیم که برای رفع آن باید تیکه کد },2).build();

را بعد از کروشه وارد کنیم که تعداد  فرگمنت را مشخص می کند.

مرحله ی آخر این است که با کلیک بر روی دکمه های داخل اکتیویتی، فرگمنت ها تغییر کنند. بدین منظور به متد() onClick  رفته و با دستور switchTab، مشخص می کنیم با کلیک بر روی هرButton، کدام فرگمنت نشان داده شود:

private void onClick() {

    btn_openFrgOne.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            fragNavController.switchTab(FragNavController.TAB1);
        }
    });

    btn_openFrgTwo.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            fragNavController.switchTab(FragNavController.TAB2);
        }
    });

}

 

ساخت فرگمنت به پایان رسید. با اجرا کردن app ، صفحه ی زیر نشان داده می شود:

 

با کلیک بر روی دکمه های پایین، فرگمنت مربوطه نشان داده می شود.اگر دکمه ی Number2 را کلیک کنید فرگمنت عوض شده و TextView به Number2 تغییر می کند و با کلیک بر روی دکمه ی btn_Fragment یک Toast نشان داده می شود.

این مقاله بصورت انحصاری در تیم توسعه محتوای شرکت طراحی سایت پدیده تجارت ساخته شده.کپی فقط با ذکر منبع مجاز است

نویسنده: الهه ابراهیمی

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

مزایای طراحی اپلیکیشن های IOS مزایای طراحی اپلیکیشن های IOS مقالات موبایل

پدیده تجارت

14 بهمن 1396

اهمیت آموزش افترافکت و یادگیری آن؟ اهمیت آموزش افترافکت و یادگیری آن؟ مقالات برندینگ

پدیده تجارت

15 اسفند 1397

مراحل طراحی وب سایت مراحل طراحی وب سایت مقالات برندینگ

پدیده تجارت

07 آذر 1398

روش های کسب درآمد از طریق تلگرام روش های کسب درآمد از طریق تلگرام مقالات تجارت الکترونیک

پدیده تجارت

16 اسفند 1395

نکاتی برای محبوب شدن در شبکه های اجتماعی نکاتی برای محبوب شدن در شبکه های اجتماعی مقالات برندینگ

پدیده تجارت

17 مرداد 1396

نقش موشن گرافیک در بهبود بازار کسب و کار آنلاین نقش موشن گرافیک در بهبود بازار کسب و کار آنلاین مقالات تجارت الکترونیک

پدیده تجارت

13 شهریور 1397

ساخت Spinner در اندروید استودیو ساخت Spinner در اندروید استودیو مقالات موبایل

پدیده تجارت

04 دی 1397

تفاوت آموزش وردپرس پدیده با دیگر آموزش های خصوصی در چیست؟! تفاوت آموزش وردپرس پدیده با دیگر آموزش های خصوصی در چیست؟! مقالات طراحی وب سایت

پدیده تجارت

09 آبان 1397

نقش طراحی لوگو در معرفی برند نقش طراحی لوگو در معرفی برند مقالات برندینگ

پدیده تجارت

26 آذر 1396

آموزش مجازی دیجیتال مارکتینگ اصفهان آموزش مجازی دیجیتال مارکتینگ اصفهان مقالات برندینگ

پدیده تجارت

26 اسفند 1398

مهارت های برنامه نویس فرانت اند و بک اند مهارت های برنامه نویس فرانت اند و بک اند مقالات طراحی وب سایت

پدیده تجارت

23 آذر 1398

متد اسکرام چیست؟ متد اسکرام چیست؟ مقالات طراحی وب سایت

پدیده تجارت

22 فروردین 1395

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها