[CookBook] Fragments 이해하기 -8-

Displaying Options Using ListFragment

ListFragment는 이미 만들어진 리스트뷰를 가지고 있는 fragment 입니다. 리스트 뷰에 들어갈 내용들(data source)는 array나 cursor가 될 수 있습니다. 이 ListFragments를 이해하기 위해서 리스트뷰와 텍스트뷰를 포함하고 있는 어플리케이션을 만들어 보겠습니다. 리스트 뷰에는 아이템들이 들어갈 것이고 이 아이템을 선택하면 텍스트 뷰에 표시되도록 만들 겁니다. 이 앱에서 리스트뷰는 ListFragment를 통해서 표시됩니다. 이 새로운 프로젝트의 이름은 ListFragmentApp으로 하겠습니다. 우선 텍스트뷰를 표시할 fragment부터 만들겠습니다. fragment2.xml 이라는 layout xml을 res/layout 폴더에 만들겠습니다.

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>

id가 selectedopt라는 텍스트뷰가 LinearLayout 안에 정의돼 있습니다. 일단 Please select a product라는 문자가 세팅돼 있습니다. 이 텍스트는 볼드체이고 size는 dimension resource에서 지정된 text_size를 사용합니다. 이 텍스트 뷰는 자바 코드에서 리스트뷰에서 선택된 아이템의 값을 표시하도록 만들어질 겁니다.

device의 화면크기에 맞게 리스트뷰의 아이템들이 표시되도록 하기 위해서 list_item.xml 파일을 res/layout 폴더 밑에 만들어 넣겠습니다.

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 체이고 크기는 dimension resource에 있는 text_size를 갖다가 사용합니다.

fragment2.xml로 부터 fragment의 UI를 load 하기 위해 자바 클래스를 만들겠습니다.

Fragment2Activity.java

    

public class Fragment2Activity extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment2, container, false);
    }

    public void dispOption(String msg){
        TextView selectedOpt = (TextView) getActivity().findViewById(R.id.selectedopt);
        selectedOpt.setText("You have selected "+msg);  
    }
}

 

이 클래스는 Fragment base 클래스를 extends 했습니다. onCreateView() 메소드를 오버라이드 해 fragment2.xml에서 정의한 텍스트 뷰 UI를 inflate 하기 위해 LayoutInflater를 그 안에서 사용했습니다.

 

이제 리스트뷰를 만들기 위해서 ListFragment를 사용할 겁니다. 이 ListFragment는 리스트뷰를 갖고 있습니다. 그러니까 이 fragment를 위해서 따로 UI를 정의할 필요는 없습니다. ListFragment 클래스를 extends한 자바클래스에서 동적으로 추가하시면 됩니다. 이 자바 클래스 안에서 리스트뷰에 들어갈 아이템들을 동적으로 할당할 겁니다. 그리고 리스트뷰에서 선택된 아이템을 Fragment2의 텍스트 뷰로 전달해서 화면에 표시하도록 할 거구요.
 
 

Fragment1Activity.java
 
 

public class Fragment1Activity extends ListFragment {
    String[] products={"Camera", "Laptop", "Watch",  "Smartphone", "Television"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ArrayAdapter<String> arrayAdpt = new ArrayAdapter  <String>(getActivity(),R.layout.list_item, products);
        setListAdapter(arrayAdpt);
    }

    @Override
    public void onListItemClick(ListView l, View v, int  position, long id) {
        Fragment2Activity frag = (Fragment2Activity) getFragmentManager().findFragmentById(R.id.fragment2);
        frag.dispOption(((TextView) v).getText().toString());                         
    }
}

보시다 시피 ListFragment를 extends 했습니다. 리스트뷰를 사용할 거기 때문이죠. 이 리스트뷰에 아이템을 표시하기 위해서 아이템들이 들어있는 products라는 배열을 만들었습니다. 그리고 onCreate() 메소드를 보시죠. 여기서는 ArrayAdapter를 만들어서 list_item.xml 을 할당해 주고 위에서 만든 products 배열도 할당해 줬습니다. 그리고 setListAdapter()메소드를 사용해서 이 ArrayAdapter를 세팅했구요. 이러면 이 ListView에 이 값들이 세팅이 되서 화면에 아이템으로 뿌려질 수 있습니다.

그리고 onListItemClick() 리스너를 사용했죠. 해당 아이템일 클릭되면 실행될 콜백 메소드 입니다. 여기서는 Fragment2Activity 클래스를 초기화한 frag라는 객체를 만들어서 이 frag의 disOption()이라는 메소드를 호출하도록 코딩을 했습니다 코딩할 때 텍스트뷰의 텍스트를 전달하고 있구요.

이제 이 두개의 fragment들을 함께 화면에 표시하도록 해야 합니다.
우선 layout xml을 만듭니다.

activity_list_fragment_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" >
    <fragment
        android:name="com.androidtablet.listfragmentapp.Fragment1Activity"
        android:id="@+id/fragment1"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
    <fragment
        android:name="com.androidtablet.listfragmentapp.Fragment2Activity"
        android:id="@+id/fragment2"
        android:layout_weight="0"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
</LinearLayout>

여기에는 저 위에 만들었던 두개의 fragment가 들어있습니다. 이 두 fragment들을 추가하기 위해 <fragment> element를 사용했죠. android:name 이라는 속성에는 각각 fragment의 클래스 이름이 들어가 있습니다.
이제 이 layout xml을 load 할 자바 클래스를 만들겠습니다. 이 자바 클래스에는 특별히 코딩을 할 필요는 없습니다.

ListFragmentAppActivity.java

public class ListFragmentAppActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_fragment_app);
    }
}

이렇게 하면 예제가 완성됐습니다.