#Objective - C - UI-design - 第六天 -UIKit框架-UIScrollView-分屏相册练习(相册缩略图变为浏览到第几张)

UIScrollView

UIScrollView是所有滚动视图的基类

创建UIScrollView

    #define WIDTH self.view.frame.size.width#define HEIGHT self.view.frame.size.height
// 1.创建一个和屏幕等尺寸的UIScrollView UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH,HEIGHT)];
// 2.设置背景颜色scrollView.backgroundColor = [UIColor yellowColor];
// 3.把scrollView放到self.view上显示 [self.view addSubview:scrollView];
// 4.内存管理[scrollView release];// ⽔水平⽅方向滚动 scrollView.contentSize = CGSizeMake(WIDTH * 7, 0);
// 垂直⽅方向滚动scrollView.contentSize = CGSizeMake(0, 7 * HEIGHT);

偏移量contentOffset

    //通过偏移量让指定视图显示scrollView.contentOffset = CGPointMake(WIDTH, 0);
// 直接设置第二个视图显示在屏幕上

UIScrollView属性

    //创建好之后我们对UIScrollView其他的属性进行设置。scrollView.contentOffset = CGPointMake(WIDTH, 0);// 想让哪张图⽚片最先显⽰示通过设置偏移量完成scrollView.pagingEnabled = YES; // 可以让ScrollView按⻚页来滚动scrollView.showsHorizontalScrollIndicator = NO;// 关闭⽔水平⽅方向滚动条scrollView.showsVerticalScrollIndicator = NO;// 关闭垂直⽅方向滚动条scrollView.bounces = NO; // 关闭边界回弹效果scrollView.tag = 1000; // 设定⼀一个tag值

UIScrollView协议

//监控滚动状态- (void)scrollViewDidScroll:(UIScrollView *)scrollView// 只要是拖拽scrollView就会触发这个方法- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView// 开始拖拽的时候会触发这个方法- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate// 当结束拖拽的时候会触发这个方法- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView// 当滚动减速的时候会触发这个方法- (void)scrollViewDidEndDecelerating:(UIScrollView // 当滚动彻底停止的时候会触发这个方法

UIScrollView控制视图缩放

scrollView.maximumZoomScale = 2;
// 设置最大的缩放最大比例
scrollView.minimumZoomScale = 0.5;
// 设置最大的缩放最小比例
scrollView.zoomScale = 1;
// 设置当前的比例
当我们在ViewDidLoad方法里设置好最大和最小的缩放
比例这两个属性之后我们就可以对视图进行缩放操作- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
// 指定某个UIScrollView的子视图可以进行方法缩小操作

习题:在Scroll中缩放图片

