[5] Fragment 로 다이나믹 UI 만들기 [2] 가변 UI 만들기

THIS LESSON TEACHES YOU TO

  1. Add a Fragment to an Activity at Runtime
  2. Replace One Fragment with Another

YOU SHOULD ALSO READ

TRY IT OUT

Download the sample

FragmentBasics.zip


 

When designing your application to support a wide range of screen sizes, you can reuse your fragments in different layout configurations to optimize the user experience based on the available screen space.

넓은 사이즈의 스크린을 지원하기 위해서, fragment 를 다시 사용할 수 있습니다. 이용 가능한 공간에 따라 UX를 최적화 해 보겠습니다.

For example, on a handset device it might be appropriate to display just one fragment at a time for a single-pane user interface. Conversely, you may want to set fragments side-by-side on a tablet which has a wider screen size to display more information to the user.

예를 들면, 스마트폰은 한 화면에 한 fragment 를 보여주는게 적절할 것 같네요. 반대로, 좌우로 넓은 타블렛 같은 경우에는, 좌 우로 fragment 를 두는 것이 좋겠지요

Figure 1. Two fragments, displayed in different configurations for the same activity on different screen sizes. On a large screen, both fragments fit side by side, but on a handset device, only one fragment fits at a time so the fragments must replace each other as the user navigates.

그림 1. 두 개의 fragments, 기기별로 다른 스크린 사이즈를 갖고 있는데, 같은 액티비티를 다르게 표시해 줍니다. 큰 화면에서는 좌 우로 두 개의 화면이 있고, 스마트폰같이 작은 화면에서는 단 하나의 fragment 만 화면을 차지하게 합니다.

The FragmentManager class provides methods that allow you to add, remove, and replace fragments to an activity at runtime in order to create a dynamic experience.

FragmentManager 클래스는 이러한 방법을 제공합니다. fragment들을 더하거나 빼고, 다른 fragment 로 교체할 수 있습니다.

런타임에서 액티비티에 fragment 추가하기 – Add a Fragment to an Activity at Runtime


Rather than defining the fragments for an activity in the layout file—as shown in the previous lesson with the<fragment> element—you can add a fragment to the activity during the activity runtime. This is necessary if you plan to change fragments during the life of the activity.

레이아풋 파일에 있는 액티비티에 fragment 를 정의하는 방식보다, 액티비티에 fragment를 동작 중에 (앱 구동 중) 더하는 방법을 알아봅니다. 이전 시간에는 xml 파일에 fragment 엘리먼트를 넣는 방식으로 추가했었지요.

To perform a transaction such as add or remove a fragment, you must use the FragmentManager to create aFragmentTransaction, which provides APIs to add, remove, replace, and perform other fragment transactions.

fragment를 추가, 삭제같은 기능을 수행하기 위해서, 반드시 FragmentManager 를 사용해야 합니다. 이 것으로 FragmentTransaction을 생성할 수 있습니다. 이게 바로 API를 제공하는데요, 그 API는 더하거나 빼거나 교체하거나 다른 fragment로의 변환을 수행하도록 합니다.

If your activity allows the fragments to be removed and replaced, you should add the initial fragment(s) to the activity during the activity’s onCreate() method.

만약 액티비티가 fragment를 제거하거나 교체하도록 허용한다면, 그 액티비티의 onCreate() 메서드에서, 초기 fragment 를 더해야합니다.

An important rule when dealing with fragments—especially when adding fragments at runtime—is that your activity layout must include a container View in which you can insert the fragment.

fragment 를 다룰 때 중요한 규칙은 (특히 fragment 를 런타임에서 추가할 때) 액티비티 레이아웃은 반드시 View 컨테이너를 포함하고 있어야 한다는 것입니다. 이 것은 우리가 fragment 를 삽입할 수 있게 해 주는 것입니다.

The following layout is an alternative to the layout shown in the previous lesson that shows only one fragment at a time. In order to replace one fragment with another, the activity’s layout includes an empty FrameLayout that acts as the fragment container.

