UI基础知识 -- UIScrollView UIPageControl

原创 2015年11月19日 22:49:28

UIScrollView

属性

1.初始化

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];

2.加个颜色

scrollView.backgroundColor = [UIColor purpleColor];

3.设置显示内容区域(滑动的范围)

scrollView.contentSize = CGSizeMake(kScreenWidth * 3, kScreenHeight);

4.能够一页页翻

scrollView.pagingEnabled = YES;

5.设置滚动条

scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;

6.设置回弹效果

三个需要一起设置:

scrollView.bounces = YES;
scrollView.alwaysBounceHorizontal = YES;
scrollView.alwaysBounceVertical = YES;

7.设置缩放比例

scrollView.minimumZoomScale = 0.5;
scrollView.maximumZoomScale = 2;

8.设置代理

需遵守 UIScrollViewDelegate 协议

scrollView.delegate = self;

9.添加tag值

scrollView.tag = 100;

10.添加一个图片

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIImage *image = [UIImage imageNamed:@"1.jpg"];
    imageView.image = image;
    // 注意将imageView 加到 scrollView上
    [scrollView addSubview:imageView];
    [imageView release];

协议方法

// 滑动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
     // NSLog(@"只要滑动 一直触发");
     // 这里可以瞬间切换scrollView 的偏移量
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    // 改变偏移量的动画结束后 会触发
    NSLog(@"动画结束后触发");
}

// 缩放
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // 指定要缩放的视图 并且是ScrollView的子视图

    return scrollView.subviews[0];
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    NSLog(@"缩放时 一直触发");
    // 缩放时 按中心点 来缩放
    // 改变imageView的中心点
    // 让imageView的中心点 始终等于 self.view中心点
    UIImageView *image = scrollView.subviews[0];
    image.center = self.view.center;
}

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
    NSLog(@"缩放已经结束缩放");
}

// 拉拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    NSLog(@"将要开始拖拽");
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"已经结束拖拽");

}



// 减速
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"将要开始减速");
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 最终图片停止在这个方法
    NSLog(@"已经结束减速");
    // 此处能写改变UIPageControl当前页数的方法



}

方法

以某个动画切换滚动视图偏移量

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;

UIPageControl

// 初始化pageControl
    UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, kScreenHeight - 50, kScreenWidth, 50)];
    pageControl.backgroundColor = [UIColor brownColor];
// 设置一共有多少页
    pageControl.numberOfPages = 5;
// 设置当前显示第几页
    pageControl.currentPage = 1;
// 设置选中和未选中颜色
    pageControl.pageIndicatorTintColor = [UIColor blueColor];
    pageControl.currentPageIndicatorTintColor = [UIColor yellowColor];
// 添加点击事件
    [pageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventValueChanged];
// 不能加载图片上 否则会被划走
    [self.view addSubview:pageControl];
    [pageControl release];
}

UIScrollView UIPageControl综合使用

// 要实现每一张图片都能够进行缩放
// 缩放是scrollView的方法 要指定一个子视图进行缩放 要保证 一个scrollView就一个子视图
// 只有这样 才能保证 缩放互不影响
// 这时候 需要的结构:
// 先创建一个 大的scrollView 专门控制左右滑动
// 大的scrollView 上面 再创建许多小的scrollView
// 利用这个小的scrollView 来控制 上面视图进行缩放

// 创建大scrollView
    UIScrollView *bgScrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    bgScrollView.backgroundColor = [UIColor grayColor];
    bgScrollView.contentSize = CGSizeMake(kScreenWidth * 7, kScreenHeight * 2);
    bgScrollView.bounces = YES;
    bgScrollView.alwaysBounceHorizontal = YES;
    bgScrollView.alwaysBounceVertical = YES;
    bgScrollView.pagingEnabled = YES;
    bgScrollView.delegate = self;
    bgScrollView.tag = 100;
    bgScrollView.showsHorizontalScrollIndicator = YES;
    [self.view addSubview:bgScrollView];
    [bgScrollView release];


// 创建小scrollView

    for (int i = 1; i <= 7; i++) {
        UIScrollView *smallScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(kScreenWidth * (i - 1) , 0, kScreenWidth, kScreenHeight)];
        smallScrollView.backgroundColor = [UIColor purpleColor];
        smallScrollView.delegate = self;
        smallScrollView.minimumZoomScale = 0.5;
        smallScrollView.maximumZoomScale = 2;
        smallScrollView.tag = 1000 + i;
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        NSString *str = [NSString stringWithFormat:@"%d.jpg",i];
        imageView.image = [UIImage imageNamed:str];
        [smallScrollView addSubview:imageView];
        [bgScrollView addSubview:smallScrollView];
        [imageView release];
        [smallScrollView release];
    }



