공통 [10.3 리오] High DPI가 적용된 이미지 리스트로 다양한 해상도의 이미지를 지원할 수 있습니다.

2018.12.05 13:47

험프리 조회 수:767

RAD 스튜디오 10.3 리오에서 High DPI를 지원하는 이미지 리스트가 추가해, 컨트롤 내의 이미지들을 다양한 해상도를 통해 더욱 선명하게 표현할 수 있게 되었습니다.

 

High DPI

High DPI(일명 HiDPI)는 디스플레이에 몇 배 더 많아진 픽셀 수 만큼 몇 배로 더 선명하게 보여주는 표시방식입니다.

 

최근 고해상도 모니터들이 출시되어 FHD(1980X1080) 부터 QHD(2440X1680), UHD(3840X2160 이상) 해상도를 지원합니다.

윈도우에서 고해상도를 설정하는 경우 문제가 있습니다. 기존 애플리케이션의 크기가 너무 작게 표시되어 가독성이 나빠지게 됩니다.

 

해결방법은 2가지로, 디스플레이 설정에서 해상도를 낮추거나, 윈도우 배율을 높여 크게 표시하는 것입니다.

해상도를 낮추는 방법은 고해상도 모니터를 사용하는 의미를 감쇄시키는 것이기 때문에 결국 배율을 높여 표시하는 방식을 사용합니다.

display_scale.png

(설정 > 디스플레이 > 배율 및 레이아웃 > 텍스트, 앱 및 기타 항목의 크기 변경 또는 고급 배율 설정에서 배율을 조정할 수 있습니다.)

 

하지만, 또다른 문제가 있습니다. 배율을 높여 표시하게 되면 컨트롤과 글자등이 흐릿하게 표시될 것이고, 이 문제를 해결하기 위해 많아진 픽셀 수 만큼 선명하게 표시하는 기술이 바로 High DPI 입니다.

High DPI는 윈도우 8.1 부터 도입된 기술로 윈도우 UI(시작메뉴, 바탕화면, 탐색기 등)는 배율을 높이면 컨트롤, 아이콘, 글자 등이 선명하게 표시됩니다.

 

애플리케이션들도 High DPI를 직접 지원해야 합니다. 그렇지 않으면 높아진 배율에 맞게 화면이 흐릿하게 표시해 좋지않은 가독성을 제공하게 될 것입니다.

 

RAD 스튜디오는 10 시애틀(2015년 출시) 버전 부터 High DPI를 발빠르게 지원하고 있습니다. 프로젝트 옵션 설정(기본 적용됨)만으로 High DPI를 지원합니다. 즉, High DPI를 지원하지 않는 버전의 소스코드를 다시 빌드하는 것만으로 애플리케이션에 High DPI 기능을 적용할 수 있습니다.

폼(TForm)의 Scaled 속성(기본값 True)을 변경해 배율 적용을 변경할 수도 있습니다. VCL 내부 코드들은 High DPI 적용을 위해 전체적으로 배율설정을 곱한 크기로 그리도록 적용되었습니다.(일부 써드파티 컴포넌트 들의 경우 High DPI 적용 여부를 확인해야 하니다.)

 

10.3 리오에서는 버튼, 툴바, 팝업메뉴 등에 표함되는 이미지를 담는 이미지 리스트에 High DPI가 적용되어, UI 컨트롤, 글자 등에 더불어 이미지도 높은 해상도로 선명하게 표현하는 기술이 추가되었습니다.

High DPI 이미지 리스트는 TImageCollection과 TVirtualImageList 두가지 컴포넌트로 구현되었습니다.

TImageCollection

imagecollection.png

 

TImageCollection 컴포넌트는 이미지 목록별로 다양한 해상도의 이미지를 등록할 수 있는 컴포넌트입니다. 위 그림과 같이 Image Collection Editor 대화상자를 통해 다양한 해상도의 이미지를 등록, 편집, 삭제할 수 있습니다.

 

[Images]의 [Add] 버튼을 이용해 하나의 이미지 파일 또는 여러개의 이미지 파일을 선택 등록할 수 있습니다. 여러개의 이미지 파일을 선택한 경우 "Size Separator"로 지정된 문자로 파일명을 구분해 해상도별 이미지를 일괄 등록할 수 있습니다. 또는, [Selected Image]의 [Add] 버튼을 눌러 해상도별 이미지를 개별 등록할 수도 있습니다.

 

기존 이미지 리스트(TImageList)의 이미지 목록을 불러올 수 있습니다.

Loadfromexstingtimagelist.png

 

