UIScrollView(OC)

作者: iOS_成才录 | 来源:发表于2015-11-12 19:08 被阅读521次

一、常用属性

Snip20151025_12.png
// 用来表示UIScrollView滚动的位置,其实就是内容左上角与scrollView左上角的间距值
@property(nonatomic)CGPoint contentOffset;

// 属性用来表示UIScrollView内容的尺寸,滚动范围(能滚多远)
@property(nonatomic)CGSize  contentSize;

// 能够在UIScrollView的4周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住
@property(nonatomic)UIEdgeInsets  contentInset;

// 是否需要弹簧效果
BOOL bounces;

// UIScrollView是否能滚动
BOOL scrollEnabled;

// 是否显示水平滚动条
BOOL showsHorizontalScrollIndicator;

// 是否显示垂直滚动条
BOOL showsVerticalScrollIndicator;

二、UIScrollView不能滚动的几种情况

  • 1.没有设置contentSize
  • 2.scrollEnabled属性 = NO
  • 3.userInteractionEnabled属性 = NO
注意:
  • enabled和userInteractionEnabled的区别
    • enabled: 代表控件不可用
    • userInteractionEnabled: 代表控件不可以和用户交互, 也就是不能响应用户的操作
  • 滚动条也是scrollView的子控件的一部分
    • 所以以后在开发中不推荐大家通过subviews获取子控件的方式来操作子控件

三、UIScrollView常用功能

1、缩放功能
  • 1.设置UIScrollView的id<UISCrollViewDelegate>delegate代理对象
  • 2.设置minimumZoomScale:缩小的最小比例
  • 3.设置maximumZoomScale:放大的最大比例
  • 4.让代理对象实现下面的方法,返回需要缩放的视图控件
-(UIView*)viewForZoomingInScrollView:(UIScrollView*)scrollView;
  • 注意:跟缩放相关的其他代理方法
    • 缩放完毕的时候调用
-(void)scrollViewWillBeginZooming:(UIScrollView*)scrollView withView:(UIView*)view
  • 正在缩放的时候调用
-(void)scrollViewDidZoom:(UIScrollView*)scrollView
  • 通过KVC给UIPageControl的选中页面与非选中页面的控件的图片, 设置自定义滚动条图片

[self.pageControl setValue:[UIImage imageNamed:@"current"] forKeyPath:@"_currentPageImage"];
[self.pageControl setValue:[UIImage imageNamed:@"other"] forKeyPath:@"_pageImage"];

+ 自定义View的步骤
  - 1.重写初始化方法 (在里面进行一次性的初始化)
      - xib :awakeFromNib
      - 纯代码:initWithFrame 
  - 2.重写layoutSubviews, 在里面布局子控件
  - 3.接收外界传入的数据, 重写set方法