Scroll内对图片缩放
//方法为图片放入一个小的ScrollSmall 再将小的ScrollSmall放入大的ScrollBig//第一部分缩放
— (UIView *)viewForZoomingInScrollView:(UIScrollView
*)scrollView
{UIImageView *imageView = [scrollView.subviews
objectAtIndex:0];return imageView;
}
//第二部分还原
-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView{
// 先从负责滚动的⼤大scrollView找到他的⼦子视图
for (UIScrollView *sView in scrollView.subviews){
// 在根据⼦子类的对象类型进⾏行判断
if ([sView isKindOfClass:[UIScrollView class]]){
// 把视图的尺⼨寸恢复到原有尺⼨寸 sView.zoomScale = 1.0;} }
}

习题2:UIPageControl小圆点跟随Scroll视图移动

效果为:

第一张图第一颗点
第二张图第二颗点

代码

//全局变量#define WIDTH self.view.bounds.size.width#define HEIGHT self.view.bounds.size.height
@interface ViewController () <UIScrollViewDelegate> //遵循协议
{UIImageView *image;//图片UIPageControl *page;//圆点
}
@end

    UIScrollView *scro = [[UIScrollView alloc]initWithFrame:self.view.bounds];scro.contentSize = CGSizeMake(self.view.bounds.size.width *4, 0);//边界回弹scro.bounces = YES;//小圆点page = [[UIPageControl alloc]initWithFrame:CGRectMake(110, self.view.bounds.size.height - 30, 200, 20)];page.numberOfPages = 4;[page addTarget:self action:@selector(pageControler:) forControlEvents:UIControlEventValueChanged];//添加图片for (int i = 0; i< 4; i++) {image = [[UIImageView alloc]initWithFrame:scr.bounds];image.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]];[scro addSubview:image];}//按页滚动scro.pagingEnabled = YES;//滚动条//scro.showsHorizontalScrollIndicator = NO;   scro.delegate = self;//设置代理人[self.view addSubview:scro];[self.view addSubview:page];#warning 触发拖动将要停止的方法:
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{NSLog(@"哈哈哈哈哈哈历程你以为你不是傻逼吗咩哈哈哈哈哈");page.currentPage = scrollView.contentOffset.x /self.view.bounds.size.width;
}

宇神大招第二道/分屏相册

=========

哈哈简直666666 宇神就给我们随便介绍了一下Scroll就叫我们做相册了

=========

实现功能介绍

UIScroll下创建可上下滑动的背景图
添加数组在主视图View里对应添加相册
解决相册添加时相册数量为奇数额外计算问题
点击缩略图进入相应相册
且对应相册可左右滑动(小圆点跟随移动)(PS:点击小圆点也可移动相册)
相册无限滚动,到最后一张,下滑一张回到第一张
保留浏览记录(将主视图View的相册缩略图变为退出相册时浏览的相片)

效果图

形成相册缩略图
可移动拓展(或调节跟随相册数量)(且解决奇数相册计算)
点击进入相册,圆点跟随移动,且点击圆点相册跟随移动,相册无限循环滚动
缩略图保存浏览记录

其实难点就在于代理方法上,也不会很难,只是刚开始学习学的东西多,代理不是特别的熟悉
所以宇神出了个小大招给我们熟悉代理方法
不过确实弄了我很久,卡在一些很小的细节地方很久
宇神说做完之后之前的题目都小儿科,也对,只会越来越熟悉

上代码

ViewController.m

#import "ViewController.h"
#import "SecViewController.h"//引入头文件#define WIDTH self.view.bounds.size.width
#define HEIGHT self.view.bounds.size.height
@interface ViewController ()<passTag>//代理方法回传值,寻找图片
{NSMutableArray *thumb;//存放相片的总数组UIButton *backButton;SecViewController *sec;//实例对象NSInteger buttonTag;NSInteger imageTag;NSInteger useTag;//获取点击按钮的tagNSArray *arr;//点击按钮的对应数组
}
@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];//数组存放图片NSArray* ar1 = @[@"6.jpg",@"7.jpg",@"8.jpg",@"9.jpg"];NSArray* ar2 = @[@"10.jpg",@"11.jpg",@"12.jpg",@"13.jpg"];NSArray* ar3 = @[@"14.jpg",@"15.jpg",@"16.jpg",@"17.jpg"];NSArray* ar4 = @[@"18.jpg",@"19.jpg",@"20.jpg",@"21.jpg"];NSArray* ar5 = @[@"22.jpg",@"23.jpg",@"24.jpg",@"25.jpg"];thumb = [NSMutableArray array];thumb = [@[ar1,ar2,ar3,ar4,ar5]mutableCopy];//准备UIImageView *backImage;NSInteger up = 1;buttonTag = 100;imageTag = 1000;//主页面UIScrollView *scr = [[UIScrollView alloc]initWithFrame:self.view.bounds];scr.contentSize = CGSizeMake(0, HEIGHT * 5);//背景for (int i = 1; i < 6; i++) {backImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, HEIGHT * (i - 1), WIDTH, HEIGHT)];[backImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]]];[scr addSubview:backImage];}[self.view addSubview:scr];//主页面添加缩略图for (int j = 0; j < [thumb count] / 2; j++) {for (int i = 0; i < 2; i++) {backImage = [[UIImageView alloc]initWithFrame:CGRectMake( 50 + (WIDTH / 3 + 30) * i, 25 + (HEIGHT / 3 ) + (HEIGHT / 3 ) * (j - 1), WIDTH / 3 + 10, HEIGHT / 3 -30 )];backImage.alpha = .95;[backImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",up++]]];[backImage setTag:imageTag++];//相应按钮backButton = [UIButton buttonWithType:UIButtonTypeSystem];backButton.frame = CGRectMake( 50 + (WIDTH / 3 + 30) * i, 25 + (HEIGHT / 3 ) + (HEIGHT / 3 ) * (j - 1), WIDTH / 3 + 10, HEIGHT / 3 -30 );[backButton addTarget:self action:@selector(backButtonClick:) forControlEvents:UIControlEventTouchUpInside];[backButton setTag:buttonTag++];[scr addSubview:backButton];[scr addSubview:backImage];}}//奇数缩略图if ([thumb count] % 2 == 1) {backImage = [[UIImageView alloc]initWithFrame:CGRectMake( 50 , (HEIGHT / 3 + 12) * ([thumb count] / 2), WIDTH / 3 + 10, HEIGHT / 3 - 30)];backImage.alpha = .95;[backImage setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",[thumb count]]]];[backImage setTag:[thumb count] + 999];//相应按钮backButton = [UIButton buttonWithType:UIButtonTypeSystem];backButton.frame = CGRectMake( 50 , (HEIGHT / 3 + 12) * ([thumb count] / 2), WIDTH / 3 + 10, HEIGHT / 3 - 30);[backButton addTarget:self action:@selector(backButtonClick:) forControlEvents:UIControlEventTouchUpInside];[backButton setTag:[thumb count] + 99];[scr addSubview:backButton];[scr addSubview:backImage];}// Do any additional setup after loading the view, typically from a nib.
}//按钮方法
-(void)backButtonClick:(UIButton *)button{sec =[[SecViewController alloc]init];//每次点击初始化,一开始我没有写进来,结果每次进下一个页面都保存上一个相册//setter传值给SecController[sec setAll:thumb[button.tag-100]];//当前按钮的tag-100刚好对应数组下标sec.delegate = self;//设置代理人//切换视图(跳转下一个视图)[self presentViewController:sec animated:YES completion:nil];//代理方法(指定缩略图)用useTag = button.tag + 900;//获取当前按钮点击时对应数组arr = [NSArray arrayWithArray:thumb[button.tag - 100]];
}
//代理方法回传获取数组下标
-(void)passTag:(NSInteger)tagg{//指定缩略图UIImageView *view = (UIImageView *)[self.view viewWithTag:useTag];//通过tag值强转为视图中对应图片[view setImage:[UIImage imageNamed:arr[tagg - 1000]]];//更改图片
}

