이것이 바로 Fragment 2편

Posted by ITPangPang
2016.04.17 02:31 안드로이드(android)/Fragment


이것이 바로 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]

소스보기


[Page3.java]

소스보기


[Page1_List2.java]

소스보기


[Page1_List3.java]

소스보기


[Page2_List1.java]

소스보기



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








저작자 표시 비영리 변경 금지
신고

'안드로이드(android) > Fragment' 카테고리의 다른 글

Activity ↔ Fragment 접근하기  (0) 2016.11.26
이것이 바로 Fragment 2편  (3) 2016.04.17
이것이 바로 Fragment  (0) 2016.04.16
Fragment란  (0) 2016.04.04
이 댓글을 비밀 댓글로
    • 안드입문
    • 2016.11.25 17:13 신고
    프레그먼트에 대해 공부하려고 한번 읽고 따라해봤는대요
    소스 오류없이 정리 잘 해놓으셨내요 감사합니다^^
  1. 요즘 열심히 안드로이드 공부하고 있어요.
    팡팡님(?)글을 읽으면서 참 많은 도움을 받고 있어요.
    정말 초급자도 따라할 수 있도록 해주셔서 너무 감사 합니다.

    참고로, 저도 님자료를 보고 tistory 블로그를 하나 개설 했구요.
    님자료를 조금 수정해서 제 블로그에 올렸어요.
    아직은 님자료 거의 복사 수준이구요. (대신 조금씩 수정중)
    만약 님이 작성한 소스가 제 블로그에 올린거에 문제가 된다면 내릴 게요.
    대신 소스위쪽에 님 tistory 출처 url은 기술 했어요.

    제블로그 : http://farmerkyh.tistory.com/
    • 저도 갓 시작한..은 아니지만..

      개발경험이 많지 않아서

      코드가 전체적으로 굉장히 정리가 안되있어요 ㅎㅎ..

      도움이 되셨다니 기쁘네요

      출처만 남겨주시면 수정하시면서 올리셔도 상관없어여 같이 화이팅해여 !