플렉시블한(동적인) UI 만들기( Building a Flexible UI )

 여러분의 앱을 디자인할 때 넓은 화면 사이즈를 지원하기 위해서, 가능한 화면의 크기를 기반으로 사용자경험(User Experence: UX)을 최적화 하기 위해 다른 레인아웃 구성에 여러분의 프레그먼트를 재사용할 수 있습니다.

 예를 들어, 핸드폰 같은 단말기(handset device)에서는 단일창의 UI 에 대해 한번에 하나의 프레그먼트를 보여주는 것이 적적할 지도 모릅니다. 반대로, 여러분은 사용자에게 더 많은 정보를 보여주기 위해 광범위한 화면크기(wider screen size)를 가진 테블릿(Tablet) 에서 나란히(side by side) 프레그먼트들을 설정하고 싶을 수도 있습니다.

 

그림 1. 다른 화면 크기를 가진, 같은 액티비티의 다른 구성을 보여주는 2개의 프레그먼트들. large 화면에서, 프레그먼트들은 양쪽에 나란히(side by side) 맞추어져 있지만, 핸드폰 같은 단말기(handset device)에서는, 사용자에 탐색 이동(navigates)에 따라 한번에 하나의 프레그먼트에 맞도록 각 각 따로 배치되어야만 합니다.

 FragmentManager 클래스는 여러분이 동적인 사용자 경험(Dynamic experence)을 만들기 위해 실행중에 액티비티에 프레그먼트를 추가, 제거, 재배치 할 수 있도록 하는 메소드를 제공합니다. 

실행중에 액티비티에 프레그먼트 추가하기

(Add a Fragment to an Activity at Runtime)

-----------------------------------

 레이아웃 파일 안에 액티비티에 대한 프레그먼트들을 정의(이전 포스트에서 <fragment> 요소로 소개했었던) 하는 대신에 여러분은 액티비티가 실행하는 동안 프레그먼트를 추가할 수 있습니다. 이 방법은 액티비티가 살아있는 동안에 프레그먼트들을 변경할 계획이 있을 때 필요합니다.

 프레그먼트를 추가하거나 제거하는 등의 작업을 실행하기 위해서는, FragmentTransaction을 만들기 위해 FragmentMananger를 사용해야만 합니다. FragmentTransaction 은 추가(add), 제거(remove), 재배치(replace), 다른 프레그먼트 트랜젝션(fragment transactions)들을 실행하는 API 들을 제공합니다.

 만약 여러분의 액티비티가 프레그먼트를 제거하고 재배치 한다면, 여러분은 반드시 액티비티의 onCreate() 메소드에서 프레그먼트(들)을 초기화 하도록 추가해야 만 합니다.

 프레그먼트(들)을 처리할 때(특히, 실행중에 프레그먼트들을 추가할 때) 중요한 법칙은 여러분의 액티비티 레이아웃이 프레그먼트를 삽입할 있는 컨테이너 뷰(container View)를 포함하고 있어야만 한다는 것입니다.

  아래의 레이아웃은 이전 포스트에서 보여줬던 한번에오직 한 개의 프레그먼트만 보여주는 레이아웃의 대체 리소스입니다. 다른 프레그먼트와 함께 프레그먼트를 재배치 하기 위해서 액티비티의 레이아웃은 프레그먼트의 컨테이너(container)로서 비어있는 FrameLayout 을 포함하고 있습니다.

이전 포스트에서 만들었던 레이아웃 파일과 같은 이름이라는 것을 주의하시기 바랍니다. 레이아웃 디렉토리에 larger 규정 크기가 없다면 이 레이아웃은 larger 보다 작은 단말기 화면에서 사용되어 집니다. 왜냐하면 화면은 같은 시간에 프레그먼트들 모두들 맞추지 않기 때문입니다.

