항상 초심으로
Show 나의 플랫폼/안드로이드 GsBOB 2011. 8. 4. 18:38 336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다. TableLayout을 사용할 때 컬럼(가로)을 똑같이 주고자 할 경우 TableLayout 속성에 를 추가시킵니다 하지만, 여기서 컬럼이 아니라 Row(세로)의 크기를 똑같이 주고자 할경우! TableRow 속성에 각각 주세요. 위 내용은 만약 TableRow가 5개 있을 경우 그래서 전체적으로 똑같이 보여주는 것이지요^^ '나의 플랫폼 > 안드로이드' 카테고리의 다른 글
태그android, layout_weight, stretchColumns, tablelayout, TableRow, 같게, 높이 일치, 일치 '나의 플랫폼/안드로이드' Related Articles
Secret 댓글 1. 안드로이드 TableLayout지금까지 살펴 본 여러 Layout 클래스, 그 중에서 뷰의 화면 배치가 주 목적인 Layout 클래스를 사용하는 과정을 떠올려보면, 각 뷰(View)가 어디에 배치될 것인가에 대한 설정을, 개발자가 의도적으로 지정해야 하는 상황이 많습니다. 그런데 어떤 경우에는, 뷰(View)들 간의 위치 관계를 깊게 고민하지 않고 화면을 구성해도 되는 경우가 있습니다. 아래 그림과 같은 레이아웃을 구성한다고 가정해보죠. 그림과 같은 구조를 만들기 위해
일반적으로 테이블(Table)은 가로 방향으로 나열되는 열(Column)과 세로 방향으로 나열되는 행(Row)으로 구성됩니다. 문서에서 표를 작성하는 과정을 떠올려보면 그 구조를 쉽게 이해할 수 있을텐데요. 그러므로
2. TableLayout 사용법2.1 TableLayout 기본 사용법
<TableLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="8dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="24sp" android:background="#F44336" android:textColor="#FFFFFF" android:text="A" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="24sp" android:background="#9C27B0" android:textColor="#FFFFFF" android:text="B" /> </TableRow> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="24sp" android:background="#3F51B5" android:textColor="#FFFFFF" android:text="1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="24sp" android:background="#00BCD4" android:textColor="#000000" android:text="2" /> </TableRow> </TableLayout> 2.2 TableLayout 열(Column)의 갯수(count)
<TableLayout ...> <TableRow ...> <TextView ... androidid:text="A" /> <TextView ... androidid:text="B" /> <TextView ... androidid:text="C" /> <TextView ... androidid:text="D" /> </TableRow> <TableRow ...> <TextView ... androidid:text="1" /> <TextView ... androidid:text="2" /> </TableRow> <TableRow ...> <TextView ... androidid:text="a" /> </TableRow> </TableLayout> 2.3 TableLayout 열(Column)의 너비(width)기본적으로
<TableLayout ...> <TableRow> <TextView ... android:text="AAAAAAAAAA" /> <TextView ... android:text="B" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" /> </TableRow> </TableLayout> 예제 코드의 실행 화면을 보면, 첫 번째 열(Column)의 너비가 첫 번째 셀(Cell)인 "AAAAAAAAAA"의 크기와 정확히 일치하는 것을 확인할 수 있습니다. 그런데 예제 화면에서, 자 그럼, 어떻게 하면 TableLayout의 전체 너비를 고르게 사용할 수 있도록 만들 수 있을까요? 바로,
아래와 같은 구조를 예를 들어 stretchColumns 속성의 동작을 알아보도록 하겠습니다. <TableLayout ...> <TableRow> <TextView ... android:text="A" /> <TextView ... android:text="B" /> <TextView ... android:text="C" /> <TextView ... android:text="D" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" /> <TextView ... android:text="3" /> <TextView ... android:text="4" /> </TableRow> </TableLayout> 예제의
<TableLayout ... android:stretchColumns="1,3"> <TableRow> <TextView ... android:text="A" /> <TextView ... android:text="B" /> <TextView ... android:text="C" /> <TextView ... android:text="D" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" /> <TextView ... android:text="3" /> <TextView ... android:text="4" /> </TableRow> </TableLayout> 만약, 전체 열(Column)의 너비가 늘어나게 만드려면, stretchColumns에 "*" 값을 지정하면 됩니다.
<TableLayout ... android:stretchColumns="*"> <TableRow> <TextView ... android:text="A" /> <TextView ... android:text="B" /> <TextView ... android:text="C" /> <TextView ... android:text="D" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" /> <TextView ... android:text="3" /> <TextView ... android:text="4" /> </TableRow> </TableLayout> 2.4 TableLayout 행(Row)의 높이(height)
<TableLayout ... android:stretchColumns="*"> <TableRow> <TextView ... android:layout_height="match_parent" android:textSize="48sp" android:text="A" /> <TextView ... android:layout_height="match_parent" android:text="B" /> <TextView ... android:layout_height="match_parent" android:text="B" /> <TextView ... android:layout_height="match_parent" android:text="B" /> </TableRow> <TableRow> <TextView ... android:layout_height="match_parent" android:text="1" /> <TextView ... android:layout_height="match_parent" android:text="2" /> <TextView ... android:layout_height="match_parent" android:text="3" /> <TextView ... android:layout_height="match_parent" android:textSize="60sp" android:text="4" /> </TableRow> </TableLayout> 참고로, 행(Row) 높이와 관련하여, 열(Column)에서 사용했던 stretchColumns와 같은 속성은 존재하지 않습니다. 2.5 TableLayout, 개별 행(Row), 개별 셀(Cell)의 배경색 지정.전체 아래 예제는
<TableLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="8dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" android:background="#FF0000" android:padding="8dp" android:stretchColumns="*"> <TableRow android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00FF00" android:padding="8dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="4dp" android:gravity="center" android:textSize="24sp" android:textColor="#FFFFFF" android:background="#3F51B5" android:text="A" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="24sp" android:textColor="#FFFFFF" android:background="#9C27B0" android:text="B" /> </TableRow> </TableLayout>
<TableLayout android:background="#FF0000" android:padding="8dp" android:stretchColumns="*"> <TableRow android:background="#000000"> <TextView ... android:layout_margin="1dp"/> <TextView ... android:layout_margin="1dp"/> ... </TableRow> <TableRow android:background="#000000"> <TextView ... android:layout_margin="1dp"/> <TextView ... android:layout_margin="1dp"/> ... </TableRow> ... </TableLayout> 3. TableLayout의 속성과 TableLayout.LayoutParams.앞서 살펴본 기본 사용법에 더하여, 3.1 열(Column) 번호를 지정하여 셀(Cell) 추가하기. (layout_column)아무런 옵션 없이
<TableLayout ... android:stretchColumns="*"> <TableRow> <TextView ... android:text="A" /> <TextView ... android:text="B" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" android:layout_column="4" /> </TableRow> </TableLayout> 예제 코드의 실행 화면을 보면, 두 번째 행(Row), 두 번째 셀(Cell)의 layout_column 속성에 "4"를 지정하여, 1~3번 열(Column)을 건너뛰고 4번 열(Column)에 셀(Cell)이 바로 추가된 것을 확인할 수 있습니다. 3.2 두 개 이상의 셀(Cell) 합치기. (layout_span)앞서 HTML "<table>" 태그와 HTML의 "<td>" 태그에는 두 개 이상의 셀(Cell)을 합치는데 사용되는 colspan과 rowspan 속성이 존재합니다. colspan은 열(Column) 방향으로 셀(Cell)을 합치는 속성이고, rowspan은 행(Row) 방향으로 두 개 이상의 셀(Cell)을 합치는 속성입니다. 그리고 안드로이드의
layout_span 속성을 사용하여 두 개 이상의 셀(Cell)을 합치는 예제는 아래와 같습니다.
<TableLayout ... android:stretchColumns="*"> <TableRow> <TextView ... android:text="A" /> <TextView ... android:text="B" /> <TextView ... android:text="C" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" android:layout_span="2" /> </TableRow> </TableLayout> layout_span을 사용함에 있어 주의할 점은, layout_span이 열(Column) 방향으로의 셀(Cell) 합치기만 지원한다는 것입니다. 3.3 셀(Cell) 감추기. (collapseColumns)
아래 예제는
<TableLayout ... android:stretchColumns="*" android:collapseColumns="1,2"> <TableRow> <TextView ... android:text="A" /> <TextView ... android:text="B" /> <TextView ... android:text="C" /> <TextView ... android:text="D" /> <TextView ... android:text="E" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" /> <TextView ... android:text="3" /> <TextView ... android:text="4" /> <TextView ... android:text="5" /> </TableRow> </TableLayout> 3.4 열(Column) 너비(width)가 자동으로 줄어들게 만들기. (shrinkColumns)일반적인 경우, 그런데 반대의 경우를 생각해보죠. 만약 셀(Cell)의 너비가 점점 커져서
<TableLayout ... android:stretchColumns="*"> <TableRow> <TextView ... android:text="AAAAAAAAAA" /> <TextView ... android:text="BBBBBBBBBB" /> <TextView ... android:text="CCCCCCCCCC" /> <TextView ... android:text="DDDDDDDDDD" /> <TextView ... android:text="EEEEEEEEEE" /> </TableRow> <TableRow> <TextView ... android:text="1111111111" /> <TextView ... android:text="2222222222" /> <TextView ... android:text="3333333333" /> <TextView ... android:text="4444444444" /> <TextView ... android:text="5555555555" /> </TableRow> </TableLayout> 자, 이렇게
아래 예제는 shrinkColumns 속성에 "*"를 지정하여, 모든 열을
<TableLayout ... android:stretchColumns="*" android:shrinkColumns="*"> <TableRow> <TextView ... android:text="AAAAAAAAAA" /> <TextView ... android:text="BBBBBBBBBB" /> <TextView ... android:text="CCCCCCCCCC" /> <TextView ... android:text="DDDDDDDDDD" /> <TextView ... android:text="EEEEEEEEEE" /> </TableRow> <TableRow> <TextView ... android:text="1111111111" /> <TextView ... android:text="2222222222" /> <TextView ... android:text="3333333333" /> <TextView ... android:text="4444444444" /> <TextView ... android:text="5555555555" /> </TableRow> </TableLayout> 4. TableLayout과 TableRow, 그리고 LinearLayout.
그렇다면, 안드로이드에서는 이러한 유사점을 무시한 채,
자,
그렇다면 4.1 layout_weight를 사용하여 TableRow의 셀(Cell) 너비 조절하기.[안드로이드 레이아웃 (Android Layout) - 3. 가중치(weight)를 이용한 영역 분할]에서 확인할 수 있듯이, 마찬가지로,
<TableLayout ...> <TableRow> <TextView ... android:layout_width="0dp" android:layout_weight="1" android:text="A" /> <TextView ... android:layout_width="0dp" android:layout_weight="2" android:text="B" /> <TextView ... android:layout_width="0dp" android:layout_weight="3" android:text="C" /> </TableRow> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" /> <TextView ... android:text="3" /> </TableRow> </TableLayout> 단, layout_weight에 의한 열(Column) 너비 조절은 해당 그리고 layout_weight에 의해 조절된 열(Column)의 너비는 stretchColumns나 shrinkColumns 속성에도 영향을 받지 않습니다. 그러므로 layout_weight를 사용하여 모든 행(Row)이 같은 너비의 열을 갖도록 만드려면, 모든 셀(Cell)에 layout_weight 속성 값을 지정해야 합니다. 4.2 layout_weight를 사용하여 TableLayout의 TableRow 높이 조절하기.
이 때,
<TableLayout ... android:stretchColumns="*"> <TableRow android:layout_height="0dp" android:layout_weight="1"> <TextView ... android:text="A" /> <TextView ... android:text="B" /> <TextView ... android:text="C" /> </TableRow> <TableRow android:layout_height="0dp" android:layout_weight="1"> <TextView ... android:text="1" /> <TextView ... android:text="2" /> <TextView ... android:text="3" /> </TableRow> </TableLayout> 4.3 TableRow가 아닌 뷰 위젯을 TableLayout의 자식으로 추가하기.
<TableLayout ... android:stretchColumns="*"> <TableRow> <TextView ... android:text="A" /> <TextView ... android:text="B" /> <TextView ... android:text="C" /> </TableRow> <TextView ... android:text="TextView as Row"> <TableRow> <TextView ... android:text="1" /> <TextView ... android:text="2" /> <TextView ... android:text="3" /> </TableRow> </TableLayout> 5. TableLayout 사용 예제5.1 균등한 화면 분할이 필요한 화면. (계산기)아마도 <TableLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="8dp" android:background="#404040" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:stretchColumns="*"> <TextView android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="4" android:textSize="60sp" android:textColor="#FFFFFF" android:background="#607D8B" android:gravity="right|center_vertical" android:text="0" /> <TableRow android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1"> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="7" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="8" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="9" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_span="2" android:textSize="32sp" android:text="DEL" /> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1"> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="4" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="5" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="6" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="+" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="-" /> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1"> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="1" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="2" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="3" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="*" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="/" /> </TableRow> <TableRow android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1"> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_span="2" android:textSize="32sp" android:text="0" /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:textSize="32sp" android:text="." /> <Button android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_span="2" android:textSize="32sp" android:text="=" /> </TableRow> </TableLayout> 5.2 표 형태의 화면.
<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" android:stretchColumns="*" android:shrinkColumns="*"> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="7" android:background="#00BCD4" android:gravity="center" android:textSize="32sp" android:text="TITLE" /> </TableRow> <TableRow> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="3" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="4" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="5" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="6" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="7" /> </TableRow> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="300dp" android:layout_height="150dp" android:background="#FFC107" android:id="@+id/image1" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/text2" android:layout_toRightOf="@id/image1" android:text="INSERT" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/text3" android:layout_below="@id/text2" android:layout_alignLeft="@id/text2" android:text="MODIFY" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/text4" android:layout_below="@id/text3" android:layout_alignLeft="@id/text2" android:text="DELETE" /> </RelativeLayout> <TableRow android:layout_marginTop="4dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="2" android:background="#8BC34A" android:textSize="24sp" android:gravity="center" android:text="ITEM-1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="5" android:background="#CDDC39" android:textSize="24sp" android:gravity="center" android:text="DESC-1" /> </TableRow> <TableRow android:layout_marginTop="4dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="2" android:background="#8BC34A" android:textSize="24sp" android:gravity="center" android:text="ITEM-2" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="5" android:background="#CDDC39" android:textSize="24sp" android:gravity="center" android:text="DESC-2" /> </TableRow> </TableLayout> 6. 참고.
.END. |