// 创建UIPageControl
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 600, kScreenWidth, 50)];

    self.pageControl.numberOfPages = 6;
    self.pageControl.currentPage = 0;
    self.pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    [self.view addSubview:self.pageControl];
    [_pageControl release];

    [self.pageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventTouchUpInside];
}

// 返回缩放的smallScrollView
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return scrollView.subviews[0];
}

// 缩放后应该实现的方法
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    UIImageView *imageView = (UIImageView *)scrollView.subviews[0];
    imageView.center = self.view.center;
}

// bgscrollView 滚动的每一下 都会出发下面方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.x < 0) {
        [scrollView setContentOffset:CGPointMake(kScreenWidth * 6, 0) animated:NO];
    }else if (scrollView.contentOffset.x > kScreenWidth * 6 ){
        [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
    }

}


- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
  // 将开始减速  
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
// 这时触发代理方法的是大scrollView
    if (scrollView.contentOffset.x / kScreenWidth == 6) {
        self.pageControl.currentPage = 0;
    }else{
    self.pageControl.currentPage = scrollView.contentOffset.x / kScreenWidth;
    }


    for (int i = 1001; i <= 1007; i++) {
        UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:i];
        if (scrollView.zoomScale != 1) {
            [scrollView setZoomScale:1 animated:YES];
        }
    }
}

- (void)pageControlAction:(UIPageControl *)pageControl
{
    UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:100];
    [scrollView setContentOffset:CGPointMake(pageControl.currentPage * kScreenWidth, 0) animated:YES];
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

UIPageControl的详细使用 (与uiscrollview配合使用)

转载自:http://www.189works.com/article-61093-1.html 先自我总结下: 关于uiscrollview 与 pagecontrol结合使用: 1....
  • chenyong05314
  • chenyong05314
  • 2012年11月08日 11:52
  • 7765

iPhone相册,(UIScrollView,UIPageControl的综合应用)捏合放大缩小, 左右滑动切换图片

// // PhotoView.h // Homework_iPhonePhoto // // Created by lanouhn on 14-8-29. // Copyright (c) ...
  • vaercly
  • vaercly
  • 2014年08月31日 22:04
  • 1596

UIPageController和UIScrollView结合使用

UIPageController   UIPageController控件主要用来实现视图分页,通常会和UIScrollView配合使用  创建       UIPageContro...
  • u012222212
  • u012222212
  • 2016年07月03日 19:57
  • 704

Swift之UIScrollView和UIPageControl

let width:CGFloat = 375 let height:CGFloat = 668 class ViewController: UIViewController,UIScrollView...
  • HeyLjie
  • HeyLjie
  • 2015年08月27日 14:24
  • 1011

使用UIScrollView和UIPageControl做一个可以用手势来切换图片的效果

利用UIScrollView的滚动效果来实现,先上图: 实现过程是:在viewController里先加入UIScrollView和UIPageControl: -(voi...
  • baidu_nod
  • baidu_nod
  • 2014年06月25日 22:28
  • 1133

UI之uiScrollView and uipageControl

//UIScrollView 继承自UIView     UIScrollView *scrollView = [[UIScrollViewalloc]initWithFrame:self.view....
  • qq_31516113
  • qq_31516113
  • 2015年11月15日 15:17
  • 105

UI - UIScrollView、UIPageControl

// UIScrollView 滚动视图, 所有能滚动的控件的基类 //1.滚动 //2.缩放// 一、滚动 self.scrollView = [[UIScrol...
  • qq_16999801
  • qq_16999801
  • 2015年12月26日 21:00
  • 120

UI - UIScrollView和UIPageControl

UIScrollView控件的一些属性// 创建一个ScrollView UIScrollView *scrollView = [[UIScrollView alloc]initWithFra...
  • high_cold
  • high_cold
  • 2015年08月27日 22:47
  • 185

UI基础-UIScrollView、UIPageControl

UIScrollViewUIScrollView是可以滚动的view,UIView本⾝身不能滚动,子类 UIScrollview拓展了滚动方面的功能。 UIScrollView是所有滚动视图的基类。...
  • jt111666
  • jt111666
  • 2015年11月21日 17:47
  • 216

UI第七天 UIScrollView UIPageControl

UIScrollViewUIScrollView是可以滚动的view,UIView本⾝不能滚动,⼦类 UIScrollview拓展了滚动⽅⾯的功能。 UIScrollView是所有滚动视图的基类。...
  • qq_31856835
  • qq_31856835
  • 2015年11月18日 22:41
  • 227
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UI基础知识 -- UIScrollView UIPageControl
举报原因:
原因补充:

(最多只允许输入30个字)