swift/制作一个概括的tableHeaderview+_navigationbar渐变效果(二)

1:设计构造方法

制造一个ParallaxHeaderView.swift并充足

class ParallaxHeaderView: UIView {

    var subView: UIView
    var contentView: UIView = UIView()


    init(subView: UIView, headerViewSize: CGSize) {

        self.subView = subView
        super.init(frame: CGRectMake(0, 0, headerViewSize.width, headerViewSize.height))
        //这里是自动布局的设置,大概意思就是subView与它的superView拥有一样的frame
        subView.autoresizingMask = [.FlexibleLeftMargin, .FlexibleRightMargin, .FlexibleTopMargin, .FlexibleBottomMargin, .FlexibleWidth, .FlexibleHeight]
        self.clipsToBounds = false;  //必须得设置成false

        self.contentView.frame = self.bounds
        self.contentView.addSubview(subView)
        self.contentView.clipsToBounds = true
        self.addSubview(contentView)

    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

接下来创设一个ParallaxHeaderView并安装为tableHeaderView

             override func viewDidLoad() {
        super.viewDidLoad()

         self.navigationController?.navigationBar.setMyBackgroundColor(UIColor(red: 0/255.0, green: 130/255.0, blue: 210/255.0, alpha: 0))

        let imageView = UIImageView(frame: CGRectMake(0, 0, self.tableView.bounds.width, 100))
        imageView.image = UIImage(named: "ba1ec0437cc8d5367a516ff69b01ea89")
        imageView.contentMode = .ScaleAspectFill

        let heardView = ParallaxHeaderView(subView: imageView, headerViewSize: CGSizeMake(self.tableView.frame.width, 100))
        self.tableView.tableHeaderView = heardView

    }

结果效果是如此的

发觉图片压根就没从(0,0)点来得,因为我们仅仅值是创设了,啥都并未处理的。这里大家指标很明确,要让图片从(0,0)先导体现并再度安装大小。所以我们改变ParallaxHeaderViewcontentViewframe就好了。还记得前边说的automaticallyAdjustsScrollViewInsets属性让tableViewontentInset。Top活动成为64的啊?这里自行安装的经过系统会机动调用scrollViewDidScroll,于是自己顺水推舟,顺便让它也帮我再一次设置contentViewframe

轮播图封装,网上有成百上千现成的demo,也没怎么难度。这多少个是很早以前写过的轮播图封装,这一次正好需要就重新整理一下发生来,希望能匡助到需要的人。

  • 帮援手动翻页、自动定时翻页
  • 支撑垂直和水准滚动
  • 支撑当地图片、网络图片、纯文本以及其他View视图,如图文混合排版的视图等。
  • 支撑设置体现和隐藏pageControl和自定义pageControl的frame
  • 可以做简便修改,将需要的特定属性开放使用

编码

上一篇已经完结了对于UINavigationBar的扩展,仅仅只用了24行代码变达成想要的法力。接下来编写tableheaderview的机能部分。

ParallaxHeaderView模糊.gif

More 更多

进一步优化

代码还有许多供不应求,比如我还得在scrollViewDidScroll中添加大量计量导航栏透明度的代码。这种总括是通用的,因为老是期待在第一个cell滑动到导航栏下,导航栏就不透明了。完整代码在GitHub[ParallaxHeaderView][id]

(注意:view视图类的轮播中,view的坐标是相持于cell.contentView的坐标,是contentView的子视图)
- (ECAutoScrollBanner *)viewBannerView {
    if (_viewBannerView == nil) {
        _viewBannerView = [[ECAutoScrollBanner alloc] initViewBannerWithFrame:CGRectMake(0, 20 + 180 + 20 + 180 + 20, self.view.frame.size.width, 180) withViewsDataSouce:self.viewDataArray withBannerScrollDirection:ECAutoScrollBannerScrollDirectionHorizontal];
        _viewBannerView.isAutoPaging = NO;
    }
    return _viewBannerView;
}
tableView的contentOffset以及contentInset属性(其实是UIScrollView的属性)

网上有很多解释的随笔,这里就不详细讲解,做个简易解释.

正如上图所示,UITableViewController有导航栏的境况。默认是不会被导航栏遮挡的,这并不是因为tableView的y值是64的来由,而是因为automaticallyAdjustsScrollViewInsets特性的留存,会将tableViewcontentInset。Top安装为64,从而导致未”被屏蔽”(其实TableView依然被屏蔽了一局部,只是显示UI的contentView地点偏移了)。那么现在自我想问tableViewcontentOffset值是多少?答案是-64。contentOffset
是scrollview当前来得区域顶点相对于frame顶点的偏移量,contentInset
是scrollview中contentView.frame.origin与scrollview.frame.origin的关系

效果图

image

总结

即使再度造轮子不是一种好的习惯,在正式项目支付中也会严重拖缓项目开发进度。但是对于初学者,可以说是一种科学的就学方法。著作中只要出现什么样错误或者好的指出欢迎大家提议,咱们一齐开展学习。要上课了就不啰嗦了。

最终依旧依附GitHub[ParallaxHeaderView][id]

ECAutoScrollBanner

轮播图封装。可以实现全自动定时翻页、手动翻页;垂直和程度滚动等。扶助纯文本、本地图片、网络图片以及另外view试图。

3:锁定最大滑动地方。

按部就班下面这样做是不周全的,因为自己连连的下拉,图片会持续的变大。而实质上需求往往是,下拉到早晚的地方便不可能延续下拉了。接下来便继续周到。

  • 修改构造方法

    /// 最大的下拉限度(因为是下拉所以总是为负数),超过(小于)这个值,下拉将不会有效果
    var maxOffsetY: CGFloat
   init(subView: UIView, headerViewSize: CGSize, maxOffsetY: CGFloat) {

        ...
        self.maxOffsetY = maxOffsetY < 0 ? maxOffsetY : -maxOffsetY
        ....
   }

添加了一个最大下拉的y值,其他未修改的地点尚未贴出

  • 概念协议

protocol ParallaxHeaderViewDelegate: class {
    func LockScorllView(maxOffsetY: CGFloat)
}
//这个的意思是,对协议进行扩展,任何遵守此协议的UITableViewController都由默认的实现方法
extension ParallaxHeaderViewDelegate where Self : UITableViewController {
    func LockScorllView(maxOffsetY: CGFloat) {
        self.tableView.contentOffset.y = maxOffsetY
    }
}

那里用到swift2.0的新特点了。因为一旦是采纳ParallaxHeaderView那个的类的,我总是期待他能锁定最大的地方,所以必然都会去实现LockScorllView其一协议形式,又因为这么些艺术的贯彻是定点的,所以我一向给了它一个默认的落实,那样就无须连续去写重复的合计了。

然后修改一下layoutHeaderViewWhenScroll方法

    func layoutHeaderViewWhenScroll(let offset: CGPoint) {

        if offset.y < maxOffsetY {
            self.delegate.LockScorllView(maxOffsetY)

        }else {
            var delta:CGFloat = 0.0
            var rect = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)

            delta = offset.y
            rect.origin.y += delta ;
            rect.size.height -= delta;

            self.contentView.frame = rect;

        }
    }

双重修改构造方法,添加一个参数。