다음 레이아웃은 이전 시간에 배운, 한 번에 한 개의 fragment 만 보여주는 레이아웃으로 대체 가능합니다. 한 fragment 를 다른 fragment 로 교체하기 위해서, 액티비티의 레이아웃은 빈 FrameLayout 을 포함해야 합니다. 이 것은 fragment container 처럼 행동합니다.

Notice that the filename is the same as the layout file in the previous lesson, but the layout directory does nothave the large qualifier, so this layout is used when the device screen is smaller than large because the screen does not fit both fragments at the same time.

파일 이름은 레이아웃 파일 이름과 같아야 합니다. 하지만 레이아웃 디렉토리는 large qulifier 를 갖고 있지 않습니다. 그래서 이러한 레이아웃은 사용됩니다. 디바이스 스크린이 large 보다 작을 때 말이지요. 왜냐하면 스크린은 두 fragment 를 동시에 맞출 수는 없습니다.

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" />

Inside your activity, call getSupportFragmentManager() to get a FragmentManager using the Support Library APIs. Then call beginTransaction() to create a FragmentTransaction and call add() to add a fragment.

액티비티 안에서, getSupportFragmentManager() 를 호출해서 FragmentManager를 획득합니다. 이 것은 서포트 라이브러리 API를 사용하지요. 그리곤 beginTransaction()을 FragmentTransaction을 생성하기 위해 호출합니다. 그리고 fragment 를 더하기 위해 add() 를 호출합니다.

You can perform multiple fragment transaction for the activity using the same FragmentTransaction. When you’re ready to make the changes, you must call commit().

같은 FragmentTransaction을 시용해서 액티비티에 복수의 fragment transaction을 할 수 있습니다. 우리가 변화를 만들 준비가 되면 우리는 commit()를 호출해야 합니다.

For example, here’s how to add a fragment to the previous layout:

예를 들어, 어떻게 fragment 를 예전 layout 에 추가하는지 알아봅니다.

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();
        }
    }
}

Because the fragment has been added to the FrameLayout container at runtime—instead of defining it in the activity’s layout with a <fragment> element—the activity can remove the fragment and replace it with a different one.

fragment 는 FrameLayout 컨테이너를 런타임에 추가했었기 때문에 액티비티는 fragment 를 삭제하거나 다른 것으로 대체할 수 있습니다.

Fragment 를 다른 것으로 교체하기 – Replace One Fragment with Another


The procedure to replace a fragment is similar to adding one, but requires the replace() method instead of add().

한 fragment 를 다른 fragment 로 교체하기 위해서, relate() 메서드를 add() 메서드 대신에 씁니다.

Keep in mind that when you perform fragment transactions, such as replace or remove one, it’s often appropriate to allow the user to navigate backward and “undo” the change. To allow the user to navigate backward through the fragment transactions, you must call addToBackStack() before you commit the FragmentTransaction.

우리가 fragment transaction 을 수행할 때는, 사용자가 undo 를 하거나 뒤로 갈 때도 허용해 줘야 합니다. 뒤로 탐색하는 것을 허용하기 위해서 반드시 addToBackStack() 을 (FragmentTransaction 을 commit 하기 전에) 해 줘야합니다.

Note: When you remove or replace a fragment and add the transaction to the back stack, the fragment that is removed is stopped (not destroyed). If the user navigates back to restore the fragment, it restarts. If you do notadd the transaction to the back stack, then the fragment is destroyed when removed or replaced.

주의: 교체나 제거할 때 그리고 back stack으로 transaction 할 때, 제거된 fragment 는 정지됩니다 (파괴가 아니라). 만약 사용자가 뒤로 간다면 다시 재시작 합니다. 만약 back stack 으로의 변환을 추가하지 않았다면 fragment 는 파괴됩니다.

Example of replacing one fragment with another:

예제는 보시지요

// 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();

The addToBackStack() method takes an optional string parameter that specifies a unique name for the transaction. The name isn’t needed unless you plan to perform advanced fragment operations using theFragmentManager.BackStackEntry APIs.

addToBackStack 메서드는 옵션하게 string 파라메터를 취합니다. 이 것은 유일한 이름을 명시합니다. 이 이름은 advanced 한 fragment 동작을 수행하지 않는 한 필요는 없습니다.


답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중