안드로이드 개발 Fragment 화면 구성하는 방법 - FragmentActivity 로 화면 구성

안드로이드 개발 Fragment 화면 구성하는 방법 - FragmentActivity 로 화면 구성

 

환경: Android Studio

 

.프래그먼트의 장점은 하나의 Activity 에서 여러 개의 프래그먼트로 화면을 구성한 뒤 동적으로 부분 교체가 가능하며, 여러 Activity 에서 재사용이 가능하다는 것입니다. 다시 말해서 역동적이고 유연한 UI 디자인이 가능합니다. 이런 Fragement 로 화면을 구성하는 방법은 여러 가지입니다. 오늘은 Activity 대신 FragmentActivity 를 상속받아 화면을 구성하겠습니다.

 

▼ 결과 화면은 다음과 같습니다. 상단과 하단을 나누어서 두 개의 Fragment 로 메인 화면을 구성합니다. 화면에서 동적으로 추가하는 것이 아니라 Activity 레이아웃 XML 에 <fragment> 태그를 이용해서 인스턴스를 생성할 것입니다.

 

▼ 메인 Activity 는 간단합니다. onCreate() 에서 화면을 구성할 news_articles.xml 을 로딩합니다. 

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MyFragmentActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_articles);
    }
}

▼ Activity 를 구성하는 메인 레이아웃 XML 입니다. <fragment> 태그를 이용해서 두 화면을 구성하였습니다. name 속성에 Fragment 를 상속받아 만든 클래스와 패키지 주소를 입력하면 별도의 작업 없이 바로 화면을 구성할 수 있습니다.

 

new_articles.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment android:name="gon.com.kakaomanager.HeadFragment"
        android:id="@+id/head_fragment"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

    <fragment android:name="gon.com.kakaomanager.MainFragment"
        android:id="@+id/main_fragment"
        android:layout_weight="2"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

</LinearLayout>

▼ 메인 Activity 를 구성하는 첫 번째 상단 fragment 입니다. Fragment 클래스를 상속받아 만들었습니다. onCreateView() 에서 LayoutInflater 객체를 통해 화면을 구성합니다.

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

public class HeadFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.head_view, container, false);
    }
}

▼ 첫 번째 Fragment 화면을 구성하는 XML 레이아웃 입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Head Fragment"
        android:textSize="25dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_green_dark"/>

</LinearLayout>

▼ 두 번째 상단 fragment 는 다음과 같습니다. 첫 번째와 다를 것이 없습니다. onCreateView() 에서 화면을 구성합니다.

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

public class MainFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.main_view, container, false);
    }
}

▼ 두 번째 Fragment 를 구성하는 화면 레이아웃 입니다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:text="Main Fragment"
        android:textSize="24dp"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

 

◎ 다른 프래그먼트로 교체하는 방법

 

▼ Fragment 는 사용자가 동적으로 추가, 제거, 교체할 수 있습니다. FragmentTransaction 의 인스턴스를 FragmentManager 로 가져와서 beginTransaction() 함수를 실행합니다. 반영은 commit() 입니다.

public void onFragmentChange(View v){
    Fragment newFragment;
    if (result) {
        newFragment = new MainFragment();
        result = false;
    }else{
        newFragment = new OneFragement();
        result = true;
    }

    FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction fragmentTransaction = fm.beginTransaction();
    fragmentTransaction.replace(R.id.main_fragment, newFragment);
    fragmentTransaction.commit();
}