肇鑫的技术博客

业精于勤,荒于嬉

制作上架应用的视频预览

为了展示产品功能,我们可以制作并上传视频。

视频规范

我们可以通过真机录制视频,也可以通过模拟器录制。真机录制视频很简单,只需要在设备的控制中心选择录制屏幕就可以了。录完之后,经过剪辑就可以直接上传。

如果你没有特定型号的真机,也可以通过模拟器来录制视频。模拟器录制视频与真机相比,存在一些限制,本文后面会讲到如何解决这些问题。

推荐使用H.264格式。虽然它会比ProRes 422格式的文件大一些。但是这个格式现有的设备都支持硬件加速。因此保存(转码)速度最快,工作效率最高。

模拟器录制视频

录制视频

先打开Xcode,加载项目,然后选择你需要录制视频的模拟器,运行项目。当项目成功在模拟器中运行后,在终端中输入

xcrun simctl io booted recordVideo record.mov

最后的record.mov是录制的视频的文件名。它会自动保存在终端当前的文件夹。录制完成后按ctrl+c结束录制。

  • 如果你开了多个模拟器,那么可能不会录制到你当前使用的模拟器。关闭掉其余的模拟器,仅保留你需要录制的模拟器。
  • 模拟器录制的视频不完全与你的操作同步。如果你操作完成就立即结束录制,可能结尾部分会没有路上。因此,建议结尾之后进行额外的操作,比如点击按钮之类的。然后在后期制作中,将多余的部分删除,这样可以保证视频录制的完整性。
  • 虽然Xcode可以在Scheme中修改语言,来改变运行时应用的语言,但是这个对于语言的修改,是应用级别的。在录制演示文件时,应该在模拟器/设备中修改系统的语言偏好。这是因为,一些提示,比如通知权限/地理位置权限的提示窗口,是基于系统语言的。如果你只在Xcode中设置,那么就会遇到系统权限提示窗口的语言与应用语言不一致的情况。

转码

根据苹果的规范(见下图),存在两个不同的分辨率,前一个叫原生分辨率(Native resolutions),后一个叫接受的分辨率(Accepted resolutions)。前者是模拟器录制视频时得到视频的分辨率,后一个是App Store Connect上传视频时,所接受的视频分辨率。如果二者分辨率不同,就需要转码。

App Preview Resolutions

当真机录制视频时,得到的视频直接就是接受的分辨率。通过模拟器录制得到的视频,是原生分辨率,需要转码。
转码可以通过你喜欢的任意软件进行。我用的是HandBrake

添加空音轨

转码完成后,如果你直接上传模拟器录制的视频,App Store Connect会在上传后错误提示:音频不符合规范。原因是模拟器录制的视频,只有视频的部分,没有音频。因此,你需要添加额外的音轨。可以使用FFmpeg添加空音轨。

安装FFmpeg

brew install ffmpeg
brew link ffmpeg

添加空音轨

ffmpeg -f lavfi -i anullsrc=channel_layout=stereo:sample_rate=44100 -i video.mov \
  -shortest -c:v copy -c:a aac output.mov

video.mov是源文件,output.mov是目标文件。

剪辑

剪辑我推荐使用Quicktime Player。它的保存速度是最快的。

当剪辑完成之后,有时保存按钮是灰色的。这时可以直接点击关闭,就会弹出保存对话框。

iOS、watchOS应用用户设置相关问题的答案

最近在写咕唧2,对于iOS应用与配套watchOS应用之间的设置的相关问题有了一些心得。记下来,备查。

问题与答案

1. 创建的Settings.bundle文件放在哪里?

无论iOS还是watchOS的,都放在iOS应用下。

2. iOS应用的设置,为什么watchOS应用不能直接读了?

这是一个历史遗留问题。1代的手表系统,当时还不叫watchOS,上的应用只有一种,叫瞥一眼(glance)。生成机制是所有的一切都在手机上生成,然后传到手表上显示。因此,当然手机应用和手表应用实际上都在手机上运行。因此,直接通过分享组(share group),手表应用就能读取手机应用的设置。

