设计ios的版本更新引导页

前言

一般地,第一次打开APP时都会有几个引导页,提示用户如何使用APP等。下面来简单实现这样的引导页功能吧。

做法思路

可以用一个scrollview其中包含几个imageview,或者直接用一个collectionView, 其cell就是一个imageview。这里采用第二种方法做。

自定义cell

新建一个类PDupdateLeadCell,继承自UICollectionViewCell。先声明cell的子控件,这里只需一个imageview。并实现懒加载

@interface PDupdateLeadCell()

@property(nonatomic,weak)UIImageView *imgView;   //子控件

@end

@implementation PDupdateLeadCell
//懒加载
-(UIImageView *)imgView{
    if(!_imgView){
        
        self.backgroundColor = Color_alpha;   //透明色
        self.contentView.backgroundColor = Color_alpha;
        
        UIImageView *imgV = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        
        if(screenH == 812)    //适配iPhoneX
            imgV.contentMode = UIViewContentModeScaleToFill;
        
        [self.contentView addSubview:imgV];
        _imgView = imgV;
        
    }
    return _imgView;
}

@end

再声明一个图片属性作为cell的数据,以便外界可以传进一张图片

@property(nonatomic,strong)UIImage *backImage;

并在.m文件中,重写set方法,

-(void)setBackImage:(UIImage *)backImage{
    _backImage = backImage;
    
    self.imgView.image = backImage;
}

到此,自定义的cell就完成了。下面来设计它的View控件。

引导页的view

新建一个类PDleadingView继承自UIView,先添加其子控件

@interface PDleadingView ()

@property(nonatomic,weak)UICollectionView *leadColltView;

@end

定义引导页的页数
static NSInteger leadPageNum = 5;

由于使用的是collectionView,所以需要创建流水布局,在创建collectionView。

-(void)addLayoutAndCollectionView{
    //1、创建流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake(screenW, screenH); // 设置每一个item的大小
    layout.minimumLineSpacing = 0;
    layout.minimumInteritemSpacing = 0;
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;  //设置滚动方向-水平
    
    //2、创建collecView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, screenW, screenH) collectionViewLayout:layout];
    collectionView.backgroundColor = Color_alpha;
    collectionView.showsHorizontalScrollIndicator = NO;
    collectionView.scrollEnabled = NO;    //关闭滑动
    collectionView.bounces = NO;
    //3、添加
    [self addSubview:collectionView];
    _leadColltView = collectionView;
    
}

在init方法中创建,添加。

-(instancetype)initWithFrame:(CGRect)frame{
    
    if(self = [super initWithFrame:frame]){
        
        self.backgroundColor = Color_alpha;  //透明
        
        [self addLayoutAndCollectionView];
        
        // 注册自定义的cell
        [self.leadColltView registerClass:[PDupdateLeadCell class] forCellWithReuseIdentifier:@"leadcell"];
        
        self.leadColltView.delegate = self;   //别忘了设置代理,遵守协议
        self.leadColltView.dataSource = self;
    }
    
    return  self;
}

下面,实现collectionView的数据源方法

// 这里只需section数为1,所以没有实现numberOfSectionsInCollectionView方法。

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return leadPageNum;   //引导页的页数
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    //  创建cell
    PDupdateLeadCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"leadcell" forIndexPath:indexPath];
    // 给cell添加图片,注意图片的命名
    NSString *name = [NSString stringWithFormat:@"page%ld",indexPath.item + 1];
    UIImage *img = [UIImage imageNamed:name];
    cell.backImage = img;
    
    return cell;
}

下面设计cell的处理,需要实现的业务逻辑是,点一下,切换到下一张引导页。
在以下这个代理方法中

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    [collectionView deselectItemAtIndexPath:indexPath animated:YES];//取消选中
    
    //  关键处理:通过改变collectionView的水平滑动距离ContentOffset,实现引导页的切换
    if(indexPath.row < leadPageNum - 1){
        NSInteger page = indexPath.row + 1;
        [self.leadColltView setContentOffset:CGPointMake(page * screenW, 0) animated:YES];
    }
    
    if(indexPath.row == leadPageNum - 1)
        [self removeFromSuperview];    //  如果当前为最后一页,点击之后移除引导页
        
}

到此,引导页组件也设计好了,下面看外面怎么使用它吧。
在需要引导页的控制器中,

#pragma mark -添加更新引导页
-(void)addUpdateGuide{
    
     // 拿到当前工程的Bundle id
    NSString *cur_build = [[NSBundle mainBundle].infoDictionary objectForKey:@"CFBundleVersion"]; 

    //从本地存储中,取出上一次版本
    NSUserDefaults *userD = [NSUserDefaults standardUserDefaults];
    NSString *last_build = [userD objectForKey:@"Bundle"];    
    
    //判断当前版本号
    if(last_build.length == 0 || last_build == nil){    //[cur_build integerValue] > [last_build integerValue]
        //保存当前版本
        [userD setObject:cur_build forKey:@"Bundle"];
        [userD synchronize]; 
        
        //  创建添加,显示引导页
        PDleadingView *leadv = [[PDleadingView alloc] initWithFrame:CGRectMake(0, 0, screenW, screenH)];
        [self.view addSubview:leadv];
    
    }
}

你可能感兴趣的:(设计ios的版本更新引导页)