꿀단지

Fragment

[출처: Google Developer]

구현

  Fragment는 일반적으로 Activity의 사용자 인터페이스의 일부로 사용되며 자체 레이아웃으로 Activity에 표현 가능합니다. 

Fragment에서 레이아웃을 사용하려면 반드시 onCreateView() 콜백 메서드를 구현해야 합니다. 그리고 이 메서드는 반드시 View를 반환해야 합니다. 

  다음 예는 Fragment의 서브 클래스로 example_fragment.xml 파일로부터 레이아웃을 읽어 옵니다. 

public static class ExampleFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.example_fragment, container, false);
    }
}

  onCreateView()로 전달된 container 매개변수가 상위 ViewGroup이며 이는 Activity의 레이아웃으로부터 온 것입니다. 이 안에 Fragment 레이아웃이 삽입 됩니다. savedInstanceState는 true, false로 값을 정할 수 있는데 false 일 때는 레이아웃에 중복된 ViewGroup을 생성하지 못하게 하는 것입니다. 간단하게 말하면 각 각의 Fragment 레이아웃 중복 없이 사용하고 싶다면 savedInstanceState를 false로 사용해야 합니다. 

Fragment 관리

  Activity내에서 Fragment를 사용하기 위해서 FragmentManager을 사용해야 합니다. Activity에서 getFragmentManager()를 호출하면 됩니다. 

  ● FragmentManager fragmentManager = getFragmentManager();

  FragementManager을 통해 할 수 있는 일중에 몇 가지를 예를 들어보겠습니다. 

  ● Activity내에 존재하는 Fragment를 findFragmentById()로 가져오거나 findFragmentByTag()로 가져올 수 있습니다. 

  ● popBackStack()을 사용하여 Fragment를 백스택에서 꺼낼 수 있습니다. 

  ● 백스택 변경 내용이 있는지 확인하기 위해 addOnBackStackChangedListener()로 리스너를 등록할 수 있습니다. 

Fragment 트랜젝션

  FragmentTransaction의 인스턴스를 FragmentManager로부터 가져오는 방법은 아래와 같습니다. 

  ● FragmentManager fragmentManager = getFragmentManager(); 

  ● FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

Transaction에서 add(), remove(), replace()와 같은 메서드를 사용할 수 있습니다. 그리고 마지막에 반드시 commit()를 호출해야 합니다. commit() 호출 전 해야할 것이 있는데 addToBackStack()입니다. fragment transaction은 activity가 관리하며 이를 통해 사용자가 back 버튼을 이용하여 이전 fragment로 돌아갈 수 있습니다. 

// Create new fragment and transaction
Fragment newFragment = new ExampleFragment();
FragmentTransaction transaction = getFragmentManager().beginTransaction();

// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);

// Commit the transaction
transaction.commit();

Activity와의 통신

  Fragment에서 activity의 인스턴스에 엑세스 하려면 getActivity()를 사용합니다.

  ● View listView = getActivity().findViewById(R.id.list);

  반대로 activity에서도 fragment 안의 메서드를 호출할 수 있습니다. 이 때 FragmentManager을 사용하여 Fragment에 대한 참조를 가져와야 합니다. 

  ● ExampleFragment fragment = (ExampleFragment) getFragmentManager().findFragmentById(R.id.example_fragment);

정리

  Fragment는 activity위에 레이아웃을 그릴 수 있는 ViewGroup 중 하나입니다. 따라서 activity와 생애를 같이 합니다. Activity에서 Fragment를 다루려면 FragmentManager가 필요하고 getFragmentManager()을 통해 사용이 가능합니다. 그리고 fragment를 추가, 제거 할 때 즉 transaction이 발생할 때 FragmentTransaction을 사용합니다. 

  다음 글에서는 실제 코드를 가지고 어떻게 fragment를 활용했는지 알아보도록 하겠습니다. 

AwesomeNavigation.zip

예제는 위에 있는 압축파일 받아서 확인해주세요~

  Navigation Drawer에 대해서 쉽고, 알고 싶은 것을 속 시원히 알려드릴게요. 우선 기본적인 프로젝트를 이클립스로 생성했다면 아래와 같은 소스를 확인할 수 있습니다. 

package com.nexthops.awesomeweather;

import android.app.Activity;

import android.app.ActionBar;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.support.v4.widget.DrawerLayout;
import android.widget.ArrayAdapter;
import android.widget.TextView;


