关闭

随意细解:UI -- UIScrollView、UIPageControl

标签: ui
325人阅读 评论(0) 收藏 举报
分类:

UIScrollView

UIScrollView是可以滚动的view,是所有滚动视图的基类。

属性

  • contentSize

    定义内容区域⼤⼩,决定是否能够滑动

  • contentOffset

    视图左上⾓距离坐标原点的偏移量

  • scrollsToTop

    滑动到顶部(点状态条的时候)

  • pagingEnabled

    是否整屏翻动

  • bounces

    边界是否回弹

  • scrollEnabled

    是否能够滚动

  • showsHorizontalScrollIndicator

    控制是否显⽰⽔平⽅向的滚动条

  • showVerticalScrollIndicator

    控制是否显⽰垂直⽅向的滚动条

  • alwaysBounceVertical

    控制垂直⽅向遇到边框是否反弹

  • alwaysBounceHorizontal

    控制⽔平⽅向遇到边框是否反弹

  • minimumZoomScale

    缩⼩的最⼩⽐例

  • maximumZoomScale

    放⼤的最⼤⽐例

  • zoomScale

    设置变化⽐例

  • zooming

    判断是否正在进⾏缩放反弹

  • bouncesZoom

    控制缩放的时候是否会反弹

代码演示

UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    scrollView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:scrollView];
    [scrollView release];

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

    // 设置显示内容区域(滑动的范围)
    scrollView.contentSize = CGSizeMake( kScreenWidth, kScreenHeihgt);

    // 关闭滚动条的显示
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;

    // 设置回弹效果
    scrollView.bounces = YES;
    scrollView.alwaysBounceHorizontal = YES;
    scrollView.alwaysBounceVertical = YES;

    // 设置缩放比例
    scrollView.minimumZoomScale = 0.5;
    scrollView.maximumZoomScale = 2;

    // 设置代理
    scrollView.delegate = self;

UIScrollView代理方法

  1.  滑动时一直触发

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView;
    
  2. 缩放时一直触发

    - (void)scrollViewDidZoom:(UIScrollView *)scrollView;
    
  3.  指定要缩放的视图,并且是ScrollView的子视图

    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
    
  4. 将要开始拖拽

    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
    
  5. 已经结束拖拽

    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
    
  6. 将要开始减速

    - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;
    
  7. 已经结束减速

    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;
    
  8. 缩放已经结束触发

    - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale;
    
  9. 动画结束后触发

    - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;
    

UIPageControl

pageControl不单独使⽤,通常与scrollView结合使⽤。

这里写图片描述

属性

  •  numberOfPages

    设置页数
    
  • currentPage

    当前页
    
  • pageIndicatorTintColor

    未选中颜色
    
  • currentPageIndicatorTintColor

    选中颜色
    

代码演示

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

pageControl与scrollView结合使⽤

要实现每一张图片都能进行缩放。缩放是UIScrollView的方法,要指定一个子视图进行缩放。要保持一个UIScrollView就一个子视图,只有这样才能保证缩放互不影响。
这时候需要的结构:先创建一个大的UIScrollView,专门控制左右滑动。
大的UIScrollView上面再创建小的UIScrollView,利用小的UIScrollView来控制上面视图进行缩放。如果需要6张图,则要在第六张图后放置第一张图作为假图。当移动到假图时,改变偏移量。


#import "RootViewController.h"

#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height

@interface RootViewController ()

@property (nonatomic,retain) UIPageControl *page;


@end

@implementation RootViewController

