IOS如何使用UIScrollView来滚动和缩放他的内容?

UIScrollView是IOS中最有用的控件之一。这是显示多个屏幕内容的好方法。下面有很多技巧可以用到他。

这篇文章是关于UIScrollView的,简单来说,看看我们接下来会学到什么:

1:如何使用UIScrollView显示更大的图片?

2.UIScrollView缩放时如何保持在中间?

3.如何在UIScrollView中嵌入复杂的视图层次结构?

4.4:UIScrollView的特性如何和UIPageControl一起浏览多个页面的内容?

5.创建一个UIScrollView滚动视图,在该视图上可以看到下一页和上一页的一部分,也可以看到当前页。这就像是appstore里一个浏览应用的效果。

本文是IOS5.0以上xcode4.5的环境。

我们开始创建如下项目:

图像

我们填入项目的名称,你创建appid时写的公司logo,以及类名的前缀,把我们的设备设置为iPhone。我们暂时只支持iPhone模式,选择单视图模板。选择下一步,然后选择保存位置。

因为我们引入了UIScrollView的四种效果,所以我们创建了一个tableView,每个单元格中都会出现一个新的视图控制器,并显示一种效果。

图像(1)

上图显示了你的故事板现在完成后的样子。

我们编译UITableView的导航,接下来要做的是:

1:打开MainStroyboard.storyboard,点击系统模板,为我们创建第一个初始化场景。

2:然后我们从对象库中添加一个UITableViewController,放在故事板上。

3:现在选择tableView刚才添加的内容,然后选择Editor,再选择Embed in,NavigationController。

4.选择tableViewController的tableView,并将其单元格类型设置为静态属性检查器。

5.最后,将tableView的部分设置为包含四个单元格的部分,并将单元格设置为基本类型。然后将它们的标签更改为图像滚动、自定义视图滚动、带浏览的分页。

图像(2)

保存这个故事板并编译它。你应该能看到你的桌面视图。如下图所示:

图像(3)

滚动以缩放大图片:

我们接下来要做的是学习如何使用UIScrollView缩放和滚动大图片。

第一步是设置这个Viewcontroller,选择ViewController.h,添加一个UIScrollView的出口。使您的控制器符合UIScrollView委托协议,如下所示。

复制代码

#导入& ltui kit/ui kit . h & gt;

@ interface view controller:uiview controller & lt;UIScrollViewDelegate & gt

@property (nonatomic,strong)IBOutlet ui scroll view * scroll view;

@end

复制代码

然后在ViewController.m中设置实现属性

@ synthese scroll view = _ scroll view;

回到storyboard,从object library中拖放一个Viewcontroller,并将他的类设置为Viewcontroller。

图像(4)

单击tableview的Cell CRL单击鼠标左键拖动到一个新的Viewcontroller,会弹出一个故事板片段,选择push效果。

将一个UIScrollView从对象库中拖到Viewcontroller上,并填充它。

图像(5)

然后连接UIScrollView的输出端口,将Viewcontroller设置为UIScrollView的代理。如下图所示:

图像(6)

现在向Viewcontroller.m中的扩展添加属性和方法。这些属性方法是私有的。

然后添加

@ synthesize imageView = _ imageView

现在我们开始在viewDidLoad和viewVillAppear中设置我们的UIScrollView。

使用以下代码:

复制代码

- (void)viewDidLoad {

【超级viewDidLoad】;

// 1

ui image * image =[ui image image named:@ " photo 1 . png "];

self . imageview =[[ui imageview alloc]init with image:image];

self.imageView.frame = (CGRect){。origin=CGPointMake(0.0f,0.0f),。size = image . size };

[self . scroll view add subview:self . imageview];

// 2

self . scroll view . content size = image . size;

// 3

UITapGestureRecognizer * doubleTapRecognizer =[[UITapGestureRecognizer alloc]initWithTarget:self action:@ selector(scrollViewDoubleTapped:)];

doubletaprecognizer . numberoftapsrequired = 2;

doubletaprecognizer . numberoftouchesrequired = 1;

[self . scroll view addGestureRecognizer:doubleTapRecognizer];

UITapGestureRecognizer * twfingertaprecognizer =[[UITapGestureRecognizer alloc]initWithTarget:self action:@ selector(scrollviewtwfingertapped:)];

twfingertaprecognizer . numberoftapsrequired = 1;

twfingertaprecognizer . numberoftouchesrequired = 2;

[self . scroll view addGestureRecognizer:two fingertaprecognizer];

}

