前言
一般地,第一次打开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];
}
}