UIScrollView--滚动视图

最新推荐文章于 2024-09-05 09:34:46 发布

原创最新推荐文章于 2024-09-05 09:34:46 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iOS #UIScrollView #UIKit #滚动视图

iOS开发UIkit详解专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用UIScrollView来展示应用启动时的多个介绍画面，通过设置contentSize、contentOffset和contentInset等属性来实现页面的滑动效果，并与UIPageControl结合实现分页展示。代码示例详细展示了如何创建和配置滚动视图以及与UIPageControl的联动，为应用初体验提供流畅的视觉引导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是UIScrollView，应用于哪种场景？

UIScrollView是一个滚动视图。

当要显示的视图大于设备屏幕的尺寸时，该如何显示这个视图呢？此时我们就可以使用UIScrollView。

有很多应用首次打开启动时，会出现几个介绍应用功能的画面。我们可以向前向后滑动，推出界面。这也是应用UIScrollView实现的。

二、UIScrollView简介

contentSize：ScrollView显示的视图的大小，一般指定为在ScrollView的子视图的大小，当ScrollView有多个子视图时，设置为所有子视图的总大小。

contentOffsize：某个子视图在整个UIScrollView中得偏移量(相对于子视图的起点)。

contentInset：是scrollView的内边距。

三、一般用法

	//1、初始化一个imageView，将imgaeView放入scrollView控件中。	
	UIImage *image = [UIImage imageNamed:@"001.jpeg"];
	UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
	[_scrollView addSubview:imageView];
	//2、设置scrollView的contentSize，contentInset。
	[_scrollView setContentSize: [image size]];
	[_scrollView setContentInset: UIEdgeInsetsMake(10.0, 20.0, 30.0, 40.0)];
	//3、得到contentOffset
	CGPoint point = [_scrollView contentOffset];	
	//4、设置contentOffset
	[_scrollView setContentOffset:point animated:YES];

四、与UIPageControl结合，产生应用首次启动时简介画面的效果

@interface ViewController ()
{
    UIScrollView *_scrollView;
    UIPageControl *_pager;
}

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //1.创建UIScrollView
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    
    //取得图片的宽、高
    CGFloat width = scrollView.bounds.size.width;
    CGFloat height = scrollView.bounds.size.height;
    
    //2.添加ScrollView的内容
    for (NSInteger i=1; i<6; i++) {
        //2.1 UIImage
        NSString *imageFile = [NSString stringWithFormat:@"%d.jpg", i];
        UIImage *image = [UIImage imageNamed: imageFile];
        //2.2 UIImageView
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
        //2.3 设置UIImageView的位置
        NSInteger x = (i - 1) * scrollView.bounds.size.width;
        [imageView setFrame:CGRectMake(x, 0, width, height)];
        
        //2.4 将图像添加到滚动视图
        [scrollView addSubview:imageView];
    }
    
    [scrollView setContentSize: CGSizeMake(5 * width, height)];
    
    [scrollView setBounces:NO];//设置不支持弹簧
    [scrollView setShowsHorizontalScrollIndicator:NO];//设置不像是横向滚动条
    
    [scrollView setPagingEnabled:YES];//设置支持分页
    [scrollView setDelegate:self];//设置代理
    
    
    [self.view addSubview:scrollView];//将scrollView添加到视图中
    
    
    //创建UIPageControl
    UIPageControl *pageControl = [[UIPageControl alloc] init];
    pageControl.bounds = CGRectMake(0, 0, 150, 50.0);
    pageControl.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height- 50.0);
    
    [pageControl setNumberOfPages:5];//设置页数
    [pageControl setCurrentPage:0];//设置当前页
    
    [pageControl setPageIndicatorTintColor:[UIColor blackColor]];//默认颜色
    [pageControl setCurrentPageIndicatorTintColor:[UIColor whiteColor]];//选中颜色
    
    [pageControl addTarget:self action:@selector(updatePageChange:) forControlEvents:UIControlEventValueChanged];//添加更新方法
    
    [self.view addSubview:pageControl];
    
    _scrollView = scrollView;
    _pager = pageControl;
}

//实现UIScrollViewDelegate协议的方法，偏移视图
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSInteger pageNo = scrollView.contentOffset.x / scrollView.bounds.size.width;
    
    [_pager setCurrentPage:pageNo];
}
//实现UIPageControl值改变处理函数
- (void)updatePageChange:(UIPageControl *)pageControl
{
    CGFloat offsetX = [pageControl currentPage] * _scrollView.bounds.size.width;
    
    [_scrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}