안드로이드 3.0 Fragments API

[이 글은 구글 개발자 블로그의 글을 번역한 것으로 이해를 돕기위해 일부 표현은 원문과 약간 상이할 수 있습니다. 원문은 아래 링크를 참조하시기 바랍니다.]

안드로이드 3.0의 중요한 목표는 개발자들이 플랫폼에서 이미 제공되는 것 외에 다양한 스크린 크기로 확장될 수 있는 어플리케이션을 만들 수 있도록 돕는 것입니다:

• 처음부터 안드로이드의 UI 프레임워크는 레이아웃 관리자를 사용하여 사용가능한 공간에 따라 UI가 조정되도록 디자인되었습니다. 일반적인 예로 QVGA, HVGA, WVGA의 스크린의 비율에 따라 높이가 변화되는 ListView를 들 수 있습니다.

• 안드로이드 1.6은 스크린 밀도라는 새로운 개념을 소개했습니다. 이것은 물리적 크기가 비슷할 때 해상도가 다르면 그에 따라 어플이 확대될 수 있게 해줍니다. 개발자들은 최초로 Droid에서 시작해 다른 폰들에도 적용된 고해상도의 화면이 출시됐을 때 즉시 이 기능을 사용하기 시작했습니다.

• 안드로이드 1.6은 또한 스크린의 크기를 통으로 만들어 개발자들이 접근할 수 있게 만들었습니다: QVGA 영상비는 "small", HVGA와 WVGA 영상비는 "normal", 더 큰 영상비는 "large". 개발자들은 리소스 시스템을 통해 스크린 크기에 따른 다른 레이아웃을 선택할 수 있습니다.

레이아웃 관리자와 스크린 크기에 따른 리소스 선택의 통합이 개발자들을 다양한 안드로이드 장치에서 확장성 있는 UI를 만들도록 돕는데까지 오랜 시간이 걸렸습니다. 그 결과, 기존에 있던 장치에서 사용되는 많은 어플리케이션이 허니컴을 탑재한 풀사이즈 태블릿에서 아무런 변경없이 호환모드가 아닌 있는 그대로 돌아가게 되었습니다. 하지만, 10인치 화면의 태블릿 지향적인 UI로 옮겨가면서, 많은 어플리케이션이 리소스가 현재 자체적으로 제공하는 것보다 많은 혜택을 더 근본적인 UI 조정을 통해 얻게 됩니다.

Fragment 소개

안드로이드 3.0은 어플리케이션이 인터페이스를 Fragment라는 새로운 클래스를 통해 조정할 수 있도록 돕습니다. Fragment는 자체적인 UI와 생명주기를 갖는 컴포넌트입니다. 이것은 특정한 장치나 화면에서 원하는 UI 플로우에 따라 어플리케이션 사용자의 인터페이스의 다른 부분에서 재사용될 수 있습니다.

어떤 면에서 Fragment를 작은 액티비티로 생각할 수도 있습니다. 물론, 독립적으로 실행될 수 없고 반드시 실제 액티비티에 포함되어야만 합니다. 사실 Fragment API를 소개하는 것은 저희가 개발자들이 액티비티와 관련해 불편했던 많은 부분들에 대해 다룰 수 있는 기회를 줍니다. 따라서 안드로이드 3.0에서 Fragment의 활용은 단지 다른 화면에 따른 변경보다 더 크게 확장되게 됩니다:

• ActivityGroup을 통한 임베디드 액티비티는 좋은 아이디어지만, 액티비티는 다른 액티비티들과 밀접하게 작동하기 보다는 독립적인 컴포넌트로 디자인되었기 때문에 항상 다루기가 어려웠습니다. Fragment API는 여기에 대한 해결책이며, 임베디드된 액티비티를 교체하는데 사용되어야 합니다.

• 액티비티 인스턴스 간의 데이터 유지는 Activity.onRetainNonConfigurationInstance()를 통해 가능하지만, 상당히 오래되고 모호한 방법입니다. Fragment는 플래그를 설정하는 것 만으로 전체 Fragment 인스턴스를 유지할 수 있도록 하여 이 오래된 메카니즘을 교체해 줍니다.

