首页添加引导图

niudaojian
1 parent ce92fb65
Showing 4 changed files with 216 additions and 7 deletions
Podfile
metaCode/Classes/Main/HomePage/Controller/CNMetaCodeHomePageController.swift
metaCode/Classes/Main/HomePage/View/CNCustomIndexView.swift
metaCode/Classes/Main/HomePage/View/CNHomePageGuideView.swift
@@ -28,6 +28,8 @@ target &#39;metaCode&#39; do
   pod 'HandyJSON'
   #轻量级缓存工具
   pod 'SwiftyUserDefaults'
+  #加载GIF
+  pod 'SwiftGifOrigin', '~> 1.7.0'
  
   target 'metaCodeTests' do
     inherit! :search_paths
@@ -8,12 +8,65 @@
 import Foundation
 import UIKit
 import YYCategories
+import SwiftGifOrigin
  
 let Width: CGFloat  = UIScreen.main.bounds.size.width
 let Height: CGFloat = UIScreen.main.bounds.size.height
  
+///存储是否第一次显示首页上滑引导
+let CNKeyIsFirstAppearUpSlideHomeGuide: String = "isFirstAppearUpSlideHomeGuideKey"
+///存储是否第一次显示首页下滑引导
+let CNKeyIsFirstAppearDownSlideHomeGuide: String = "isFirstAppearDownSlideHomeGuideKey"
+
 class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDelegate, NewPagedFlowViewDataSource, CNCustomIndexViewDelegate{
  
+    ///上滑引导View
+    lazy var upSlideGuideView:CNHomePageGuideView = {
+        let upSlideGuideView = CNHomePageGuideView.init(frame: UIScreen.main.bounds)
+        upSlideGuideView.setBottomText(text: "向上滑动")
+        upSlideGuideView.skipAction = {
+            [weak self] in
+            self?.upSlideGuideView.removeFromSuperview()
+            self?.upSlideGifView.removeFromSuperview()
+            UserDefaults.standard.set("flase", forKey: CNKeyIsFirstAppearUpSlideHomeGuide)
+            UserDefaults.standard.set("flase", forKey: CNKeyIsFirstAppearDownSlideHomeGuide)
+            self?.pageFlowView.scrollView.isScrollEnabled = true
+        }
+        return upSlideGuideView
+    }()
+    ///上滑引导动图
+    lazy var upSlideGifView:UIImageView = {
+        let gif: UIImageView = UIImageView(frame: CGRect(x: 200, y: 30, width: 40, height: 80))
+        gif.loadGif(name: "slide_up")
+        gif.center = self.view.center
+        gif.contentMode = .scaleAspectFill
+        
+        return gif
+    }()
+    
+    ///下滑引导View
+    lazy var downSlideGuideView:CNHomePageGuideView = {
+        let downSlideGuideView = CNHomePageGuideView.init(frame: UIScreen.main.bounds)
+        downSlideGuideView.setBottomText(text: "向下滑动")
+        downSlideGuideView.skipAction = {
+            [weak self ] in
+            self?.downSlideGuideView.removeFromSuperview()
+            self?.downSlideGifView.removeFromSuperview()
+            UserDefaults.standard.set("flase", forKey: CNKeyIsFirstAppearDownSlideHomeGuide)
+            self?.pageFlowView.scrollView.isScrollEnabled = true
+        }
+        return downSlideGuideView
+    }()
+    ///下滑引导动图
+    lazy var downSlideGifView:UIImageView = {
+        let gif: UIImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 80))
+        gif.center = self.view.center
+        gif.loadGif(name: "slide_down")
+        gif.contentMode = .scaleAspectFill
+        return gif
+    }()
+    
+    
     ///NewPagedFlowView 开始滑动时的偏移量
     private var beginOffset = 0.0
  
@@ -66,6 +119,7 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
  
 //        self.tabBarController?.tabBar.top = self.tabBarY + KSreenHeight
  
+        
     }
     override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
@@ -75,7 +129,28 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
         self.view.height = KSreenHeight
  
         self.topNavView.isHidden = true
+        
  
