[Android] Fragment 예제 (PagerSlidingTabStrip , TabLayout )

안드로이드 Fragment ( TabLayout, PagerSlidingTabStrip )

안드로이드에서 화면이 출력되는 가장 기본이 되는 것은 Activity 이다. 

Fragment는 Activity 내에 생성되는 것이며, UI를 여러 단위로 작성 할 수 있도록 해주는 것이다. 

또한 Fragment는 재사용이 가능하므로 작업량을 감소시킬 수 있다는 장점이 있다.

Fragment는 자체 생명 주기를 가지고, 자체 입력 이벤트를 받으며, 액티비티 실행 중에 추가 및 제가가 가능한 액티비티의 모듈식 섹션이다.

버튼을 눌러 Fragment가 바뀌는 예제 실습

fragment_lotte.xml

AppBarLayout과 TabLayout을 이용하여 탭 부분을 만들었고, ViewPager를 이용하여 각 Fragment를 이동시키도록 구성하였다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LotteFragment">

    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="#0072C6"
            android:src="@mipmap/lotte1"
            android:scaleType="centerCrop"
            />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.TabLayout
                android:id="@+id/sliding_tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/holo_green_dark"
                app:tabIndicatorColor="@android:color/holo_green_light"
                app:tabSelectedTextColor="@android:color/white"
                app:tabMode="fixed"
                app:tabGravity="fill" />


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

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


</LinearLayout>

그리고 세개의 메뉴에 보여질 fragment 3개를 생성한다.

fragment_lotte_fragment1.xml

선수의 이름을 보여주는 리스트뷰

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Lotte.LotteFragment1">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

fragment_lotte_fragment2.xml

경기 일정을 보여주도록 리스트뷰

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Lotte.LotteFragment2">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

fragment_lotte_fragment3.xml

감독의 사진과 이름, 정보

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Lotte.LotteFragment3">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/jo"/>

    <TextView
        android:id="@+id/info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>
</LinearLayout>

</FrameLayout>

레이아웃을 이렇게 생성하고

다음으로 각 프레그먼트와 ViewPager를 만든다.

LotteFragment1.java

package com.ktds.junho.mydrawablelayout.Lotte;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.ktds.junho.mydrawablelayout.R;

import java.util.ArrayList;
import java.util.List;


public class LotteFragment1 extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

    private ListView listView;


    public LotteFragment1() {
        // Required empty public constructor
    }

    public static LotteFragment1 newInstance(String param1, String param2) {
        LotteFragment1 fragment = new LotteFragment1();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }

    }

    private class MyListAdapter extends BaseAdapter {

        private List<String> list;
        private Context context;

        public MyListAdapter(Context context) {
            this.context = context;

            list = new ArrayList<String>();
            list.add("강승현");
            list.add("강영식");
            list.add("권태양");
            list.add("김남길");
            list.add("김성배");
            list.add("김성재");
            list.add("김성호");
            list.add("김영일");


        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Object getItem(int position) {
            return list.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            if ( convertView == null ) {
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.list_item, parent, false);
            }

            TextView textView = (TextView) convertView.findViewById(R.id.textView);
            textView.setText((String)getItem(position));

            textView.setOnClickListener(new TextView.OnClickListener(){
                @Override
                public void onClick(View v) {
                    Toast.makeText(v.getContext(), ((TextView) v).getText() +  "선택함.", Toast.LENGTH_LONG).show();
                }
            });

            return convertView;

        }
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_lotte_fragment1, container, false);

        listView = (ListView) view.findViewById(R.id.listView);
        listView.setAdapter(new MyListAdapter(this.getContext()));

        return view;
    }


}

2와 3도 담은 내용에 따라 비슷하게 생성한다.

LotteFragment.java

package com.ktds.junho.mydrawablelayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.ktds.junho.mydrawablelayout.Lotte.LotteFragment1;
import com.ktds.junho.mydrawablelayout.Lotte.LotteFragment2;
import com.ktds.junho.mydrawablelayout.Lotte.LotteFragment3;