- (void)dealloc
{
    [_page release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

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

    UIScrollView *bgscrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:bgscrollView];
    [bgscrollView release];

    bgscrollView.contentSize = CGSizeMake(kScreenWidth * 7, kScreenHeight);

    bgscrollView.bounces = YES;
    bgscrollView.alwaysBounceHorizontal = YES;
    bgscrollView.alwaysBounceVertical = NO;
    bgscrollView.delegate = self;

    // 设置整页滑动
    bgscrollView.pagingEnabled = YES;
    bgscrollView.tag = 400;

    for (int i = 1; i < 7; i++) {
        UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(kScreenWidth * (i - 1), 0, kScreenWidth, kScreenHeight)];
        // 把小的加到大的上面
        [bgscrollView addSubview:scrollView];
        [scrollView release];
        // 设置回弹效果
        scrollView.bounces = YES;
        // 打开水平回弹
        scrollView.alwaysBounceHorizontal = YES;
        // 关闭垂直回弹
        scrollView.alwaysBounceVertical = NO;
        // 设置最小缩放比例
        scrollView.minimumZoomScale = 0.5;
        // 设置最大缩放比例
        scrollView.maximumZoomScale = 2;
        // 设置代理
        scrollView.delegate = self;

        scrollView.tag = i + 300;

        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 100, 375, 400)];
        imageView.center = self.view.center;
        NSString *str = [NSString stringWithFormat:@"%d",i ];
        imageView.image = [UIImage imageNamed:str];
        [scrollView addSubview:imageView];
        [imageView release];

    }

    UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(kScreenWidth * 6, 0, kScreenWidth, kScreenHeight)];
    // 把小的加到大的上面
    [bgscrollView addSubview:scrollView];
    [scrollView release];
    scrollView.delegate = self;
    // 设置最小缩放比例
    scrollView.minimumZoomScale = 0.5;
    // 设置最大缩放比例
    scrollView.maximumZoomScale = 2;
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 100, 375, 400)];
    imageView.center = self.view.center;
    imageView.image = [UIImage imageNamed:@"1"];
    [scrollView addSubview:imageView];
    [imageView release];


    self.page = [[UIPageControl alloc]initWithFrame:CGRectMake(0, kScreenHeight - 50, kScreenWidth, 50)];
    self.page.numberOfPages = 6;
    self.page.currentPage = 0;
    self.page.pageIndicatorTintColor = [UIColor yellowColor];
    self.page.currentPageIndicatorTintColor = [UIColor greenColor];
    [self.view addSubview:self.page];
    [self.page release];

     [self.page addTarget:self action:@selector(pageControlClick:) forControlEvents:(UIControlEventValueChanged)];

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 取出大的scrollView
    UIScrollView *view = self.view.subviews[0];
    // 判断是否是大的scrollView
    if (view == scrollView) {
         // 如果偏移量小于0,设置偏移量为最后一张图的偏移量
        if (scrollView.contentOffset.x < 0) {
            [scrollView setContentOffset:CGPointMake(6 * kScreenWidth, 0) animated:NO];
        }
        // 如果偏移量大于最后一张图的偏移量,设置偏移量为第一张图的偏移量
        if (scrollView.contentOffset.x > kScreenWidth * 6) {
            [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
        }
    }



}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 注意:这时处理代理方法的是大scrollView

    NSInteger number = scrollView.contentOffset.x / kScreenWidth;
    if (number == 6){
        number = 0;
    }
    self.page.currentPage = number;

    UIScrollView *view = self.view.subviews[0];
    NSArray *arr = view.subviews;
    for (int i = 0 ; i < 7 ; i++) {
        UIScrollView *scrollView1 = arr[i];
        if(scrollView1.zoomScale != 1){
           UIImageView *imageView = scrollView1.subviews[0];
            imageView.center = self.view.center;
            [scrollView1 setZoomScale:1 animated:NO];
        }
    }
}

- (void)pageControlClick:(UIPageControl *)pageControl
{
    UIScrollView *scroll = self.view.subviews[0];
    [scroll setContentOffset:CGPointMake(pageControl.currentPage * kScreenWidth, 0) animated:YES];
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    UIImageView *imageView = scrollView.subviews[0];
    imageView.center = self.view.center;
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // 触发这个方法的是小的scrollView
    return scrollView.subviews[0];
}

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

@end

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13485次
    • 积分:661
    • 等级:
    • 排名:千里之外
    • 原创:55篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类