시소당

안드로이드 스튜디오 예제 4 – 프래그먼트 교체

본 예제에서는 두 개의 프래그먼트를 생성하고 하나의 프래그먼트만 액티비티 상에 배치할 것이다. 그리고, 액티비티의 버튼을 누르면 다른 프래그먼트로 교체되도록 하는 내용에 대해서 살펴볼 것이다.

——————————————————————————————————–

안드로이드 스튜디오를 실행한다.

“Start a new Android Studio project”를 선택한다.

“Application name”에 “FragmentTestApplication”을 입력하고 Next 버튼을 클릭한다.

“Phone and Table”, “Minimum SDK = API 22″를 선택하고 Next 버튼을 클릭한다.

“Blank Activity”를 선택하고 Next 버튼을 클릭한다.

“Activity Name”에 “MainActivity”를 입력하고 Finish 버튼을 클릭한다.

그리고, 다음과 같은 모습의 안드로이드 스튜디오를 볼 수 있다.
(content_main.xml이 선택된 상태)

“Hello World!”가 적혀있는 텍스트 뷰를 선택하여 삭제한다.

최상단 왼쪽과 오른쪽에 각각 한 개씩 Button을 추가한다. (drag & drop 이용)

왼쪽 버튼을 더블클릭하고 text: “Button1”,  id: “button1″을 적어준다. 버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “button1_string”을 적어준다.

오른쪽 버튼을 더블클릭하고 text: “Button2”,  id: “button2″을 적어준다. 버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “button2_string”을 적어준다.

이제 첫 번째 프래그먼트의 UI를 생성할 차례이다. 프로젝트 도구 창에서 app->res->layout을 마우스 오른쪽 버튼(Mac에서는 control+click)으로 클릭한 후, New->Layout resource file을 선택한다.

대화상자가 나타나면 File name=”first_fragment”, Root element=”RelativeLayout”을 입력하고 OK 버튼을 클릭한다. (File name은 반드시 모두 소문자이어야 한다.)
빈 화면의 첫 번째 프래그먼트가 생성되면 Large Text를 drag & drop으로 정 가운데에 배치하고, text: “First Fragment”,  id: “textView1″을 적어준다.  버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “first_fragment_string”을 적어준다. 빈 화면을 클릭한 후 Properties에서 background 항목에 빨간색(#ff0000)을 설정한다. (배경색을 지정하지 않으면 투명으로 설정되어 프래그먼트 전환시 겹쳐보이는 문제가 발생함.)

동일한 방법으로 두 번째 프래그먼트의 UI를 생성하자.

프로젝트 도구 창에서 app->res->layout을 마우스 오른쪽 버튼(Mac에서는 control+click)으로 클릭한 후, New->Layout resource file을 선택한다.

대화상자가 나타나면 File name=”secone_fragment”, Root element=”RelativeLayout”을 입력하고 OK 버튼을 클릭한다. ((File name은 반드시 모두 소문자이어야 한다.)

빈 화면의 첫 번째 프래그먼트가 생성되면 Large Text를 drag & drop으로 정 가운데에 배치하고, text: “Second Fragment”,  id: “textView2″을 적어준다.  버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “second_fragment_string”을 적어준다. 빈 화면을 클릭한 후 Properties에서 background 항목에 노란색(#ffff00)을 설정한다. (배경색을 지정하지 않으면 투명으로 설정되어 프래그먼트 전환시 겹쳐보이는 문제가 발생함.)

이제 각 프래그먼트의 UI와 연동되는 JAVA 클래스를 생성할 차례이다. 우선 첫 번째 프래그먼트의 JAVA 클래스를 생성해보자.

app->java->com.example.administrator를 마우스 오른쪽 버튼(Mac에서는 control+click)으로 클릭한 후, Java Class를 선택한다.

대화상자가 나타나면 Name=”FirstFragment”를 입력하고 OK 버튼을 클릭한다. (JAVA 클래스 이름은 대문자로 시작하는 것이 관례이다.)

다음과 같은 기본 소스코드가 나타난다.

소스코드를 다음과 같이 수정한다.

package com.example.administrator.fragmenttestapplication;

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

public class FirstFragment extends Fragment {

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

동일한 방법으로 두 번째 프래그먼트의 JAVA 클래스를 생성하고 소스코드를 다음과 같이 수정한다.

package com.example.administrator.fragmenttestapplication;

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

public class SecondFragment extends Fragment {

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

인플레이트(inflate)를 한다는 것은 동작 가능한 view 객체로 생성한다는 의미이다. 여기서는 각 프래그먼트의 layout id인 first_fragment와 second_fragment id를 이용하여 JAVA 클래스와 UI를 연동시키도록 하였다.

app->res->layout->content_main.xml을 선택하고, 아래 부분에 Custom 하위에<fragment>를 찾을 수 있다. <fragment>를 클릭하면 사용 가능한 프래그먼트 목록이 나오는데, 첫 번째 프래그먼트를 설정해주자.

<fragment>를 화면 중앙에 위치시키고, 더블클릭하여 id=”fragment_place”라고 입력한다.

다음과 같이 디자인 모드에서 어떤 프래그먼트를 보여줄 지 알 수가 없다는 메시지가 출력된다.

@layout/first_fragment를 선택하여 첫 번째 프래그먼트가 보이도록 설정한다.

이제 버튼을 클릭했을 때 이벤트를 처리할 함수를 설정해야 한다. 여기서는 가장 간단한 이벤트 처리 방식을 사용하려고 한다. 버튼 두 개를 모두 선택하고 onClick에 ChangeFragment를 입력한다.

MainActivity.java의 코드를 다음과 같이 수정한다.

package com.example.administrator.fragmenttestapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show();
            }
        });

        Fragment fragment = new FirstFragment();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.add( R.id.fragment_place, fragment );
        fragmentTransaction.commit();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, 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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    public void ChangeFragment( View v ) {

        Fragment fragment;

        switch( v.getId() ) {
            default:
            case R.id.button1: {
                fragment = new FirstFragment();
                break;
            }
            case R.id.button2: {
                fragment = new SecondFragment();
                break;
            }
        }

        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace( R.id.fragment_place, fragment );
        fragmentTransaction.commit();
    }
}

onCreate 함수에 추가된 내용은 앱이 처음 시작되었을 때 어떠한 프래그먼트를 보여줄지에 대한 것이고 여기서는 첫 번째 프래그먼트로 설정되도록 했다. ChangeFragment 함수는 버튼이 클릭되었을 때 발생하는 이벤트를 처리하는 함수로 switch문을 이용하여 어떠한 버튼이 클릭되었는지를 판별하고 FragmentManager와 FragmentTransaction을 이용하여 Fragment를 교체하는 기능을 수행한다.

Shift+F10를 눌러서 “Device Chooser”를 띄우고, Button1과 Button2를 클릭하면 프래그먼트가 교체되는 것을 확인할 수 있다.