출처: http://aroundck.tistory.com/2746#recentTrackback
점점 화면에 표시하는 UI 가 많아지면서 Layout 의 중첩 ( overdrawing ) 으로 성능 영향이 생기기 시작했다.
RelativeLayout 을 통해 이를 방지하는 tutorial 혹은 guide 들이 많이 나오기는 했지만,
이는 xml 코드(?) 를 엄청 복잡하게 만들고, 유지보수 또한 어려워지기 쉽상이다.
그래서 ICS 부터 GridLayout 이라는 새로운 layout 이 도입되었다.
물론 support-v7 를 통해 ICS 이전 버전에서도 GridLayout 을 이용할 수 있다.
http://developer.android.com/reference/android/widget/GridLayout.html
GridLayout 은 Web 의 Table 을 잘 다뤄본 사람에게는 친숙할 것이다.
GridLayout 의 xml 주요 속성들은...
android:orientation="horizontal | vertical"
android:columnCount="5" // 최대 갯수
android:rowCount="5" // 최대 갯수
android:alignmentMode="alignBounds | alignMargins"
android:columnOrderPreserved="true | false" // 열 인덱스 오름차순 배치
android:rowOrderPreserved="true | false" // 행 인덱스 오름차순 배치
android:userDefaultMargins="true | false" // 기본 마진 사용여부.
GridLayout ChildView 의 xml 속성 ( GridLayout.LayoutParams )
android:layout_column="3" // 열 index
android:layout_row="3" // 행 index
android:layout_columnSpan="2"
android:layout_rowSpan="2"
android:layout_gravity="center"
소스 출처 : http://developer.samsung.com/android/technical-docs/GridLayout-in-Android
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:rowCount="4" >
<TextView
style="@style/textViewStyle"
android:text=" R 1, C 1 " />
<TextView
style="@style/textViewStyle"
android:text=" R 1, C 2 " />
<TextView
style="@style/textViewStyle"
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:gravity="center"
android:text=" R 1, C 3 " />
<TextView
style="@style/textViewStyle"
android:text=" R 1, C 4 " />
<TextView
style="@style/textViewStyle"
android:text=" R 2, C 1 " />
<TextView
style="@style/textViewStyle"
android:text=" R 2, C 2 " />
<TextView
style="@style/textViewStyle"
android:text=" R 2, C 4 " />
<TextView
style="@style/textViewStyle"
android:text=" R 3, C 1 " />
<TextView
style="@style/textViewStyle"
android:text=" R 3, C 2 " />
<TextView
style="@style/textViewStyle"
android:layout_gravity="fill_horizontal"
android:text=" R 3, C 3 modify " />
<TextView
style="@style/textViewStyle"
android:text=" R 3, C 4 " />
<TextView
style="@style/textViewStyle"
android:text=" R 4, C 1 " />
<TextView
style="@style/textViewStyle"
android:text=" R 4, C 2 " />
<TextView
style="@style/textViewStyle"
android:layout_gravity="fill_horizontal"
android:text=" R 4, C 3 " />
<TextView
style="@style/textViewStyle"
android:text=" R 4, C 4 " />
</GridLayout>
GridLayout
|
GridLayout |
격자 모양의 표을 만들 수 있는 레이아웃. |
GridLayout은 API 14(안드로이드 4.0)부터 사용 가능하기 때문에 AndroidManifest.xml의 minSdkVersion을 14이상으로 설정해줘야 사용 가능합니다.
이하 버전일 경우 인스톨이 되지 않고 에러가 납니다. 인스톨이 되었어도 기능사용시 에러가 날 수 있습니다.
AndroidManifest.xml
|
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="19" /> |
GridLayout 태그에 지정하는 속성
|
속성 |
설명 |
|
orientation |
배치의 방향을 지정. 가로(vertical) 우선, 세로(horizontal) 우선으로 지정할 수 있으며 디폴트는 horizontal |
|
columnCount |
최대 열 개수를 지정. 한 행이 이 개수를 초과하면 아래 행으로 자동 개행. |
|
rowCount |
최대 행 개수를 지정. 한 열이 이 개수를 초과하면 오른쪽 열로 자동 개행. |
|
alignmentMode |
차일드 정렬의 기준을 지정. alignBounds이면 차일드의 외곽을 기준으로 하며 alignMargins이면 마진을 기준으로 합니다. 디폴트 alignMargins. |
|
columnOrderPreserved |
열의 경계를 인덱스의 오름차순으로 배치 |
|
rowOrderPreserved |
행의 경계를 인덱스의 오름차순으로 배치 |
|
useDefaultMargins |
차일드 뷰의 레이아웃에 별다른 지정이 없으면 차일드의 속성을 참조하여 계산한 디폴트 마진을 사용합니다. 이 값이 false이면 마진은 0으로 처리되어 차일드끼리 밀착합니다. |
GridLayout 하위 태그에 지정하는 속성
|
속성 |
설명 |
|
layout_column |
차일드가 배치될 셀의 열 좌표를 지정. 디폴트 UNDEFIED 차일드 순서에 따라 자동 계산 |
|
layout_row |
차일드가 배치될 셀의 행 좌표를 지정. 디폴트 UNDEFIED 차일드 순서에 따라 자동 계산 |
|
layout_columnSpan |
차일드가 차지할 열 수를 지정. 디폴트는 1 |
|
layout_rowSpan |
차일드가 차지할 행 수를 지정. 디폴트는 1 |
|
layout_gravity |
열 내에서의 차일드 정렬 방식을 지정. 디폴트 LEFT|BASELINE |
|
GridLayout은 API14부터 공개가 되었으나 아직 서적이나 인터넷에 상세한 설명이 존재하지 않습니다. GridLayout은 LinearLayout, RelativeLayout, FrameLayout, TableLayout, AbsoluteLayout 과 함께 레이아웃이라고 명명되는 뷰그룹중 하나입니다. 그 만큼 안드로이드 측에서는 야심차게 내놓은 뷰그룹이라고 할 수 있겠죠. ^^ ● GridLayout과 LayoutParams 시작에 앞서 GridLayout은 TableLayout의 단점을 보완하고 LinearLayout과 RelativeLayout, FrameLayout의 장점을 포함한 뷰그룹이라고 안드로이드 개발자 사이트에 기재되어 있다. 뿐만 아니라 여러 개의 뷰그룹을 중첩해서 사용할 필요가 없어 다른 뷰그룹 보다 메모리 사용량이 적고 성능이 좋으므로 참고 사이트 http://android-developers.blogspot.kr/2011/11/new-layout-widgets-space-and-gridlayout.html 하지만 개인적으로 GridLayout을 활용하여 개발해 본 결과 결코 큰 장점을 발견하지 못했다. 오히려 사용이 아주 어렵고 불편하며, 복잡한 레이아웃을 구성하려면 시간이 많이 걸린다. 그러므로 처음부터 GridLayout을 써야만 최적화된 레이아웃이다라는 편견을 가지지 말도록 하자. 뷰그룹은 상황에 맞도록 적절히 섞어서 활용하는 것이 바람직하다. GridLayout은 API 레벨 14 부터 사용이 가능하니 주의하도록 하자 (안드로이드에서 제공하는 support v7 라이브러리를 이용하면 이하 버전에서도 사용이 가능하다. 마지막 부분에 support v7 라이브러리를 사용법에 대해서 설명한다).
GridLayout은 TableLayout의 구조적인 문제를 해결하기 위해 단독 뷰그룹 만으로 테이블 형태의 레이아웃을 제공한다(TableLayout과 같이 여러 개의 TableRow을 포함할 필요가 없다)
그림 1 GridLayout 사용을 위한 minSdkVersion 조정하기 혹시 그림과 같이 AndroidManifest.xml에 android:minSdkVersion이 10으로 되어 있다면 14로 수정하도록 하자. 시작에 앞서 예제를 통해 간단히 GridLayout 에 대해서 살펴보자.
그림 2 간단히 GridLayout의 구조 살펴보기
TableLayout과는 달리 하나의 GridLayout만으로 테이블 형태의 레이아웃을 만들었다. 차이가 있다면 미리 행과 열의 개수를 지정해 두는 점이다. 이제 행과 열을 어떻게 제어하는지 세부 속성들을 들여다 보자. ■ GridLayout 의 기본 속성 GridLayout의 속성들
- orientation, rowCount, columnCount 속성
본 3가지 속성에 대해서 예제를 통해 이해해 보자.
그림 3 GridLayout의 orientation, rowCount, columnCount 속성 orientation은 뷰들이 배치될 방향을 결정한다. horizontal 속성 값은 수평 방향으로 좌측에서 우측으로 배치되며, vertical은 수직 방향으로 위에서 아래의 순으로 배치된다. rowCout와 columnCount 속성은 배치될 행과 열의 수를 말한다.
그런데 예제에서 rowCount, columnCount 속성 값을 각각 100으로 주고 있지만 전혀 적용되고 있지 않다. 그 이유를 아래의 그림으로 이해해 보자. 그림 4 GridLayout의 orientation, rowCount, columnCount 속성의 연관 관계 orientation 속성 값이 수평 배열인 경우 행의 개수는 의미가 없고 수직 배열인 경우 열의 개수는 의미가 없다. GridLayout은 자식 뷰를 추가할 수록 계속 행 혹은 열이 계속 늘어나는 구조이기 때문이다. 그러므로 수평 배열인 경우 수평 방향으로 추가될 열의 개수만 제한하면 되고, 수직 배열인 경우 수직 방향으로 추가될 행의 개수만 제한하면 된다. 이러한 방식은 여러 개의 중첩 뷰그룹을 사용해야 하는 LinearLayout과 TableLayout의 단점을 보완한 점이라고 볼 수 있다.
<잠깐만!!!>
- alignmentMode 속성
alignmentMode 속성은 가장 너비가 큰 자식 뷰 기준으로 정렬 여부를 결정한다. 이 때 자식 뷰의 여백에 정렬을 맞출지를 결정하는 속성 값 두 가지가 존재한다. alignMargins는 여백을 무시하고 정렬하는 값이며, alignBounds는 여백을 포함하여 정렬한다. 아래의 예제로 쉽게 이해해 보자. 그림 5 GridLayout의 alignmentMode 속성
- columnOrderPreserved, rowOrderPreserved 속성
rowOrderPreserved 속성은 행의 순서를 무시할 수 있다. 예제를 통해 이해해 보자 그림 6 GridLayout의 columnOrderPreserved 속성 활성화
예제에서 배우지 않은 layout_row와 layout_column 속성이 나온다. 이 값은 특정 뷰의 행과 열의 위치를 강제로 지정할 수 있는 속성이라는 것만 이해하자. GridLayout의 LayoutParams 속성에서 상세히 설명한다. 그림과 같이 공간이 부족해서 0열을 시작으로 2,3열이 GridLayout 영역을 벗어났다. 다음 예제를 살펴보자.
columnOrderPreserved 속성을 false로 주면 열의 순서를 무시할 수 있다고 했다. 결과 화면을 보면 아무 뷰도 삽입되지 않은 2열을 기준으로 3열이 1열을 덮고 있다. 즉 1열을 3열이 열 순서를 어기고 덮는다는 속성이 적용된 것이다. 아래의 그림으로 좀더 확실히 이해해 보자.
그림 8 GridLayout의 columnOrderPreserved, rowOrderPreserved 속성의 의미 이 속성들은 꼭 아무 뷰도 삽입되지 않은 기준 열 혹은 기준 행이 필요하며, 보이지 않았던 행/열이 순서를 무시하고 보이는 행/열을 덮는다는 것이다. <잠깐만!!!>
계속해서 rowOrderPreserved 속성도 예제를 통해 확인해 보자.
그림 9 GridLayout의 rowOrderPreserved 속성
보이지 않았던 4행이 아무것도 삽입되지 않은 3행을 기준으로 2행을 덮고 있다. 기준 행이 존재하지 않으면 본 속성은 동작하지 않는다.
- useDefaultMargins 속성
본 속성은 모든 셀에 상/하/좌/우 여백을 준다. 여백의 수치는 기본으로 8dp라는 값이 시스템에 정의되어 있다. 예제를 통해 확인해 보자.
그림 10 GridLayout의 useDefaultMargins 속성
useDefaultMargins 값을 true로 설정하면 8dp의 여백이 생기는 것이 확인되었다.
<잠깐만!!!>
■ GridLayout LayoutParams의 기본 속성 그림 11 GridLayout의 LayoutParams 속성
GridLayout LayoutParams 속성들
- layout_gravity 속성
layout_gravity 속성 자식 뷰의 중력 방향을 결정할 수 있다. 본 속성은 이미 다른 뷰그룹을 배우면서 익숙해져 있을 것이다. 예제를 통해 확인해 보자.
그림 12 GridLayout LayoutParams의 layout_gravity 속성
예제를 보면 자신의 셀 공간 내에서 중력방향 값들이 작동하는 것을 알 수 있다. 다양한 속성 값들이 적용된 결과를 아래의 그림으로 확인해 보자.
그림 13 GridLayout LayoutParams의 layout_gravity 다양한 속성 값 대부분 속성값들은 이미 다른 뷰그룹에서 배웠기 때문에 이해가 될 것이다. 하지만 특별한 속성값이 3가지 존재한다.
＊ fill_horizontal : 수평 셀의 영역에 뷰의 크기를 가득 채운다. ＊ fill_vertical : 수직 셀의 영역에 뷰의 크기를 가득 채운다. ＊ fill : 수평/수직 셀의 영역에 뷰의 크기를 가득 채운다.
그 기능을 layout_gravity에서 제공하는 것을 기억하자.
GridLayout에서는 이 두 가지 속성 값을 적어주지 않아도 동작하며, 자식 뷰들은 기본적으로 모든 크기가
- layout_row, layout_column 속성
원하는 행과 열에 자식 뷰를 배치할 수 있는 속성이다. TableLayout의 경우 자식 뷰의 행 위치를 설정할 수 없었다. 그러므로 해당 속성은 GridLayout만의 장점이라고 할 수 있다. layout_row는 행의 위치를 결정하며, layout_column는 열의 위치를 결정한다. 예제를 통해 layout_row 속성에 대해서 알아보자. 그림 14 GridLayout LayoutParams의 layout_row 속성
예제에서 자식 뷰 View2를 3행으로 설정 및 적용된 것을 볼 수 있다. 중요한 점은 강제로 행 위치가 결정된 자식 뷰부터 다음에 추가되는 자식 뷰들이 이어서 배치된다는 것이다. 다음은 layout_column 속성에 대해서 알아보자. 그림 15 GridLayout LayoutParams의 layout_column 속성
예제에서 자식 뷰 View2를 3열로 설정 및 적용된 것을 볼 수 있다. 강제로 열 위치가 결정된 자식 뷰 역시 다음에 추가되는 자식 뷰들이 이어서 배치된다.
- layout_rowSpan, layout_columnSpan 속성
본 속성들은 행 혹은 열을 병합할 수 있다. layout_rowSpan은 원하는 셀 수만큼 행을 병합할 수 있고 layout_columnSpan은 원하는 셀 수만큼 열을 병합할 수 있다. 특히 행 병합 속성인 layout_rowSpan은 TableLayout에서 제공하지 않는 기능이며 GridLayout만의 장점이다. 예제를 통해 layout_rowSpan 속성에 대해 이해해 보자. 그림 16 GridLayout LayoutParams의 layout_rowSpan 속성
예제에서 View2에 layout_rowSpan 속성값을 3이라고 주었다. 이 의미는 View2가 위치한 셀을 포함해서 3개의 셀을 행 병합하라는 것이다. 설정한 값대로 적용된 모습을 볼 수 있다. 다음은 layout_column 속성에 대해서 살펴보자. 그림 17 GridLayout LayoutParams의 layout_columnSpan 속성
예제에서 View2에 layout_column 속성값을 3이라고 주었다. 이 의미는 View2가 위치한 셀을 포함해서 3개의 셀을 열 병합하라는 것이다. 설정한 값대로 적용된 모습을 볼 수 있다.
■ GridLayout의 자식 뷰 맞춤형 자동 배치 자식 뷰들이 복잡하게 행/열 병합되어 있는 상황에서 새로운 뷰를 추가하는 경우 어떤 방식으로 배치 되는지 확인해 볼 필요가 있다. 아래의 그림을 보자. 그림 18 자식 뷰의 자동 배치 구조 <참고 - http://android-developers.blogspot.kr/2011/11/new-layout-widgets-space-and-gridlayout.html >
그림과 같이 뷰들이 복잡하게 존재하고 7번 자식 뷰를 추가한다면 어느 곳에 배치될까? 최종적으로 추가된 6번 자식 뷰를 기준으로 7번 뷰가 추가될 수 있는 적합한 공간을 탐색하여 추가되는 것을 볼 수 있다. 이렇게 자식 뷰의 자동 배치 방식 알고리즘을 충분히 이해해야만 GridLayout을 좀더 쉽게 활용할 수 있다.
분명 많은 시행 착오를 겪게 될 것이며 그 과정에서 GridLayout에 대해 많은 부분을 이해하게 된다. 참고로 필자는 처음 GridLayout을 접하고 위의 내용을 테스트하기 위해 구현했을 때 꽤 많이 고생했던 기억이 난다. 머리가 나쁜 필자는 총 1시간이상 매달려야만 했다. 여러분은 더욱 짧은 시간에 해 낼 수 있을 것이라 믿는다. 아래의 예제는 꼭 스스로 구현해 본 후 확인용으로만 참조하도록 하자.
그림 19 자식 뷰의 자동 배치 구현
예상한 결과가 적용된 것을 볼 수 있다.
■ GridLayout의 위한 도우미 뷰 GridLayout을 위한 Space 뷰라는 것이 존재한다. 이 뷰는 오로지 한가지 이유를 위해 만들어 졌다. 어떤 상황에 필요한 뷰인지 그림을 통해 이해해 보자. 그림 20 Space 뷰의 필요성
화면에 좌측에는 텍스트가 존재하고 우측에는 두 가지 버튼이 존재하는 레이아웃이다. GridLayout을 이용해서 구현이 가능할까?
①,③은 이미 고정된 크기가 정해져 있고, ②의 가변적인 빈 공간은 무엇으로 채워야만 한다.
GridLayout의 특성상 각 셀을 채우기 위해서는 꼭 자식 뷰가 들어가야 하는 상황이다. 이렇게 특정 빈 공간을 채우기 위해 바로 Space라는 뷰가 존재한다. 잠시 Space 클래스에 대해서 살펴 보자. 그림 21 Space 뷰 클래스
① 뷰 클래스를 상속받은 Space 클래스는 뷰이다. ② GridLayout과 같이 API 14부터 제공된다.
예를 들어 TextView는 화면에 텍스트를 표시하고 ImageView는 화면에 이미지를 표시할 수 있지만 Space 뷰는 자신만의 기능이 존재하지 않는다. 그렇다면 [그림 20]의 상황에서 어떻게 활용되는지 예제를 통해 이해해 보자. 그림 22 GridLayout을 위한 Space 뷰 활용
①,③번에서 텍스트와 버튼 뷰들이 자리를 잡고 있다. ②의 Space 뷰는 오로지 텍스트와 버튼 뷰 사이에서 빈 공간을 차지하기 위해 사용되었다. Space 뷰는 하는 일이 거의 없기 때문에 성능과 메모리 측면에서 거의 영향을 주지 않는다. 하지만 만일 Space 뷰가 존재하지 않았다면 GridLayout은 치명적인 문제점 한가지를 가지게 될 것이다.
■ GridLayout의 장점과 단점 이미 GridLayout을 설명하면서 중간중간 장단점을 언급하였다. 이 단원에서는 좀더 대표적인 장점과 단점 한가지씩을 말하고자 한다. 우선 GridLayout의 대표적인 장점을 예제를 통해 살펴보자. 그림 23 GridLaytout에 적합한 레이아웃
간단한 텍스트(TextView)와 입력박스(EditText)로 구성된 레이아웃이다. 이 화면의 핵심은 아래와 같다. ＊ 두 행의 텍스트와 입력박스 간격이 서로 일치하는 것(테이블 형태) ＊ 각 행의 텍스트 하단이 서로 수평으로 이루는 것(텍스트 기준라인 맞춤)
먼저 각 행의 텍스트를 기준라인에 맞추는 것은 LinearLayout, TableLayout, RelativeLayout 모두 가능하다. LinearLayout과 TableLayout은 자식 뷰를 수평으로 배치하면 자동으로 텍스트 기준라인에 맞춰주며 (기본으로 baselineAligned 속성이 true이다), RelativeLayout은 LayoutParams 속성인 layout_alignBaseline에 의해서 텍스트를 기준라인에 맞출 수 있다. 문제는 두 행의 텍스트와 입력박스의 간격을 맞추는 것이다. RelativeLayout을 이용하면 구현은 가능하나 여러 자식 뷰들의 관계를 지정해야 하므로 복잡하며, LinearLayout은 두 행의 테스트 너비를 동일하게 직접 입력해야 하는 부담감이 있다. TableLayout은 기본적으로 행과 열의 크기를 동일하게 맞추므로 가장 쉽게 구현할 수 있다. TableLayout을 이용하여 구현해 보자. 그림 24 GridLayout 장점 : TableLayout을 이용한 화면 구현
실행화면을 보면 텍스트 기준라인을 맞췄고 두 행의 텍스트와 입력박스의 간격이 동일하다. 레이아웃 자체가 2행2열의 테이블 구조이며 TableLayout은 최적의 판단임이 틀림없어 보인다. 하지만 TableLayout은 여러 개의 중첩된 뷰그룹을 사용하므로 1,2,3번과 같이 총 3개의 뷰그룹이 필요하다. 뷰그룹 개수가 늘어나면 그만큼 메모리 사용량이 증가하고 성능이 떨어진다. 다음은 GridLayout을 이용하여 구현해 보자. 그림 25 GridLayout 장점 : GridLayout을 이용한 화면 구현
GridLayout 역시 아무런 설정을 하지 않아도 한 행의 텍스트 기준라인을 맞추며, TableLayout과 유사하게 한 행의 모든 셀 높이와 한 열의 셀 너비를 동일하게 유지한다. 그러므로 그림과 같이 쉽게 레이아웃을 구성할 수 있었다. 하지만 GridLayout은 중첩해서 뷰그룹을 사용할 필요가 없으므로 단 한 개의 뷰그룹만 이용하였다. 즉 성능과 편의성 모두를 만족한 결과라고 할 수 있다. 다음은 대표적인 단점을 예제를 통해 살펴보자. 그림 26 GridLayout으로 구현할 수 없는 레이아웃
본 레이아웃은 하나의 텍스트(TextView)와 버튼으로 구성되어 있다. 여기서 가장 핵심이 되는 사항은 아래와 같다. ＊ 구매버튼의 크기를 유지하고 좌측의 텍스트 영역은 남은 공간을 차지해야 한다. ＊ 남은 공간은 다양한 화면 크기에 따라 가변적으로 변한다. (화면 가로 세로 전환) ＊ 텍스트가 길어지면 자동으로 내려쓰기가 되어야 한다.
LinearLayout과 RelativeLayout으로 모두 구현이 가능하다. TableLayout은 무조건 두 개 이상의 뷰그룹을 중첩해서 사용하므로 제외한다. 둘 중 어느 것을 이용해도 상관 없으나 가장 간단하게 구현할 수 있는 LinearLayout으로 선택하자.
그림 27 GridLayout 단점 : LinearLayout을 이용한 화면 구현
간단히 수평 배열 방식으로 두 가지 자식 뷰를 등록하고 버튼의 너비를 wrap_content 값으로 고정하였다. 좌측 텍스트 부분은 남은 영역을 차지하도록 weight 속성을 이용하여 전체적인 레이아웃을 구현을 마친다. 실행화면에서 가로/세로 전환은 에뮬레이터의 경우 Ctrl + F11 번을 누르면 전환된다. 가로 모드에서는 텍스트 너비 공간이 부족하지 않아 한 줄로 표시되었고, 세로 모드는 텍스트 영역이 좁아져 자동 내려쓰기가 되었다. 다음은 GridLaytout을 이용하여 구현해 보자.
그림 28 GridLayout 단점 : GridLayout을 이용한 화면 구현
GridLayout은 수평 배열로 열수를 2개로 설정하였고, 텍스트와 버튼을 자식 뷰로 추가하였다. 텍스트 영역은 버튼을 제외한 남은 공간을 차지해야 하므로 layout_gravity 속성값을 left | right 로 주었다. ( left | right 와 fill_horizontal 은 값은 의미이다). 가로모드인 경우 원하는 정상적인 결과이지만 세로모드의 경우 텍스트가 한 줄로 표시되고 버튼을 밀어내고 있다. GridLayout은 이렇게 가변적 설정에 유연하지 못하다. 뿐만 아니라 레이아웃을 구성할 때 가변적 너비 설정은 자주 사용되므로 치명적인 단점에 해당한다.
■ GridLayout 지원 라이브러리 사용 GridLayout은 API 14 부터 추가되었기 때문에 13 이하의 버전에서는 사용할 수 없다고 하였다. 구글에서는 이런 하위 호환성 문제를 해결하기 위해 상위 버전에서 추가된 중요한 기능들에 대해서 별도의 라이브러리를 제공하고 있다. GridLayout 역시도 별도의 라이브러리를 제공하며, 안드로이드 SDK를 설치할 때 같이 저장된다. 직접 확인해 보도록 하자. 그림 29 라이브러리 존재 유무 확인하기
① 툴 바에서 Android SDK Manager 아이콘을 실행하자. ② Android Support Library 가 바로 GridLayout 라이브러리를 포함하고 있다. ③ 만일 설치된 상태가 아니라면 Not installed라고 표시되고 설치되어 있다면 Installed라고 표시된다. ④ GridLayout 라이브러리는 자신이 설치 시 설정한 안드로이드 SDK 폴더 내에 존재한다. AndroidSDK / extras / android / support / v7 / gridLayout 직접 자신의 로컬 PC에서 확인해 보도록 하자. ⑤ 만일 로컬 PC에 해당 라이브러리가 없다면 Install n Packages 버튼을 선택하여 내려받기를 시도하자. GridLayout 라이브러리 명을 android-support-v7-gridlayout이라고 한다. 풀어서 설명하자면 android-support-v7-gridlayout 라이브러리를 사용해 보자.
그림 30 android-support-v7-gridlayout 라이브러리 추가하기
① 이클립스 메뉴에서 File을 선택하자. ② 라이브러리를 추가하기 위해 Import 메뉴를 선택하자. ③ android-support-v7-gridlayout 라이브러리를 작업공간으로 추가하기 위해 ④ Next 버튼을 선택하여 다음 과정을 진행한다. 그림 31 android-support-v7-gridlayout 라이브러리 폴더 선택하기
① android-support-v7-gridlayout 라이브러리가 존재하는 폴더를 지정하기 위해 Browse... 버튼을 누른다. ② 안드로이드 SDK가 설치된 하위폴더에서 gridlayout 폴더를 선택한다. ③ 확인 버튼을 눌러서 라이브러리 선택을 마친다. 그림 32 android-support-v7-gridlayout 추가 완료
① 자동으로 선택된 경로가 설정된다. ② 추가할 android-support-v7-gridlayout 라이브러리를 선택한다.
③ 이클립스 작업공간으로 해당 라이브러리를 복사하기 위해 Copy projects into workspace 를 체크한다. ④ Finish 버튼을 눌러 android-support-v7-gridlayout 라이브러리 추가를 마친다.
그림 33 android-support-v7-gridlayout 라이브러리 패키지 살펴보기
① 정상적으로 추가가 되었다면 패키지 탐색기 창에 android-support-v7-gridlayout 패키지가 등록되어 있을 것이다. ② libs 폴더에 GridLayout 클래스들을 모아둔 라이브러리가 존재한다. ③ 라이브러리 패키지에서 포함한 리소스 중 attrs.xml을 열어보자. ④ GridLayout에서 사용하는 속성과 GridLayout LayoutParams에서 사용하는 속성들이 정의 되어 있다.
첫 번째는 GridLayout 클래스들을 모아둔 라이브러리이고 두 번째는 attrs.xml 리소스이다. GridLayout 라이브러리만 존재하면 될 것 같은데 attrs.xml 리소스가 필요할까? 좀 더 상세한 내용은 직접 GridLayout 라이브러리를 사용할 때 설명하겠다. GridLayout 라이브러리를 사용하기 위해 새로운 프로젝트를 생성하자. 그림 34 새로운 프로젝트 생성
꼭 같은 설정을 사용할 필요는 없다. 다만 각종 버전 정보는 GridLayout이 기본적으로 포함되지 않은 버전을 선택하도록 하자. GridLayout은 API 14부터 지원되므로 이전 버전을 선택하면 된다. 필자는 API 10을 선택하였다.
그림 35 새로 생성된 프로젝트에 android-support-v7-gridlayout 연결하기
① 정상적으로 새로운 프로젝트가 생성되었다면 패키지 탐색기 창에 프로젝트가 추가되었을 것이다. ② 안드로이드 라이브러리 관련 항목에서 add 버튼을 누르자. ③ 이전에 추가한 android-support-v7-gridlayout 라이브러리 프로젝트를 선택하자. ④ 확인 버튼을 눌러 라이브러리를 추가하자.
그림 36 android-support-v7-gridlayout 연결 완료
① 선택한 라이브러리가 추가되었다. ② 확인 버튼을 눌러 라이브러리 추가 설정을 마치도록 한다. <잠깐만!!!>
그림 37 자동으로 생성된 GridLayout의 R.java
① GridLayout 라이브러리를 추가하면 자동으로 GridLayout R.java가 생성된다. R.java를 열어보자. ② GridLayout의 각종 속성 값들이 정의되어 있다.
이제 모든 준비가 끝났다. GridLayout 라이브러리를 사용해 보도록 하자. 그림 38 XML 레이아웃에서 GridLayout 사용시 문제
기존에 사용하는 방식으로 간단한 XML 레이아웃을 구성하였다. 그림과 같은 실행결과를 예상하겠지만 xmlns:android 스키마에는 GridLayout에 대한 정보가 전혀 존재하지 않는다. 그러므로 GridLayout과 관련된 항목이나 속성들이 정의되지 않아 에러가 발생된다. 아래와 같이 수정하도록 하자. 그림 39 레이아웃에서 GridLayout 사용시 문제
① 안드로이드 기본 뷰/뷰그룹이 아니라 직접 구현하거나 외부에서 라이브러리를 통해 구현된 경우는
② xmlns:gridlayout="http://schemas.android.com/apk/res-auto" 라고 GridLayout의 스키마 등록을 한다. ③ 2번에서 정의한 네임스페이스 명인 gridlayout을 참조해서 GridLayout의 속성을 정의한다. ④ 2번에서 정의한 네임스페이스 명인 gridlayout을 참조해서 GridLayout LayoutParams 속성을 정의한다.
● 어떤 뷰그룹이 효율적인가? 과연 여섯 가지 뷰그룹 중 어떤 것이 가장 효율적일까? 이는 사용 편의성과 성능, 각 뷰그룹의 편의성, 성능, 유연성
<잠깐만!!!>
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
'IT_Programming > Android_Java' 카테고리의 다른 글
| Android RenderScript Blur (0) | 2014.08.06 |
|---|---|
| Android ViewDragHelper Tutorial (0) | 2014.08.06 |
| Webview 에 custom font 적용하기 (0) | 2014.07.30 |
| [펌] Android viewpager indicator 사용하기 (0) | 2014.07.28 |
| [펌] Android viewpager indicator 사용하기 (0) | 2014.07.28 |