안드로이드 개발 FragmentActivity 사용해서 화면 구성하는 방법

안드로이드 개발 FragmentActivity 사용해서 화면 구성하는 방법

 

환경: Android Studio

 

안드로이드는 다양한 디바이스와 해상도, 스크린 크기 등 여러 조건들에 따라서 화면을 재구성해야 해야 합니다. 그렇지 않으면 제대로 된 화면을 구성하는 것이 쉽지 않습니다. 이런 문제들을 해결하기 위해 나온 것이 Fragment 라는 개념입니다. 그러니까 하나의 화면인 Activity 에 여러 조각(Fragment) 들을 가져와 전체를 구성하는 것이죠. 경우에 따라서 이 조각들을 교체해 가며 화면을 변경할 수 있습니다. FragmentActivity 는 Fragment 로 화면을 좀더 쉽게 구성할 수 있도록 만든 Activity 입니다. 일반 Activity 에 Fragment 를 추가하는 방법과 차이가 있습니다.

 

▼ 오늘은 FragmentActivity 와 Fragment 를 이용해서 왼쪽 메뉴, 오른쪽에 내용을 볼 수 있도록 화면을 구성해 보겠습니다. FragmentActivity 를 상속받은 Activity 에는 왼쪽에 ListFragment 와 오른쪽에 Fragment 가 추가 됩니다. 왼쪽 메뉴 목록에서 클릭을 하게 되면 오른쪽 Fragment 에 있는 TextView 에 값을 넣는 기능입니다.

 

▼ 먼저 전체 화면을 구성하는 FragmentActivity 에 대해서 알아 보겠습니다. FragmentActivity 상속받아서 Activity 클래스를 하나 만듭니다. FragmentActivity 는 허니컴부터 지원하는 기능으로 support-v4 라이브러리가 추가 되어 있어야 합니다. 외부 라이브러리 목록에 support-v4 가 있는지 확인합니다.

import android.support.v4.app.FragmentActivity;
import android.os.Bundle;

public class TestFragmentActivity extends FragmentActivity {

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

 

▼ FragmentActivity 를 구성하는 R.layout.activity_test_fragment.xml 파일의 내용은 다음과 같습니다. 왼쪽과 오른쪽에 두 개의 fragment 를 추가했습니다. FragmentActivity 에 Fragment 를 추가하기 위해서는 <fragment> 태그가 있어야 합니다.

 

activity_test_fragment.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal" >
    <fragment
        android:layout_height="match_parent"
        android:layout_width="100dp"
        class="com.example.gon.rstpclient.LeftListFragment"
        android:id="@+id/leftview"/>
    <fragment
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        class="com.example.gon.rstpclient.RightFragment"
        android:id="@+id/rightview"/>
</LinearLayout>

▼ 왼쪽 화면을 구성하는 것은 Fragment 의 한 종류인 ListFragment 입니다. ListView 위젯처럼 데이터 목록을 만들 때 사용합니다. onListItemClick() 는 리스트를 구성하는 각 항목들의 클릭 이벤트입니다. 

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class LeftListFragment extends ListFragment {

    String[] menulist = new String[] {"Menu1","Menu2","Menu3"};
    String[] wordlist = new String[] {"Menu1 Click", "Menu2 Click", "Menu3 Click"};

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup viewGroup, Bundle savedInstanceState) {
        View view =inflater.inflate(R.layout.left_list_fragment, viewGroup, false);
        ArrayAdapter adapter = new ArrayAdapter(getActivity(),
                android.R.layout.simple_list_item_activated_1, menulist);
        setListAdapter(adapter);
        return view;
    }
    @Override
    public void onListItemClick(ListView listView, View view, int position, long id) {
        RightFragment txt = (RightFragment)getFragmentManager().findFragmentById(R.id.rightview);
        txt.display(wordlist[position]);
        getListView().setSelector(android.R.color.holo_red_dark);
    }
}

 

▼ @android:id/list 는 안드로이드에서 제공하는 ListView 를 구성할 수 있는 리소스 ID 입니다. Activity 의 setListAdapter() 함수에 ArrayAdapter 객체를 인수로 넘기면 왼쪽 메뉴 목록이 완성됩니다.

 

left_list_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@android:id/list" />
</LinearLayout>

 

▼ 오른쪽을 구성하는 Fragment 는 다음과 같습니다. 화면 구성은 간단합니다. 왼쪽 메뉴에서 클릭한 내용을 보여 줄 TextView 만 추가가 되어 있습니다. 

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class RightFragment extends Fragment {

    private TextView mTvRight;

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup viewGroup, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.right_fragment, viewGroup, false);
        mTvRight= (TextView)view.findViewById(R.id.tvRight);
        return view;
    }

    public void display(String txt){
        mTvRight.setText(txt);
    }
}

 

▼ 아래 레이아웃 xml 은 오른쪽 화면을 구성하는 내용입니다.

 

right_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="#FFF5F19E"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:textColor="#FF0000"
        android:textSize="20sp"
        android:id="@+id/tvRight"/>
</LinearLayout>