    weak var delegate: ParallaxHeaderViewDelegate!

    init(subView: UIView, headerViewSize: CGSize, maxOffsetY: CGFloat, delegate: ParallaxHeaderViewDelegate) {
    ...
        self.delegate = delegate
    ...

    }

这时再在控制器里周详起始化,并添在scrollViewDidScroll添加上篇博客写的壮大,就ok了

    override func scrollViewDidScroll(scrollView: UIScrollView) {
        let heardView = self.tableView.tableHeaderView as! ParallaxHeaderView
        heardView.layoutHeaderViewWhenScroll(scrollView.contentOffset)

        let color = UIColor(red: 0/255.0, green: 130/255.0, blue: 210/255.0, alpha: 1)
        let offsetY = scrollView.contentOffset.y
        let prelude: CGFloat = 50

        if offsetY >= -64 {
            let alpha = min(1, (64 + offsetY) / (64 + prelude))
            //NavBar透明度渐变
            self.navigationController?.navigationBar.setMyBackgroundColor(color.colorWithAlphaComponent(alpha))

        } else {
            self.navigationController?.navigationBar.setMyBackgroundColor(color.colorWithAlphaComponent(0))
        }
    }

运行效果图就不贴了。

简介&特性

UIImageView的contentMode属性的意义意义
        /**
         UIViewContentModeScaleToFill : 图片拉伸至填充整个UIImageView(图片可能会变形)

         UIViewContentModeScaleAspectFit : 图片拉伸至完全显示在UIImageView里面为止(图片不会变形)

         UIViewContentModeScaleAspectFill : 
         图片拉伸至 图片的宽度等于UIImageView的宽度 或者 图片的高度等于UIImageView的高度 为止

         UIViewContentModeRedraw : 调用了setNeedsDisplay方法时,就会将图片重新渲染

         UIViewContentModeCenter : 居中显示
         UIViewContentModeTop,
         UIViewContentModeBottom,
         UIViewContentModeLeft,
         UIViewContentModeRight,
         UIViewContentModeTopLeft,
         UIViewContentModeTopRight,
         UIViewContentModeBottomLeft,
         UIViewContentModeBottomRight,

         经验规律:
         1.凡是带有Scale单词的,图片都会拉伸
         2.凡是带有Aspect单词的,图片都会保持原来的宽高比,图片不会变形
         */

地点是从前用oc的时候对于UIImageView的contentMode的部分分解,在这利用UIViewContentModeScaleAspectFill这一功能开显示身说法验证(因为品种中选用的就是以此情势)。

红色的局面是UIImageView的大小320X100,而它的image大大小小是320X320,如若未设置clipsToBounds属性的话,仍可以收看整张图片即便UIImageView的轻重不够。(注意:使用UIImageVIew的init?(named
name: String)
形式成立出的imageView大小默认是和image一样大的)

详见介绍

随之上一篇swift/制作一个简约的tableheaderview+_navigationbar渐变效果(一)持续形成没有做完的任务

纯文本滚动条,适用于广告、信息资讯等

- (ECAutoScrollBanner *)textBannerView {
    if (_textBannerView == nil) {
        _textBannerView = [ECAutoScrollBanner initTextBannerWithFrame:self.topView.bounds withTextDataSource:self.textDataArray withBannerScrollDirection:ECAutoScrollBannerScrollDirectionVertical];
        _textBannerView.delegate = self;
        _textBannerView.isAutoPaging = YES;
        _textBannerView.isHavePageControl = NO;
        _textBannerView.isInfinitePaging = YES;
        _textBannerView.isEnabledPanGestureRecognizer = NO;
        _textBannerView.autoPageInterval = 4.0f;
    }
    return _textBannerView;
}

张冠李戴效果

因为原理相似,而且时间相比较紧就不写了。最后版代码已经上传到GitHub[ParallaxHeaderView][id]
[id]:
https://github.com/SmallLang/ParallaxHeaderView
“ParallaxHeaderView”

手动翻页的图片banner,本地图片

- (ECAutoScrollBanner *)imageBannerView {
    if (_imageBannerView == nil) {
        _imageBannerView = [ECAutoScrollBanner initLocalImageBannerWithFrame:CGRectMake(0, 30, self.bottomView.frame.size.width, 180) withImageDataSource:self.imageDataArray withBannerScrollDirection:ECAutoScrollBannerScrollDirectionHorizontal];
        _imageBannerView.isAutoPaging = NO;
    }
    return _imageBannerView;
}

2:ParallaxHeaderView(1在上篇%>_<%)

尽管只是好像于一个图片下拉加大的效用,但请允许自己动用Parallax来命名。

示例图给出两种效率,一种有模糊效果一种无模糊效果。先来实现率先种无模糊效果的。

重点的部分计量
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (self.isAutoPaging) {
        scrollView.panGestureRecognizer.enabled = self.isEnabledPanGestureRecognizer;
    }

