iOS UI基础学习 Note_daySix

昨天主要学习了UIScrollView,UIpageControl,和NSTimer 巩固代理设计模式的一些知识, 做了一个关于大图片在一定尺寸的UIScrollView中的滚动demo,还有一个图片拉伸demo,最后结合上述所有内容,截取京东app首页的分页素材模拟做了一个自动滚动的分页demo,现在直奔主题吧

UIScrollView

UIScrollView可以理解为是一个可以滚动的View控件,它可以做页面的滚动,也可以做页面的拉伸,现在就通过例子来说明这个控件到底怎么用

/*
在Storyboard中拖一个UIScrollView控件到控制器的View中,设置好大小,位置等一些常规属性,然后在控制器的代码中创建一个它的属性
*/
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImage *image = [UIImage imageNamed:@"minion"];
    UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
    [self.scrollView addSubview:imageView];
    self.scrollView.contentSize = image.size;

/*
contentSize是ScrollView可以滚动的最大范围,也就是得设置了contentSize才能实现滚动的效果
*/
    self.scrollView.bounces = NO;
/*
bounces是滚动时滚到页边距会实现一个弹簧效果,YES打开效果,NO关闭效果
*/
}

以上代码就实现了将一张图片完整的保存在了scrollView.contentSize中,并可以再scrollView控件中通过滚动展现想观察的部分.
注:想要关闭滚动效果可以把ScrollEnable设置为NO,也可以把UserInteraction Enable设置为NO.当然前者只是把滚动效果关闭,而后者把在ScrollView控件中的所有子控件的交互作用关闭,比如按钮无法按下

为了说明ScrollView和scrollView.contentSize的关系,请看下图

X偏移量 = scrollView.contentSize.width - scrollView.frame.size.width
Y偏移量 = scrollView.contentSize.height - scrollView.frame.size.height

下面通过一个内容滚动的demo来说明,沿用上一个demo的代码,添加以下代码

//通过4个按钮的不同tag来对他们进行滚动操作
- (IBAction)button:(UIButton *)sender {
    switch (sender.tag) {
        case 1:
            [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x, 0) animated:YES];
/*
setContentOffset:传入一个结构体 这里是要偏移的位置 tag:1是顶端偏移,因此x保持不边,Y要偏移到0的地方
 animated: 是ScrollView提供的动画方法
*/
            break;
        case 2:
            [self.scrollView setContentOffset:CGPointMake(0, self.scrollView.contentOffset.y) animated:YES];
/*
2是向左移动,X要偏移到最左端所以是0,要保持不变
*/
            break;
        case 3:
            [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentSize.width - self.scrollView.frame.size.width, self.scrollView.contentOffset.y) animated:YES];
/*
3是最右端偏移,所以是contentView的宽度减去ScrollView的宽度,y保持不变
*/
            break;
        case 4:
            [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x,self.scrollView.contentSize.height - self.scrollView.frame.size.height) animated:YES];
 /*
4是向最底端移动,X要保持不变,y则是用contentView的高度减去ScrollView的高度
*/ 
        default:
            break;
    }
}

截图如下:

下面依旧是通过这个demo来做一个拉伸的动作,这部分需要用到一个监听的方法,而监听则需要添加一个代理,添加代理的方法有2种,意识在控制器中添加一句xxxx.delegate = xxxx这句代码的意思是把后面的对象作为前面对象的代理,但这个时候要在后面对象的.h文件中的interface括号后面添加该对象的协议才行(如果直接写在代理对象的方法中可以把协议写在匿名扩展的扩号后面).
例如@interface ViewController () <UIScrollViewDelegate>
第二种方法则是在Storyboard中,找到需要代理的控件,右键,弹出的属性中找到delegate,拖线连接代理的对象,如下图拖线连接控制器

拖线的方式同样需要在代理的对象中添加代理协议,拉伸缩放的核心代码如下

/*
在上面demo中初始化好scrollView的情况下后设置以下两个属性
self.scrollView.maximumZoomScale:支持放大倍数
self.scrollView.minimumZoomScale:支持缩小倍数
*/
    self.scrollView.maximumZoomScale = 2.0;
    self.scrollView.minimumZoomScale = 0.5;
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
//该方法是监听scrollView是否被拉伸,是的话返回被拉伸的部分
    return self.imageView; 
}
@end

截图如下
缩小

放大

UIpageControl & NSTimer

UIpageControl是一个页面显示的控件

言简意赅
这次利用UIScrollView & UIpageControl & NSTimer 模仿京东app首页的分页功能,素材来自京东app
storyboard截图如下:

具体代码如下

@interface ViewController () <UIScrollViewDelegate>
//代理协议,监听滚动时执行某些方法
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@property (nonatomic, weak) NSTimer *timer;
//定义定时器
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
//定义一个UIPageControl

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    int count = 6;
//设置加载图片数量
    for (int i = 0; i < count ; ++i) {
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]];
        UIImageView *imageView = [[UIImageView alloc]init];
//创建UIImageView对象并加载图片
        imageView.frame = CGRectMake(i * self.scrollView.frame.size.width , 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height);
//这是图片加载的位置
        [imageView setImage:image];
        [self.scrollView addSubview:imageView];
        self.scrollView.contentSize = CGSizeMake(count * self.scrollView.frame.size.width, self.scrollView.frame.size.height);
//设置contentSize的大小
    }
    self.pageControl.currentPage = 0;
//pageControl初始化位置
    self.pageControl.numberOfPages = count;
//设置pageControl总页数
    self.pageControl.hidesForSinglePage = YES;
//开启单页隐藏控件
    self.scrollView.pagingEnabled = YES;
开启分页功能
    [self startTimer];
开启定时器
}

- (void)startTimer{

    self.timer = [NSTimer scheduledTimerWithTimeInterval:3.f target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
/*
 TimeInterval 时间长度
 target 监听者
 selector 执行方法 
 repeats 是否重复
 */
    [[NSRunLoop mainRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];
}
/*
NSRunLoop是关于线程的 这里的方法只是为了之后添加提起需要用到线程的控件而不干扰分页滚动的
*/

- (void)stopTimer
{
    [self.timer invalidate];
//定时器停止的方法
}

- (void)nextPage{
    NSUInteger page = self.pageControl.currentPage + 1;
//如果翻页,则在当前页的页码上+1
    if (page == 6) {
        page = 0;
    }
如果页面是最后一页,则跳转到第一页
    [self.scrollView setContentOffset:CGPointMake(page * self.scrollView.frame.size.width, 0) animated:YES];
//翻页动画
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int page = (int)(self.scrollView.contentOffset.x / self.scrollView.frame.size.width + 0.5);
//监听滚动到另一页的位置超过一半时,页码随页面滚动到另一页
    self.pageControl.currentPage = page;
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
//监听开始手动滚动时停止定时器
}

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    [self startTimer];
//监听停止滚动时,开启定时器
}
@end

截图如下:

今天学习:自动适配,明天拿来分享哈哈