[Android] Fragment 를 이용한 탭 만들기

Fragment와 ViewPager를 이용하여 탭을 만들어보도록 하겠습니다.

아래와 같은 순서로 진행됩니다.

-Fragment의 특징

-Fragment의 생명주기

-소스코드 

Fragment 특징

기존 Activity는 하나의 화면에 여러개 사용할수없게 설계되어있는 반면 Fragment는

Activity와 비슷한 Lifecycle을 가지면서 여러가지 화면을 넣을 수 있는 방법을 지원해준다.

- Fragment는 Activity와 비슷한 LifeCycle을 가진다.

- Fragment는 하나의 Activity에서 다수의 Fragment를 사용할 수 있다.

- Fragment는 Activity에서만 존재하며 단독으로 실행될수 없는 구조이다

- Fragment는 Activity와 마찬가지로 Back Stack을 사용할 수 있으나, Activity처럼 다양한 Stack방식을 지원하지 않는다.

- Fragment는 Activity와 위에서만 존재하기때문에 다수의 Fragment를 동시에 띄울때 메모리 문제가 될 수 있으므로 너무 복잡한 구조는 지양해야한다.

Fragment 생명주기

* 1. Fragment is added

* 2. onAttach() 

* 3. onCreate() 

액티비티와 마찬가지로 초기화해야하는 리소스들을 여기서 초기화해줌

주의할점은 UI초기화는 할수없다.

* 4. onCreateView() 

Layout을 inflate하는 곳.

View객체를 얻을 수 있으므로, UI초기화를 여기서 진행한다.

* 5. onActivityCreated() 

Activity의 onCreate()가 호출되고나서 호출되는 메소드이다.

Activity와 Fragment의 뷰가 모두 생성된 상태로, View를 변경하는 작업이 가능하다

* 6. onStart() 

* 7. onResume() 

유저에게 Fragment가 보여지고, 유저와 상호작용이 가능하게 되는 부분

* 8. Fragment is active

* 9. User navigates backward or fragment is removed/replaced or Fragment is added to the back stack, then removed/replaced

* 10. onPause()

* 11. onStop() 

Fragment는 Activity와 마찬가지로 화면을 완전히 가리게되면 호출된다.

* 12. onDestroy() 

* 13. onDetached()

* 14. Fragment is destroyed

결과물

버튼또는 터치슬라이딩으로 탭을 이동할 수 있습니다.

소스코드

activity_main.xml

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

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_first"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="First Tab"/>

        <Button
            android:id="@+id/btn_second"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Second Tab"
            />

        <Button
            android:id="@+id/btn_third"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Third Tab"
            />

    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/ll"
        >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

fragment_fragment2.xml

(나머지 탭도 똑같이 만든다)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30dp"
        android:textStyle="bold"
        android:text="Second_Page" />

</RelativeLayout>

Fragment2.java

(나머지 탭도 똑같이 만든다)

package com.example.kjh.viewpager_fragment;
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.RelativeLayout;

public class Fragment2 extends Fragment {
    public Fragment2()
    {
        // required
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

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

MainActivity.java

package com.example.kjh.viewpager_fragment;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    ViewPager pager;

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

        pager = (ViewPager)findViewById(R.id.pager);
        Button btn_first = (Button)findViewById(R.id.btn_first);
        Button btn_second = (Button)findViewById(R.id.btn_second);
        Button btn_third = (Button)findViewById(R.id.btn_third);

        pager.setAdapter(new pagerAdapter(getSupportFragmentManager()));
        pager.setCurrentItem(0);

        View.OnClickListener movePageListener = new View.OnClickListener()
        {
            @Override
            public void onClick(View view) {
                int tag = (int)view.getTag();
                pager.setCurrentItem(tag);
            }
        };

        btn_first.setOnClickListener(movePageListener);
        btn_first.setTag(0);
        btn_second.setOnClickListener(movePageListener);
        btn_second.setTag(1);
        btn_third.setOnClickListener(movePageListener);
        btn_third.setTag(2);
    }

    private class pagerAdapter extends FragmentStatePagerAdapter
    {
        public pagerAdapter(FragmentManager fm )
        {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch(position)
            {
                case 0:
                    return new Fragment1();
                case 1:
                    return new Fragment2();
                case 2:
                    return new Fragment3();
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            // total page count
            return 3;
        }
    }
}