이것이 바로 Fragment 2편

이것이 바로 Fragment 2편

- 이번글은 지난글에서 만들어봤던 Fragment의 자바코드에 대해 알아보겠습니다.

- 거의 코드에 대한 설명이 될 것 같습니다.

- 지난번과 비슷하게 별 내용은 없고 거의 노가다 수준입니다.

---

아래 그림은 지난글에서 만들었던 

Fragment 구성입니다

지난글에서 xml 레이아웃에 

대한 설명은 다 썼고 

이번에는

자바코드에 대해 알아보겠습니다

먼저 MainActivity를 보면

MainActivity에서 activity_main.xml를 

뿌려줍니다.

그리고 버튼이 3개 있으므로 

버튼3개를 선언해주고 클릭 리스너를

달아보겠습니다.

[MainActivity.java]

public class MainActivity extends AppCompatActivity
{
    Button btn_move_page1;
    Button btn_move_page2;
    Button btn_move_page3;


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

    private void setup()
    {
        btn_move_page1 = (Button) findViewById(R.id.btn_move_page1);
        btn_move_page2 = (Button) findViewById(R.id.btn_move_page2);
        btn_move_page3 = (Button) findViewById(R.id.btn_move_page3);

        btn_move_page1.setOnClickListener(myListener);
        btn_move_page2.setOnClickListener(myListener);
        btn_move_page3.setOnClickListener(myListener);
    }
}

여기까지는 fragment와 아무련

연관이 없으니 바로 넘어가겠습니다.

실제로 앱의 메인화면은 아래와 같습니다

위와 같은 화면을 뿌려주기 위해서는

앱이 실행되자마자 이 부분을 

바로 교체시켜줘야 합니다.

그러기 위해서 아래와 같은 

코드를 추가합니다.

[MainActivity.java]

public class MainActivity extends AppCompatActivity 
{
    Button btn_move_page1;
    Button btn_move_page2;
    Button btn_move_page3;


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

        setup();
        movePage1();
    }

    private void setup() 
    {
        btn_move_page1 = (Button) findViewById(R.id.btn_move_page1);
        btn_move_page2 = (Button) findViewById(R.id.btn_move_page2);
        btn_move_page3 = (Button) findViewById(R.id.btn_move_page3);

        btn_move_page1.setOnClickListener(myListener);
        btn_move_page2.setOnClickListener(myListener);
        btn_move_page3.setOnClickListener(myListener);

    }

    public void movePage1() 
    {
        Page1 page1 = new Page1();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page, page1);
        fragmentTransaction.commit();
    }
}

위와 같이 setup이 끝나자마자

아래 Fragment를 교체해줍니다

코드를 간단히 보자면

Page1 page1 = new Page1();

Page1 클래스를 하나 생성합니다.

아래 Fragment를 관리하기 위한

클래스입니다

다음은

FragmentManager fragmentManager = getFragmentManager();

FragmentManager 입니다.

Activity위(안)에서 

Fragment 와 Activity의

상호작용을 관리합니다.

다음은

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

FragmentTransaction입니다

실질적으로 이 Transaction이 

Activity위에 Fragment를 올려주고(add)

있던걸 빼고 다시올리고(replace)

제거해주고(remove)

commit등 여러가지 중요한

활동이 가능하게 도와줍니다.

바로 아래 코드를 보시면

fragmentTransaction.replace(R.id.ll_page, page1);

이 부분이 교체해주는 부분입니다.

위에서나 이전글에서 나왔듯이

메인화면에 90%를 차지하는 

Layout ID가 R.id.ll_page입니다.

이 부분을 page1으로 교체하겠다고

선언해주는 부분입니다.

마지막 commit은 위에서 선언해준 내용대로

진행하겠다는 의미입니다.

이런식으로 똑같이 복붙만 하고

클래스명만 바꿔서 3번을 반복합니다

버튼(Page)이 3개이기 때문입니다.

그리고 그 후에 버튼클릭이벤트를

위하여 OnClickListener를 

완성시켜줍니다.

[MainActivity.java]

public class MainActivity extends AppCompatActivity
{
    Button btn_move_page1;
    Button btn_move_page2;
    Button btn_move_page3;


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