[Load Images from TImageList] 대화상자에서 이미지 리스트를 선택 해 불러오거나 여러 이미지 리스트의 이미지 목록을 병합(Merge)할 수 있습니다.

Loadfromexstingtimagelist2.png

 

TVirtualImageList

이미지 컬렉션(TImageCollection)에 등록된 다중해상도 이미지를 이미지리스트로 제공하기 위해 TVirtualImageList 컴포넌트를 사용합니다.

TVirtualImageList는 TCustomImageList를 상속받아 구현되었으며, 응용 프로그램이 구동되는 윈도우의 디스플레이 배율에 맞게 이미지 컬렉션의이미지를 제공하는 역할을 합니다.

virtualimagelist.png

 

기존의 이미지 리스트(TImageList)를 지정한 Images 속성에 가상 이미지 리스트(TVirtualImageList)를 설정할 수 있습니다.

ImagesProperty.png

 

High DPI가 적용된 이미지 리스트

HiDPIImageList.png

위의 그림은 각각 TImageList와 TVirtualImageList(+TImageCollection)을 적용한 툴바(TToolbar) 화면입니다.

100%, 150%, 225% 배율 적용 시 배율에 따라 적절한 해상도의 이미지로 선명하게 표현된 것을 확인할 수 있습니다.

 

 

 

10.3 리오의 업데이트 버전들

 

 

 

, 이 게시물을
Profile
목록
목록
번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 15417
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13960
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16496
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22048
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23267
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18921
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39245
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174696
503 [시애틀] 안드로이드 서비스 앱을 만들 수 있습니다. Humphery 2015.09.07 691
502 [시애틀] 블루투스 LE를 지원하는 디바이스에서 비콘 광고데이터를 발생할 수 있습니다. file Humphery 2015.10.06 689
501 [10.4 시드니][패치] RAD스튜디오 10.4 '세 번째 패치(Patch 3)': VCL그리드, C++Win64 디버깅, C++ 안드로이드 예외처리 핸들링 및 리소스 등 관리자 2020.07.29 686
500 [고객사례-유틸리티, 델파이] 녹음기 앱 - Voice Recorder 관리자 2019.12.10 685
499 [고객 사례- 3D, 시뮬레이션, 델파이] 3D Train Studio 관리자 2017.03.02 681
498 [베를린 U1] 윈도우 태스크바 알림의 뱃지를 제어할 수 있습니다. 험프리 2016.09.20 680
497 [10.4 시드니 신기능] iOS와 맥OS 지원 강화 관리자 2020.06.04 680
496 [고객 사례- 의료, 델파이+임베디드DB] Siemens Healthcare 의 체외진단기기 (IVD, In Vitro Diagnostics) file 관리자 2016.11.03 680
495 [커뮤니티 에디션] 사용 자격 기준 정리 관리자 2018.11.29 679
494 [도서/PDF/소스코드] 시작하는 사람들을 위한 델파이 프로그래밍-모듈 17. 1차원 정적 배열 관리자 2019.03.29 678
493 n [도서/PDF/소스코드] 시작하는 사람들을 위한 델파이 프로그래밍-모듈 7. 중접된 If...Then...Else 문. 작업 해결 실습하기 관리자 2019.03.29 676
492 [업데이트][핫픽스][10.1 베를린] 갤럭시 S7 Edge(안드로이드 6.0.1) 디버깅이 되지않는 이슈 패치 험프리 2016.05.27 676
491 [10.4 시드니 신기능] 언어 서버 프로토콜 (LSP, Language Server Protocol) 관리자 2020.06.04 675
490 [델파이 샘플 코드] 안드로이드, iOS, OSX, 윈도우, 리눅스, HTML5 관리자 2019.11.13 674
489 [도서/PDF/소스코드] 시작하는 사람들을 위한 델파이 프로그래밍-모듈 23. 타이머 관리자 2019.03.29 674
488 Class에서 Interface 두 개 구현할 때, 이 둘이 동일한 이름의 메소드(Method)를 가지고 있다면? file 험프리 2019.12.11 671
487 [도서/PDF/소스코드] 델파이 Begin...End - 14장. 분산처리(DataSnap) 관리자 2019.08.20 670
486 가장 강력한 ‘데이터베이스 연동’ 기능을 자체적으로 제공하는 프레임워크는? (델파이 VS. WPF VS. ELECTRON) 관리자 2021.03.04 669
485 델파이, C++빌더의 윈도우10과 High DPI 디스플레이 지원 김원경 2020.02.28 668
484 [프로그래밍 애피타이저] 8장 SQL 정의와문법 file 김원경 2020.04.09 667
쓰기
태그