    NSInteger page = 0;

    // 是否无限循环
    if (!self.isInfinitePaging) {
        if (self.bannerScrollDirection == ECAutoScrollBannerScrollDirectionHorizontal) {
            page = scrollView.contentOffset.x / scrollView.frame.size.width;
        } else {
            page = scrollView.contentOffset.y / scrollView.frame.size.height;
        }
        self.pageControl.currentPage = page;
    } else {
        if (self.bannerScrollDirection == ECAutoScrollBannerScrollDirectionHorizontal) {
            page = scrollView.contentOffset.x / scrollView.frame.size.width;

            // 第一张
            if ((page == 0) && (scrollView.contentOffset.x <= 30)) {
                page = self.mainDataSource.count - 2;

                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            } else if ((page == self.mainDataSource.count - 1) && (scrollView.contentOffset.x >= scrollView.contentSize.width - scrollView.frame.size.width - 30)) {
                // 最后一张
                page = 0 + 1;
                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            }
        } else {
            page = scrollView.contentOffset.y / scrollView.frame.size.height;

            // 第一张
            if ((page == 0) && (scrollView.contentOffset.y <= 30)) {
                page = self.mainDataSource.count - 2;

                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            } else if ((page == self.mainDataSource.count - 1) && (scrollView.contentOffset.y >= scrollView.contentSize.height - scrollView.frame.size.height - 30)) {
                // 最后一张
                page = 0 + 1;
                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            }
        }
        self.pageControl.currentPage = page - 1;
    }
}