SecViewController.h

#import <UIKit/UIKit.h>
@protocol passTag <NSObject>
//代理方法
-(void)passTag:(NSInteger)tagg;//传值给ViewController@end@interface SecViewController : UIViewController
//属性获取ViewController里的数组
@property(nonatomic,retain)NSArray *all;
//代理人
@property(nonatomic,assign)id<passTag>delegate;
@end

SecViewController.m

#import "SecViewController.h"#define WIDTH self.view.bounds.size.width
#define HEIGHT self.view.bounds.size.height
#define VIEWS self.view
@interface SecViewController () <UIScrollViewDelegate>
{UIButton *titleButton;UIScrollView *scr;UIImageView *sImage;UIPageControl *page;
}
@end@implementation SecViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.//准备titleButton = [UIButton buttonWithType:UIButtonTypeSystem];scr = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 48, WIDTH, HEIGHT)];NSInteger imageTag = 0;//标题按钮titleButton.frame = CGRectMake(0, 0, WIDTH, 55);titleButton.backgroundColor = [UIColor whiteColor];[titleButton setTitle:@"影集" forState:UIControlStateNormal];[titleButton addTarget:self action:@selector(backButton:) forControlEvents:UIControlEventTouchUpInside];//滚动图片scr.contentSize = CGSizeMake(WIDTH * 4, 0);scr.backgroundColor = [UIColor whiteColor];scr.bounces = YES;scr.pagingEnabled = YES;scr.delegate = self;for (NSInteger i = 0 ; i < 4; i++) {sImage = [[UIImageView alloc]initWithFrame:CGRectMake(i * WIDTH, 0, WIDTH, HEIGHT)];sImage.tag = imageTag++;[sImage setImage:[UIImage imageNamed:_all[i]]];NSLog(@"%@",_all[i]);[scr addSubview:sImage];}//边缘图片UIImageView *sImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(-WIDTH, 48, WIDTH, HEIGHT)];[sImage1 setImage:[UIImage imageNamed:_all[3]]];[scr addSubview:sImage1];UIImageView *sImage2 = [[UIImageView alloc]initWithFrame:CGRectMake(4 *WIDTH, 48, WIDTH, HEIGHT)];[sImage2 setImage:[UIImage imageNamed:_all[0]]];[scr addSubview:sImage2];//page点page =[[UIPageControl alloc]initWithFrame:CGRectMake(110, HEIGHT-38, 200, 20)];page.numberOfPages = 4;page.backgroundColor = [UIColor grayColor];page.layer.cornerRadius = 10;page.alpha = .83;[page addTarget:self action:@selector(pageClick:) forControlEvents:UIControlEventValueChanged];[VIEWS addSubview:scr];[VIEWS addSubview:titleButton];[VIEWS addSubview:page];}
//点击切换图片
-(void)pageClick:(UIPageControl *)page1{[scr setContentOffset:CGPointMake(page1.currentPage * WIDTH, 0) animated:YES];
}
//滑动快停止时
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//小圆点跟随视图移动page.currentPage = scrollView.contentOffset.x / WIDTH;//本类 执行代理方法 赋值[self.delegate passTag:(page.currentPage + 1000)];
}-(void)backButton:(UIButton *)button{//切回原页面[self dismissViewControllerAnimated:YES completion:nil];
}-(void)scrollViewDidScroll:(UIScrollView *)scrollView{//无限滚动if (scrollView.contentOffset.x < -30) {[scrollView setContentOffset:CGPointMake(4 * WIDTH, 0)];}if (scrollView.contentOffset.x > 3 * WIDTH + 30) {[scrollView setContentOffset:CGPointMake(0, 0)];}
}