        setup();
        movePage1();
    }

    private void setup()
    {
        btn_move_page1 = (Button) findViewById(R.id.btn_move_page1);
        btn_move_page2 = (Button) findViewById(R.id.btn_move_page2);
        btn_move_page3 = (Button) findViewById(R.id.btn_move_page3);

        btn_move_page1.setOnClickListener(myListener);
        btn_move_page2.setOnClickListener(myListener);
        btn_move_page3.setOnClickListener(myListener);
        btn_move_page1.setSelected(true);
    }


    
    View.OnClickListener myListener = new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            btn_move_page1.setSelected(false);
            btn_move_page2.setSelected(false);
            btn_move_page3.setSelected(false);
            switch (v.getId())
            {
                case R.id.btn_move_page1 :
                    btn_move_page1.setSelected(true);
                    movePage1();
                    break;

                case R.id.btn_move_page2 :
                    btn_move_page2.setSelected(true);
                    movePage2();
                    break;

                case R.id.btn_move_page3 :
                    btn_move_page3.setSelected(true);
                    movePage3();
                    break;
            }
        }
    };

    public void movePage1()
    {
        Page1 page1 = new Page1();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page, page1);
        fragmentTransaction.commit();
    }

    public void movePage2()
    {
        Page2 page2 = new Page2();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page, page2);
        fragmentTransaction.commit();
    }
    public void movePage3()
    {
        Page3 page3 = new Page3();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page, page3);
        fragmentTransaction.commit();
    }
}

코드는 길어졌는데 크게 추가된

내용은 없습니다.

Switch를 사용하여 

버튼을 누를때마다

해당 Page로 넘어가도록

만들었습니다.

(setSelected 부분은 버튼눌림효과입니다)

이제 위에서 생성만 했던 Page 클래스들을

작성해보겠습니다.

각 페이지마다 List버튼 3개씩 있었습니다.

처음 메인과 다를게 없습니다.

Vertical에서 Horizontal만 됬을뿐

[Page1.java]

public class Page1 extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page1, container, false);
        return view;
    }
}

Page1 클래스를 생성했습니다.

Fragment를 extends 해주어서

Activity가 아니라고 확인해줍니다

그 다음 화면을 뿌려주는

onCreateView 부분입니다.

Activity에서 onCreate의 역할을 합니다.

화면을 가져오기 위해서 LayoutInflater를 이용합니다.

xml을 실제객체로 사용가능하게 하는 역할입니다.

inflate를 사용하여 R.layout.fragment_page1을 

화면에 뿌려줍니다.

자 앞에서 했던 과정을 똑같이 해줍니다

(복붙이죠)

처음에 초기 Text 

1페이지 1번 리스트입니다

를 보여주기 위해 

뿌려주는 동시에 Fragment 교체시작

그리고 각 버튼마다 리스너를 달면

됩니다. 

추가적으로 버튼효과도 해줍니다.

[Page1.java]

public class Page1 extends Fragment
{
    Button btn_move_page1_list1;
    Button btn_move_page1_list2;
    Button btn_move_page1_list3;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page1, container, false);

        btn_move_page1_list1 = (Button)view.findViewById(R.id.btn_move_page1_list1);
        btn_move_page1_list2 = (Button)view.findViewById(R.id.btn_move_page1_list2);
        btn_move_page1_list3 = (Button)view.findViewById(R.id.btn_move_page1_list3);

        btn_move_page1_list1.setOnClickListener(myListener);
        btn_move_page1_list2.setOnClickListener(myListener);
        btn_move_page1_list3.setOnClickListener(myListener);
        movePage1List1();
        btn_move_page1_list1.setSelected(true);
        return view;
    }

    View.OnClickListener myListener = new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            btn_move_page1_list1.setSelected(false);
            btn_move_page1_list2.setSelected(false);
            btn_move_page1_list3.setSelected(false);


            switch (v.getId())
            {
                case R.id.btn_move_page1_list1 :
                    btn_move_page1_list1.setSelected(true);
                    movePage1List1();
                    break;

                case R.id.btn_move_page1_list2 :
                    btn_move_page1_list2.setSelected(true);
                    movePage1List2();
                    break;

                case R.id.btn_move_page1_list3 :
                    btn_move_page1_list3.setSelected(true);
                    movePage1List3();
                    break;
            }
        }
    };

    public void movePage1List1()
    {
        Page1_List1 page1_list1 = new Page1_List1();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list1, page1_list1);
        fragmentTransaction.commit();
    }
    public void movePage1List2()
    {
        Page1_List2 page1_list2 = new Page1_List2();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list1, page1_list2);
        fragmentTransaction.commit();
    }
    public void movePage1List3()
    {
        Page1_List3 page1_list3 = new Page1_List3();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list1, page1_list3);
        fragmentTransaction.commit();
    }
}

너무 똑같아서 설명할것도 없습니다.

마지막으로 리스트버튼을

클릭했을때 보여지는 화면을

만들어보겠습니다.

[Page1_List1.java]

public class Page1_List1 extends Fragment
{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page1_list1, container, false);
        return view;
    }

}

이게 끝입니다.

fragment_page1_list1.xml의

화면을 뿌려준다는 것입니다.

정말 코드만 길었지

나름 노가다작업이 끝났습니다.

