안드로이드 프레그먼트를 이용한 이미지 뷰어 ~ ImageViewer with Android Fragment

안드로이드 프레그먼트를 이용한 이미지 뷰어

ImageViewer with Android Fragment

프레그먼트는 분할된 화면들을 독립적으로 구성하기 위해 사용하며, 

분할된 화면들의 상태를 관리하기 위해 사용된다.

프레그먼트를 이용하게 되면 코드를 독립적으로 구성하기 위해 코드를 더 많이 입력해야 하지만, 분할된 화면들을 독립적으로 구성하고 상태를 관리하는데 용이하다.

The fragment is used to configue the divided screens independently

Used to manage the state of divided screens

Using Fragment requires more code input to configue the code independently, but makes it easier to configure the divided screens independently and manage the status

<?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">

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="image1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="image2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="image3"/>

</LinearLayout>

3개의 버튼이 있는 XML이다. 이는 fragment_list.xml 이다.

각 버튼을 누르면 해당하는 이미지가 뷰어에 보이는 기능을 가질 버튼들이다.

XML with 3 buttons, it name is fragment_list.xml

When each button is pressed, the corresponding image is the button that will have the functions visible in the viewer.

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

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/jihyojpg"/>

</android.support.constraint.ConstraintLayout>

이미지가 보일 뷰어이다.

이는 fragment_viewer.xml 이다.

It is a viewer where see images

it name is fragment_viewer.xml.

public class ListFragment extends Fragment {

    MainActivity activity;

    // 프래그먼트가 액티비티로 올라오는 그 순간 -> onAttach 메소드
    // the moment that fragment comes up to Activity -> onAttach method
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        activity = (MainActivity) getActivity();
    }

    // 인플레이션은 OnCreateView에서 한다.
    // inflation is at OnCreateView

    @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 button1 = 
                (Button) rootView.findViewById(R.id.button1);
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                activity.onImageChange(0);
            }
        });

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

        Button button3 = (Button) rootView.findViewById(R.id.button3);
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                activity.onImageChange(2);
            }
        });
        // 프레그먼트에서 다른 뷰어 프레그먼트에 직접 접근은 못한다.
        // 엑티비티쪽으로 요청 해야 한다.
        // you do not have direct access to other viewer segments in the pree
        // you have to request it to the Activity

        return rootView;
    }


}

fragment_list.xml가 인플레이트 되는 클래스 이며 Fragment를 상속받는다.

인플레이트는 OnCreateView에서 이루어져야 하기에 오버라이딩을 하도록 한다.

VIewGroup타입의 변수에 담고 그것을 리턴한다.

프레그먼트에서 다른 뷰어 프래그먼트에 직접 접근하지 못하기에 엑티비티쪽으로 요청을 해야한다.

그러기에는 onAttach 메소드가 필요하다. 이는 프래그먼트가 액티비티로 올라오는 순간을 잡는 메소드이다.

Fragment_list.xml is an inflate class and extends Fragment

Override the onCreateView in the onCreateView

Put it in a variable of the ViewGroup type and return it

The request should be made to the Activity because it does not have direct access to other Viewer fragment

That requires an onAttach method. this is a method that catches the moment when fragment is raised to activity

public class ViewerFragement 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 = (ImageView) rootView.findViewById(R.id.imageview);

        return rootView;
    }

    public void setImage(int index) {
        if (index == 0 ) {
            imageView.setImageResource(R.drawable.jihyojpg);
        } else if (index == 1 ) {
            imageView.setImageResource(R.drawable.dahyun);
        } else if (index == 2 ) {
            imageView.setImageResource(R.drawable.jung);
        }
    }
}

fragment_viewer.xml가 인플레이트 되는 클래스 이며 Fragment를 상속받는다.

setImage 메소드는 MainActivity에서 쓰이는 메소드이며, 각 인덱스에 따라 보이는 이미지가 달라지는 간단한 메소드이다.

Fragment_viewer.xml is an inflate class and extends Fragment

The setimage method is method used by MainActivity, and a simple method where the image shown depends on each index

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

    <fragment
        android:id="@+id/listFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:name="com.example.minki.myfragment.ListFragment"/>

    <fragment
        android:id="@+id/viewerFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:name="com.example.minki.myfragment.ViewerFragement"/>

</LinearLayout>

프레그먼트가 붙여질 MainActivity이다.

The MainActivity to be attached to the MainActivity

public class MainActivity extends AppCompatActivity {

    ListFragment fragment1;
    ViewerFragement fragment2;

    FragmentManager manager;

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

        manager = getSupportFragmentManager();
        
        fragment1 = (ListFragment) manager.findFragmentById(R.id.listFragment);
        fragment2 = (ViewerFragement) manager.findFragmentById(R.id.viewerFragment);
    }

    public void onImageChange(int index) {
        fragment2.setImage(index);
    }
}

프레그먼트의 아이디를 가져올때는 FragmentManager을 이용해야 한다.

여기서 버튼을 눌러야 하기 때문에 버튼이 눌렸을 때 발생되는 이벤트 메소드는 여기서 정의한다.

You should use FragmentManager to import the id of a Fragment.

Because the button must be pressed here, the event method that occurs when the button is pressed is defined here

I want to be smart