사리나 듀폰트 (Sarina DuPont) 가 작성한 Creating Custom Styles with the Bitmap Style Designer – CodeRage Replay, Tips & Tricks and Sample Files (영문 원본 보기) 를 번역했습니다. 2016년 11월의 글이지만 여전히 유효하고 도움이 됩니다.
역자주: 비트맵 스타일 디자이너 (Bitmap Style Designer)는 다음 작업을 할 수 있습니다.
- VCL 스타일 파일 (.vsf) 생성, 편집, 테스트
- 파이어몽키 스타일 파일 (.style) 생성, 편집, 테스트
- VCL 스타일 파일을 파이어몽키 스타일 파일로 변환 (방법: .vsf 파일을 열어서 .style로 다시 저장)
[팁] 스타일 만들기
- 해상도가 3배인 그래픽부터 시작한다. 그리고 나서 2배, 1.5배, 1배 짜리 그래픽을 만든다. (포토샵 등 선호하는 그래픽 도구 사용)
-
각 그래픽을 png 파일로 저장한다. 저장할 때 파일명에 해상도가 들어가야한다 (단, 1배 해상도 그래픽은 예외). 예를 들어:
- 3배: 파일명30x.png
- 2배: 파일명20x.png
- 1.5배: 파일명15x.png
- 1배: 파일명.png
- 스타일 파일에 있는 컨트롤 중 두세개의 스타일만 변경하려고 할 경우, 가장 좋은 방법은 별도의 png 파일을 만들어서 편집하는 것이다. 기존의 스타일 파일 안에 그래픽 요소를 추가하려고 애쓰지 말자.
[팁] 비트맵 스타일 디자이너 (Bitmap Style Designer) 를 사용하기
- IDE을 열고, Tools > Bitmap Style Designer 를 클릭한다. bin 폴더에서 BitmapStyleDesigner.exe 를 바로 실행해도 된다.
- 비트맵 스타일 디자이너에 들어있는 템플릿 중 하나를 열어서 시작한다. File 메뉴 사용하여 템플릿 파일을 열 수 있다.
- 왼쪽 트리뷰에서 Images 노드를 열고 Add를 클릭하여 그래픽을 추가한다. 같은 방식으로이 모든 해상도 별로 png 파일을 각각 추가한다.
- 오른쪽 위에 있는 Add Object Template 메뉴에서 스타일 그래픽을 추가하려는 컨트롤을 선택한다. 지금 데모에서는 Add Switch를 선택하기로 한다.
- 왼쪽 트리뷰에서 Objects 노드를 펼친 후 새로 추가하려는 오브젝트 (즉 컨트롤)을 선택하고, 오른쪽에 있는 Inspector 창에서 Name을 변경한다. 스타일북에 스타일을 추가되고 나서, 그 스타일을 스타일북에서 찾을 때 표시되는 스타일 이름이다.
-
TSwitch에는 Frame 오프젝트와 Thumb 오브젝트가 하나씩 있다. Frame을 선택하고 오른쪽에 있는 Inspector 창에서 Bitmap 항목으로 가서 1배 해상도 그래픽 (예: mystyle.png) 파일을 선택한다. png 이미지 파일 위에서 컨트롤+마우스 클릭을 이용하여 해당 그래픽 요소의 범위를 지정한다. 같은 방식으로 BitmapPressed 항목에 적용할 그래픽 요소의 범위도 지정한다. 그리고 나서 Thumb 오브젝트에도 Frame에서 한 작업과 같은 작업을 반복한다.
(참고!)
비트맵에서 구역을 지정하는 창의 메뉴 중 확대(Zoom, 최대 800%) 기능을 사용하면 마우스를 이용하여 매우 쉽게 선택할 수 있다.
또한, 왼쪽 위 지점은 마우스 왼쪽 버튼을 이용하여 지정하고, 오른쪽 아래 지점은 마우스 오른쪽 버튼으로 지정하여 사각형으로 범위를 선택한다.
이때 선택된 영역을 나타내는 "표시선의 외곽 지점"까지도 영역에 포함된다는 점에 유의한다. - 왼쪽 트리뷰에서 Objects 트리 노드를 펼쳐서 그 안에서 원하는 오브제트를 선택한 후 오른쪽 클릭을 하고 Automatically Adjust Object for All Graphic Resolutions 를 선택한다. 그러면 다른 모든 해상도에도 앞에서 한 작업과 동일한 결과가 적용되므로 일일이 수작업을 하지 않아도 된다. 스타일 요소를 변경하고 나면 언제든 이 방법을 사용하여 다른 해상도에도 반영되도록 한다.
- 왼쪽 트리뷰에서 Objects 트리 노드를 펼쳐서 그 안에서 원하는 오브제트를 선택한 후 오른쪽 클릭을 하고 Test Object Style 을 선택한다. 새 스타일 요소를 테스트할 수 있고 필요하면 조정 작업을 할 수도 있다.
- 컨트롤의 크기가 변경될 수 있도록 만들려면, Margin을 0 이외의 숫자로 지정한다. 이 데모에서는 새로 추가한 Switch 스타일에서 컨트롤 크기 변경이 되도록 하기 위해 Frame을 선택하고 Margin을 지정 (예: Bottom/Left/Right/Top = 2)한다. 그리고, Thumb에도 같은 작업을 진행한다. Margin 지정을 다 했으면, Objects 트리 노드를 펼치고 Switch 오브제트를 선택한 후 오른쪽 클릭을 하고, Automatically Adjust Object for All Graphic Resolutions 를 선택한다.
- File 메뉴에서 Save를 선택하고 새 스타일 템플릿을 저장한다. 이렇게 저장해 두면 향후에 추가 변경을 할 때 보다 빠르게 불러서 작업할 수 있다.
- (파이어몽키 스타일 파일로 저장하려면), File 메뉴에서 Save를 선택하고 새로 만든 이 템플릿을 .style 파일로 저장한다.
새로 만든 스타일을 애플리케이션에 추가하기 (파이어몽키 기준)
- 폼 위에 TStyleBook을 올려 놓는다.
- TStyleBook을 더블 클릭하고 Open을 선택하여 새로 추가할 파이어몽키 스타일 파일을 찾아서 선택한다.
- Apply를 클릭하고 닫는다.
- 폼을 선택하고, StyleBook 속성의 값으로 (앞에서 올려 놓은) StyleBook1 을 지정한다.
- 폼에 TSwitch를 하나 올리고, 마우스로 선택한 후 오브젝트 인스펙터에서 속성을 살펴보면, 새로 추가한 스타일 요소와 기존의 윈도우 10 스타일 중 하나를 선택할 수 있도록 된 것을 확인 할 수 있다.
데모에서 사용하는 (TSwitch 용으로 만든) 그래픽 파일을 여기에서 다운로드 받을 수 있다. (역자 주: 링크를 찾은 데로 추가/첨부 예정)
관련 화면 설명
그림. 템플릿을 먼저 하나 선택하고 시작한다.
그림. 커스터마이징하려는 스타일 요소를 선택하고 Name 속성을 변경한다.
그림. 새 그래픽을 추가하려면 Add를 클릭한다.
그림. 추가할 스타일의 그래픽을 선택한다.
그림. 오브젝트를 선택하고, 1배 그래픽 파일을 선택한 후 Frame의 테두리와 채우기 색상을 지정하고, Thumb에서도 똑같이 반복한다.
그림. 다른 해상도 파일에도 자동으로 적용되도록 한다.
그림. 컨트롤 크기를 변경할 수 있도록 하려면 Margin 속성에 0이 아닌 다른 숫자 값을 지정한다.
그림. 새 오브젝트 스타일을 각 해상도별로 테스트한 후에 완료한다.
Recommended Comments
There are no comments to display.