public class LotteFragment extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

    public LotteFragment() {
        // Required empty public constructor
    }

    public static LotteFragment newInstance(String param1, String param2) {
        LotteFragment fragment = new LotteFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    private Fragment galleryFragment1;
    private Fragment galleryFragment2;
    private Fragment galleryFragment3;

    private TabLayout tabLayout;


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


        galleryFragment1 = new LotteFragment1();
        galleryFragment2 = new LotteFragment2();
        galleryFragment3 = new LotteFragment3();

        tabLayout = (TabLayout) rootView.findViewById(R.id.sliding_tabs);
        tabLayout.addTab(tabLayout.newTab().setText("선수"));
        tabLayout.addTab(tabLayout.newTab().setText("일정"));
        tabLayout.addTab(tabLayout.newTab().setText("감독"));
//        tabLayout.setupWithViewPager(pager);

        final ViewPager pager = (ViewPager)
                rootView.findViewById(R.id.viewPager);
        final PagerAdapter adapter = new PagerAdapter
                (getChildFragmentManager(), tabLayout.getTabCount());
        pager.setAdapter(adapter);
        pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                pager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        getActivity().setTitle("Lotte Fragment");


        // Inflate the layout for this fragment
        return rootView;
    }

    private class PagerAdapter extends FragmentPagerAdapter {
        int num_tab;
        public PagerAdapter(FragmentManager fm, int numOfTabs) {
            super(fm);
            this.num_tab = numOfTabs;
        }

        /**
         * View Pager 의 Fragment 들은 각각 Index 를 가진다.
         * Android OS로 부터 요청된 Pager 의 Index 를 보내주면,
         * 해당되는 Fragment 를 리턴시킨다.
         * @param position
         * @return
         */
        @Override
        public Fragment getItem(int position) {

            if ( position == 0 ){
                return galleryFragment1;
            }
            else if( position == 1 ){
                return galleryFragment2;
            }
            else{
                return galleryFragment3;
            }

        }


        /**
         * View Pager 에 몇개의 Fragment 가 들어가는지 설정한다.
         * @return
         */
        @Override
        public int getCount() {
            return num_tab;
        }
    }
}

또 하나의 Fragment는 TabLayout이 아닌 PagerSlidingTabStrip으로 탭을 생성하였다.

PagerSlidingTabStrip을 사용하기 위해서는 dependencies에 추가해야한다.

compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

fragment_doosan.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DoosanFragment">

    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="#0072C6"
            android:src="@mipmap/doosan"
            android:scaleType="centerCrop"
            />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/tabs"
            app:pstsShouldExpand="true"
            app:pstsIndicatorColor="@android:color/holo_red_light"
            app:pstsUnderlineColor="@android:color/holo_red_light"
            app:pstsDividerColor="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="48dp"></com.astuetz.PagerSlidingTabStrip>

        <!-- View Pager 에 Fragment 를 Source Code 로 등록한다.
            requiresFadingEdge 는 내용이 더 있다면 가운데를 흐릿하게 만들어주는 것이다.-->
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:requiresFadingEdge="horizontal" />
    </LinearLayout>
</LinearLayout>

마찬가지로 3개의 fragment를 생성한다.

fragment_doosan_fragment1.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ktds.junho.mydrawablelayout.Doosan.DoosanFragment1">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

2,3도 똑같이 생성한다.

레이아웃을 생성한뒤 3개의 각 프래그먼트와 ViewPager를 생성한다.

각 프래그먼트는 lotte와 똑같이 구성하였다.

DoosanFragment.java

package com.ktds.junho.mydrawablelayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.astuetz.PagerSlidingTabStrip;
import com.ktds.junho.mydrawablelayout.Doosan.DoosanFragment1;
import com.ktds.junho.mydrawablelayout.Doosan.DoosanFragment2;
import com.ktds.junho.mydrawablelayout.Doosan.DoosanFragment3;

