您的位置:首页 > 产品设计 > UI/UE

随意细解:UI -- UIScrollView、UIPageControl

2015-11-18 22:49 501 查看

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代理方法

 滑动时一直触发

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


缩放时一直触发

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


 指定要缩放的视图,并且是ScrollView的子视图

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;


将要开始拖拽

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


已经结束拖拽

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;


将要开始减速

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


已经结束减速

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


缩放已经结束触发

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale;


动画结束后触发

- (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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: