[Swift通天遁地]九、拔剑吧-(12)创建Preview-Transition图像预览界面

概述本文将演示如何创建一个漂亮的图像预览界面。 首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】 1 platform :ios, ‘12.0’2 use_frameworks!3 4 target ‘DemoApp‘ do5 source ‘https://github.com/CocoaPods/Specs.git‘6 pod "Pre

本文将演示如何创建一个漂亮的图像预览界面。

首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】

1 platform :ios,‘12.0’2 use_frameworks!3 4 target ‘DemoApp‘ do5     source ‘https://github.com/CocoaPods/Specs.git‘6     pod "PrevIEwTransition"7 end

根据配置文件中的相关设置，安装第三方类库。

安装完成之后，双击打开项目文件【DemoApp.xcodeproj】

Github项目：【Ramotion/preview-transition】,下载并解压文件。

把类文件夹【PrevIEwTransition】拖动到自己的项目中。

点击【Finish】完成按钮，确认文件的导入。

创建一个显示图像列表的表格视图控制器，该控制器继承自第三方类库。

在项目文件夹上点击鼠标右键，d出右键菜单。

【New file】->【Cocoa touch】->【Next】->

【Class】：DemotableVIEwController

【Subclass of】:PTtableVIEwController

【Language】：Swift

->【Next】->【Create】

点击打开【DemotableVIEwController.swift】

 1 import UIKit 2 //引入已经安装的第三方类库 3 import PrevIEwTransition 4  5 public class DemotableVIEwController: PTtableVIEwController { 6    7     //初始化一个数组对象，显示图像的名称和标题。 8   fileprivate let items = [("1","River cruise"),("2","north Island"),("3","Mountain trail"),("4","Southern Coast"),("5","Fishing place")] 9     10     //添加一个代理方法，用来设置表格的行数11     public overrIDe func tableVIEw(_ tableVIEw: UItableVIEw,numberOfRowsInSection section: Int) -> Int12     {13         //在此设置表格拥有100个单元格14         return 10015     }16     17     //添加一个代理方法，用来处理单元格即将显示时的事件。18     public overrIDe func tableVIEw(_ tableVIEw: UItableVIEw,willdisplay cell: UItableVIEwCell,forRowAt indexPath: IndexPath)19     {20         //获得当前的单元格，并转换成自定义的单元格对象。21         guard let cell = cell as? ParallaxCell else { return }22         23         //通过当前单元格的行数，以及数组的长度，计算并获得一个整形常量。24         let index = indexPath.row % items.count25         //通过计算所有的整形常量，获得数组中的图像名称和标题26         //所以表格的所有单元格，将重复显示五张图片。27         let imagename = items[index].028         let Title = items[index].129         30         //从项目中加载指定名称的图片素材，并在单元格中显示加载的图片。31         if let image = UIImage(named: imagename)32         {33             cell.setimage(image,Title: Title)34         }35     }36     37     //添加一个代理方法，用来初始化或复用表格中的单元格。38     public overrIDe func tableVIEw(_ tableVIEw: UItableVIEw,cellForRowAt indexPath: IndexPath) -> UItableVIEwCell39     {40         //根据复用标识，从表格中获取可以复用的单元格，41         let cell: ParallaxCell = tableVIEw.dequeueReusableCell(withIDentifIEr: "ParallaxCell",for: indexPath as IndexPath) as! ParallaxCell42         //并返回该单元格43         return cell44     }45     46     //添加一个代理方法，用来处理单元格的触摸事件47     public overrIDe func tableVIEw(_ tableVIEw: UItableVIEw,dIDSelectRowAt indexPath: IndexPath)48     {49         //将单元格被点击时，将往导航控制器的堆栈中，压入另一个作为图片详情页面的视图控制器。50         let storyboard = UIStoryboard(name: "Main",bundle: nil)51         //获得故事板中的指定唯一标识符的视图控制器。52         let detaleVIEwController: DemoDetailVIEwController = storyboard.instantiateVIEwController(withIDentifIEr: "DemoDetailVIEwController") as! DemoDetailVIEwController53         //往导航控制器的堆栈中，压入该视图控制器。54         pushVIEwController(detaleVIEwController)55     }56 }

