android 프래그먼트(Fragment)

Fragment

프래그먼트(Fragment)는 안드로이드 3.0부터 지원되었다고 하는데요. 프래그먼트란 무엇일까요..?

간단하게 말하자면 여러가지 화면을 유연하게 지원하기 위한 것이라고 할 수 있겠습니다. 

어플리케이션의 단위는 Activity이고, 그 Activity도 여러 Fragment로 구성될 수가 있습니다. 

예를 들면 카카오톡의 친구목록, 채팅목록 같은 화면은 프래그먼트이고 이 두 프래그먼트는 같은 Activity에 있는 것과 같아요. 맞나? 제가 카톡 개발자가 아니어서

Activity에 Fragment가 포함되는 것이기 때문에 Fragment간의 직접적인 통신은 막고 있습니다. 반드시 Activity를 통해서 Fragment간의 통신을 해야합니다.

프래그먼트도 Activity와 같이 여러 단계의 주기를 거치게 됩니다. 그 중 눈여겨 볼 메소드는 onCreate, onCreateView,그리고 onPause랍니다.

onCreate()

안드로이드 시스템은 프래그먼트가 실행될때 이 메소드를 호출하게 됩니다. 컴포넌트를 초기화하고 싶다면 이곳에서 하세요. 매개변수인 Bundle 객체를 통해서 Activity에서 데이터를 전달받을 수도 있습니다.

onCreateView()

이 메소드는 UI를 생성하는 메소드입니다. UI를 제공하지 않는다면 null을 반한 할 거구요. 대개 전달받은 LayoutInflater로 inflate메소드를 통하여 View를 반환합니다.

프래그먼트는 Activity에서 FragmentManager 객체를 통해서 관리되어 집니다.  MainActivity에서 getSupportFragmentManager메소드를 통해 객체를 생성할 수 있습니다.

프래그먼트를 사용한 어플리케이션 예제

이제 프래그먼트를 사용해서 간단한 어플을 만들어볼텐데요, 우선 Empty Activity로 프로젝트를 구성해주세요.

두 개의 프래그먼트를 구성 할 두 개의 레이아웃 파일을 만들어 주겠습니다.

fragment1.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"
    android:background="#ffee11">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Fragment1"
        android:textSize="30dp"/>
</RelativeLayout>

fragment2.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"
    android:background="#22ff33">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Fragment2"
        android:textSize="30dp"/>
</RelativeLayout>

두개의 레이아웃 파일은 별거 없습니다. 그냥 현재 어떤 프래그먼트인가를 표시하는 텍스트뷰를 하나 포함하고 있고, 더 구별하기 쉽도록 배경색을 다르게 지정했습니다.

우리는 이 레이아웃 파일을 프래그먼트와 연결해야합니다. 바로 UI를 구성해야하는 것이죠. 

그 메소드가 onCreateView라는 메소드라고 했습니다.

Fragment1.java

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

public class Fragment1 extends Fragment {

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

Fragment2.java

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

public class Fragment2 extends Fragment {

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

Fragment1 클래스는 fragment1 레이아웃을 UI로 삼고 있고, Fragment2 클래스는 fragment2 레이아웃을 UI로 가지고 있습니다.

이것을 View 객체로 가져오기 위해서는 LayoutInflater로 inflate메소드를 통해 가져올 수 있습니다. 

이제 여기까지 프래그먼트와 레이아웃간의 연결을 끝났습니다. 이제 프래그먼트를 포함할 activity_main.xml을 구성해야합니다.

activity_main.xml

<?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=".MainActivity">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal">

       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:text="프래그먼트1"
           android:textSize="25dp"
           android:onClick="changeFragment"
           android:id="@+id/fragment1"/>

       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:text="프래그먼트2"
           android:textSize="25dp"
           android:onClick="changeFragment"
           android:id="@+id/fragment2"/>

   </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container"
        android:orientation="vertical"/>
</LinearLayout>

id가 container인 LinearLayout이 보이시나요? 여기가 프래그먼트를 포함하는 container 역할을 하게 됩니다.

각 버튼은 changeFragment 메소드를 통해서 프래그먼트를 바꾸는 역할을 하게 됩니다.

MainActivity.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

        Fragment fragment=new Fragment1();
        fm=getSupportFragmentManager();
        fm.beginTransaction().add(R.id.container,fragment).commit();
    }

    public void changeFragment(View view){
        int id=view.getId();
        Fragment fragment=null;
        switch(id){
            case R.id.fragment1:
                fragment=new Fragment1();
                break;
            case R.id.fragment2:
                fragment=new Fragment2();
                break;
        }

        fm.beginTransaction().replace(R.id.container,fragment).commit();
    }
}

Activity는 FragmentManager를 통해서 Fragment를 관리하게 됩니다. FragmentManager를 통해서 FragmentTransaction객체를 가져옵니다. 

FragmentTransaction객체는 프래그먼트를 추가, 교환, 제거할 수 있습니다. replace메소드로 container의 프래그먼트를 교체하고 있는 걸 확인할 수 있습니다. 마지막에는 반드시 commit메소드를 호출해야 replace가 반영됩니다.

결과

프래그먼트1을 버튼을 누른 경우(또는 앱이 실행된 첫 화면)

프래그먼트2를 버튼을 누른 경우

프래그먼트를 사용해서 어플리케이션을 만들어보았습니다. 처음에만 조금 헷갈리지 나중에는 익숙해져... 요...