나 혼자 하는 프로젝트 2탄 - GUI 프로그래밍(7) - 그리드(Grid)

그리드(Grid)는 pack()과는 다른 방법으로 해당 위젯을 화면에 표현하는 방법이다.

pack()이 정해진 순서에 의해 위젯을 화면에 쌓아두는 느낌이라면, grid()는 일정한 좌표에 직접 위젯을 배치하는 느낌이다.

당연히 두 정렬은 혼용해서 사용이 불가하다.

grid()와 pack() 같이 사용하려고 하면 해당 에러문을 볼 수 있다.

gird()는 row 와 column 값을 입력하여 위젯의 위치를 설정하는데, 이 입력값들은 화면의 해상도에 따른 절대값이 아닌, 위젯들의 크기나 위치에 따라 매겨지는 값들이기에, 개발자 입장에서는 위치를 계산하기가 정말 수월하다.

좌측 상단을 기준으로 (0,0)에서 시작하지만, 해당 (0,0)좌표가 없을 경우 다음 순서인 (1,1)이 대신 들어가게 된다.

즉 작은값 순서로 좌측 상단을 기준으로 정렬된다고 보면 된다.

 

그리드를 연습해보기 좋은 예제는 바로 키보드의 숫자패드 만들기 이다.

보통 배열의 키보드의 경우 총 17개의 키로 구성되어 있다.

보통의 키보드들은 이렇다.

순서대로 만들어도 좋겠지만, 먼저 버튼 17개를 작성한 뒤, 위에서부터 한줄씩 완성해 나가보자.

이거는 큰 무리 없이 순서대로 넣어주기만 하면 된다.

이제 "+"키의 위치가 애매해진다. 두칸을 차지해야 하므로 rowspan=2로 해당 버튼의 시작 위치부터 아래로 2칸이 해당 키의 위치라고 표시해 주어야 한다.

세번째, 네번째 줄도 같은 방법으로 작성해 준다.

이제 "+"키의 위치가 가운데 걸쳐지는데, 일단 마지막줄 위치까지 잡아준 뒤 각 버튼의 크기를 다시 설정해주자.

마지막의 숫자 "0"키도 가로로 두칸을 차지하는데 row와 마찬가지로 columnspan=2 로 두칸 설정을 해 줄수있다.

이때 연속해서 나오는 "."키는 (4,1)이 아닌 (4,2) 좌표를 가지게 된다.

즉 rowspan이나 columnspan을 통해 늘어난 길이는, 해당 위젯의 길이가 아닌 차지하는 좌표가 많아진 것이다.

(크기가 작은 위젯이 좌표를 (0.0)부터 (4.4)까지 가지고 있다면 다른 위젯들은 해당 좌표 밖에서 설정되어야 한다.)

이제 해당 버튼의 크기를 설정해줘서, 저 배열을 맞추어 주어야 한다.

각각의 버튼들의 크기를 수정해 줄 수도 있겠지만, 이번엔 sticky를 사용해 보기로 했다.

sticky는 해당 grid의 좌표에 고정시킬수 있게 해준다.

코드를 통해 확인해보자.

두번째 줄에 sticky=N+E+W+S 를 추가로 입력해, 프로그램을 실행해 보았다.

여기서 N,E,W,S 는 각 방위인 북,동,서,남 을 나타낸다. 즉 해당 bird의 상하좌우를 해당 위젯으로 가득 채울수 있다.

이제 모든 버튼에 추가해서 확인해 보자.

"enter"키와 "num"키 때문에 조금 실물과 다르긴 하지만, 그래도 제법 그럴싸한 숫자패드키가 만들어졌다.

이제 좀더 예쁘게 해주기 위해, 버튼의 크기조절을 해주도록 하자.

padx=와 pady로 버튼 안 문자를 기준으로 버튼 크기를 재설정해 주었다.

동일한 내용들을 수정할때에는, 위와 같이 ctrl+c 로 복사한 다음, ctrl+f(찾기)를 누러, 해당 코드를 찾을 수 있고, 다른 내용으로 일괄 수정도 가능하다.

grid()에도 padx=와 pady= 값을 주어 각 위젯간의 간격을 설정해 줄수있다.

이제 각 버튼들의 크기를 동일하게 해주기 위해, width와 height로 버튼의 크기를 재정렬 해주자.

모두 바꾸기 기능을 통해 'padx=10, pady=10'으로 작성된 부분을 'width=5, height=2'로 변경해 주었다.

이제 각 버튼의 크기가 동일해졌고,  처음 계획했던 이미지와 같다고 우겨도 될 정도이다.