이번글까지 해서 대충

Fragment의 느낌을 알아봤으니

다음글에서는 Fragment간 data교환이나

Fragment에서 MainActivity와의 통신이나

아니면 아에 요즘 많이 쓰이는

FragmentPagerAdapter를 이용해서

탭 형식과 ViewPager가 가능한

Fragment를 만들어보도록 하겠습니다.

[Page2.java]

public class Page2 extends Fragment
{
    Button btn_move_page2_list1;
    Button btn_move_page2_list2;
    Button btn_move_page2_list3;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page2, container, false);


        btn_move_page2_list1 = (Button)view.findViewById(R.id.btn_move_page2_list1);
        btn_move_page2_list2 = (Button)view.findViewById(R.id.btn_move_page2_list2);
        btn_move_page2_list3 = (Button)view.findViewById(R.id.btn_move_page2_list3);

        btn_move_page2_list1.setOnClickListener(myListener);
        btn_move_page2_list2.setOnClickListener(myListener);
        btn_move_page2_list3.setOnClickListener(myListener);

        movePage2List1();
        btn_move_page2_list1.setSelected(true);
        return view;
    }

    View.OnClickListener myListener = new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            btn_move_page2_list1.setSelected(false);
            btn_move_page2_list2.setSelected(false);
            btn_move_page2_list3.setSelected(false);
            switch (v.getId())
            {
                case R.id.btn_move_page2_list1 :
                    btn_move_page2_list1.setSelected(true);
                    movePage2List1();
                    break;

                case R.id.btn_move_page2_list2 :
                    btn_move_page2_list2.setSelected(true);
                    movePage2List2();
                    break;

                case R.id.btn_move_page2_list3 :
                    btn_move_page2_list3.setSelected(true);
                    movePage2List3();
                    break;
            }
        }
    };

    public void movePage2List1()
    {
        Page2_List1 page2_list1 = new Page2_List1();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list2, page2_list1);
        fragmentTransaction.commit();
    }
    public void movePage2List2()
    {
        Page2_List2 page2_list2 = new Page2_List2();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list2, page2_list2);
        fragmentTransaction.commit();
    }
    public void movePage2List3()
    {
        Page2_List3 page2_list3 = new Page2_List3();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list2, page2_list3);
        fragmentTransaction.commit();
    }

}

[Page3.java]

public class Page3 extends Fragment

{
    Button btn_move_page3_list1;
    Button btn_move_page3_list2;
    Button btn_move_page3_list3;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page3, container, false);

        btn_move_page3_list1 = (Button)view.findViewById(R.id.btn_move_page3_list1);
        btn_move_page3_list2 = (Button)view.findViewById(R.id.btn_move_page3_list2);
        btn_move_page3_list3 = (Button)view.findViewById(R.id.btn_move_page3_list3);

        btn_move_page3_list1.setOnClickListener(myListener);
        btn_move_page3_list2.setOnClickListener(myListener);
        btn_move_page3_list3.setOnClickListener(myListener);
        movePage3List1();
        btn_move_page3_list1.setSelected(true);
        return view;
    }

    View.OnClickListener myListener = new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            btn_move_page3_list1.setSelected(false);
            btn_move_page3_list2.setSelected(false);
            btn_move_page3_list3.setSelected(false);
            switch (v.getId())
            {
                case R.id.btn_move_page3_list1 :
                    btn_move_page3_list1.setSelected(true);
                    movePage3List1();
                    break;

                case R.id.btn_move_page3_list2 :
                    btn_move_page3_list2.setSelected(true);
                    movePage3List2();
                    break;

                case R.id.btn_move_page3_list3 :
                    btn_move_page3_list3.setSelected(true);
                    movePage3List3();
                    break;
            }
        }
    };

    public void movePage3List1()
    {
        Page3_List1 page3_list1 = new Page3_List1();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list3, page3_list1);
        fragmentTransaction.commit();
    }
    public void movePage3List2()
    {
        Page3_List2 page3_list2 = new Page3_List2();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list3, page3_list2);
        fragmentTransaction.commit();
    }
    public void movePage3List3()
    {
        Page3_List3 page3_list3 = new Page3_List3();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.ll_page_list3, page3_list3);
        fragmentTransaction.commit();
    }

}

[Page1_List2.java]

public class Page1_List2 extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page1_list2, container, false);
        return view;
    }

}

[Page1_List3.java]

public class Page1_List3 extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page1_list3, container, false);

        return view;
    }

}

[Page2_List1.java]

public class Page2_List1 extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_page2_list1, container, false);
        return view;
    }

}

[Page2_List2.java], [Page2_List3.java], [Page3_List1.java], [Page3_List2.java], [Page3_List3.java] 생략