本文将演示创建一个卡片页面,通过上下滑动进行页面的切换。
可以作为产品、酒店、旅游景点等的介绍页面。
首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】
1 platform :ios, ‘12.0’ 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'expanding-collection' 7 end
根据配置文件中的相关设置,安装第三方类库。
GitHub项目:【Ramotion/expanding-collection】,下载并解压文件。
【DemoExpandingCollection】->
【Constants】文件夹
【Helpers】文件夹
【ViewControllers】文件夹
【Views】文件夹
【Source】文件夹
->将选择的五个文件夹拖动到项目中。在弹出的文件导入确认窗口中,点击【Finish】
在左侧的项目导航区,打开故事板文件【Main.storyboard】
选择故事板中的视图控制器,依次点击:
【Editor】编辑器->【Embed In】植入->【Navigation Controller】导航控制器
将集合视图控制器植入导航控制器。植入导航控制器。
打开检查器设置面板,点击属性检查器图标,进入属性设置面板。
【Status Bar】:None,空白样式,隐藏顶部的状态栏。
点击故事板监听视图控制器,点击身份检查器图标,进入身份设置面板。
【Class】:DemoViewController
点击控件库图标,往故事板中插入一张图像视图。
进入尺寸设置面板,依次设置图像视图的坐标和尺寸信息。
进入属性设置面板。
【Image】:BackgroundImage
往故事板中插入一个标签。设置标签控件的显示内容。
点击颜色右侧的下拉箭头,弹出颜色预设面板,选择设置颜色。
在左侧的项目导航区,打开应用程序的代理文件【AppDelegate.swift】
需要在应用程序加载完成的方法中,对导航条的样式进行设置。
1 import UIKit 2 3 @UIApplicationMain 4 class AppDelegate: UIResponder, UIApplicationDelegate { 5 6 var window: UIWindow? 7 8 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { 9 // Override point for customization after application launch. 10 //清除导航条的背景图片 11 UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default) 12 //清除导航条的阴影图片 13 UINavigationBar.appearance().shadowImage = UIImage() 14 //将导航条设置为透明 15 UINavigationBar.appearance().isTranslucent = true 16 17 //初始化一个投影对象 18 let shadow = NSShadow() 19 //依次设置投影的距离和投影的颜色。 20 shadow.shadowOffset = CGSize(width: 0, height: 2) 21 //设置导航条标题的外观样式 22 shadow.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.1) 23 24 //设置文字的颜色为白色 25 UINavigationBar.appearance().titleTextAttributes = [ 26 NSAttributedString.Key.foregroundColor : UIColor.white, 27 NSAttributedString.Key.shadow: shadow 28 ] 29 return true 30 } 31 32 func applicationWillResignActive(_ application: UIApplication) { 33 // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state. 34 // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game. 35 } 36 37 func applicationDidEnterBackground(_ application: UIApplication) { 38 // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. 39 // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits. 40 } 41 42 func applicationWillEnterForeground(_ application: UIApplication) { 43 // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background. 44 } 45 46 func applicationDidBecomeActive(_ application: UIApplication) { 47 // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface. 48 } 49 50 func applicationWillTerminate(_ application: UIApplication) { 51 // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:. 52 } 53 }