res/layout/news_articles.xml :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/fragment_container"     android:layout_width="match_parent"     android:layout_height="match_parent" />

 여러분의 액티비티 안에서, Support Library APIs 를 사용한 FragmentManager를 얻기 위해 getSupportFragmentManager 를 호출합니다. 그런다음 FragmentTransaction 을 만들기 위해 beginTransaction() 을 호출하고 add()를 호출해서 fragment 를 추가합니다.

 여러분은 같은 FragmentTransaction을 사용하여 액티비티에 대한 다중 프레그먼트 트랜잭션(fragment transaction)을 실행할 수 있습니다. 여러분이 변경사항을 만들 준비가 되었다면 반드시 commit() 메소드를 호출해야만 적용됩니다.

아래의 예제는 이전 레이아웃에 프레그먼트를 추가하는 방법입니다.

import android.os.Bundle; import android.support.v4.app.FragmentActivity; public class MainActivity extends FragmentActivity {     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.news_articles);         // Check that the activity is using the layout version with         // the fragment_container FrameLayout         if (findViewById(R.id.fragment_container) != null) {             // However, if we're being restored from a previous state,             // then we don't need to do anything and should return or else             // we could end up with overlapping fragments.             if (savedInstanceState != null) {                 return;             }             // Create a new Fragment to be placed in the activity layout             HeadlinesFragment firstFragment = new HeadlinesFragment();                          // In case this activity was started with special instructions from an             // Intent, pass the Intent's extras to the fragment as arguments             firstFragment.setArguments(getIntent().getExtras());                          // Add the fragment to the 'fragment_container' FrameLayout             getSupportFragmentManager().beginTransaction()                     .add(R.id.fragment_container, firstFragment).commit();         }     } }

 실행중에 FrameLayout 컨테이너(container)에 추가되어진 프레그먼트이기 때문에( <fragment> 태그로 액티비티의 레이아웃에 정의한 것 대신에) 액티비티는 프레그먼트를 제거하고 다른 것들과 함께 재 배치 할 수 있습니다.

다른 프레그먼트와 함께 프레그먼트 재배치하기

( Replace One Fragment with Another)

----------------------------------------------------------------

 프레그먼트를 재배치(replace)하는 작업은 추가(add)하는 작업과 비슷합니다. 단지 add() 대신에 replace() 를 사용하면 됩니다.

 여러분이 프레그먼트를 재배치 하거나 제거하는 등의 프레그먼트 트랜잭션들을 실행할 때, 사용자가 종종 뒤로가기(navigate backward)를 하거나 변경을 "취소(undo)" 하면 적절히 동작하도록 해야 한다는 점을 유의하시기 바랍니다. 사용자가 프레그먼트 트랜잭션들을 통해 뒤로가기(navigate backward)를 동작하려면 여러분은 반드시 FragmentTransaction을 커밋(commit)하기 전에addToBackStack()을 호출해야만 합니다.

 Note: 여러분이 프레그먼트를 제거(remove)하거나 재배채(replace) 하고 back 스택(stack)에 추가했을 때, 제거된 프레그먼트는 정지(stoped)됩니다(파괴되지 않습니다. Not Destroyed). 만약 사용자가 프레그먼트를 복구하기 위해 뒤로가기(navigate backward)를 한다면, 프레그먼트는 다시 시작합니다. 만약 여러분이 백 스택(back stack)에 추가하지 않는 다면, 프레그먼트는 제거(remove)되거나 재배채(replace)될 때 파괴(Destroyed) 됩니다.

 다른 프레그먼트와 함께 프레그먼트를 재배치하는 예제입니다 :

// Create fragment and give it an argument specifying the article it should show ArticleFragment newFragment = new ArticleFragment(); Bundle args = new Bundle(); args.putInt(ArticleFragment.ARG_POSITION, position); newFragment.setArguments(args); FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); // Replace whatever is in the fragment_container view with this fragment, // and add the transaction to the back stack so the user can navigate back transaction.replace(R.id.fragment_container, newFragment); transaction.addToBackStack(null); // Commit the transaction transaction.commit();

 addToBackStack() 메소드는 트랙잭션에 대한 유일한 이름을 지정한 하나의 옵션 문자열(string) 파라미터를 가집니다. 이 이름은 여러분이 FragmentManager.BackStackEntry APIs 를 사용하는 향샹된 프레그먼트(advanced fragment) 명령들을 실행하는 경우를 제외하고는 필요하지 않습니다.