[Android] 안드로이드 : 프래그먼트 만들기

1. 프래그먼트란?

• 한 화면에 여러 부분 화면을 넣는 방식을 쓸 때 사용
  • 레이아웃으로 화면을 쪼개면 다른 화면에 쓸 때 레이아웃/소스코드를 복붙해야 함 > 번거로움
  • 부분적으로 레이아웃 잡아야 하는 부분은 독립적으로 운영

왼쪽 : 스마트폰(작은 화면) // 오른쪽 : 태블릿(큰 화면)

• 프래그먼트 : 독립적으로 부분 화면을 구성하는 것 . 액티비티를 본따서 만들었음
  • 액티비티 : 하나의 액티비티에서 다른 액티비티로 가려면 액티비티 매니저를 통해서 인텐트를 보내서 전송 (시스템 내)
  • 프래그먼트 : 하나의 프래그먼트에서 다른 프래그먼트로 가려면 프래그먼트 매니저를 통해서 메소드를 보내서 전송

 

• 프래그먼트를 이용해 화면 전환하기
  • 액티비티 : 시스템에서 관리하므로 리소스 많이 먹음 (무거움)
  • 프래그먼트 : 액티비티는 그대로 두고 화면 전환 하므로 리소스 효율적. 보안 면에서도 안정적

 

• 프래그먼트를 동작시키기 위해서는 인플레이션 과정 필요

• 프래그먼트를 만들어서 추가하는 과정
  
  
  

 

• 프래그먼트의 수명주기

 

2. 프래그먼트 예시

• 방법1 : activity_main.xml에 <fragment/> 추가하기
• 방법2 : MainActivity.java에 onClick 메소드로 추가하기

* 예시는 방법2 입니다.

(1) activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="메인" />



    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/button">

        <!--

        <fragment
            android:id="@+id/mainFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:name="org.techtown.fragment.MainFragment"/>

            -->


    </FrameLayout>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginStart="23dp"
        android:layout_marginLeft="23dp"
        android:layout_toEndOf="@+id/button"
        android:layout_toRightOf="@+id/button"
        android:text="메뉴" />


</RelativeLayout>

 

(2) MainActivity.java

public class MainActivity extends AppCompatActivity {
    MainFragment fragment1;
    MenuFragment fragment2;

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

        fragment1 = new MainFragment();
        fragment2 = new MenuFragment();

        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager().beginTransaction().replace(R.id.container,fragment1).commit();
            }
        });

        Button button2 = (Button) findViewById(R.id.button2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager().beginTransaction().replace(R.id.container,fragment2).commit();
            }
        });
    }


    public void onFragmentChange (int index) {
        if (index == 0) {
            getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();
        } else if (index == 1) {
            getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment2).commit();
        }
    }
}

 

(3) fragment_main.xml

• xml 파일 내 버튼 클릭하면 fragment_menu.xml로 이동

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF9800"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="프래그먼트1"
        android:textSize="40sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="메뉴화면으로" />
</LinearLayout>

 

(4) MainFragment.java

public class MainFragment extends Fragment {

    MainActivity activity;

    // onAttach : activity 위에 올라간다
    // onDetach : activity 위에서 내려온다

    // generate > override methods > onAttach / onDetach

    @Override
    public void onAttach(@NonNull Context context) {
        super.onAttach(context);

        activity = (MainActivity) getActivity();
    }

    @Override
    public void onDetach() {
        super.onDetach();

        activity = null;
    }

    // generate > override methods > onCreateView : xml과 java 연결 (inflation)
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_main, container, false);

        Button button = (Button) rootView.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                activity.onFragmentChange(1);
            }
        });

        return rootView;
    }
}

 

(5) fragment_menu.xml

• xml 파일 내 버튼 클릭하면 fragment_menu.xml로 이동

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E91E63"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="프래그먼트2"
        android:textSize="40sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="메인화면으로" />
</LinearLayout>

 

(6) MenuFragment.java

public class MenuFragment extends Fragment {
    MainActivity activity;

    // onAttach : activity 위에 올라간다
    // onDetach : activity 위에서 내려온다

    // generate > override methods > onAttach / onDetach

    @Override
    public void onAttach(@NonNull Context context) {
        super.onAttach(context);

        activity = (MainActivity) getActivity();
    }

    @Override
    public void onDetach() {
        super.onDetach();

        activity = null;
    }

    // generate > override methods > onCreateView : xml과 java 연결 (inflation)
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_menu, container, false);

        Button button = (Button) rootView.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                activity.onFragmentChange(0);
            }
        });

        return rootView;
    }
}

 

3. 결과 화면