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

来源：互联网发布：说说大数据的来源编辑：程序博客网时间：2024/04/29 10:16

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.subviewsobjectAtIndex: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;//获取点击按钮的tag    NSArray *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)];    }}

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

1 0