안드로이드 Fragment 이해하기

안드로이드 Fragement 이해하기

조대협 (http://bcho.tistory.com)

안드로이드에서 하나의 화면은 하나의 Activity로 대변된다.

이러한 Activity를 View등을 이용해서 여러개로 쪼갤 수 있지만, 타블렛이나 팬블릿과 같이 스마트 폰과 다른 해상도를 사용할때 일일이 View를 다시 디자인 해야 하며, 또한 해당 화면 레이아웃이나 배치등을 다른 Activity에서 사용하고자 하면 매번 다시 만들어야 한다.

<출처 : http://developer.android.com/guide/components/fragments.html >

왼쪽은 타블렛 화면 레이아웃으로, 좌측에 메뉴와 오른쪽에 다른 형태의 컨텐츠가 나타난다.

이를 스마트 폰에서 볼때는 화면이 작기 때문에, 한 화면에서는 메뉴를 출력하고, 메뉴를 클릭하면 컨텐츠 화면으로 이동하도록 하는 형태인데, 이를 그냥 각각 구현하려면, 각 Activity에서 중복된 코드를 일일이 개발해야 한다. 

만약에 이러한 메뉴와 컨텐츠 화면이 포터블한 컴포넌트 형태로 묶이게 된다면 이를 재 사용해서 쉽게 만들 수 있다. 즉 타블릿 화면에는 메뉴와 컨텐츠 컴포넌트를 출력하고, 스마트 폰에는 메뉴 화면에는 메뉴 컴포넌트를, 컨텐츠 화면에는 컨텐츠 컴포넌트를 출력하면 쉽게 개발이 가능하다.

그래서 Activity안에 다른 Activity를 구현하는 것과 같은 형태의 컴포넌트를 제공하는 데 이를  Fragment라고 한다.

Fragment를 사용하는 방법은 단순하다. Activity의 Layout XML 안에, <fragment> 라는 태그를 이용하여, <fragment>를 추가해주면 된다. ( 또는 자바 코드를 이용하여 fragment를 추가할 수 있다.)

다음은 간단한 TextView를 포함한 Fragement를 정의한 fragement_main.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" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivityFragment">

    <TextView android:text="Hello!! I&apos;m fragment" android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@+id/tvHello" />

</RelativeLayout>

Activity의 Layout을 정의하는 방법과 유사하게, fragment의  layout도 정의한다.

다음으로 Fragment class를 상속받아서 MainActivityFragement를 정의한다.

public class MainActivityFragment extends Fragment {

    public MainActivityFragment() {

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_main, container, false);

    }

}

여기까지 진행했으면 Fragment를 만든것이다. 다음으로, 이 Fragement를 Activity 위에 배치해보자.

아래는 MainActivity에서 사용하는 Layout을 정의한 activity_main.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" android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivityFragment">

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/fragment1"

        android:name="com.example.terry.simplefragment1.MainActivityFragment"

        tools:layout="@layout/fragment_main"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        />

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/fragment2"

        android:name="com.example.terry.simplefragment1.MainActivityFragment"

        tools:layout="@layout/fragment_main"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/fragment1"

        android:layout_alignParentEnd="true" />

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/fragment3"

        android:name="com.example.terry.simplefragment1.MainActivityFragment"

        tools:layout="@layout/fragment_main"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/fragment2"

        android:layout_alignParentEnd="true" />

</RelativeLayout>

안에 <fragment ..> 라는 이름으로 앞서 정의한 MainActivityFragment를 3개 순차적으로 배치했음을 볼 수 있다.