- (void)viewWillAppear:(BOOL)动画{

【超级视野WillAppear:动画】;

// 4

CG rect scrollViewFrame = self . scrollview . frame;

CG float scale width = scrollviewframe . size . width/self . scroll view . contentsize . width;

CG float scale height = scrollviewframe . size . height/self . scroll view . contentsize . height;

CGFloat minScale = MIN(scaleWidth,scale height);

self . scroll view . minimumzoomscale = min scale;

// 5

self . scroll view . maximumzoomscale = 1.0f;

self . scroll view . zoom scale = min scale;

// 6

[self centerScrollViewContents];

}

复制代码

上面的代码看起来有点复杂。所以我们停下来一步步分析。

1:首先需要创建一个UIImageView,设置它的Image属性,然后设置UIImageView的坐标,添加到UIScrollView中。

2.然后我们设置UIScrollView的contentSize,让UIScrollView知道他可以水平和垂直滚动多远或者多少像素。

3.然后在UIScrollView中添加了两个手势:一个是双击手势缩小,另一个是双指点击放大。

4.接下来,我们需要计算UIScrollView的最小规模。缩放比例为1,这意味着UIScrollView的内容以正常大小显示。小于1,显示内容被放大,当

大于1表示内容减少。为了得到最小的缩放比例,你需要根据图片的宽度来计算你要缩放多少才能让图片舒服的显示在UIScrollView中。然后你根据他的身高做同样的计算。最后,将两个缩放比例中最小的一个设置为UIScrollView的最小缩放比例。给你一个缩放比例然后放大就能看到全貌了。

5:你把最大变焦比设置为1,因为变焦大于画面的分辨率,你会看到画面模糊。您将初始缩放比例设置为最小缩放比例。所以这张图可以开始全面放大了。

6:缩放时将图片永远保持在UIScrollView的中间。

复制代码

-(void)centercrollviewcontents {

CGSize boundsize = self . scroll view . bounds . size;

CG rect contents frame = self . imageview . frame;

if(contents frame . size . width & lt;boundsSize.width) {

contents frame . origin . x =(bounds size . width-contents frame . size . width)/2.0f;

}否则{

contents frame . origin . x = 0.0f;

}

if(contents frame . size . height & lt;boundsSize.height) {

contents frame . origin . y =(bounds size . height-contents frame . size . height)/2.0f;

}否则{

contents frame . origin . y = 0.0f;

}

self . imageview . frame = contents frame;

}如果UIScrollView的bounds size大于UIImageView图片的frame size,那么图片的坐标就是条件为真时的计算结果,反之就是原始坐标。-(void)scrollViewDoubleTapped:(UITapGestureRecognizer *)识别器{

// 1

CG point point inview =[recognizer location inview:self . imageview];

// 2

CG float newZoomScale = self . scroll view . zoom scale * 1.5f;

newZoomScale = MIN(newZoomScale,self . scroll view . maximumzoomscale);

// 3

CGSize scrollViewSize = self . scrollview . bounds . size;

CG float w = scrollviewsize . width/newZoomScale;

CG float h = scrollviewsize . height/newZoomScale;

CG float x = point inview . x-(w/2.0f);

CG float y = pointin view . y-(h/2.0f);

CGRect rectToZoomTo = CGRectMake(x,y,w,h);

// 4

【self . scroll view zoom torct:rectto zoom to animated:YES】;

}

复制代码

1:获取你点击的图片的坐标位置。

2.接下来,计算150%的缩放比例,但最大缩放比例必须有限制。

3:然后用第一步算出的位置,算出想要缩放的位置的大小。

4.最后,您需要告诉UIScrollView查看缩放后的帧并添加动画。

-(void)scrollviewtwfingertapped:(UITapGestureRecognizer *)recognizer {

//稍微缩小,以滚动视图指定的最小缩放比例封顶

CG float newZoomScale = self . scroll view . zoom scale/1.5f;

newZoomScale = MAX(newZoomScale,self . scroll view . minimumzoomscale);

【self . scroll view setZoomScale:newZoomScale animated:YES】;

}

这类似于放大的方式。

-(ui view *)viewforzoominginscolllview:(ui scroll view *)scroll view {

//返回要缩放的视图

返回self.imageView

}

这是UIScrollView缩放机制的灵魂。当UIScrollView完成缩放后,你告诉他UIScrollView中缩放的是哪个视图。

-(void)scroll viewdidzoom:(ui scroll view *)scroll view {

//滚动视图已经缩放,因此您需要将内容重新居中

[self centerScrollViewContents];

}

这个方法是当UIScrollView完成缩放时,需要通知视图在UIScrollView的中间,否则UIScrollView不会自然缩放。

图片(7)

编译运行项目有以上效果,可以尝试放大缩小。