+//
+//
+//        let maskView = UIView.init(frame: UIScreen.main.bounds)
+//        maskView.backgroundColor = .black.withAlphaComponent(0.7)
+//        maskView.isUserInteractionEnabled = false
+//
+//        let path:UIBezierPath = UIBezierPath.init(rect: UIScreen.main.bounds)
+//
+//        let W = KSreenWidth-50
+//        let H = W*1.5
+//        let rect = CGRectMake(25, (KSreenHeight-H)/2,W, H)
+//
+//        let appendPath: UIBezierPath = UIBezierPath.init(roundedRect: rect, cornerRadius: 20)
+//        path.append(appendPath.reversing())
+//        let shapeLayer: CAShapeLayer = CAShapeLayer()
+//        shapeLayer.path = path.cgPath;
+//        maskView.layer.mask = shapeLayer;
+//
+//        self.view.addSubview(maskView)
+        
     }
     // MARK: - 添加UI
     func setupUI(){
@@ -84,6 +159,30 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
         self.view.addSubview(self.pageFlowView)
         self.pageFlowView.reloadData()
  
+        //首选判断是否显示了上滑引导
+        let isFirstAppearUpSlideHomeGuide:Any? =  UserDefaults.standard.object(forKey: CNKeyIsFirstAppearUpSlideHomeGuide)
+        
+        if let tempGuide = isFirstAppearUpSlideHomeGuide{
+            //已经显示过上滑引导
+            
+            //判断是否显示过下滑引导
+            let isFirstAppearDownSlideHomeGuide:Any? =  UserDefaults.standard.object(forKey: CNKeyIsFirstAppearDownSlideHomeGuide)
+            if let  tempDownGuide = isFirstAppearDownSlideHomeGuide{
+                
+            }else{
+                //没有显示下滑引导
+                self.pageFlowView.scrollView.isScrollEnabled = false
+                self.view.addSubview(self.downSlideGuideView)
+                self.view.addSubview(self.downSlideGifView)
+            }
+            
+        }else{
+            //没显示过上滑引导
+            self.pageFlowView.scrollView.isScrollEnabled = false
+            self.view.addSubview(self.upSlideGuideView)
+            self.view.addSubview(self.upSlideGifView)
+        }
+        
     }
  
     // MARK: - NewPagedFlowView代理
@@ -169,7 +268,6 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
  
         self.backgroupView.replaceCurerrentApearView(fromIndex: self.backgroupView.currentApearViewIndex, toIndex: toIndex)
  
-
     }
  
  
@@ -177,6 +275,25 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
  
     func customIndexViewWillBeiginScroll(scrollView: UIScrollView) {
         self.view.height = KSreenHeight
+        
+        /**开始拖拽移除引导View**/
+        
+        //移除上滑引导
+        if(self.upSlideGuideView.superview != nil){
+            self.upSlideGuideView.removeFromSuperview()
+            self.upSlideGifView.removeFromSuperview()
+            UserDefaults.standard.set("flase", forKey: CNKeyIsFirstAppearUpSlideHomeGuide)
+        }
+        
+        //移除下滑引导
+        if (self.downSlideGuideView.superview != nil) {
+            self.downSlideGuideView.removeFromSuperview()
+            self.downSlideGifView.removeFromSuperview()
+            UserDefaults.standard.set("flase", forKey: CNKeyIsFirstAppearDownSlideHomeGuide)
+            self.pageFlowView.scrollView.isScrollEnabled = true
+        }
+       
+        
     }
     func customIndexViewDidScroll(scrollView: UIScrollView) {
         //让tabbar跟随scrollView平移量进行移动
@@ -191,6 +308,17 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
     func customIndexViewDidEndScroll(scrollView: UIScrollView) {
         if scrollView.contentOffset.y == KSreenHeight {
             self.view.height = self.tabBarY
+            
+            //判断是否显示过下滑引导
+            let isFirstAppearDownSlideHomeGuide:Any? =  UserDefaults.standard.object(forKey: CNKeyIsFirstAppearDownSlideHomeGuide)
+            if let  tempDownGuide = isFirstAppearDownSlideHomeGuide{
+                print("不该进来")
+            }else{
+                //没有显示下滑引导
+                self.view.addSubview(self.downSlideGuideView)
+                self.view.addSubview(self.downSlideGifView)
+                self.pageFlowView.scrollView.isScrollEnabled = false
+            }
         }
     }
  
@@ -131,8 +131,8 @@ class CNCustomIndexView:PGIndexBannerSubiew, UIScrollViewDelegate, WJColorChange
     ///中间主界面
     lazy var mainView:CNMainView = {
         let W = self.width 
-        let H = W*1.5 
-        let mainView = CNMainView.init(frame: CGRectMake(0, self.frame.size.height + (self.frame.size.height-H)/2,W, H))
+        let H = W*1.5
+        let mainView = CNMainView.init(frame: CGRectMake(0, self.frame.size.height + KSreenHeight*0.16,W, H))
         return mainView
     }()
  
@@ -141,6 +141,7 @@ class CNCustomIndexView:PGIndexBannerSubiew, UIScrollViewDelegate, WJColorChange
         let collectionView = CNCollectMoneyCodeView.init(frame: CGRectMake(-25, 0, self.frame.size.width + 50, self.frame.size.height))
         collectionView.backAction = {[weak self] in
             self?.baseScrollView.setContentOffset(CGPoint(x: 0, y: (self!.baseScrollView.height)), animated: true)
+            self?.superScrollView?.isScrollEnabled = true
         }
         return collectionView
     }()
