(原創)高DPI適配經驗系列:(四)高DPI適配示例

leslie_xin發表於2021-05-25

一、前言

光說不練假把式。
原理說再多,也不如一個例子直觀明瞭。所以本篇文章就來通過一個例子演示一下高DPI適配的流程。

相信看完的你,一定會有所收穫!

本文地址:https://www.cnblogs.com/lesliexin/p/14801749.html


二、對比

我們先來看一組對比,分別是未進行高DPI適配與已進行高DPI適配的程式執行截圖。

(一),DPI=96(螢幕解析度:1080P)

1,未進行高DPI適配
image

2,已進行高DPI適配
image

這種情況下,程式未發生縮放,所以兩者幾乎一樣。

(二),DPI=192(螢幕解析度:4K)

1,未進行高DPI適配
image

2,已進行高DPI適配
image

可以看到,未進行高DPI適配時,控制元件發生了重疊,而且文字框、下拉框、按鈕內容顯示也不完整。
但是經過高DPI適配後,介面無論是佈局還是內容,都與DPI=96時一致。

三、高DPI適配流程

(一),通知系統“程式已適配高DPI”

因為系統會自動對程式進行高DPI縮放,這個優先順序是最高的,所以第一步是在程式啟動時通知系統“本程式已自行適配高DPI,不需要再對我進行縮放”。
使用的是Win32Api函式SetProcessDPIAware,因為此函式是Vista之後才有的,所以需要判斷下系統版本。
image

(二),在程式初始化時進行高適配

對程式的高DPI適配無非兩步:一是尺寸的調整,二是位置的調整。
所以就需要在程式初始化時進行處理。
image

(三),適配步驟

1,【在VS設計器中進行佈局】

image

2,【獲取DPI】

使用Graphics的DpiX/DpiY獲取。
現在絕大部分螢幕都是“方形畫素”,所以DpiX與DpiY的值是相同的。
image

3,【尺寸調整】之獲取控制元件寬度

上一篇文章中,我們知道適配的基準是通過字串寬度來確定控制元件寬度
所以,我們可以通過設計器來大致確定下每個控制元件的寬度=多少個字元。
image
程式碼:
image

4,【尺寸調整】之間隔

間隔分為控制元件與視窗邊框之間的間隔(簡稱“間隔1”),和控制元件與控制元件之間的間隔(簡稱“間隔2”)。
image
程式碼:
image

5,【尺寸調整】之調整控制元件尺寸

有了上面的尺寸資料後,就可以調整這些控制元件們的具體尺寸了。
這裡面需要說明的一個控制元件是按鈕,因為按鈕的寬和高都不會自動調整,所以除了按鈕的寬度外,還需要設定按鈕的高度。
我們通過設計器,可以看到,按鈕的高度大概是Label高度的1.5倍,所以我們就可以根據Label的高來計算按鈕的高度。
image
程式碼:
image

6,【尺寸調整】之所有控制元件所佔用的寬度

在調整好控制元件的尺寸後,所有控制元件佔用的寬度也會發生變化。以本程式為例,最寬處為:間隔1+文字框寬度+間隔2+下拉框寬度+間隔1。
image

7,【尺寸調整】之所有控制元件所佔用的高度

在調整好控制元件的尺寸後,所有控制元件佔用的高度也會發生變化。以本程式為例,最高處為:間隔1+Label高度+間隔2+文字框高度+間隔2+按鈕高度+間隔1
image

8,【尺寸調整】之視窗邊框厚度

在調整完控制元件的尺寸後,對應視窗的尺寸也需要重新調整,所以我們還需要知道視窗邊框的厚度。
其中,左、右、下邊框的厚度是一樣的。
image

9,【尺寸調整】之視窗尺寸調整

有了以上資料,就可以調整視窗的尺寸了。
image

10,【位置調整】

當改變完控制元件的尺寸後,控制元件的位置也需要重新進行調整,不然會發生控制元件錯位、重疊等情況。
在調整位置時,一般以左上角的控制元件為準進行調整,本例便以左上角的Label為基準進行調整。
image


四,總結

高DPI的適配,技術難度並不高,更多的是耐心與細心。
因為在進行尺寸與位置的調整時,需要進行大量的重複性計算,很考驗耐心。
除了這些之外,如果程式中使用了【圖示】、【圖片】等元素,也需要進行相就的選擇和替換。
以我個人經驗,適配時都是分為十個級別(參看(原創)高DPI適配經驗系列:(二)按DPI範圍適配),所以每組圖示和圖片都需要準備十份,這更是一份考驗耐心與細心的活。

至此,本系列完結,如果後續還有與高DPI相關的經驗,仍會繼續更新。

因為都是一些我個人的經驗,所以難免有所紕漏,歡迎大家評論指正。

相關文章