UI之各种控件的属性及使用方法说明（三）

最新推荐文章于 2022-08-20 16:43:06 发布

IT李菜鸟

最新推荐文章于 2022-08-20 16:43:06 发布

阅读量614

点赞数

分类专栏： iOS之UI始文章标签： UIScrollView UIPageControl

本文链接：https://blog.csdn.net/IOS_Newbie_libw/article/details/46506571

版权

iOS之UI始专栏收录该内容

11 篇文章 0 订阅

订阅专栏

UI之各种控件的属性及使用方法说明（二）中我介绍了UISegmentedControl（分段视图） UISlider（进度条）UISwitch（开关视图）UIWebView（网络视图）UIActivityIndicatorView（小菊花）等基本控件的常用方法及属性

今天给大家介绍UIScrollView（滚动视图）和UIPageControl（小点点视图）的结合使用

用法：

    NSInteger count = 7;
    
    // 初始化滚动视图，并确定位置及大小
    self.myScrollView = [[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)] autorelease];
    // 将滚动视图添加到view中
    [self addSubview:_myScrollView];
    // 将图片追加到滚动视图中
    for (int i = 0; i < count; i++) {
        // 获取图片名称
        NSString *imageName = [NSString stringWithFormat:@"image%d.png", i];
        // 获取图片
        UIImage *image = [UIImage imageNamed:imageName];
        // 获取图片视图
        UIImageView *imageView = [[[UIImageView alloc] initWithImage:image] autorelease];
        // 设置图片视图位置及大小
        imageView.frame = CGRectMake(_myScrollView.frame.size.width * i, 0, _myScrollView.frame.size.width, _myScrollView.frame.size.height);
        // 将图片视图追加到滚动视图中
        [_myScrollView addSubview:imageView];
    }
    
    // 设置滚动视图大小（内容视图大小），通常和内容一样大
    _myScrollView.contentSize = CGSizeMake(count * _myScrollView.frame.size.width, _myScrollView.frame.size.height - 64);
    // 设置拖动过程中，锁定一个方向拖动
    _myScrollView.directionalLockEnabled = NO;
    // 设置单页拖动
    _myScrollView.pagingEnabled = YES;
    // 设置边框弹动效果
    _myScrollView.bounces = YES;
    // 设置横向或者纵向总能拖动
    _myScrollView.alwaysBounceVertical = YES;
    _myScrollView.alwaysBounceHorizontal = YES;
    // 控制是否允许推动
    _myScrollView.scrollEnabled = YES;
    // 设置滚动条的显示与隐藏
    _myScrollView.showsVerticalScrollIndicator = YES;
    _myScrollView.showsHorizontalScrollIndicator = YES;
    // 设置滚动条样式
    _myScrollView.indicatorStyle = UIScrollViewIndicatorStyleBlack;
    
    // 点击状态栏回到顶部
    _myScrollView.scrollsToTop = YES;
    
    // 设置最小缩放，最大缩放比例
    _myScrollView.minimumZoomScale = 0.2;
    _myScrollView.maximumZoomScale = 2.0;
    
    // 初始化小点点对象
    self.myPageControl = [[[UIPageControl alloc] initWithFrame:CGRectMake(40, self.frame.size.height - 40, self.frame.size.width - 80, 35)] autorelease];
    _myPageControl.numberOfPages = count;
    [self addSubview:_myPageControl];

效果图

声明两个控件的事件

    // 声明小点点的点击事件
    [_rootView.myPageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventValueChanged];
    
    // 声明滚动视图的拖拽事件
    _rootView.myScrollView.delegate = self;

实现两个控件的事件

#pragma mark - 小点点的点击事件
- (void)pageControlAction:(UIPageControl *)sender
{
    // 声明图片坐标
    CGPoint point = CGPointMake(sender.currentPage * _rootView.myScrollView.frame.size.width, 0);
    [_rootView.myScrollView setContentOffset:point animated:YES];
}

#pragma mark - 滚动视图的拖拽事件
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 获取contentOffset坐标
    CGPoint point = scrollView.contentOffset;
    // 获取小点点的下标
    NSInteger index = point.x / scrollView.frame.size.width;
    // 设置小点点的小标
    _rootView.myPageControl.currentPage = index;
}

这样就实现了翻页的效果，工程链接: http://pan.baidu.com/s/1jGtL3k6 密码: f3pf