创建另一个类文件。在项目文件夹上点击鼠标右键，d出右键菜单。

【New file】->【Cocoa touch】->【Next】->

【Class】：DemoDetailVIEwController

【Subclass of】:PTDetailVIEwController

【Language】：Swift

->【Next】->【Create】

点击打开【DemoDetailVIEwController.swift】

现在开始编写详情视图控制器，在该页面添加一个后退按钮，

当点击该按钮时，返回上一个页面。 

 1 import UIKit 2 //在当前的类文件中，引入已经安装的第三方类库。 3 import PrevIEwTransition 4 import Pods_DemoApp 5  6 public class DemoDetailVIEwController: PTDetailVIEwController { 7    8     //给类添加一个按钮类型的属性。 9     var backbutton: UIbutton?10     11     public overrIDe func vIEwDIDLoad() {12         super.vIEwDIDLoad()13         14         //对按钮进行初始化 *** 作。15         backbutton = UIbutton(frame: CGRect(x: 0,y: 0,wIDth: 22,height: 44))16         //设置按钮在正常状态下的图片。17         backbutton?.setimage(UIImage(named: "back"),for: .normal)18         //给按钮绑定点击事件。19         backbutton?.addTarget(self,action: #selector(DemoDetailVIEwController.backbuttonHandler),for: .touchUpInsIDe)20         21         //初始化一个工具条按钮，作为导航条左侧的按钮。22         let buttonItem = UIbarbuttonItem(customVIEw: backbutton!)23         navigationItem.leftbarbuttonItem = buttonItem24         25         let animation = CABasicAnimation(keyPath: "opacity")26         animation.duration = 0.327         animation.tovalue = 0.028         animation.fromValue = 1.029         animation.timingFunction = camediatimingFunction(name: kcamediatimingFunctionEaSEOut)30         animation.beginTime = CACurrentMediaTime()31  32     }33     34     //添加一个方法，用来响应按钮的点击事件。35     @objc func backbuttonHandler()36     {37         popVIEwController()38     }39 }

在左侧的项目导航区，打开故事板文件。

在导航控制器的上方双击，往故事板中插入一个导航控制器。

打开检查器设置面板，点击属性检查器图标，进入属性设置面板。

勾选【Is Initial VIEw Controller】是否初始视图控制器。

将导航控制器修改当前 的故事板的初始控制器。

选择右侧的视图，选择导航控制器的根视图控制器。

给根视图控制器绑定类文件。点击身份检查器图标，进入身份设置面板。

【Class】：DemotableVIEwController

点击表格控件左侧的箭头，显示其中的单元格控件。

然后选择单元格控件，在类名输入框内输入第三方的类库。

【Class】:parallaxCell

点击属性检查器图标，进入属性设置面板。

在唯一标识符输入框内，输入复用单元格的唯一标识符。

【IDentifIEr】:ParallaxCell

【Background】:设置背景颜色。

点击尺寸检查器图标，进入尺寸设置面板。

【Row Height】：240，设置行高。

选择编辑表格控件。点击属性检查器图标，进入属性设置面板。设置背景颜色。

点击控件库图标，在视图控制器控件的上方双击，往故事板中插入一个控制器。

选择新的视图控制器，将该视图控制器和细节视图控制器的类文件进行绑定。

【Class】：DemoDetailVIEwController

接着输入该视图控制器，在故事板中的唯一标识符。

从而在代码中获得视图控制器。

【Storyboard ID】:DemoDetailController

选择表格视图控制器中的表格控件。设置行高：

【Row Height】：240

选择导航条左侧的导航按钮，清空导航按钮上的标题文字。

总结

以上是内存溢出为你收集整理的[Swift通天遁地]九、拔剑吧-(12)创建Preview-Transition图像预览界面全部内容，希望文章能够帮你解决[Swift通天遁地]九、拔剑吧-(12)创建Preview-Transition图像预览界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。