ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Inno Setup自定义安装界面:从脚本换肤到DPI适配避坑指南

Inno Setup自定义安装界面:从脚本换肤到DPI适配避坑指南 简介面向需要为软件制作专业安装界面的开发者和打包人员这份Inno Setup自定义安装界面资源包以增强版Inno Setup为基础内置.NET Framework 4封装解决默认向导风格单一、品牌呈现不足的问题。包内共136个文件压缩后约105.4MB主要包含isl/iss安装脚本、png/psd界面设计图与源文件、dll运行库、图标及辅助exe工具等脚本与设计资源分离其中psd源文件便于继续调整视觉细节dll与exe工具辅助运行与调试整体便于按需调整。整体结构清晰code目录下Code.iss为界面核心代码version.h可集中修改应用名称、公司、版本号等配置使用时替换app目录下的程序文件和temp目录下的界面图片即可适合中高级开发者快速定制带品牌形象的安装流程。目前已有1744人学习下载整套素材覆盖从设计稿到脚本配置的完整链路能显著减少从零搭建自定义安装界面的工作量。1. inno setup自定义安装界面先把最常见的误区拆掉「inno setup自定义安装界面」这个词背后是两类人一类是刚用 inno setup 打包 Windows 桌面软件的开发者嫌默认向导页太简陋另一类是公司里负责做安装包的人想把安装过程做成品牌化的样子而不是一眼看出是 Inno Setup 的灰底蓝条模板。这个标题能解决的核心问题不是「换张图」而是搞明白 inno setup 在界面这件事上到底给了你几层可改的空间文本层、图片层、控件层。有人以为必须学 InstallShield 那种重武器实际上 Inno Setup 靠脚本就能顶掉大半需求也有人以为换掉两张 BMP 就是自定义完毕结果遇到 DPI 缩放、黑边、字体乱码就翻车。这篇就按「先改文本和样式、再换图、深入到控件、最后处理坑」的顺序把一条不需要第三方打包工具就能走通的落地路径讲清楚。2. 脚本层原生定制先在 [Setup] 和 [Messages] 上把界面改出自己的味道要自定义安装界面大多数人第一反应是贴图但我建议先把脚本原生的两个段改明白。原因很简单Inno Setup 的向导界面有一大半是文字和按钮构成的把这些字换成你自己的产品名、按钮文案和提示语安装包的观感立刻就不一样而且完全不碰图片资源零维护成本。2.1 先用 WizardStyle 决定视觉骨架modern 与 classic 的差别Inno Setup 6 的向导界面由WizardStyle参数控制。默认值是modern对应的是 XP/Win7 时代之后流行的「顶部横幅 圆角按钮 步骤条」风格另一个可选值是classic会把界面拉回传统对话框样式左侧留一块竖图区域整体更矮更宽。这两个风格不只是好看与否的区别它还决定你后续放图的位置和比例modern风格下大图通常出现在顶部区域classic风格下大图在左侧。你做自定义界面之前必须先锁死风格否则后面配图会反复返工。以下是一组最小脚本[Setup] AppNameMyProduct AppVersion1.0.0 DefaultDirName{autopf}\MyProduct WizardStylemodern WizardSizePercent110 WindowResizableyes WindowWidth560 WindowHeight400这段脚本里WizardStylemodern选了新式向导骨架WizardSizePercent110把整个向导窗口放大了 10%适合高分辨率屏上觉得窗口太小的用户WindowResizableyes允许用户在安装过程中拖拽窗口边缘调整大小配合WindowWidth和WindowHeight指定初始尺寸。注意WindowResizableyes之后WindowWidth和WindowHeight仍然表示初始尺寸用户改过的大小会被记住。2.2 改按钮文字和标题把「下一步」变成你自己的话Inno Setup 的按钮文本不在[Setup]段里而是在[Messages]段。你可以覆盖单个消息也可以整段重写。最常见的做法是只覆盖几个关键字段窗口标题、欢迎语、按钮文字和左下角的边注。[Messages] SetupWindowTitle安装 MyProduct 1.0.0 WelcomeLabel1欢迎使用 MyProduct WelcomeLabel2本向导将引导您完成 MyProduct 的安装。%n%n点击“下一步”继续。 ButtonBack上一步 ButtonNext下一步 ButtonInstall立即安装 ButtonCancel取消 BeveledLabelMyProduct 安装程序WelcomeLabel2里的%n是换行符类似 C 语言的\n。ButtonBack、ButtonNext等字段会直接替换向导底部按钮上的文字。BeveledLabel是窗口左下角那一行小字很多人忽略它但这一行最适合放版本号和公司名能让安装包瞬间显得正规。注意点如果项目里使用了简体中文语言的默认消息[Messages]段的覆盖优先级最高你写什么就显示什么不需要再去改动语言文件。2.3 把安装包改得像自家产品标题、版权、许可协议一起改只改按钮文字还不够安装包有三个地方最容易被认出是 Inno Setup顶部标题栏的「安装 Inno Setup 示例程序」、许可协议页的「许可证协议」字样、以及安装完成页的「正在完成...安装向导」。这三处都可以在[Messages]段覆盖。[Messages] SetupAppTitleMyProduct %1 安装程序 SetupWindowTitleMyProduct %1 - 安装 LicenseLabel使用 MyProduct 之前请阅读以下条款 FinishedHeadingLabel已经完成 MyProduct 的安装 ClickFinish感谢选择 MyProduct点击“完成”退出安装程序。SetupAppTitle里的%1是版本号占位符Inno Setup 会自动替换成AppVersion的值。FinishedHeadingLabel控制完成页的大标题ClickFinish控制完成按钮上方那段说明。这样改完之后从标题栏到每一页的文字都已经是你自己的不仔细看根本认不出是 Inno Setup。这也是「自定义界面」成本最低、收益最明显的一层适合刚接触 inno setup 打包的初学者先做。3. 换向导图片WizardImageFile、尺寸与多语言切换文字改完了下一步是换图。很多人自定义安装界面卡在这一步因为 Inno Setup 对图片有一套自己的规则它不是把图片「放」到页面上而是把图片「当作」向导页的某个区域。理解了这个机制图片相关的参数就好办了。3.1 大图和小图的分工不同风格下图片往哪放Inno Setup 通过两个[Setup]段参数指定图片WizardImageFile和WizardSmallImageFile。大图出现在欢迎页、安装完成页等主要页面的固定区域小图出现在安装过程中间的次要页面比如「正在安装」页的左上角。我一般会先确定一张大图的基准比例再出图。modern风格下大图是横条区域建议参考 2:1 到 3:1 之间的横幅比例classic风格下大图是左侧竖条比例更接近 1:2。拿不准的时候先用一张纯色测试图跑一遍看它被压扁还是被裁剪再回到作图工具里调整。以下是最小配置[Setup] WizardStylemodern WizardImageFileassets\banner_main.bmp WizardImageStretchno WizardSmallImageFileassets\logo_small.bmpWizardImageFile指定主图WizardSmallImageFile指定小图WizardImageStretchno表示不拉伸图片去填满区域这个参数后面避坑章节还会细说。Inno Setup 6 默认支持 BMP、JPG、PNG但我建议统一用 BMP 或 PNG避免 JPEG 压缩导致的边缘色块在某些页面背景下看起来突兀。3.2 多语言安装包按语言切换不同横幅图如果你的安装包同时发布简体中文和英文图片也应当跟着语言走。Inno Setup 支持在图片参数后面加语言后缀用下划线分隔[Setup] WizardImageFileassets\banner_main.bmp WizardImageFile_zhassets\banner_zh.bmp WizardImageFile_enassets\banner_en.bmp WizardSmallImageFileassets\logo_small.bmp WizardSmallImageFile_zhassets\logo_zh.bmp WizardSmallImageFile_enassets\logo_en.bmp这里的_zh、_en后缀对应你在[Languages]段里定义的Name值。编译器打包时会识别当前语言自动选择对应图片。有一个细节容易踩坑如果某语言的图片缺失Inno Setup 不会报编译错误而是直接回退到无后缀的默认图片。这本来是件好事但也导致很多人编译后没检查发布出去才发现中文用户看到的还是英文横幅。我每次打包多语言版本时都会把zh和en两组图片单独列进检查清单。3.3 高清屏适配为什么你的图在 4K 屏上发虚图片替换完成后最常见的抱怨是「我的图在 4K 屏上模糊而且位置不对」。原因在于Inno Setup 的向导窗口尺寸是按逻辑像素计算的系统缩放率 150% 或 200% 时窗口会放大但图片区域的物理尺寸也跟着放大而你的图片还是按 96 DPI 出图的。模糊的本质是图片分辨率不够不是 Inno Setup 渲染有问题。对策有两种。第一种是让 Windows 自己拉伸保持WizardImageStretchyes图片会跟着区域拉伸。第二种是准备高分辨率图如果你知道用户群里高分辨率屏占比高就把主图按 2 倍尺寸出图例如目标显示宽度是 300 像素就做 600 像素宽的图片并让WizardImageStretchno这样在高分屏上会明显更清晰。提示WizardImageStretch只控制 Inno Setup 向导区域里的主图拉伸方式不影响WizardSmallImageFile。小图比例失配时更容易因为拉伸而模糊建议小图只做固定尺寸不要依赖拉伸。如果你的安装包需要适配高分屏还有一个配套参数值得调WizardSizePercent。这个参数按百分比缩放整个向导窗口。我会在检测到屏幕 DPI 是 150% 的机器上把WizardSizePercent调到 130 左右配合 2 倍图视觉上就不会有那种「小图硬撑大区域」的廉价感。这个组合对 inno setup 打包爱好者来说属于投入小收益大的界面优化。4. 控件级自定义VCL风格、自定义页与DPI适配到了这一层才算真正意义上的自定义安装界面。文本和图片的改变都是在 Inno Setup 给定的框架里做替换而控件级自定义允许你往向导里塞自己的页面、自己的按钮、自己的说明文字甚至给整套界面换皮肤。4.1 用 VCL 风格文件整体换肤一条让整个向导变样的捷径Inno Setup 6 的向导本身就是用 VCL 构建的所以它支持加载.vsf格式的 VCL 风格文件。一个.vsf文件里定义了所有控件的配色、边框、按钮样式加载它之后整个向导的观感会彻底改变不再只是换图。常见做法是借助开源项目 VCL Styles for Inno Setup 提供的运行时 DLL以LoadVCLStyle方式在启动时加载风格文件。典型脚本如下[Code] procedure LoadVCLStyle(APath: string); external LoadVCLStylefiles:VclStylesInno.dll stdcall; function InitializeSetup(): Boolean; begin ExtractTemporaryFile(style_dark.vsf); LoadVCLStyle(ExpandConstant({tmp}\style_dark.vsf)); Result : True; end;逻辑说明LoadVCLStyle声明为外部函数指向随安装包一起打包的VclStylesInno.dllExtractTemporaryFile把.vsf释放到临时目录再交给LoadVCLStyle加载。参数是风格文件的完整路径。注意VclStylesInno.dll必须通过[Files]段用Flags: dontcopy打进安装包否则运行时找不到 DLL。.vsf风格文件可以从 VCL Styles 社区相关的项目里下载也可以自己用 Delphi 的 VCL Styles Builder 制作。这个方案的成本是皮肤文件会影响整个界面的控件绘制某些第三方控件或自定义页面里的控件可能不吃皮肤需要在真机上逐个页面过一遍。4.2 在向导里插入你自己的品牌页CreateCustomPage 的用法换肤是全局改观但产品信息、用户协议确认、环境检查这类内容最好还是以独立页面的形式插在向导流程里。Inno Setup 的CreateCustomPage函数就是干这个的[Code] var InfoPage: TWizardPage; InfoText: TNewStaticText; procedure InfoPage_Activate(Page: TWizardPage); begin InfoText.Caption : 产品版本1.0.0 #13#10 安装路径 ExpandConstant({app}) #13#10 请确认以上信息无误后继续。; end; procedure InitializeWizard; begin InfoPage : CreateCustomPage( wpWelcome, 安装前确认, 请确认产品版本和安装目录); InfoText : TNewStaticText.Create(InfoPage); InfoText.Parent : InfoPage.Surface; InfoText.Left : ScaleX(16); InfoText.Top : ScaleY(16); InfoText.Width : InfoPage.SurfaceWidth - ScaleX(32); InfoText.Height : ScaleY(80); InfoText.WordWrap : True; end;CreateCustomPage的第一个参数是插入位置wpWelcome表示插在欢迎页之后第二个和第三个参数分别是对应页面顶部的大标题和副标题。TWizardPage是页面对象控件要挂到它的Surface上而不是页面上。TNewStaticText是 Inno Setup 6 官方提供的文本控件Left、Top、Width、Height负责布局WordWrap : True让长文本自动换行。InfoPage_Activate是这个页面每次被激活时触发的事件适合在这里动态刷新文案比如从注册表读出已安装路径再展示。4.3 让控件在 150% 缩放下不跑位ScaleX 与 ScaleY 是底线自定义控件最常见的翻车现场是开发机上看着完美一放到同事的 150% 缩放的笔记本上按钮压到边界外面去了。原因不是 Inno Setup 的问题而是你没有按 DPI 缩放控件坐标。Inno Setup 6 提供的ScaleX和ScaleY就是干这个的。上一节代码里我已经把Left写成ScaleX(16)、Top写成ScaleY(16)含义是无论系统缩放率是多少都按 16 个逻辑像素的物理距离来布局。如果你直接写Left : 16在高分屏下这个坐标不会跟着放大控件就会挤在角落。InfoText.Left : ScaleX(16); InfoText.Top : ScaleY(16); InfoText.Width : InfoPage.SurfaceWidth - ScaleX(32); InfoText.Height : ScaleY(80); BtnConfirm : TNewButton.Create(InfoPage); BtnConfirm.Parent : InfoPage.Surface; BtnConfirm.Left : InfoPage.SurfaceWidth - ScaleX(120); BtnConfirm.Top : InfoPage.SurfaceHeight - ScaleY(48); BtnConfirm.Width : ScaleX(100); BtnConfirm.Height : ScaleY(32); BtnConfirm.Caption : 我已确认;这段脚本里按钮的Left用SurfaceWidth - ScaleX(120)计算意思是让按钮离右边保持 120 逻辑像素的间距Top同理离底部 48 逻辑像素。这样做的好处是窗口尺寸无论怎么变按钮都锚定在右下角。经验之谈所有自定义页面里的控件坐标只要涉及固定数值一律包一层ScaleX/ScaleY凡是涉及页面宽高的一律用Page.SurfaceWidth和Page.SurfaceHeight去减不要写死像素。这样的控件级自定义做完之后安装流程就不再是「Inno Setup 标准向导 换了张图」而是「你的安装向导 你的品牌页 你的按钮」。配合 inno setup 打包时常用的/SILENT参数甚至可以做出完全无声的定制安装体验。5. 自定义界面避坑指南四个最常见问题的原因和修复界面改得越深踩的坑越多。这一章把我在自定义 inno setup 安装界面过程中反复遇到的四个问题整理成「现象 → 原因 → 解决」三条式记录每条都是可以直接照抄的排错经验。5.1 图片变形或出现黑边WizardImageStretch 到底该怎么设现象主图放进向导后要么被拉伸得面目全非要么旁边出现一大块黑色背景。原因图片本身的宽高比和 Inno Setup 向导预留区域的宽高比不一致。设WizardImageStretchyes时图片会被强行拉伸填满区域比例差太多就变形设WizardImageStretchno时图片保持原始比例剩余的区域就用BackColor参数指定的颜色填充默认是黑色于是出现黑边。解决先确定你的向导风格然后按风格出一张比例接近的图。modern风格下的横幅区域接近 2.5:1 到 3:1classic风格下的左侧区域接近 1:2 到 1:2.5在这两个范围里出图WizardImageStretchno基本不会看到明显黑边。如果已经有一张非标准比例的图不想重做就把WizardImageStretch设为yes同时把图的背景设计成纯色拉伸后的变形感会小很多。注意BackColor参数需要搭配WizardImageBackColoryes才会生效否则图片区域仍按黑色处理。5.2 DPI 缩放后自定义页面控件错位坐标没有包 ScaleX/ScaleY现象自定义页面在 100% 缩放的电脑上正常换到 150% 缩放的电脑上按钮跑到页面外文本被截断。原因直接给Left、Top、Width、Height写了固定像素值。Windows 缩放后物理像素变多但固定值不会变控件位置自然偏移。解决所有固定数值坐标一律套ScaleX()和ScaleY()。这不仅是按钮问题凡是你创建的TNewStaticText、TNewButton、TNewCheckBox、TNewEdit都要遵循这个规则。除了坐标字号也要注意Inno Setup 默认会按系统 DPI 自动缩放标准页面的字体但自定义控件里的字体缩放表现不稳定建议在InitializeWizard里显式设置InfoText.Font.Size : 9之类并配合ScaleY控制高度。5.3 中文显示成方框或乱码编码和字体两头堵现象自定义页面的中文标题显示成一个个方块或者按钮上的中文变成问号。原因分两种。第一种是脚本文件本身编码不对Inno Setup 6 默认按 UTF-8 处理.iss文件但如果你用旧版编辑器保存成了 GB2312 或 ANSI中文就会被错误解析。第二种是系统缺少对应字体某些精简版 Windows 或服务器系统没有安装微软雅黑而自定义页面里指定的字体又是「微软雅黑」系统找不到就回退到默认字体方框就出现了。解决.iss文件统一保存为「UTF-8 带 BOM」格式不要用无 BOM 的 UTF-8。如果项目里同时存在多个.iss片段还要确认没有混入 GBK 编码的包含文件。字体问题优先用TNewStaticText的Font.Name指定「宋体」或「Microsoft YaHei」这种系统自带字体不要用产品自定义字体否则就要在安装包里顺便带上字体文件并通过[Files]安装维护成本高得多。5.4 VCL 风格皮肤导致误报或控件闪烁DLL 与皮肤文件的兼容性问题现象加载 VCL 风格后整个向导变好看了但杀毒软件报毒或者切换页面时部分控件闪烁、卡顿。原因VclStylesInno.dll是一个运行时代码注入型的 DLL本身容易触发启发式查杀同时.vsf风格文件对部分标准控件的绘制 hook 和 Inno Setup 6 的某些新控件不完全兼容页面切换时会重复绘制背景表现为闪烁。解决不要改动 VCL 风格默认 DLL优先使用开源项目官方发布的构建版本不要为了功能去修改 DLL。其次杀毒误报靠提交误报申诉和代码签名解决SetupIconFile、SignTool两个参数配合给安装包签名误报率会显著下降。闪烁问题如果出现在某个特定.vsf上直接换一个风格文件大多数情况下一换就好这不是 Inno Setup 的 bug是风格文件里针对已过时控件的绘制代码在作怪。6. 进阶技巧品牌启动页 静默移交标准向导以及我最后补的一个习惯如果你连安装程序启动后的第一眼都觉得不够品牌化那可以把标准向导再往后推一层先显示一个你自己画的全屏品牌页再静默启动 Inno Setup 安装流程。这是我在做企业级安装包时常用的方案思路是让品牌页接管「第一印象」Inno Setup 接管「安装逻辑」。做法是写一个小的引导程序C#、VB.NET 或 Delphi 都行它在启动时全屏显示品牌图过两秒后调用真正的setup.exe并传静默参数var p Process.Start( setup.exe, /VERYSILENT /SUPPRESSMSGBOXES /NORESTART); p.WaitForExit(); splashForm.Close();/VERYSILENT让 Inno Setup 不显示任何界面进度只执行安装/SUPPRESSMSGBOXES抑制错误弹窗/NORESTART不触发重启。这样用户看到的全程都是你的品牌页安装完成后品牌页退出。这个方案有一个明显边界用户在整个安装过程中看不到进度条所以适合安装时间短、或者对进度不敏感的内部工具型软件如果安装耗时很长还是要用CreateCustomPage加TNewProgressBar自己做进度页。我现在的习惯是每次改完界面先跑一份「基础版 完整安装流程」的打包确认所有页面在 100% 和 150% 两种缩放下都不跑位再去碰皮肤和启动页这样就算翻车也容易定位。这个顺序帮我省掉了很多来回排查的时间希望帮到你。本文还有配套的精品资源点击获取
返回列表