2:滚动统计contentView的frame

先贴代码再解释,在ParallaxHeaderView.swift中添加如下方法

    func layoutHeaderViewWhenScroll(let offset: CGPoint) {

        var delta:CGFloat = 0.0
        var rect = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)

        delta = offset.y
        rect.origin.y += delta ;
        rect.size.height -= delta;

        self.contentView.frame = rect;

    }

在控制器中继承累加

    override func scrollViewDidScroll(scrollView: UIScrollView) {
        let heardView = self.tableView.tableHeaderView as! ParallaxHeaderView
        heardView.layoutHeaderViewWhenScroll(scrollView.contentOffset)
    }

Bingo!在ParallaxHeaderView.swift个中添加的是滑动设置contentViewframe的方法。在scrollViewDidScroll中便是调用。这为啥只修改这多少个地点,一初始图片大小也变了啊?没错,在automaticallyAdjustsScrollViewInsets属性为true的状况下,系统在加载的时候便会活动调用scrollViewDidScroll方法。至于layoutHeaderViewWhenScroll中间的盘算方法,自己体会体会,很简短。

bug fix:

  1. 创立view试图类的轮播图优化修复。(注意:view视图类的轮播中,view的坐标是周旋于cell.contentView的坐标,是contentView的子视图)

对象分析

要求:

1:tableHeaderView需要有张图片(废话)
2:图片可以基于滚动的例外而显得不等同的体裁(大小、彰显范围)

在分析方法在此以前先弄精晓两点

Explain 说明

编码实现:

任然一步一步的来

Github:https://github.com/EchoZuo/ECAutoScrollBanner

兑现格局

支撑手动翻页和定时翻页
  • 手动翻页没什么可说的。自动翻页其实就是一个简单的定时器(用NS提姆er和GCD都ok)实现定时调用对应的翻页方法即可。

Navigation 导航

本次封装实现思路
  • 底层采纳UICollectionView当控制器。给原数据源下标0位添加原数码源末倒数据,给元数据源下标末尾添加原多少源0位的数量。以此形成一个新的数据源。可以参考下图
image

Abstract 概要