@@ -357,16 +358,15 @@ class CNCustomIndexView:PGIndexBannerSubiew, UIScrollViewDelegate, WJColorChange
             self.collectMoneyCodeView.contentView.backgroundColor = KVCBackgroupColor
         }
  
-        //外部代理
-        self.delegate?.customIndexViewDidEndScroll(scrollView: scrollView)
-        
-        
  
         //滑动结束 把topNavView 放到scrollView的上层
         self.bringSubviewToFront(self.topNavView)
  
         //下滑提醒View回到初始位置
         self.topCollectMoneyRemindView.top = -(self.topCollectMoneyRemindView.height + 50)
+        
+        //外部代理
+        self.delegate?.customIndexViewDidEndScroll(scrollView: scrollView)
     }
  
 }
@@ -7,6 +7,85 @@
  
 import Foundation
  
+typealias skipGuideBlock = ()->Void
+
 class CNHomePageGuideView: UIView{
+    ///跳过引导事件回调
+    var skipAction: skipGuideBlock?
+    
+   lazy var skipButtom: UIButton = {
+       
+       let skipButtom = UIButton(type: .custom)
+       skipButtom.frame = CGRect(x: 0, y: 0, width: 90, height: 30)
+       skipButtom.right = self.width - 30
+       skipButtom.top   = KStatusBarHeight + 30
+       skipButtom.setTitle("跳过引导", for: .normal)
+       skipButtom.setTitleColor(.white, for: .normal)
+       skipButtom.titleLabel?.font = UIFont.systemFont(ofSize: 13, weight: .medium)
+       skipButtom.clipsToBounds = true
+       skipButtom.layer.cornerRadius = skipButtom.height/2
+       skipButtom.layer.borderColor = UIColor("#979797")?.cgColor
+       skipButtom.layer.borderWidth = 0.5
+       
+      return skipButtom
+        
+    }()
+    
+    lazy var bottomLabel: UILabel = {
+        let bottomLabel = UILabel.init(frame: CGRect(x: 0, y: 0, width: 150, height: 20))
+        bottomLabel.textColor = .white
+        bottomLabel.font = UIFont.systemFont(ofSize: 18, weight: .medium)
+        bottomLabel.textAlignment = .center
+        return bottomLabel
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        self.initUI()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    func initUI(){
+        
+        self.addSubview(self.skipButtom)
+        
+        self.backgroundColor = .black.withAlphaComponent(0.7)
+        self.isUserInteractionEnabled = false
+        
+        //通过设置mask透明区域来实现镂空效果
+        let path:UIBezierPath = UIBezierPath.init(rect: UIScreen.main.bounds)
+        
+        //rect 首页被镂空的区域
+        let W = KSreenWidth-50
+        let H = W*1.5
+        let rect = CGRectMake(25, KSreenHeight*0.16,W, H)
+        
+        let appendPath: UIBezierPath = UIBezierPath.init(roundedRect: rect, cornerRadius: 20)
+        path.append(appendPath.reversing())
+        
+        let shapeLayer: CAShapeLayer = CAShapeLayer()
+        shapeLayer.path = path.cgPath;
+        self.layer.mask = shapeLayer
+        
+        //更新bottomLabel位置
+        self.bottomLabel.centerX = self.centerX
+        self.bottomLabel.top = CGRectGetMaxY(rect) + 20
+        self.addSubview(self.bottomLabel)
+    }
+    
+    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+        
+        if((self.skipButtom.layer.hitTest(point)) != nil){
+//            print("点击了跳过")
+            self.skipAction!()
+        }
+        //让事件响应链进行执行
+        return super.hitTest(point, with: event)
+    }
  
+    func setBottomText(text: String)->Void{
+        self.bottomLabel.text = text
+    }
 }