public class MainActivity extends Activity
        implements NavigationDrawerFragment.NavigationDrawerCallbacks {

    /**
     * Fragment managing the behaviors, interactions and presentation of the navigation drawer.
     */
    private NavigationDrawerFragment mNavigationDrawerFragment;

    /**
     * Used to store the last screen title. For use in {@link #restoreActionBar()}.
     */
    private CharSequence mTitle;

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

        mNavigationDrawerFragment = (NavigationDrawerFragment)
                getFragmentManager().findFragmentById(R.id.navigation_drawer);
        mTitle = getTitle();

        // Set up the drawer.
        mNavigationDrawerFragment.setUp(
                R.id.navigation_drawer,
                (DrawerLayout) findViewById(R.id.drawer_layout));
    }

    @Override
    public void onNavigationDrawerItemSelected(int position) {
        // update the main content by replacing fragments
        FragmentManager fragmentManager = getFragmentManager();
        fragmentManager.beginTransaction()
                .replace(R.id.container, PlaceholderFragment.newInstance(position + 1))
                .commit();
    }

    public void onSectionAttached(int number) {
        switch (number) {
            case 1:
                mTitle = getString(R.string.title_section1);
                break;
            case 2:
                mTitle = getString(R.string.title_section2);
                break;
            case 3:
                mTitle = getString(R.string.title_section3);
                break;
        }
    }

    public void restoreActionBar() {
        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setTitle(mTitle);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        if (!mNavigationDrawerFragment.isDrawerOpen()) {
            // Only show items in the action bar relevant to this screen
            // if the drawer is not showing. Otherwise, let the drawer
            // decide what to show in the action bar.
            getMenuInflater().inflate(R.menu.main, menu);
            restoreActionBar();
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
            return rootView;
        }

        @Override
        public void onAttach(Activity activity) {
            super.onAttach(activity);
            ((MainActivity) activity).onSectionAttached(
                    getArguments().getInt(ARG_SECTION_NUMBER));
        }
    }

}

  어디를 손대야 내가 원하는데로 화면 전환이 될지가 궁금해 질텐데요. Navigation Drawer 프로젝트는 살펴보면 Fragment라는 녀석이 있습니다. 그래서 우리는 Activity를 사용하지 않고 Fragment를 사용할 거에요. 

  보여주고 싶은 화면을 두 개만 만들어 보겠습니다. 우선은 액티비티를 두개 추가해 줍니다. 그리고 소스를 수정할거에요. 

package com.example.awesomenavigation;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class FirstItemFragment extends Activity {

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

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.first_item, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

  많이 보던 소스입니다. 여기서 아래와 같이 수정 할게요. 

package com.example.awesomenavigation;

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

public class FirstItemFragment extends Fragment {

	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		View view = inflater.inflate(R.layout.first_item_fragment, container, false);
		
		return view;
	}
}

  Activity를 Fragment로 수정했습니다. 이렇게 더 추가할 화면을 액티비티로 생성한 다음 위와 같이 Fragment로 수정합니다. 다시 메인 액티비티로 넘어가보도록 하겠습니다. 이제 거의 다 됐어요~

package com.example.awesomenavigation;

import android.app.Activity;

import android.app.ActionBar;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.support.v4.widget.DrawerLayout;
import android.widget.ArrayAdapter;
import android.widget.TextView;


public class MainActivity extends Activity
        implements NavigationDrawerFragment.NavigationDrawerCallbacks {

    /**
     * Fragment managing the behaviors, interactions and presentation of the navigation drawer.
     */
    private NavigationDrawerFragment mNavigationDrawerFragment;

    /**
     * Used to store the last screen title. For use in {@link #restoreActionBar()}.
     */
    private CharSequence mTitle;

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

        mNavigationDrawerFragment = (NavigationDrawerFragment)
                getFragmentManager().findFragmentById(R.id.navigation_drawer);
        mTitle = getTitle();

        // Set up the drawer.
        mNavigationDrawerFragment.setUp(
                R.id.navigation_drawer,
                (DrawerLayout) findViewById(R.id.drawer_layout));
    }

    @Override
    public void onNavigationDrawerItemSelected(int position) {
        // update the main content by replacing fragments
    	Fragment fragment;
    	FragmentManager fragmentManager = getFragmentManager();
    	switch(position) {
    	case 0:
    		fragment = new FirstItemFragment();
    		break;
    		
    	case 1:
    		fragment = new SecondItemFragment();
    		break;
    	default:
    		fragment = new FirstItemFragment();
    	}
    	
    	fragmentManager.beginTransaction()
    	.replace(R.id.container, fragment)
    	.commit();
    }

    public void onSectionAttached(int number) {
        switch (number) {
            case 1:
                mTitle = getString(R.string.title_section1);
                break;
            case 2:
                mTitle = getString(R.string.title_section2);
                break;
            case 3:
                mTitle = getString(R.string.title_section3);
                break;
        }
    }

    public void restoreActionBar() {
        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setTitle(mTitle);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        if (!mNavigationDrawerFragment.isDrawerOpen()) {
            // Only show items in the action bar relevant to this screen
            // if the drawer is not showing. Otherwise, let the drawer
            // decide what to show in the action bar.
            getMenuInflater().inflate(R.menu.main, menu);
            restoreActionBar();
            return true;
        }
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
            return rootView;
        }

        @Override
        public void onAttach(Activity activity) {
            super.onAttach(activity);
            ((MainActivity) activity).onSectionAttached(
                    getArguments().getInt(ARG_SECTION_NUMBER));
        }
    }

}

  50번 째 줄 부터 처음 MainActivity와 변경된 부분을 확인하면 되요. Fragment를 사용하여 Activity위에서 그려지는 부분을 변경하는 거에요. Fragment에 대한 이해가 없는 분이라면 Fragment에 대한 이해부터 하시고 이것을 보시면 더 쉽게 이해할 수 있어요. 

  화면을 꾸며주고 싶은 부분은 Fragment에서 추가하면됩니다. Activity와 생명주기도 조금 다르고, 사용하는 방법도 조금 다르니 꼭 Fragment에 대해 이해하도록 해요~

「 Tip!! 」

1. 안드로이드에서 제공하는 기본 Navigation Drawer 프로젝트를 생성한다. 

2. 구성하고 싶은 화면을 Activity로 생성한다. 

3. Activity 를 Fragment 로 변경한다. 

4. MainActivity에서 Fragment를 replace 한다. 그러면 원하는 화면으로 휙휙 전환된다.