public class DoosanFragment extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    private String mParam1;
    private String mParam2;

    public DoosanFragment() {
        // Required empty public constructor
    }

    public static DoosanFragment newInstance(String param1, String param2) {
        DoosanFragment fragment = new DoosanFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

/*    private Button btnFirstGallery;
    private Button btnSecondGallery;
    private Button btnThirdGallery;*/

    private ViewPager pager;

    private PagerSlidingTabStrip tabs;

    private Fragment doosanFragment1;
    private Fragment doosanFragment2;
    private Fragment doosanFragment3;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_doosan, container, false);


        doosanFragment1 = new DoosanFragment1();
        doosanFragment2 = new DoosanFragment2();
        doosanFragment3 = new DoosanFragment3();

        pager = (ViewPager) view.findViewById(R.id.pager);
        pager.setAdapter(new PagerAdapter( getChildFragmentManager() ));
        pager.setOffscreenPageLimit(3);
        pager.setCurrentItem(0);

        tabs = (PagerSlidingTabStrip) view.findViewById(R.id.tabs);
        tabs.setViewPager(pager);


/*        btnFirstGallery = (Button) view.findViewById(R.id.btnFirstGallery);
        btnFirstGallery.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(0);
            }
        });

        btnSecondGallery = (Button) view.findViewById(R.id.btnSecondGallery);
        btnSecondGallery.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(1);
            }
        });

        btnThirdGallery = (Button) view.findViewById(R.id.btnThirdGallery);
        btnThirdGallery.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(2);
            }
        });*/


        getActivity().setTitle("Doosan Fragment");

        // Inflate the layout for this fragment
        return view;
    }

    private String[] pageTitle = {"선수", "일정", "감독"};

    private class PagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public CharSequence getPageTitle(int position) {
            return pageTitle[position];
        }

        /**
         * View Pager 의 Fragment 들은 각각 Index 를 가진다.
         * Android OS로 부터 요청된 Pager 의 Index 를 보내주면,
         * 해당되는 Fragment 를 리턴시킨다.
         * @param position
         * @return
         */
        @Override
        public Fragment getItem(int position) {

            if ( position == 0 ){
                return doosanFragment1;
            }
            else if( position == 1 ){
                return doosanFragment2;
            }
            else {
                return doosanFragment3;
            }


        }


        /**
         * View Pager 에 몇개의 Fragment 가 들어가는지 설정한다.
         * @return
         */
        @Override
        public int getCount() {
            return 3;
        }
    }
}

(추가)

MainActivity.java

package com.ktds.junho.mydrawablelayout;
 
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
 
public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {
 
    private Fragment LotteFragment;
    private Fragment doosanFragment;
    private Fragment lgFragment;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        LotteFragment = new LotteFragment();
        doosanFragment = new DoosanFragment();
        lgFragment = new LgFragment();
 
        /**
         * 기본 화면 설정
         */
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.add(R.id.container, LotteFragment);
//        transaction.addToBackStack(null);
        transaction.commit();
 
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
 
 
 
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
 
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();
 
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }
 
    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
 
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
 
    /**
     * @see NavigationView.OnNavigationItemSelectedListener
     * @param item
     * @return
     */
    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
 
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
 
        // Handle navigation view item clicks here.
        int id = item.getItemId();
 
        if (id == R.id.nav_camera) {
            transaction.replace(R.id.container, LotteFragment);
        } else if (id == R.id.nav_gallery) {
            transaction.replace(R.id.container, doosanFragment);
        } /*else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {
        } else if (id == R.id.nav_share) {
        } else if (id == R.id.nav_send) {
        } */else if (id == R.id.nav_subway) {
            transaction.replace(R.id.container, lgFragment);
        }
 
//        transaction.addToBackStack(null);
        transaction.commit();
 
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}
 

결과 화면은 똑같은 구성으로 보여진다.