이것이 바로 Fragment
- 시작전 Fragment는 app.Fragment와 support.v4.app.Fragment
로 나뉘는데 저는 app.Fragment를 사용하겠습니다.
- 둘 차이는 호환성 차이인데 해결방법은 있으니 이 부분도 나중에
한번 보겠습니다.
- 이번글에서는 Fragment를 직접 사용해보면서 얼마나 좋고
편리한지 알아보겠습니다.
- 이번글에서 Fragment로 화면을 조각조각 쪼개서 사용하는
방법에 대해서 알아보겠습니다.
- 이번글에서는 노가다 작업이 많습니다.
오늘은 이런 화면을 만들어보겠습니다.
참 대충 만들었네요
구분선좀 만들어 주고 싶지만
다음글에서 만들어보도록 하고
그림판으로 끄적여서 공간을 나눠보면
아래처럼 한 화면을 3부분으로 쪼개서 사용하고 있습니다
나름 버튼 눌린것도 표시하려고
아무 색상코드나
넣었는데 이상한 색깔이 걸렸네요
본론으로 넘어가서
위 화면은 Fragment를 사용해서
상단 버튼 3개로 Page 3개를 구분하고
각 page마다 다시 List버튼을 3개씩 넣어놨습니다.
위 화면에서 여기라고 표시된 공간이
각 페이지, 리스트마다
다른 내용이 삽입될 예정입니다.
그렇다면 Activity로 화면을
구성하는 것 보다
왜? Fragment로 구성하는 것이
좋은지 알아보겠습니다.
위 화면에서
빨간색 박스부분은
각각 다른
9개의 리스트의 내용을
출력해 줄때
UI 배치부분에서
변하지 않는 구역입니다.
여기만 내용이 다름
글씨가 써있는 공간만
바뀔 뿐이죠
그런데 만약 이 화면을
Activity로 전부 구성한다면??
1. 일단 버튼 클릭할때마다
액티비티 전환이
필요하겠네요
2. 각 액티비티마다 버튼 6개씩
구성해야 할 것 같네요
(6*9 = 54개?)
3. 지금은 빈공간이지만 액티비티마다
data를 주고 받아야 한다면??
정말 끔찍하네요...
저 화면을 Fragment로 구성하는것도
나름 노가다작업이었는데..
버튼 54개를 만들어야 하다니..
물론 실제로 액티비티로
한다고 해도 버튼 54개를 만드는
비효율적인 코딩을
하지는 않겠지만..
이런 불편을 덜기 위해 Fragment를
사용합니다..
(뭐 태블릿에서는 엄청난 이득이 더 있지만
일단 그 부분은 제외하고)
그럼 한번 처음부터 천천히
화면을 쪼개보도록 하겠습니다
첫번째로
위와 같이 2부분으로 나눠보겠습니다
[activity_main.xml]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.tistory.itpangpang.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="@+id/btn_move_page1"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page1" />
<Button
android:id="@+id/btn_move_page2"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page2" />
<Button
android:id="@+id/btn_move_page3"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page3" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_page"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="9"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
여기서 볼 것은
1. 아래 LinearLayout에 id 선언
2. Layout에 weight 줬다 정도?
3. 한가지 더 하자면 누름효과를 위해 textColor?
아마 다음글에서 설명하겠지만
자바코드에서
아래 weight 9를 할당한
LinearLayout의 부분을
다른 Fragment로 교체하기 위해
id를 부여합니다.
10%의 공간에
버튼 3개를 생성했으니
이제 90%의 공간을 차지하는
부분을 다시 둘로 나눠보겠습니다.
[fragment_page1.xml]
<?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="horizontal"
>
<LinearLayout
android:layout_width="0dip"
android:layout_weight="2"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_move_page1_list1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page1\nList1"/>
<Button
android:id="@+id/btn_move_page1_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page1\nList2"/>
<Button
android:id="@+id/btn_move_page1_list3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page1\nList3"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_page_list1"
android:layout_width="0dip"
android:layout_weight="8"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
아까 본 것과 비슷합니다.
일단 화면을 가로로 2등분 내야 하니
orientation을 horizontal로 설정해주고
사용할 비율만큼 weight를 줍니다.
그리고 마지막으로
오른쪽 리스트가 보여줄 공간에
id를 부여해줍니다
(Fragment 교체를 위하여)
위와 같은 화면을 얻을 수 있습니다.
위 사진은 처음에 쪼개였던 2번공간(90%)을
다시 나누는 과정이라 1번공간(10%)은
포함되어있지 않습니다.
이제 마지막으로 3번째 공간을 꾸며주면 됩니다.
[fragment_page1_list1.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="1페이지 1번 리스트입니다"/>
</LinearLayout>
뭐 여기서는 더 볼것도 없습니다.
이제 메인페이지와 1Page, List1은 완료했습니다.
처음과 같은 화면 구성을 하려면 이제
List2, List3(1Page)
2Page List1, List2, List3
3Page List1, List2, List3
을 더 만들어야합니다..
다 똑같고 id만 살짝 변형하면 되므로
복붙을 계속 해주면 됩니다.
(뭐 사실 위와 똑같이 만들려면 Text 숫자만 변경해주면 되지만
실제로 개발할때 그럴일은 없으니)
이렇게 13개의 xml을 만들어 줬으면
이제 자바코드로 넘어가보겠습니다 ~
실제로 코드가 개판일수 있습니다..
노가다식이라 대충 만들어서..
[fragment_page1_list2.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="1페이지 2번 리스트입니다"/>
</LinearLayout>
[fragment_page1_list3.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="1페이지 3번 리스트입니다"/>
</LinearLayout>
[fragment_page2.xml]
<?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="horizontal"
>
<LinearLayout
android:layout_width="0dip"
android:layout_weight="2"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_move_page2_list1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page2\nList1"/>
<Button
android:id="@+id/btn_move_page2_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page2\nList2"/>
<Button
android:id="@+id/btn_move_page2_list3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page2\nList3"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_page_list2"
android:layout_width="0dip"
android:layout_weight="8"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
[fragment_page2_list1.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="2페이지 1번 리스트입니다"/>
</LinearLayout>
[fragment_page2_list2.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="2페이지 2번 리스트입니다"/>
</LinearLayout>
[fragment_page2_list3.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="2페이지 3번 리스트입니다"/>
</LinearLayout>
[fragment_page3.xml]
<?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="horizontal"
>
<LinearLayout
android:layout_width="0dip"
android:layout_weight="2"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_move_page3_list1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page3\nList1"/>
<Button
android:id="@+id/btn_move_page3_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page3\nList2"/>
<Button
android:id="@+id/btn_move_page3_list3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@drawable/pressed"
android:text="Page3\nList3"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_page_list3"
android:layout_width="0dip"
android:layout_weight="8"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
[fragment_page3_list1.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="3페이지 1번 리스트입니다"/>
</LinearLayout>
[fragment_page3_list2.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="3페이지 2번 리스트입니다"/>
</LinearLayout>
[fragment_page3_list3.xml]
<?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:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="30sp"
android:gravity="center"
android:text="3페이지 3번 리스트입니다"/>
</LinearLayout>