【笔记】IOS应用添加图片

前言

IOS应用添加图片

添加内置图片

  • Main.storyboard->+->添加一个Image View组件到页面中->在Image View的配置中,选择图片,设置内置图标作为图片

添加自定义图片

准备工作

  • 一张图片

转换图片尺寸

导入图片作为图片集合

  • Assets.xcassets->+->Image Set

  • 全选所有尺寸的图片,拖拽到Image Set

  • Main.storyboard->+->添加一个Image View组件到页面中->在Image View的配置中,选择图片,设置为刚刚添加的图片

调整图片适合于作为背景图

拉伸图片

  • 设置Content ModeScale To Fill拉伸图片->将图片的尺寸拉直屏幕边缘->在View Controller Scene中将背景图的位置设置为仅次于Safe Area的最顶部

Content Mode也可以设置其他的值,只要保证图片填满即可
View Controller Scene中元素的顺序与PS中图层的顺序刚好相反,越靠下面的元素在页面中处于越顶层

锁定边距

  • 如果不锁定边距,那么手机横屏的时候,图片仍然以竖屏显示

  • Add New Constrains->点亮四个边距的指示线->Add 4 Constraints

横屏时填满非安全区

在设定边距时指定相对于非安全区的边距
  • 设置相对于View的左右边距都为0


修改配置填满非安全区
  • 在竖屏状态下,选择Contains->图片元素名.trailing = trailing->Second Item中选择Superview

  • 在竖屏状态下,选择Contains->图片元素名.leading = leading->Second Item中选择Superview

完成

参考文献

哔哩哔哩——疯狂滴小黑