[Do it! 안드로이드 앱 프로그래밍 #12] 프래그먼트로 화면 만들기

12 프래그먼트로 화면 만들기

저번 글에서는 하나의 액티비티에 하나의 프래그먼트가 들어가도록 만들었다면, 이번 글에서는 하나의 액티비티에 두 개의 프래그먼트가 들어가도록 만들어볼 것이다. 화면의 위쪽과 아래쪽을 나눈 후 위쪽에는 이미지 선택이 가능한 리스트가 보이는 프래그먼트를 만들어 넣고 아래쪽에는 선택된 이미지가 보이는 프래그먼트를 만들어 넣는다.

 

우선, 순서를 간단하게 요약해보겠다. 자세한 설명은 소스 코드와 그 밑의 설명을 참고하길 바란다.

 

[XML 레이아웃]

① 첫 번째 프래그먼트를 위한 XML 레이아웃 fragment_list.xml을 만들고 세 개의 버튼을 추가한다.

② 두 번째 프래그먼트를 위한 XML 레이아웃 fragment_viewer.xml을 만들고 이미지뷰를 추가한다.

③ 메인 액티비티의 XML 레이아웃에 두 개의 프래그먼트를 추가한다.

 

[소스 코드]

① ListFragment.java에 ImageSelectionCallback 인터페이스를 추가하고, 각각의 버튼에 클릭 이벤트를 설정한다.

② ViewerFragment.java에 setImage 메서드를 정의해 이미지뷰에 이미지를 설정한다.

③ MainActivity.java에서 ImageSelectionCallback 인터페이스를 구현하고, 메서드를 오버라이딩할 때 setImage 메서드를 호출한다.

 

▼ ImageSelectionCallback 인터페이스 추가하고 버튼에 클릭 이벤트 설정하기

public class ListFragment extends Fragment {

    public interface ImageSelectionCallback {
        void onImageSelected(int position);
    }

    public ImageSelectionCallback callback;

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

        if(context instanceof ImageSelectionCallback){
            callback = (ImageSelectionCallback) context;
        }
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_list, container, false);

        Button button = rootView.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(callback != null){
                    callback.onImageSelected(0);
                }
            }
        });

        Button button2 = rootView.findViewById(R.id.button2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(callback != null){
                    callback.onImageSelected(1);
                }
            }
        });

        Button button3 = rootView.findViewById(R.id.button3);
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(callback != null){
                    callback.onImageSelected(2);
                }
            }
        });

        return rootView;
    }
}

ImageSelectionCallback 인터페이스를 ListFragment.java에 추가할 수도 있고, MainActivity.java에 추가할 수도 있는데, 여기서는 ListFragment.java에 추가한다.

 

프래그먼트에서 액티비티를 참조하고 싶다면 onAttach 메서드로 전달되는 파라미터를 참조하거나 getActivity 메서드를 호출하여 반환되는 객체를 참조할 수 있다. 여기서는 onAttach 메서드가 호출될 때 callback 변수에 ImageSelectionCallback 자료형 객체를 할당한다.

 

*Context: 거의 최상위 클래스

 

fragment_list.xml 파일을 인플레이션하면 findViewById 메서드로 프래그먼트 안에 있는 버튼을 참조할 수 있게 된다.

 

각각의 버튼에 callback 객체의 onImageSelected 메서드를 호출하도록 하는 클릭 메서드를 설정한다.

 

▼ setImange 메서드 정의하고 이미지뷰에 이미지 설정하기

public class ViewerFragment extends Fragment {
    ImageView imageView;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_viewer, container, false);

        imageView = rootView.findViewById(R.id.imageView);
        return rootView;
    }

    public void setImage(int resId){
        imageView.setImageResource(resId);
    }
}

fragment_viewer.xml 파일을 인플레이션하고 findViewById 메서드로 프래그먼트 안에 있는 이미지뷰를 참조한다.

 

setImage 메서드를 만들어 액티비티에서 이 프래그먼트에 있는 이미지뷰에 이미지를 설정할 수 있도록 한다.

 

▼ ImageSelectionCallback 인터페이스 구현하고, 메서드 오버라이딩할 때 setImage 메서드를 호출하기

public class MainActivity extends AppCompatActivity implements ListFragment.ImageSelectionCallback {
    ListFragment listFragment;
    ViewerFragment viewerFragment;

    int[] images = {R.drawable.kuma1, R.drawable.kuma2, R.drawable.kuma3};	// 리소스 수정 후 사용

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

        FragmentManager manager = getSupportFragmentManager();
        listFragment = (ListFragment) manager.findFragmentById(R.id.listFragment);
        viewerFragment = (ViewerFragment) manager.findFragmentById(R.id.viewerFragment);
    }

    @Override
    public void onImageSelected(int position) {
        viewerFragment.setImage(images[position]);
    }
}

ImageSelectionCallback 인터페이스를 구현한다.

 

FragmentManager 객체의 findFragmentById 메서드를 사용해 두 개의 프래그먼트를 찾아 변수에 할당한다.

 

ListFragment.java에서 호출한 onImageSelected 메서드를 정의한다. ViewerFragment의 setImage 메서드를 호출해 이미지가 바뀌도록 한다. 

 

프래그먼트로 화면 전환하기