[안드로이드] 테이블 레이아웃 테두리 그리는 방법

위의 사진은 제 첫 번째 어플인 "도미토랑 오늘의 메뉴"에 있는 시간표입니다.

처음에는 이렇게 틀만 잡아서 출시를 했었는 데 테두리가 없어서 그런지, 볼 수록 밋밋한 것 같더라구요.

그래서 테두리를 그려서 업데이트 하기로 결심했고,구글링을 통해 알아낸 방법으로 그려봤습니다.

 

그 전에 여담이지만 저는 테두리를 그려주는 속성이 따로 있을 줄 알았는 데 없더라구요,,

"그럼 어떻게 그리냐??" 이게 재밌는 데 배경색을 먼저 칠하고 안에 있는 텍스트에 margin을 줘서 그린답니다..ㅋㅋ

처음에는 저도 잘 이해가 안됬어요. 그래서 이렇게 글을 쓰는 거겠죠? (나중에 또 까먹을 수도 있으니까...)

---

자, 그럼 시작해봅시다!

 

1. TableLayout, TableRow, TextView의 구분

 

 

왼쪽 사진의 글씨가 잘 보이지는 않지만..ㅠㅠ

순서대로 TableLayout, TableRow, TextView / 빨강, 초록, 보라 이 부분은 모두 이해하시겠죠?

 

 

 

2. margin과 padding의 이해

그 다음으로 margin과 padding의 차이를 이해하고 있어야합니다. 알고 계신 분은 패스!

저는 이 부분을 생활코딩에서 이고잉님이 설명해주신 것을 듣고 지금도 외우고 있습니다ㅋㅋ

 

먼저 padding!

어떻게 설명해주셨냐면 우리 겨울에 패딩 입잖아요. 그리고 패딩을 입으면 우리 덩치가 커지죠?

그것처럼 padding은 텍스트가 패딩을 입었다고 생각하면 텍스트의 크기? 부피?가 커지겠죠?

 

 위의 사진처럼 padding없이 색깔만 입혔을 때는 우리가 옷을 입은 것처럼 딱 텍스트와 붙어있죠?

 

 

 

 

위의 사진은 padding을 20만큼 줬을 때입니다! 어때요, 정말 패딩을 입은 것 같죠? ㅋㅋㅋ

 

 

 

그 다음 margin을 이해해봐요.

margin은 패딩보다 바깥 영역입니다!

따라서!

 

위의 사진처럼 margin을 주게 되면 패딩보다 바깥의 영역이 커진답니다!

그런데, 만약에 색깔을 주지 않고 margin 또는 padding 둘 중에 하나만 준다면 텍스트가 화면에서 떨어져있기는 하겠지만 뭐 때문인지는 구분할 수는 없겠죠? (단, 개발자 모드를 사용하면 가능!)

여기까지 이해했다면 완벽이해!

 

 

3. TableRow에 색을 입힌다.

먼저, 저는 구분 / 평일 / 주말, 공휴일이 있는 행의 밑에 회색의 선을 그리고 싶어요. 어떻게 하면될까요??

힌트를 드리면, 먼저 TableRow에 본인이 그리고 싶은 밑줄의 색을 background로 입혀보세요.

 

 

 

 

이렇게 사진으로 보고 나니까 대충 감이 잡히지 않나요?

안에 각각의 textView(구분 / 평일 / 주말, 공휴일)이 있잖아요. 각각에 하얀색을 칠해주고 margin을 밑에다가 주면 선이 생기지 않을까요? ㅎㅎ 해봅시다!

 

 

 

4. textView에 색을 입힌다.

자, 각각의 textView에 하얀색을 입혔습니다. 겉으로 봤을 때는 하얗지만 그 전에 TableRow에 회색을 줬기 때문에 속은 회색이랍니다.

그렇다면, textView에 margin을 준다면 어떻게 될 지 상상이 되시나요?

 

 

 

 

5. textView에 margin을 준다.

짜잔! 보시는 것처럼 테두리가 생겼습니다! margin을 크게 할 수록 테두리의 두께가 두꺼워지겠죠?

아, 그리고 첫 번째 행은 흰색인데 테이블 레이아웃은 뭔가 약간 회색이죠?

이것은 테이블 레이아웃의 background에 흰색을 주면 되겠죠?

 

 

 

6. TableLayout의 backgroud에 색을 준다.

 

이상으로 데이블 레이아웃에 테두리 그리는 방법에 대해 알아보았습니다.

각자의 상황에 맞게 잘 적용해보세요.👍