[CookBook] Fragments 이해하기 -5-

Creating Fragments Dynamically at Runtime

layout xml 파일에 fragment 가 <fragment> element를 사용해서 정의 되었어도 runtime 시 자바코딩에 의해서 이 fragment를 재정의 할 수 있습니다. 액티비티에 fragment를 dynamic 하게 생성,추가,replace 하기 위해 FragmentManager를 사용하실 수 있습니다.

이와 관련한 예제를 다룰건데요. FragmentsByCodeApp이라는 안드로이드 프로젝트를 생성하겠습니다. 이 앱에서는 두개의 fragment를 dynamic하게 생성할 겁니다. Fragment1과 Fragment2인데요. Fragment1은 선택 위젯인 ListView를 가지게 되고 여기에 product들이 display 될 겁니다. Fragment2는 TextView를 가지고 있고 Fragment1의 리스트뷰에서 선택된 제품이 display 될 겁니다.

이 두 Fragment들을 표시하기 위해 적당한 layout xml을 만들어야 합니다.

activity_fragments_by_code_app.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <LinearLayout
        android:id="@+id/frag1_container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal"/>
    <LinearLayout
        android:id="@+id/frag2_container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0"
        android:orientation="horizontal"/>
</LinearLayout>

여기 보시면 두개의 LinearLayout가 있습니다. 각각 id를 가지고 있죠. 하나는 frag1_container이고 다른 하나는 frag2_container 입니다. 자바 코드에서 이 아이디를 가지고 동적으로 fragment들을 생성하고 다룰 겁니다. 전체 틀을 구성하는 LinearLayout은 horizontal 로 돼 있죠. 그러니까 두 fragment들은 좌우로 배치 될 겁니다. 첫번째 fragment에는 제품을 표시할 리스트뷰가 들어갈 것이고 두번째 fragment에는 이 제품을 표시할 텍스트 뷰가 들어갈 겁니다. 이 두 fragment들에 view를 정의하기 위해 두개의 xml 파일을 만들겠습니다. fragment1.xml과 fragment2.xml 인데요. res/layout 폴더 밑에 만들어 넣습니다.
첫번째 fragment에 리스트뷰를 넣기 위해 아래와 같이 만듭니다.

fragment1.xml

<?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:background="#0000FF"  >
    <ListView
        android:id="@+id/products_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:drawSelectorOnTop="false" />
</LinearLayout>

안에 리스트 뷰가 있죠? id 는 products_list 로 했습니다. 두개의 fragment를 구별하기 쉽게 첫번째는 배경색을 파란색으로 했습니다.
두번째 fragment에 텍스트뷰를 정의하기 위해 아래와 같은 xml 파일을 만듭니다.

fragment2.xml

<?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" >   
    <TextView 
        android:id="@+id/selectedopt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=" Please select a product "
        android:textSize="@dimen/text_size"
        android:textStyle="bold"  />  
</LinearLayout>

selectedopt라는 아이디를 가진 텍스트뷰가 있습니다. 그리고 text가 이미 정해져 있는데요. "Please select a product" 라고 돼 있습니다. 텍스트 사이즈는 dimention 리소스 안에 있는 사이즈를 불러다 쓰구요.
디바이스의 화면 크게에 맞게 리스트 아이템들을 표시하기 위해 아래 xml 하일을 하나 더 만들겠습니다.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp"
      android:textSize="@dimen/text_size"
      android:textStyle="bold" />
     

여기를 보면 각 아이템은 리스트 뷰 내에서 6dp 만큼 패딩을 가질 겁니다. 그리고 bold체로 설정을 했고 폰트 싸이즈는 dimention 리소스 안에 있는 사이즈를 불러다 씁니다.
이제 fragment1.xml과 fragment2.xml 에 설정된 UI를 로드할 자바코드를 만들 차례입니다. 두개의 자바코드가 만들어 져야겠죠. 하나는 Fragment1Activity.java 이고 나머지 하나는 Fragment2Activity.java 입니다.

이 자바 코드는 다음 글에서 다뤄 보겠습니다.