• DialogFragment라고 불리는 Fragment의 특화 클래스는 액티비티의 생명주기의 한 부분으로 관리되는 Dialog를 보여주기 쉽게 해줍니다. 이것은 액티비티의 "관리되는 다이어로그" API들을 교체해 줍니다.

• ListFragment라고 불리는 또 다른 Fragment의 특화 클래스는 데이터 리스트를 보여주기 쉽게 해줍니다. 이것은 기존의 ListActivity (일부 추가적인 기능이 있음)와 비슷하지만, 다른 데이터의 리스트를 어떻게 보여줘야 하는지에 대한 일반적인 질문들에 해결하는데 도움이 됩니다.

• 현재 액티비티에 연결된 모든 Fragment들의 정보는 프레임워크에 의해 액티비티의 저장된 인스턴스 상태에 여러분을 대신해 저장하고 재시작되면 다시 복원해 줍니다. 이것은 여러분이 상태값을 저장하고 복원하기 위해 작성해야 할 코드의 양을 상당히 줄일 수 있게 해 줍니다.

• 프레임워크는 Fragment 객체의 백-스택을 관리하기 위한 내장된 기능이 있습니다. 이것은 기존의 액티비티 백 스택과 통합되는 액티비티 내부의 Back 버튼 행동을 제공하기 쉽게 만들어 줍니다. 이 상태 또한 여러분을 위해 자동으로 저장 및 복원됩니다.

시작하기

여러분의 식욕을 돋구기 위해, 여기에 간단하지만 완전한 Fragment를 이용한 다중 UI 구현 예제가 있습니다. 우리는 먼저 아이템 리스트가 좌측 선택된 아이템의 세부내용이 우측에 있는 가로형 레이아웃을 디자인 할 것입니다. 이것이 우리가 완성하고자 하는 레이아웃입니다:

이 액티비티의 코드는 그다지 흥미롭지 않습니다; 이것은 단지 제공된 레이아웃으로 setContentView()를 호출합니다

여러분은 여기서 우리의 첫 번째 새로운 기능을 볼 수 있습니다:

<fragment> 태그는 여러분이 자동으로 Fragment의 서브 클래스를 여러분의 뷰 구조에 초기화하고 설치하게 해 줍니다. 여기에 구현된 fragment는 사용자가 선택할 수 있는 아이템 리스트를 표시하고 관리하기 위해 ListFragment를 상속합니다. 그 아래의 구현은 UI 레이아웃에 따라 아이템의 세부내용을 동일한 화면이나 새로운 액티비티에 표시하는 것을 담당합니다. fragment의 상태 (현재 세부내용 fragment가 보여짐) 변경이 프레임워크에 의해 환경변화에 따라 어떻게 유지되는지 주의해 보시기 바랍니다.

