自定义控件之引导页(开端)

这是一个关于自定义控件的专题,那么自定义控件开端必定得从一些开端性的东西说起,step by step.也许你会觉得很简单,只是几张图片的滚动展示而已,同时最下面一个指示器标记滚动的页数,在用户浏览完毕之后就不会在App中再次使用了,所以可以直接忽视页面重用问题以及加载图片带来内存问题了; 也就几百来行代码而已。但是既然是自定义控件的话,那么肯定是要实现一个复用性比较高的App首页启动页面。


需求分析

滚动的图片 + 指示器 + 最后一页提示按钮(进入)
效果图:

guide.gif

实现形式

1.简单粗暴式

使用storyboard :
<1>设置好UIScrollView + UIImageView + UIPageControl + UIButton相应的位置和内容即可。
<2>连线实现UIScrollView代理中scrollViewDidScroll方法,滚动过程中切换pageControl的当前页。
使用纯代码:与使用storyboard的实现方式一样,采用采用代码方式进行处理

缺点:开发每一个App的引导页都需要进行类似的操作,根据需要的页数得重新进行相关代码的调整

2.可复用性高

使用UICollectionView实现类似于‘图片轮播器’、‘图片浏览器’,系统已经帮我们处理好了cell的重用机制,所有使用起来也是很方便的事情。

优点: 一句代码即可调用,传入对应的图片数量,并在回调里面设置图片以及按钮的titletitleColor

你需要哪些控件

控件

开始码代码

细心的孩子可能发现系统的头文件属性的声明都是保持一种风格,为此本人属性声明也是模仿系统的风格

1.首先新建HHGuidePageViewController:UIViewController,用HHGuidePageViewController来实现引导页。
2.然后添加三个属性collectionViewpageControlcount.
3.紧接着新建一个HHGuidePageCell:UICollectionViewCell,根据需求可知cell只需要设置2个属性即可(imageViewfinishBtn).
4.最后我们在HHGuidePageViewController自定义的初始化方法中添加控件,注册cell

HHGuidePageViewController中的初始化

/**
 初始化方法
 @param count 图片总数量
 @param setupCellHandler cell的回调 回调参数cell indexPath
 @param finishBtnHandler 最后一个按钮的回调
 @return self
 */
-(instancetype)initWithPagesCount:(NSInteger)count 
setupCellHandler:(setupCellHandler)setupCellHandler 
finishHandler:(finishButtonHandler)finishBtnHandler{
    if (self = [super initWithNibName:nil bundle:nil]) {
        _count = count;
        _setupCellHandler =[setupCellHandler copy];
        _finishBtnHandller =[finishBtnHandler copy];
        //使用懒加载初始化
        [self.view addSubview: self.collectionView];
        [self.view addSubview:self.pageControl];
        //注册cell
        [self.collectionView registerClass:[HHGuidePageCell class] 
        forCellWithReuseIdentifier:GuidePageCellID];
    }
    return self;

}

利用懒加载的方式初始化collectionViewpageControl设置一些基本属性以及frame,懒加载这里不展示具体代码,详情请下载查看具体代码。并且实现两个必须要实现的数据源方法,需要注意的是在cellForItemAtIndexPath中在显示cell的时候我们需要加个判断,是否显示按钮。

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView 
cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    HHGuidePageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:
GuidePageCellID  forIndexPath:indexPath];
    if (indexPath.row == self.count -1) {//如果是最后一页,则添加响应事件
        cell.finishBtn.hidden = NO;
        [cell.finishBtn addTarget:self action:@selector(finishBtnOnClick:) 
       forControlEvents:UIControlEventTouchUpInside];
    }else{
        cell.finishBtn.hidden = YES;
    }
    if (self.setupCellHandler) { 
        self.setupCellHandler(cell,indexPath);
    }
    return cell;

}

接着实现UIScrollView代理中的scrollViewDidScroll方法,来更改pageControl的当前页码

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    NSInteger currentPage = scrollView.contentOffset.x / scrollView.bounds.size.width + 0.5;
    if (self.pageControl.currentPage != currentPage) {
        self.pageControl.currentPage = currentPage;
    }
}

最后在AppDelegate代理方法中didFinishLaunchingWithOptions调用

 if (![[NSUserDefaults standardUserDefaults]boolForKey:@"firstStart"]) {
        [[NSUserDefaults standardUserDefaults]setBool:YES forKey:@"firstStart"];
        
        HHGuidePageViewController *guidePageVc = [[HHGuidePageViewController alloc]
initWithPagesCount:3 setupCellHandler:^(HHGuidePageCell *cell, NSIndexPath *idnexPath) {
            NSString *imageNames =[NSString stringWithFormat:@"intro_%zd",idnexPath.row];
            cell.imageView.image =[UIImage imageNamed:imageNames];
            
         [cell.finishBtn setTitle:@"立即进入" forState:UIControlStateNormal];
       [cell.finishBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            
        } finishHandler:^(UIButton *finishBtn) {
            NSLog(@"%@",finishBtn.titleLabel.text);
       self.window.rootViewController = [[UINavigationController alloc]
                                              initWithRootViewController:
                                              [[ViewController alloc]init]];
        }];
        
        guidePageVc.pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
        guidePageVc.pageControl.pageIndicatorTintColor = [UIColor orangeColor];
        self.window.rootViewController = guidePageVc;
    }else{
            self.window.rootViewController = [[UINavigationController alloc]
                                               initWithRootViewController:
                                             [[ViewController alloc]init]];
    
    }

附送demo下载地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,339评论 7 249
  • ​《红楼梦》第三回中,林妹妹进了贾府。那个时候的她,不敢多说一句话,不敢多行一步路,恐被人耻笑了去。 《红楼梦》第...
    东语西言阅读 423评论 0 0
  • 花开成了云 云也开成了花的模样 花的故乡 是土壤深处的土壤 云的老家 是远方已远的远方 ...
    卓雅angel阅读 145评论 0 0
  • 上一篇讲了如何载入模型,这里写一下如何使用载入的模型初始化新网络的部分层:我的理解在于,在pytorch中,模型的...
    fwei阅读 9,516评论 2 2