一经急需点击跳转等,实现协议和协和章程即可,下同。
- (void)tapScrollBannerItem:(NSInteger)itemTag withObject:(id)object {
    NSLog(@"文本banner。点击了第%ld个子item,下标%ld", (long)itemTag + 1, (long)itemTag);
}
轮播图基本落实思路有如下两种,这次封装使用的是首先种艺术,用UICollectionView实现。
  1. 基于UICollectionView的卷入(推荐使用)
    1. 心想事成方便,使用方便,并且实现代码也不复杂;
    2. 大方加载和滚动或者机关轮播的时候基本不需要考虑录用性能等题材
  2. 用UIScrollView+UIImageView的点子实现A
    1. 用户观看的是六个UIImageView的贯彻形式;
    2. 只要数据太多,需要考虑到选定等特性问题;
    3. 假设底层是UITableView并且轮播图是当做cell的话,更需要考虑到tableView嵌套scrollView的轮转性能问题。
  3. 用UIScrollView+UIImageView的点子贯彻B
    1. 只需要创设3个UIImageView,不需要考虑录用问题;
    2. 与第二种不同的就是用户永远看到的是中间这多少个UIImageView,只是上边的情节再持续变动,其内部贯彻其实是在相连的改变特别轮播数组。
  4. 唯有一个UIImageView
    1. 这种实现模式不再基于ScrollView,同样不设有重用等的题目。这种实现模式跟第两种有相似之处,不过它跟第二种的区别是不再行使scrollView的图样切换模式。依然不停地去改变这一个数组的始末。这种实现情势的为主在于切换的时候使用自定义的layer层的转场动画。模拟scrollView的滑行效果。

采用方法

  1. 将ECAutoScrollBanner文件夹直接拖入项目中,导入头文件#import
    “ECAutoScrollBanner.h”
  2. CocoaPods:pod ‘ECAutoScrollBanner’

实际使用起来很便利很粗略。只需要开首化,然后设置相关属性即可。襄助先默认起始化,在需要的时候设置其样式和翻页效果翻页时间等。

使用示例

机动翻页的图片banner,url图片

- (ECAutoScrollBanner *)urlImageBannerVeiw {
    if (_urlImageBannerVeiw == nil) {
        UIImageView *placehodelImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 50 + 50 + 10 + 180 + 10, self.view.frame.size.width, 180)];
        placehodelImage.backgroundColor = [UIColor lightGrayColor];
        _urlImageBannerVeiw = [ECAutoScrollBanner initOnlineImageBannerWithFrame:CGRectMake(0, 50 + 50 + 10 + 180 + 10, self.view.frame.size.width, 180) withImageUrlDataSource:self.imageUrlDataArray withPlaceholderImage:placehodelImage.image withBannerScrollDirection:ECAutoScrollBannerScrollDirectionHorizontal];
        _urlImageBannerVeiw.isAutoPaging = YES;
        _urlImageBannerVeiw.isEnabledPanGestureRecognizer = YES;
        _urlImageBannerVeiw.isInfinitePaging = YES;
    }
    return _urlImageBannerVeiw;
}

手动翻页的view视图轮播

绽开的一部分设置属性(代码中注释都很详细,也可以一向翻看源码即可)
/**
 * delegate,非必
 */
@property (nonatomic, weak) id<ECAutoScrollBannerDelegate> delegate;

/**
 * 是否自动翻页,默认NO,非必
 */
@property (nonatomic, assign) BOOL isAutoPaging;

/**
 * 是否展示PageControl,默认YES,非必
 */
@property (nonatomic, assign) BOOL isHavePageControl;

/**
 * 是否无限循环,默认NO,非必
 */
@property (nonatomic, assign) BOOL isInfinitePaging;

/**
 * 自动翻页的时候知否支持手动滑动,必须在isAutoPaging=YES时候设置才有效果,if isAutoPaging=YES,则这个必须设置
 */
@property (nonatomic, assign) BOOL isEnabledPanGestureRecognizer;

/**
 * collectionView backgroundColor,默认lightGrayColor,非必
 */
@property (nonatomic, strong) UIColor *collectionViewBgColor;

/**
 * 可以自定义pageControl的frame(相对于self),必须isHavePageControl=YES,如果没有设置新坐标,则取默认坐标,非必
 */
@property (nonatomic, assign) CGRect pageControlFrame;

/**
 * 自动翻页间隔时间。需isAutoPaging=YES才需要设置,否则设置什么效果。默认3.0f
 */
@property (nonatomic, assign) CGFloat  autoPageInterval;
帮助竖向垂直翻页和档次翻页
typedef NS_ENUM(NSInteger, ECAutoScrollBannerScrollDirection){
    ECAutoScrollBannerScrollDirectionVertical       = 1,    // 竖向滚动
    ECAutoScrollBannerScrollDirectionHorizontal     = 0,    // 横向滚动
};

Usage 使用