* 프래그먼트(Fragment) 로 화면 만들기
프래그먼트를 이용해서 각 버튼을 클릭시 이미지가 변경되도록 해보자.
즉 한 화면에 두 개의 프래그먼트가 들어가게 된다.
하나는 버튼으로만 구성되어 있는 프래그먼트, 다른 하나는 이미지를 볼수 있는 프래그먼트이다.
위쪽 프래그먼트에서 선택한 이미지가 어떤 것인지를 액티비티에 알려준 후 액티비티에서 아래쪽 프래그먼트에 해당 이미지가 보이게 만들어야 한다.
* fragment_list.xml - 버튼들만 가지고 있는 위쪽 레이아웃
 |
| 버튼 세개를 넣었으며, 각 버튼마다 이미지가 다르게 나타나도록 할 것이다. |
* ListFragment.java
화면에서 선택된 버튼에 따라 다른 프래그먼트의 이미지를 바꿔주려면 액티비티 쪽으로 데이터를 전달해야만 한다.
package org.techtown.fragment;
import android.content.Context;
import android.media.Image;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
public class ListFragment extends Fragment {
/**
* ImageSelectionCallback 인터페이스를 정의함
* 메인액티비티가 이 인터페이스를 구현하게 되면 프래그먼트의 각 버튼이 눌릴 때
* 메인액티비티의 onImageSelected를 호출하게 된다.
*/
public static interface ImageSelectionCallback{
public void onImageSelected(int position);
}
public ImageSelectionCallback callback;
/**
* 프래그먼트가 액티비티 위에 올라오는 시점에 호출되는 메서드
* @param context : 이 프래그먼트가 올라가는 액티비티를 말한다.
*/
@Override
public void onAttach(Context context){
super.onAttach(context);
// 메인엑티비티가 ImageSelectionCallback 인터페이스를 구현했으므로
// context(메인엑티비티) 는 ImageSelectionCallback로 형변환이 가능하다.
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);
//각각의 버튼을 클릭했을 떄 callback객체의 onImageSelected()메서드를 호출한다.
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;
}
}
* fragment_viewer.xml - 이미지를 보여주는 아래쪽 레이아웃
|
|
| LinearLayout에 ImageView를 세팅하고 첫번째 이미지를 설정해둔다. |
* ViewerFragment.java
ViewerFragment는 이미지를 보이게 하는 프래그먼트이다.
액티비티에서 이 프래그먼트의 setImage를 하면 해당 이미지로 바뀌게 된다.
package org.techtown.fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
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);
}
}
* activity_main.xml
메인엑티비티에 아래와 같이 ListFragment와 ViewerFragment를 동일한 화면비중을 차지하도록 설정하도록 만든다.
* MainActivity.java
package org.techtown.fragment;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import android.os.Bundle;
//MainActivity는 ListFragment.ImageSelectionCallback를 구현한다.
public class MainActivity extends AppCompatActivity implements ListFragment.ImageSelectionCallback{
ListFragment listFragment;
ViewerFragment viewerFragment;
int[] images = {R.drawable.dream01,R.drawable.dream02,R.drawable.dream03};
@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);
}
/**
* ListFragment에서 버튼이 클릭될때 메인엑티비티에 구현된 onImageSelected을 호출하게 되고
* viewerFragment의 setImage를 호출함으로써 프래그먼트의 이미지를 변경하도록 한다.
* @param position
*/
@Override
public void onImageSelected(int position) {
viewerFragment.setImage(images[position]);
}
}
* 결과
 |
| 실행해보면 버튼을 클릭할 때마다 이미지가 바뀌게 된다. |
