iOS OC 引导页UIScrollView和UICollectionView

先看效果

下面的demo用户复制粘贴，稍微修改一下图片名称这些即可运行

 

 1.UIScrollView的demo，用户先把几张照片放到项目中

GuidePageViewController.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface GuidePageViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

GuidePageViewController.m

#import "GuidePageViewController.h"

@interface GuidePageViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageControl;
@property (nonatomic, strong) NSArray *images;
  
@end

@implementation GuidePageViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    // 设置视图背景颜色
        self.view.backgroundColor = [UIColor whiteColor];
          
        // 初始化图片数组（这里可以根据需要添加更多的图片）
        self.images = @[@"111.jpg", @"222.jpg", @"333.jpg"];
          
        // 初始化UIScrollView
        //self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
        self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(20, 100, 300, 400)];
        self.scrollView.contentSize = CGSizeMake(300 * self.images.count, 400);
        self.scrollView.pagingEnabled = YES;
        self.scrollView.showsHorizontalScrollIndicator = NO;
        self.scrollView.delegate = self;
        [self.view addSubview:self.scrollView];
          
        // 添加图片到UIScrollView
        for (int i = 0; i < self.images.count; i++) {
            UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * 300, 0, 300, 400)];
            imageView.image = [UIImage imageNamed:self.images[i]];
            [self.scrollView addSubview:imageView];
        }
          
        // 初始化UIPageControl
        self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 400 - 50, 300, 50)];
        self.pageControl.numberOfPages = self.images.count;
        self.pageControl.currentPage = 0;
        [self.view addSubview:self.pageControl];
          
        // 判断是否为第一次启动应用，如果是则显示引导页（这里使用NSUserDefaults进行判断）
        BOOL isFirstLaunch = [[NSUserDefaults standardUserDefaults] boolForKey:@"isFirstLaunch"];
        if (!isFirstLaunch) {
            // 显示引导页
        } else {
            // 跳转到主界面
            // 例如：[self performSegueWithIdentifier:@"toMainViewController" sender:self];
            // 注意：这里的segue需要你在storyboard中设置好
              
            // 同时，设置isFirstLaunch为YES，避免下次启动时再次显示引导页
            [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"isFirstLaunch"];
            [[NSUserDefaults standardUserDefaults] synchronize];
        }
}
      
// UIScrollViewDelegate方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat pageWidth = 300;
    int page = (int)(scrollView.contentOffset.x / pageWidth);
    self.pageControl.currentPage = page;
}
      
@end

直接运行即可，有问题自己微调一下。

2.UICollectionView，同理先搞几张图片到项目中

GuidePageCollectionViewController.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface GuidePageCollectionViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

GuidePageCollectionViewController.m

#import "GuidePageCollectionViewController.h"

@interface GuidePageCollectionViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>

@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) NSArray *guidePageImages;
@property (nonatomic, strong) UIPageControl *pageControl;

@end

@implementation GuidePageCollectionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
// 设置视图背景颜色（可选）
    self.view.backgroundColor = [UIColor whiteColor];
      
    // 初始化图片数组（确保图片资源已添加到项目中）
    self.guidePageImages = @[@"111.jpg", @"222.jpg", @"333.jpg"]; // 注意添加文件扩展名
      
    // 设置UICollectionView
    [self setupCollectionView];
}
  
- (void)setupCollectionView {
    // 创建UICollectionViewFlowLayout
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake(ZXJ_SCREEN_W, ZXJ_SCREEN_H); // 设置每个cell的大小为全屏
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; // 设置滚动方向为水平
    layout.minimumLineSpacing = 0; // 设置行间距为0（因为我们是单列布局）
      
    // 创建UICollectionView
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.backgroundColor = [UIColor clearColor];
    self.collectionView.pagingEnabled = YES; // 启用分页效果
    self.collectionView.showsHorizontalScrollIndicator = NO; // 隐藏水平滚动条
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
      
    // 注册cell类
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"GuidePageCell"];
      
    // 将UICollectionView添加到视图中
    [self.view addSubview:self.collectionView];
    
    // 初始化UIPageControl
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 400 - 50, 300, 50)];
    self.pageControl.numberOfPages = self.guidePageImages.count;
    self.pageControl.currentPage = 0;
    [self.view addSubview:self.pageControl];
}
  
#pragma mark - UICollectionViewDataSource
  
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
  
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.guidePageImages.count;
}
  
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GuidePageCell" forIndexPath:indexPath];
      
    // 清除cell中的旧内容（如果有的话）
    for (UIView *subview in cell.contentView.subviews) {
        [subview removeFromSuperview];
    }
      
    // 创建并配置UIImageView
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:cell.bounds];
    imageView.image = [UIImage imageNamed:self.guidePageImages[indexPath.row]];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.clipsToBounds = YES;
      
    // 将UIImageView添加到cell中
    [cell.contentView addSubview:imageView];
      
    return cell;
}
// UIScrollViewDelegate方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat pageWidth = 300;
    int page = (int)(scrollView.contentOffset.x / pageWidth);
    self.pageControl.currentPage = page;
}
// 注意：在这个例子中，我们没有实现UICollectionViewDelegate的额外方法，因为基本的分页和滚动效果已经通过UICollectionViewFlowLayout和pagingEnabled属性实现了。
  
@end

自定义什么的自己改装了