大作阿..
后面还有网易新闻呢..
要各种开始模仿了

#Objective - C - UI-design - 第六天 -UIKit框架-UIScrollView-分屏相册练习(相册缩略图变为浏览到第几张)相关推荐

iOS UIKit框架注解
本文来自简书,原文地址:http://www.jianshu.com/p/e5b995ecf44d 导语我们追求技术的提升,关注技术的发展历程:作为从事技术工作的伐码猿,有个想法(仅是个人想法),这 ...
UIKit框架使用总结--看看你掌握了多少
一.经常使用的,基本就是每次项目迭代都需要使用的 UIView.UILabel.UIImage.UIColor.UIFont.UIImageView.UITextField.UIButton. UIS ...
UIKit框架各个类的简介
1.UIAcceleration: 被叫做加速事件的一个UIAcceleration类的实例是用来代表即时的三维加速数据.为了接收重力加速度,要注册一个应用应用程序作为一个共享UIAccelerate ...
UIKit 框架讲解
下面是UIKit 子类的具体说明 1.UIAcceleration: 被叫做加速事件的一个UIAcceleration类的实例是用来代表即时的三维加速数据.为了接收重力加速度,要注册一个应用应用程序作 ...
From UI design to system functions and application layer
From UI design to system functions and application layer, iOS 14 has huge changes that are different ...
向产品宣战——开发者眼中的Android UI Design
向产品宣战--开发者眼中的Android UI Design 准备了半个月,思考产品设计.交互设计,见证了公司的产品.UE和开发的撕逼,将自己的思考.感悟,整理成下文,谨代表广大程序猿,向设计狮.产品 ...
IOS开发学习---Fundation框架和UIKit框架
框架是一个目录,包含了共享资源库,用于访问该资源库中储存的代码的头文件,以及图像.声音文件等其他资源.共享资源库定义应用程序可以调用的函数和方法. iOS 提供了许多可在应用程序开发中使用的框架.要使 ...
网页UI设计基础之线框图设计（栅格建立、基础布局、分屏、文字排版）
线框图介绍概念线框图(Wireframe或Wireframing) 网站线框图是网站框架的草图,是网站设计师根据网页设计标准将客户需求图形化的一种展现形式. 例如: 特点作为一个视觉设计的起点, ...
Android 锁屏原理，锁屏框架与锁屏开发
Android框架浅析之锁屏(Keyguard)机制原理锁屏.状态栏.Launcher---姑且称之为"IDLE"小组,或许叫手机美容小组 1.分析锁屏界面的组成 : 2.基于源 ...