##### 2、图片轮播器封装
+ 1.布局轮播器界面
![Snip20151025_13.png](http:https://img.haomeiwen.com/i831339/a08e720caa2c34bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+ 2.自定义图片轮播器View
   - 1 .h头文件,提供一个快速创建方法和一个接口:让用户来设置轮播的图片

```objc
#import <UIKit/UIKit.h>
@interface JPPageView : UIView

+ (instancetype)pageView;

/** 所有需要展示的图片名称*/
@property (nonatomic, strong)NSArray *imageNames;
@end
  • 2 .m文件,提供具体实现:
    • 设置图片数据,设置页面条,设置scrollView的滚动范围,以及scrollView的偏移量设置,布局子控件,定时器监听轮播器的滚动,定时器添加到运行循环中,切换页面
#import "JPPageView.h"

@interface JPPageView ()<UIScrollViewDelegate> // 遵守协议

@property (weak, nonatomic) IBOutlet UIScrollView *sc;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

// 注意:NSTimer应该是weak
@property (weak, nonatomic) NSTimer *timer;
@end

@implementation JPPageView

+ (instancetype)pageView
{
#warning 注意.这里有知识点
    return [[[NSBundle mainBundle] loadNibNamed:@"JPPageView" owner:nil options:nil] lastObject];
}

// xib,初始化子控件
- (void)awakeFromNib
{
    self.sc.delegate = self; // 设置scrollView的代理
    // 1.隐藏滚动条
    self.sc.showsHorizontalScrollIndicator = NO;
    self.sc.showsVerticalScrollIndicator = NO;
    
    // 2.设置UIScrollView的其它属性
    self.sc.bounces = NO;
    self.sc.pagingEnabled = YES;
    
    // 3.监听PageControl的点击事件
    [self.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged];
    
    // 4.通过KVC给UIPageControl的私有属性赋值, 设置自定义图片
    [self.pageControl setValue:[UIImage imageNamed:@"current"] forKeyPath:@"_currentPageImage"];
    [self.pageControl setValue:[UIImage imageNamed:@"other"] forKeyPath:@"_pageImage"];
    
    // 5.让UIScrollView每隔一段事件就切换一页
    [self startTimer];
}

#pragma mark - 内部监听
- (IBAction)pageControlClick:(UIPageControl *)sender
{
    
    self.sc.contentOffset = CGPointMake(sender.currentPage * self.sc.frame.size.width , 0);
}

#pragma mark - 定时器相关
- (void)startTimer
{
    // 打开定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"lnj" repeats:YES];
    
    // 主线程在处理其它事件的时候, 分一点时间来处理NSTimer
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

// 切换到下一页
- (void)nextPage:(NSTimer *)timer
{
    // 1.获取下一页的页码
    NSUInteger page = self.pageControl.currentPage + 1;
    // 2.判断页码是否越界
    if (page >= _imageNames.count) {
        // 如果越界就回到第0页
        self.pageControl.currentPage = 0;
    }else
    {
        // 如果没有越界, 就进入到下一页
        self.pageControl.currentPage = page;
    }
    
    [self pageControlClick:self.pageControl];
}

- (void)stopTimer
{
    // 关掉定时器
    [self.timer invalidate];
}

#pragma mark - UIScrollViewDelegate
// 只要滚动就会调用
- (void)scrollViewDidScroll:(nonnull UIScrollView *)scrollView
{
    // 1.计算页码
    // 当前页码 = 偏移位 / UIScrollView的宽度
    CGFloat page = scrollView.contentOffset.x / scrollView.frame.size.width;
    int currnetPage = page + 0.5;
    
    // 2.修改页码
    self.pageControl.currentPage = currnetPage;
}

// 开始拖拽
- (void)scrollViewWillBeginDragging:(nonnull UIScrollView *)scrollView
{
    [self stopTimer];
}

// 结束拖拽
- (void)scrollViewDidEndDragging:(nonnull UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
    
}

- (void)setImageNames:(NSArray *)imageNames
{
    _imageNames = imageNames;
    
    // 0.每次重新设置图片, 都需要情空以前的图片
    for (UIView *subView in self.sc.subviews) {
        [subView removeFromSuperview];
    }
    
    // 1.创建图片

    // 1.初始化子控件, 添加图片
    for (int i = 0; i < _imageNames.count; i++) {
        
        // 1.创建UIImageView
        UIImageView *iv = [[UIImageView alloc] init];
        
        // 2.创建图片
        NSString *imageName = _imageNames[i];
        UIImage *image = [UIImage imageNamed:imageName];
        iv.image = image;

        // 4.添加到父控件
        [self.sc addSubview:iv];
    }
    
    // 2.设置pageControl的页码数量
    self.pageControl.numberOfPages = _imageNames.count;
    
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    CGFloat width = self.sc.frame.size.width;
    CGFloat height = self.sc.frame.size.height;
    NSUInteger imageCount = self.imageNames.count;
    // 1.设置每个UIImageView的frame
    for (int i = 0; i < imageCount; i++) {
        UIImageView *iv = self.sc.subviews[i];
        iv.frame = CGRectMake(i * width, 0, width, height);
    }

    // 2.设置滚动范围
    self.sc.contentSize = CGSizeMake(imageCount * width, height);
}
@end
  • 3.使用封装好的图片轮播器
    • 创建图片轮播器视图对象,设置图片数据即可
 // 1.创建图片轮播器
    JPPageView *pageView = [JPPageView pageView];
    // 2.设置图片轮播器的frame
    pageView.imageNames = @[@"img_01", @"img_02", @"img_03", @"img_04", @"img_05"];
    pageView.frame = CGRectMake(27, 97, 320, 128);
//    pageView.frame = CGRectMake(0, 97, 330, 200);
    [self.view addSubview:pageView];
    self.pageView = pageView;

相关文章

网友评论

  • hhgvg:在最后一页的时候 滑到第一页怎么实现呢

本文标题:UIScrollView(OC)

本文链接:https://www.haomeiwen.com/subject/stcxhttx.html