watchOS 2开始,手表应用改在手表上运行了。而手表上的共享组和手机上的共享组之间不自动同步,所以手表和手机之间的设置不能直接读了。

3. iOS应用如何获得watchOS应用的设置?

不能直接读。因为苹果规定,手表应用可以唤醒手机应用,反之则不行。

4. watchOS应用如何获得iOS应用的设置?

通过session的sendMessage方法唤醒手机,然后手机发送设置给手表。

5. 如何设置watchOS应用的设置?

通过手机端的手表应用。这个应用虽然在手机上,但是可以直接读手表应用的设置。并且会写回去。

一张图

iOS与watchOS的设置同步

参考资料

自定义UITableViewCell的选中背景

默认情况下,UITableViewCell的选中效果如图。单独选中的效果给人的感觉不是那么可靠。

但从编程角度看,使用选中状态比较简单。不使用选中,而采用标记替代选中比较麻烦。因为这个对号是属于UITableViewCellaccessoryType属性。它并不是和选中状态同步的。需要单独、小心地处理,稍有不慎,就会出现各种错误。

解决思路

创建一个背景透明的对号标记

我最初的想法是创建一个背景透明的对号标记。然后把它应用在UITableViewCellselectedBackgroundView属性上。

这条路不好走。因为一旦制定了selectedBackgroundView。表格之间的分隔线就没有。解决方案有利用各种方式画分隔线的。比较麻烦。

在我采用默认的表格,并允许多选时,我发现苹果的默认选中,就是没有分割线的,只不过它用了有颜色的背景。这在单选时不明显,一旦有多选,就很明显。

创建一个有背景色的对号标记

创建好的图片如图。

checkmark_background@2x

用1x的语言描述,背景:宽320,高44。对号:宽16,高32,水平居中,右边距16。

难点来了

我们知道,不同格式设备的宽度是不一样的。那么对于320这个iOS设备的最小宽度,这个图片在遇到更宽的设备时是需要拉伸的。

关于如何拉伸图片,我们可以看这篇:UIImage图片拉伸平铺(resizableImage)

看着不难,实际上全是坑。因为思维习惯不是直接的,是间接的。

简述一下拉伸图片的原理

如图,如果有一个图片,被分成1-9共9个部分。那么它的四个角的1、3、7、9图形保持不变。我们通过定义2/上、4/左、8/下、6/右的方式,来确定5的范围,然后选择拉伸5。这个就是定义图片拉伸的原理。

1 2 3
4 5 6
7 8 9

下面应用这个原理,放大上面的带对号的背景图。

checkmark_background 1-9@2x

因为我们需要保证对号的位置不变,所以要把它画在3的位置。这是唯一的限制。根据这个限制我们可以计算出。

  • 上:
    • 上边距 = (背景高 - 对号高) / 2 = (44 - 32) / 2 = 6
    • 上 = 上边距 + 对号高 = 6 + 32 = 38
  • 右 = 对号宽 + 右边距 = 16 + 16 = 32

至于下和左,我们因为要尽量保证5越大越好,就都取1。

最终代码如下:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "sampleCell", for: indexPath)
    
    // 获得背景图
    let image = #imageLiteral(resourceName: "Checkmark_background")
    // 指定拉伸范围
    let edgeInsets = UIEdgeInsetsMake(38, 1, 1, 32)
    // 获得拉伸图片
    let resizableImage = image.resizableImage(withCapInsets: edgeInsets, resizingMode: .stretch)
    // 生成图片视图,大小与表格项相同
    let imageView = UIImageView(frame: cell.bounds)
    // 指定图片
    imageView.image = resizableImage
    // 指定表格项选中时的背景视图
    cell.selectedBackgroundView = imageView
    // 设定文字
    cell.textLabel?.text = "条件\(indexPath.row)"

    return cell
}

最终效果

如图:

fina