public static class TitlesFragment extends ListFragment {   
 boolean mDualPane;   
 int mCurCheckPosition = 0;    
 @Override    public void onActivityCreated(Bundle savedState) {    
    super.onActivityCreated(savedState);       
  // 타이틀의 스태틱 배열을 리스트로 뿌리기     
   setListAdapter(new ArrayAdapter(getActivity(),  R.layout.simple_list_item_checkable_1,  Shakespeare.TITLES));       
  // 세부내용 fragment를 직접 UI에 표시할 수 있는      
  // 프레임을 가지고 있는지 체크     
   View detailsFrame = getActivity().findViewById(R.id.details);      
  mDualPane = detailsFrame != null  && detailsFrame.getVisibility() == View.VISIBLE;      
   if (savedState != null) {           
 // 체크된 위치의 마지막 상태를 복원.           
 mCurCheckPosition = savedState.getInt("curChoice", 0);   
     }         if (mDualPane) {     
       // 듀얼 패널 모드에서, 선택된 아이템의 하이라이트 리스트 뷰.         
   getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);          
  // UI가 올바른 상태인지 확인.         
   showDetails(mCurCheckPosition);      
  }   
 }   
  @Override    public void onSaveInstanceState(Bundle outState) {   
     super.onSaveInstanceState(outState);      
  outState.putInt("curChoice", mCurCheckPosition);  
  }   
  @Override    public void onListItemClick(ListView l, View v, int pos, long id) { 
       showDetails(pos);
    }   
  /**     * Helper function to show the details of a selected item, either by   
  * displaying a fragment in-place in the current UI, or starting a     
* whole new activity in which it is displayed.   
  */  
  void showDetails(int index) {   
     mCurCheckPosition = index;      
   if (mDualPane) {          
  // fragments로 모든 것을 여기에 보여줄 수 있음.           
 // 이 아이템을 하이라이트하고 데이터를 보여줄 리스트 갖기.            
getListView().setItemChecked(index, true);            
 // 어떤 fragment가 보여지는 체크, 필요하면 교체.            
DetailsFragment details = (DetailsFragment)                   
 getFragmentManager().findFragmentById(R.id.details); 
           if (details == null || details.getShownIndex() != index) {              
  // 이 선택을 보여주기 위해 새로운 fragment 생성.             
   details = DetailsFragment.newInstance(index);               
  // 트랜잭션 실행, 이 프레임 안에서 존재하는                
// 다른 fragment 교체.               
 FragmentTransaction ft     = getFragmentManager().beginTransaction();  
 ft.replace(R.id.details, details);  
 ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); 
 ft.commit();          
  }    
     } else {
            // 아니면, 표시할 새로운 액티비티를 실행할 필요가 있음       
     // 선택된 텍스트를 가진 dialog fragment.     
       Intent intent = new Intent();       
     intent.setClass(getActivity(), DetailsActivity.class);    
        intent.putExtra("index", index);    
        startActivity(intent);      
  }  
  }
}

이 첫번 째 화면에서 우리는 현재 선택된 아이템의 텍스트를 포함하는 TextView를 보여줄 DetailsFragment를 구현해야 합니다.

public static class DetailsFragment extends Fragment {   
 /**   
  * Create a new instance of DetailsFragment, initialized to    
 * show the text at 'index'.    
 */  
  public static DetailsFragment newInstance(int index) {     
   DetailsFragment f = new DetailsFragment();      
   // 파라메터로 index input 제공.       
 Bundle args = new Bundle();       
 args.putInt("index", index);     
   f.setArguments(args);       
  return f;  
  }    
 public int getShownIndex() {  
      return getArguments().getInt("index", 0);  
  }       
 @Override   
 public View onCreateView(LayoutInflater inflater,   ViewGroup container, Bundle savedInstanceState) {   
     if (container == null) {       
     // 현재 컨테이너가 없는 레이아웃에 있으므로    
        // 뷰를 생성할 필요가 없음.      
      return null;      
  }        
 ScrollView scroller = new ScrollView(getActivity());      
  TextView text = new TextView(getActivity());     
   int padding = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  4, getActivity().getResources().getDisplayMetrics());        
text.setPadding(padding, padding, padding, padding);    
    scroller.addView(text);       
 text.setText(Shakespeare.DIALOGUE[getShownIndex()]); 
       return scroller;  
  }
}

이제 우리의 어플리케이션에 UI 플로우를 추가할 시간입니다. 세로모드에서는, 두 개의 fragment를 나란히 표시할 공간이 부족합니다. 따라서 우리는 이렇게 리스트만 보여지길 원합니다:

지금까지 보여진 코드에서 우리가 해야할 것은 세로화면에 대한 새로운 레이아웃 변화를 소개하는 것 뿐입니다:

TitlesFragment는 세부내용을 보여줄 컨테이너가 없고 단지 리스트만 있다는 것을 인지할 것입니다. 여러분이 리스트의 아이템을 터치하면 우리는 세부내용을 표시할 새로운 액티비티로 이동해야 합니다.

이미 구현된 DetailsFragment를 이용하여 새로운 액티비티의 구현이 매우 간단해 집니다. 왜냐면, 위의 동일한 DetailsFragment를 재사용할 수 있기 때문입니다:

public static class DetailsActivity extends FragmentActivity {     
@Override    
protected void onCreate(Bundle savedInstanceState) {        
super.onCreate(savedInstanceState);        
 if (getResources().getConfiguration().orientation   == Configuration.ORIENTATION_LANDSCAPE) {    
        // 화면이 가로보기 모드면, 리스트와 세부내용을 함께 보여줄 수 있기 때문에           
 // 이 액티비티가 필요없음.        
    finish();        
    return;    
    }       
  if (savedInstanceState == null) {           
 // 초기 설정 시, 세부내용 fragment를 플러그 인.           
 DetailsFragment details = new DetailsFragment();           
 details.setArguments(getIntent().getExtras());            
getSupportFragmentManager().beginTransaction().add(android.R.id.content, details).commit();
        }  
  }
}

이 모든 것을 합치면, 실행되는 화면에 따라 상당히 근본적으로 UI 플로우를 변화시키고 화면 설정이 변경되면 그에 따라 조정되는 어플리케이션의 작동 예제를 갖게 됩니다.
이것은 단지 단 방향 fragment가 여러분의 UI를 변경하는데 사용될 수 있음을 보여줍니다.  여러분의 어플리케이션 디자인에 따라, 여러분은 아마 다른 접근을 더 선호할지도 모릅니다.  예를 들면, 여러분은 여러분의 전체 어플리케이션을 상태가 변경됨에 따라 fragment 구조를 변경하는 하나의 액티비티에 넣을 수 있습니다; 이런 경우 fragment의 백 스택은 아주 편리합니다.
Fragment와 FragmentManager API에 대한 더 자세한 정보는 안드로이드 3.0 SDK 문서에서 찾을 수 있습니다.  Resources 탭에 있는 ApiDemos 어플도 참고하시기 바랍니다.  이 어플들에는 대체 UI 플로우, 아이얼로그, 리스트, 메뉴 표시, 액티비티 인스턴스 간의 데이터 유지, 백 스택 등을 포함한 다양한 종류의 Fragment 데모가 있습니다.

모두를 위한 Fragment!
안드로이드 3.0에 맞춰 디자인된 태블릿 지향적 어플리케이션을 개발하기 시작하는 개발자들에게 새로운 Fragment API는 대형 화면을 위한 많은 디자인 환경에 유용할 것입니다.  fragment의 합리적인 사용은 어플리케이션의 UI를 미래의 새로운 장치들(휴대폰, TV, 어떤 종류의 안드로이드 장치라도)에서 손쉽게 변경할 수 있도록 해줍니다.
하지만, 오늘날 많은 개발자들이 당장 필요한 것은 아마도 기존의 폰들을 지원함과 동시에 태블릿에서 향상된 사용자 인터페이스를 제공할 수 있는 어플리케이션을 디자인 하는 것일 것입니다.  Fragment가 안드로이드 3.0에서만 지원되기 때문에 이런 개발자들의 단기적 활용도가 상당히 감소되었습니다.
따라서, 우리는 여기에 언급한 동일한 fragment API (새로운 LoaderManager 포함)를 하위 버전의 안드로이드에서도 스태틱 라이브러리 형태로 사용할 수 있도록 만들 계획입니다.  1.6 이상부터 사용가능 하도록 노력할 것입니다.  사실, 여기의 예제 코드와 안드로이드 3.0 SDK의 예제를 비교해 보시면, 약간 다르다는 것을 아실 것입니다.  이 코드는 스크린샷에서 보시는 것처럼 안드로이드 2.3에서 돌아가는 초기 버전의 스태틱 fragment 클래스를 사용하는 어플리케이션에서 가져온 것입니다.  우리의 목표는 이 API들을 거의 동일하게 만들어서 여러분이 지금 당장 사용할 수 있게 만들고, 향 후 안드로이드 3.0을 최소 버전으로 하는 시기가 되면 약간의 변경으로 플랫폼의 네이티브  구현으로 옮겨올 수 있도록 하는 것입니다.
언제 이 라이브러리를 제공할 수 있을지에 대한 확정된 날짜는 없지만, 오래 걸리지 않을 것입니다.  그 동안, 여러분은 안드로이드 3.0에서 fragment를 사용해 개발을 시작할 수 있으며 어떻게 동작하는지 볼 수 있습니다.  여러분이 한 대부분의 작업은 나중에 그대로 사용할 수 있을 것입니다.

원문링크

출처 - http://atg.or.kr/blog/archives/798#