首页背景图跟随卡片滑动进行平滑切换

niudaojian
1 parent 32f6fdde
Showing 4 changed files with 214 additions and 7 deletions
metaCode/Classes/Main/HomePage/Controller/CNMetaCodeHomePageController.swift
metaCode/Classes/Main/HomePage/View/CNHomePageBackgroupView.swift
metaCode/Classes/Vendors/NewPagedFlowView.h
metaCode/Classes/Vendors/NewPagedFlowView.m
@@ -14,7 +14,8 @@ let Height: CGFloat = UIScreen.main.bounds.size.height
  
 class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDelegate, NewPagedFlowViewDataSource, CNCustomIndexViewDelegate{
  
-    
+    ///NewPagedFlowView 开始滑动时的偏移量
+    private var beginOffset = 0.0
  
     private var tabBarY:CGFloat = 0.0
  
@@ -57,7 +58,7 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
         self.tabBarY = (self.tabBarController?.tabBar.top)!
  
  
-        for i in (0..<6) {
+        for i in (0..<5) {
             self.dataArray.add("122")
         }
  
@@ -102,14 +103,75 @@ class CNMetaCodeHomePageController:CNLiveBaseViewController, NewPagedFlowViewDel
         bannerView?.superScrollView = flowView.scrollView
         bannerView?.associatedVCView = self.view
         bannerView?.delegate  = self
-        return bannerView 
+        return bannerView
     }
  
     func sizeForPage(in flowView: NewPagedFlowView!) -> CGSize {
         return CGSize(width: Width-50, height: Height)
     }
  
+    ///NewPagedFlowView 开始滑动
+    func willBeginScroll(_ scrollView: UIScrollView!) {
+        beginOffset = scrollView.contentOffset.x
+    }
+    ///NewPagedFlowView 滑动中
+    func didScroll(_ scrollView: UIScrollView!) {
+        
+        let currentOffset:CGFloat = scrollView.contentOffset.x
+        
+        if(currentOffset > beginOffset){
+            
+            
+            if let rightView = self.backgroupView.getRightView(){
+                
+                if let currentApearView = self.backgroupView.currentApearView{
+                    self.backgroupView.insertSubview(rightView, belowSubview: currentApearView)
+                }
+                
+                self.backgroupView.currentApearView?.maskLayer.right = KSreenWidth - (currentOffset-beginOffset)*2.5
+            }else{
+                
+            }
+        }
+        
+        if(currentOffset < beginOffset){
+            if let leftView = self.backgroupView.getLeftView(){
+                
+                if let currentApearView = self.backgroupView.currentApearView{
+                    self.backgroupView.insertSubview(leftView, belowSubview: currentApearView)
+                }
+                
+                self.backgroupView.currentApearView?.maskLayer.left = (beginOffset-currentOffset)*2.5
+            }else{
+                
+            }
+        }
+    }
+    
+    ///NewPagedFlowView 滑动将要结束
+    func willEndScroll(_ scrollView: UIScrollView!) {
+        
+        //暂时禁止再次滑动,后期优化通过自定义UIScrollView 结束动画来实现
+        scrollView.isScrollEnabled = false
+    }
+    ///NewPagedFlowView 滑动结束
+    func didEndScroll(_ scrollView: UIScrollView!) {
+        print("scrollView.contentOffset.x = ",scrollView.contentOffset.x)
+        let toIndex:Int = Int(scrollView.contentOffset.x/(Width-50))
+        
+        if toIndex == self.backgroupView.currentApearViewIndex{
+            return
+        }
+        
+        self.backgroupView.replaceCurerrentApearView(fromIndex: self.backgroupView.currentApearViewIndex, toIndex: toIndex)
+        
+        scrollView.isScrollEnabled = true
+
+    }
+    
+    
     //MARK: - CNCustomIndexView 代理方法
+    
     func customIndexViewWillBeiginScroll(scrollView: UIScrollView) {
         self.view.height = KSreenHeight
     }
@@ -9,7 +9,12 @@ import Foundation
 import UIKit
 class CNHomePageBackgroupSubView : UIView
 {
+    ///前面的视图
+    var preSubView: CNHomePageBackgroupSubView?
+    ///后面的视图
+    var nextSubView: CNHomePageBackgroupSubView?
  
+    var name: String = ""
     lazy var imageView: UIImageView = {
         let imageView: UIImageView = UIImageView(image: UIImage(named: "homePage_backgroup_blue"))
         imageView.frame = self.bounds
@@ -23,6 +28,16 @@ class CNHomePageBackgroupSubView : UIView
         return titleLabel
     }()
  
+    ///自定义mask
+    lazy var maskLayer: CALayer = {
+        let  maskLayer = CALayer.init()
+        maskLayer.frame = self.bounds;
+        maskLayer.backgroundColor = UIColor.gray.cgColor
+        self.layer.mask = maskLayer
+
+        return maskLayer
+    }()
+    
  
     override init(frame: CGRect) {
         super.init(frame: frame)
@@ -42,13 +57,27 @@ class CNHomePageBackgroupSubView : UIView
         self.titleLabel.text = title
     }
     ///设置图片
-    func setImage(image:UIImage)->Void{
-        self.imageView.image = image
+    func setImage(image:UIImage?)->Void{
+        if let tempImage = image{
+            self.imageView.image = tempImage
+        }else{
+            
+        }
     }
 }
  
 class CNHomePageBackgroupView: UIView{
  
+    ///当前显示的view所处的位置
+    var currentApearViewIndex: Int = 0
+    ///当前在屏幕显示的view
+    var currentApearView: CNHomePageBackgroupSubView?
+    ///数据源
+    lazy var dataArray:Array<CNHomePageBackgroupSubView> = {
+        let dataArray = Array<CNHomePageBackgroupSubView>()
+        return dataArray
+    }()
+    
     // MARK: - 初始化
     override init(frame: CGRect) {
         super.init(frame: frame)
@@ -61,11 +90,116 @@ class CNHomePageBackgroupView: UIView{
  
     //创建UI
     func initUI(){
+        
+        for i in (0..<5){
+            
+            let subView: CNHomePageBackgroupSubView = CNHomePageBackgroupSubView.init(frame: self.bounds)
+            subView.frame = self.bounds
+            
+            
+            if (i == 0) {
+                subView.setTitle(title: "志愿者")
+                subView.setImage(image: UIImage(named: "homePage_backgroup_red"))
+                subView.name = "志愿者"
+            }
+            else if(i == 1){
+                subView.setTitle(title: "退伍军人")
+                subView.setImage(image: UIImage(named: "homePage_backgroup_blue"))
+                subView.name = "退伍军人"
+
+            }
+            else if(i == 2){
+                subView.setTitle(title: "慈善家")
+                subView.setImage(image: UIImage(named: "homePage_backgroup_red"))
+                subView.name = "慈善家"
+
+            }
+            else if(i == 3){
+                subView.setTitle(title: "退休干部")
+                subView.setImage(image: UIImage(named: "homePage_backgroup_blue"))
+                subView.name = "退休干部"
+
+            }
+            else if(i == 4){
+                subView.setTitle(title: "退休医生")
+                subView.setImage(image: UIImage(named: "homePage_backgroup_red"))
+                subView.name = "退伍军人"
+
+            }
+            
+            //更新双向链表
+            let lastSubView: CNHomePageBackgroupSubView? = self.dataArray.last
+            lastSubView?.nextSubView = subView
+            subView.preSubView = lastSubView
+            
+            self.dataArray.append(subView)
+
+            if i==0 {
+                self.currentApearView = subView
+                self.currentApearViewIndex = i
+            }
+        }
+        
+        //倒序添加子view
+        for i in self.dataArray.enumerated().reversed() {
+
+            let subview: CNHomePageBackgroupSubView = i.element
+            self.addSubview(subview)
+
+        }
+
+        
         let subView: CNHomePageBackgroupSubView = CNHomePageBackgroupSubView.init(frame: self.bounds)
         subView.frame = self.bounds
-        subView.setTitle(title: "志愿者")
  
-        self.addSubview(subView)
+    }
+    
+    //MARK: - 公开方法
+    ///获取当前视图左边的子视图
+    func getLeftView()->CNHomePageBackgroupSubView?{
+        if(currentApearViewIndex == 0){
+            return nil
+        }
+        return dataArray[currentApearViewIndex - 1]
+    }
+    ///获取当前视图右边的子视图
+    func getRightView()->CNHomePageBackgroupSubView?{
+        if(currentApearViewIndex == self.dataArray.count - 1){
+            return nil
+        }
+        return dataArray[currentApearViewIndex + 1]
+    }
+    
+    /// 替换当前显示的子view
+    /// - Parameters:
+    ///   - fromIndex: 原来显示的view索引
+    ///   - toIndex: 将要显示的view索引
+    /// - Returns: 无返回值
+    func replaceCurerrentApearView(fromIndex:Int ,toIndex:Int)->Void{
+         
+        //先保存之前显示的view
+        let tempSubView: CNHomePageBackgroupSubView? = self.currentApearView
+
+        //找到下一个要显示的view
+        if(toIndex < fromIndex){
+            self.currentApearView = self.currentApearView?.preSubView
+        }
+        else{
+            self.currentApearView = self.currentApearView?.nextSubView
+        }
+        
+        //把要显示的view放到最顶层
+        if let subView = self.currentApearView {
+            self.bringSubviewToFront(subView)
+        }
+        //更新当前显示的view所处的位置
+        self.currentApearViewIndex = toIndex
+        
+ 
+        //重置之前的currentApearView的Left 和 right
+        tempSubView?.maskLayer.left = 0;
+        tempSubView?.maskLayer.right = KSreenWidth;
+        
     }
  
 }
@@ -182,6 +182,11 @@ typedef NS_ENUM (NSUInteger, NewPagedFlowViewOrientation) {
 /// @param scrollView 滚动的scrollView
 - (void)didScroll:(UIScrollView *)scrollView;
  
+
+/// 将要结束滚动
+/// @param scrollView 滚动的scrollView
+- (void)willEndScroll:(UIScrollView *)scrollView;
+
 /// 已经结束滚动
 /// @param scrollView 滚动的scrollView
 - (void)didEndScroll:(UIScrollView *)scrollView;
@@ -664,11 +664,17 @@ static NSString *subviewClassName;
 #pragma mark --将要开始拖拽
 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
     [self stopTimer];
+    if(self.delegate && [self.delegate respondsToSelector:@selector(willBeginScroll:)]){
+        [self.delegate willBeginScroll:scrollView];
+    }
 }
  
 #pragma mark --结束拖拽
 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
     [self startTimer];
+    if(self.delegate && [self.delegate respondsToSelector:@selector(willEndScroll:)]){
+        [self.delegate willEndScroll:scrollView];
+    }
 }
 //结束滑动
 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView