eclipse swt의 GridLayout + GridData 알아보기

 

지난 강좌에 이어서 Composite에서 GridData를 사용하는 법에 대해서 설명하도록 하겠습니다.

 

 

1. 지난 소스

 

먼저 아래와 같이 소스를 작성하도록 합니다.
지난 주와 크게 달라진 부분이 없을 겁니다.

 

public static void main(String[] args) {
        Display display = new Display();
 
        Shell shell = new Shell(display);
        shell.setBounds(0, 0, 400, 300);
        shell.setLayout(new FillLayout());
        shell.setText("Test");
 
        Composite comp = new Composite(shell, SWT.NONE);
        comp.setLayout(new FillLayout());
        comp.setLayout(new GridLayout(2, false));
 
        Button button1 = new Button(comp, SWT.PUSH);
        button1.setText("button1");
        Button button2 = new Button(comp, SWT.PUSH);
        button2.setText("button2");
 
        shell.open();
 
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
        display.dispose();
}

 

Composite 영역을 세로로 2부분으로 나누고 그위에 버튼을 올려놓았습니다.
아래 그림과 같이 표시될겁니다.

 

 

 

2. 버튼 크기 변경

 

먼저 버튼을 크기를 변경하기 위해선 사이스 속성이 있는지 확인해 봅니다.

아래 그림과 같이 button1 에 대해서 size 변경을 할 수 있는지 찾아봤습니다.

 

 

 

setSize를 설정할 수 있으니 아래와 같이 100, 100의 크기 주어보았습니다.

 

Button button1 = new Button(comp1, SWT.PUSH);
button1.setText("button1");
button1.setSize(100, 100);

 

그리고 Run을 해서 실행 화면을 보도록 합니다.

 

 

그런데 달라지지 않았습니다.

 

무엇이 문제였을까요?!

 

위에 보면 Composite 에서는 setLayout(new FillLayout()); 이라고 해서 자신의 영역을 설정하였습니다.

이런것과 같이 Button 에서도 자신이 가질 수 있는 영역을 설정해야할거 같습니다.

 

button.setLayout 이라고 설정하면 되지 않을까 했는데... 그런 속성이 없습니다.

 

 

3. GridData

 

button 에 setLayout 은 없어도 setLayoutData 라는게 있습니다.

Layout 영역에 데이터를 그리기 위해서 영역을 설정해줍니다.
 

이번에 설명해드릴 것도 GridData 이라는 것입니다.

setLayoutData 안에 사용됩니다.

 

 

Object layoutData를 지정하게 되어있습니다.

여기서 new GridData를 넣어줍니다.

 

아래 그림과 같이 new GridData 속성을 보면 여러 가지 있습니다.

 

 

 

4. GridData 크기 설정 (지정된 크기)

 

이중에서 width 와 height를 지정하는 부분을 적용해보도록 해보겠습니다.

 

Button button1 = new Button(comp1, SWT.PUSH);
button1.setText("button1");
button1.setLayoutData(new GridData(100,100));

 

GridData 안에 가로 세로 길이를 100으로 입력하고 실행해보았습니다.

아래 그림과 같이 button1 의 크기가 달라진 것을 확인했습니다.

 

 

아까 setSize 로 적용되지 않았던 내용이 setLayoutData(new GridData(100,100))를 통해서 적용되었습니다.

 

 

4. GridData 크기 설정 (유연한 크기)

 

크기를 지정하면 원하는 크기대로 보일 수 있는 장점이 있지만, UI 전체 화면이 커지면 나머지 빈 공간이 생기게 되는 단점이 있습니다. 이 부분을 GridData를 사용하면 간단하게 할 수 있습니다.

 

size를 적용하는 부분에서 width, height 말고, horizontalAlignment , verticalAlignment 설정하는 부분이 있습니다.

이 부분으로 가로로 꽉 채우거나 세로로 꽉 채우게 할 수 있습니다.

 

연습 삼아 아래 부분 처럼 수정을 해줍니다.

GridData.FILL_HORIZONTAL을 넣어주었습니다.

 

Button button1 = new Button(comp1, SWT.PUSH);
button1.setText("button1");
button1.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));

 

적용을 하면 아래 그림과 같이 가로로 길게 늘어난 button1을 볼수 있습니다.

 

 

여기서 임의로 창 크기를 조절해보겠습니다.

 

아래는 가로 사이즈를 줄여보았더니 button1 의 가로 크기가 줄었습니다.

하지만, button2 왼쪽에 위치해서 가로 영역엔 빈 공간이 없습니다.

 

 

반대로 늘려보았습니다.

button1 의 가로 크기가 늘어나게 되었습니다.

 

 

 

GridData의 속성에서 주로 쓰이는 것은 아래와 같습니다.

 

FILL_HORIZONTAL : 가로로 가득채운다.
FILL_VERTICAL : 세로로 가득채운다.
FILL_BOTH : 가로, 세로로 가득 채우기

 

[GridData.FILL_HORIZONTAL]

 

[GridData.FILL_VERTICAL]

 

[GridData.FILL_BOTH]

 

 

다음 강좌에는..

 

Composite 에 GridLayout과 GridData를 사용해서 유연한 GUI를 구성하는데 접근을 해봤습니다.

자신이 원하는 대로 만들어볼려면 조금 더 연습을 해야할 거 같습니다.

 

다음 강좌엔 Composite에서 GridData를 사용한 UI 화면 몇가지를 만들어보도록 하겠습니다.

 

 

권한

강좌에 대한 내용은 에프에이리눅스(주) 에 권한이 있습니다.
본문의 이미지 및 내용은 순수 제작한 것이며, 내용 중 외부 이미지를 사용할 경우, 출처를 표기합니다.
무분별한 불펌 보다는 포럼을 홍보해주셔서 더욱 더 활성화되어 좋은 내용의 글이 올라오도록 부탁드립니다.
이 게시물을...