iOS开发Swift-2-图片视图、App图标-赏月App

1.创建新项目

点击File - New - Project。

iOS开发Swift-2-图片视图、App图标-赏月App_第1张图片

 选择Single View App,点击Next。

iOS开发Swift-2-图片视图、App图标-赏月App_第2张图片

 填写文件信息,点击Next。

iOS开发Swift-2-图片视图、App图标-赏月App_第3张图片

 选择文件位置,点击Create。

iOS开发Swift-2-图片视图、App图标-赏月App_第4张图片

  修改App显示名称为 “赏月”。

iOS开发Swift-2-图片视图、App图标-赏月App_第5张图片

2.设置背景色

选择Main,点击View界面,选择右边属性,点击Background选择背景色。

iOS开发Swift-2-图片视图、App图标-赏月App_第6张图片

 3.创建图片视图

 在组件库中找到Image View拖动到界面上。

iOS开发Swift-2-图片视图、App图标-赏月App_第7张图片

 点击尺子,在Width和Height中调节图片和视图的宽高均为100,将图片拖动到视图居中的地方。

iOS开发Swift-2-图片视图、App图标-赏月App_第8张图片

 打开Assets包,将图片资源拖动到包中。

iOS开发Swift-2-图片视图、App图标-赏月App_第9张图片

4. 2x、3x像素图片准备

双击图片,发现需要上传该Image的2x,3x的图片以保证图片的清晰度。

iOS开发Swift-2-图片视图、App图标-赏月App_第10张图片

 打开图片转换网址:https://www.appicon.co

 进入Images Sets一栏,选择3x,iOS,将图片拖放到网页上。点击Generate。

iOS开发Swift-2-图片视图、App图标-赏月App_第11张图片

 下载完成后,选中三个图片,拖放到Assets包中(记得删除原来的FullMoon图片)。

iOS开发Swift-2-图片视图、App图标-赏月App_第12张图片

iOS开发Swift-2-图片视图、App图标-赏月App_第13张图片

 5.选择image

在Main文件中,选择Image View,选中FullMoon这个Image,Image View标签变成月亮图片。

iOS开发Swift-2-图片视图、App图标-赏月App_第14张图片

 6.制作App图标

可画:https://www.canva.cn

选择像素1024 * 1024,创建新设计。

iOS开发Swift-2-图片视图、App图标-赏月App_第15张图片

 进行设计并导出图片为png。

iOS开发Swift-2-图片视图、App图标-赏月App_第16张图片

  打开图片转换网址:https://www.appicon.co

 选择App icon,选择iPhone,将素材图片拖到图片文件上,点击Generate下载。

iOS开发Swift-2-图片视图、App图标-赏月App_第17张图片

 打开Assets文件夹,删掉原来的Appicon,将新的AppIcon.appiconset拖入到Assets文件夹中。

iOS开发Swift-2-图片视图、App图标-赏月App_第18张图片

iOS开发Swift-2-图片视图、App图标-赏月App_第19张图片

 7.编译运行

点击Product - Build,编译软件。

iOS开发Swift-2-图片视图、App图标-赏月App_第20张图片

 编译成功。

iOS开发Swift-2-图片视图、App图标-赏月App_第21张图片

 运行程序。

iOS开发Swift-2-图片视图、App图标-赏月App_第22张图片

iOS开发Swift-2-图片视图、App图标-赏月App_第23张图片iOS开发Swift-2-图片视图、App图标-赏月App_第24张图片

 8.更换背景图。

 打开图片转换网址:https://www.appicon.co

将素材中的背景图转换为2x,3x形式。

iOS开发Swift-2-图片视图、App图标-赏月App_第25张图片

 下载好的素材拖入Assets中。

iOS开发Swift-2-图片视图、App图标-赏月App_第26张图片

 创建一个与屏幕大小一致的Image View,将图片设置为bg。

iOS开发Swift-2-图片视图、App图标-赏月App_第27张图片

 调整图片层级使月亮在上方。

iOS开发Swift-2-图片视图、App图标-赏月App_第28张图片

 调整月亮大小为300*300,并拖到画面中间。

iOS开发Swift-2-图片视图、App图标-赏月App_第29张图片

 9.启动。

iOS开发Swift-2-图片视图、App图标-赏月App_第30张图片iOS开发Swift-2-图片视图、App图标-赏月App_第31张图片

你可能感兴趣的:(iOS开发Swift-2-图片视图、App图标-赏月App)