zoukankan      html  css  js  c++  java
  • IOS开发学习笔记033-UIScrollView

    1、滚动显示图片

    如果图片过大,则需要滚动显示,这是需要用到类UIScrollView,可是实现控件的水平和垂直滚动。

    可用三步实现:1 设置UIScrollView,2 设置UIImageView,3 设置UIScrollView的滚动 范围。

     1 - (void)viewDidLoad {
     2     [super viewDidLoad];
     3     // Do any additional setup after loading the view, typically from a nib.
     4     
     5     // 1、添加 scrollView,并设置可视范围
     6     UIScrollView *scrollView = [[UIScrollView alloc] init];
     7     scrollView.frame = CGRectMake(0, 0, 320, 480); // 可视范围
     8     scrollView.backgroundColor = [UIColor grayColor];
     9     [self.view addSubview:scrollView];
    10     
    11     // 2、添加imageView
    12     UIImageView *imageView = [[UIImageView alloc] init];
    13     imageView.image = [UIImage imageNamed:@"1.jpg"];
    14     CGSize imageSize = imageView.image.size;
    15     imageView.frame = CGRectMake(0, 0, imageSize.width, imageSize.height);
    16     
    17     [scrollView addSubview:imageView];
    18     
    19     
    20     // 3、设置滚动范围
    21     scrollView.contentSize = imageView.image.size;
    22 }

    2、其他属性设置

    1     // 其他属性
    2     // 是否显示滚动条
    3     //scrollView.showsHorizontalScrollIndicator = NO;
    4     // 弹簧效果
    5     //scrollView.bounces = NO;
    6     // 额外显示区域 top left bottom right
    7     //scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
    8     

    3、移动图片

     添加四个按钮表示上下左右,通过按钮的tag来区分按钮。这里是使用3.5存得屏幕,分辨率大小固定,所以暂使用320*480。

    给按钮绑定事件,然后实现方法如下:

     1 // 上下左右移动
     2 - (IBAction)allBtn:(UIButton *)sender
     3 {
     4     [UIView animateWithDuration:1.0 animations:^{
     5         NSInteger btnTag = sender.tag;
     6         CGPoint point = _scrollView.contentOffset;
     7 
     8         switch (btnTag) {
     9             case 1: //
    10                 point.y -= 50;
    11                 if (point.y < 0) {
    12                     point.y = 0;
    13                 }
    14                 break;
    15             case 2: //
    16                 point.y += 50;
    17                 if(point.y > 320)
    18                 {
    19                     point.y = 320;
    20                 }
    21                 break;
    22             case 3: //
    23                 point.x -= 50;
    24                 if(point.x < 0)
    25                 {
    26                     point.x = 0;
    27                 }
    28 
    29                 break;
    30             case 4: //
    31                 point.x += 50;
    32                 if(point.x > 480)
    33                 {
    34                     point.x = 480;
    35                 }
    36                 break;
    37             default:
    38                 break;
    39         }
    40         
    41         _scrollView.contentOffset = point;
    42 
    43     }];
    44 }

    4、缩放图片

    缩放图片简单流程:

    1、设置代理 delegate

    2、遵守协议 UIScrollViewDelegate

    3、设置缩放比例 minimumZoomScale,maxmumZoomScale

    4、实现缩放方法 viewForZoomingInScrollView

      4、1、设置代理 delegate

    1     _scrollView.delegate = self; // 指向控制器

      4、2、遵守协议 UIScrollViewDelegate

    1 @interface ViewController () <UIScrollViewDelegate> // 遵守协议
    2 
    3 {
    4     UIScrollView *_scrollView;
    5     UIImageView *_imageView;
    6 }
    7 @end

      4、3、设置缩放比例 minimumZoomScale,maxmumZoomScale

    1     // 设置缩放比例
    2     scrollView.maximumZoomScale = 2.0;
    3     scrollView.minimumZoomScale = 0.2;

      4、4、实现缩放方法 viewForZoomingInScrollView 

    1 // 图片缩放,代理方法
    2 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
    3 {
    4     return _imageView; // 返回缩放对象
    5 }

    代码

      1 //
      2 //  ViewController.m
      3 //  UIScrolleView-大图片
      4 //
      5 //  Created by Christian on 15/5/26.
      6 //  Copyright (c) 2015年 slq. All rights reserved.
      7 //
      8 
      9 #import "ViewController.h"
     10 
     11 @interface ViewController () <UIScrollViewDelegate>
     12 
     13 {
     14     UIScrollView *_scrollView;
     15     UIImageView *_imageView;
     16 }
     17 @end
     18 
     19 @implementation ViewController
     20 
     21 - (void)viewDidLoad {
     22     [super viewDidLoad];
     23     // Do any additional setup after loading the view, typically from a nib.
     24     
     25     // 1、添加 scrollView,并设置可视范围
     26     UIScrollView *scrollView = [[UIScrollView alloc] init];
     27     //scrollView.frame = CGRectMake(0, 0, 250, 250); // 可视范围
     28     scrollView.frame = self.view.bounds;
     29     scrollView.backgroundColor = [UIColor grayColor];
     30     [self.view addSubview:scrollView];
     31     
     32     // 2、添加imageView
     33     UIImage *image = [UIImage imageNamed:@"1.jpg"];
     34     _imageView= [[UIImageView alloc] initWithImage:image];
     35 //    CGSize imageSize = imageView.image.size;
     36 //    imageView.frame = CGRectMake(0, 0, imageSize.width, imageSize.height);
     37 //    
     38     [scrollView addSubview:_imageView];
     39     
     40     
     41     // 3、设置滚动范围
     42     scrollView.contentSize = _imageView.image.size;
     43    
     44     // 其他属性
     45     // 是否显示滚动条
     46     //scrollView.showsHorizontalScrollIndicator = NO;
     47     // 弹簧效果
     48     //scrollView.bounces = NO;
     49     // 额外显示区域 top left bottom right
     50     //scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
     51     
     52     // 获得当前显示区域位于图片的位置,左上角坐标
     53 //    scrollView.contentOffset = CGPointEqualToPoint(0, 0);
     54     _scrollView = scrollView;
     55     
     56     
     57     // 缩放图片,要遵守协议 UIScrollViewDelegate
     58     _scrollView.delegate = self;
     59     // 设置缩放比例
     60     scrollView.maximumZoomScale = 2.0;
     61     scrollView.minimumZoomScale = 0.2;
     62 }
     63 
     64 // 上下左右移动
     65 - (IBAction)allBtn:(UIButton *)sender
     66 {
     67     [UIView animateWithDuration:1.0 animations:^{
     68         NSInteger btnTag = sender.tag;
     69         CGPoint point = _scrollView.contentOffset;
     70 
     71         switch (btnTag) {
     72             case 1: //
     73                 point.y -= 50;
     74                 if (point.y < 0) {
     75                     point.y = 0;
     76                 }
     77                 break;
     78             case 2: //
     79                 point.y += 50;
     80                 if(point.y > 320)
     81                 {
     82                     point.y = 320;
     83                 }
     84                 break;
     85             case 3: //
     86                 point.x -= 50;
     87                 if(point.x < 0)
     88                 {
     89                     point.x = 0;
     90                 }
     91 
     92                 break;
     93             case 4: //
     94                 point.x += 50;
     95                 if(point.x > 480)
     96                 {
     97                     point.x = 480;
     98                 }
     99                 break;
    100             default:
    101                 break;
    102         }
    103         
    104         _scrollView.contentOffset = point;
    105 
    106     }];
    107 }
    108 // 图片缩放,代理方法
    109 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
    110 {
    111     return _imageView;
    112 }
    113 
    114 @end

    源代码: http://pan.baidu.com/s/1o6FXo4E

    5、分页

      5、1、少量图片展示

    如图所示,少量图片的分页,可以使用以上方式,直接创建一个scrollView和多个imageView。按照顺序将iamgeView添加到scrollView,每次滚动时只需改变scrollView的contentOffset属性就可以显示不同的图片.

    可再viewDidLoad中添加如下代码,有5张图片用来显示

     1     CGFloat w = _scrollView.frame.size.width;
     2     CGFloat h = _scrollView.frame.size.height;
     3     for (int i = 0; i < kCount; i ++)
     4     {
     5         UIImageView *imageView = [[UIImageView alloc] init];
     6         // 1、按照顺序添加图片,y值相同,x值递增
     7         imageView.frame = CGRectMake(i * w, 0, w, h);
     8         
     9         NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i+1];
    10         imageView.image = [UIImage imageNamed:imageName];
    11         
    12         [_scrollView addSubview:imageView];
    13     
    14     }
    15     // 隐藏水平滚动条
    16     _scrollView.showsHorizontalScrollIndicator = NO;
    17     // 2、启用分页
    18     _scrollView.pagingEnabled = YES;
    19     // 3、设置滚动范围,宽高
    20     _scrollView.contentSize = CGSizeMake(kCount * w, 0);

    6、UIPageControl控件

    左右滑动,会显示当前页的位置,使用方式如下:

     1     // page control控件
     2     // 1、初始化一个pageControl
     3     _pageControl = [[UIPageControl alloc] init];
     4     // 2、设置frame
     5     _pageControl.center = CGPointMake(w * 0.5, h - 20);
     6     _pageControl.bounds = CGRectMake(0, 0, 150, 50);
     7     // 3、设置页数
     8     _pageControl.numberOfPages = kCount;
     9     // 4、设置选中页的颜色
    10     _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    11     // 5、关闭点击小按钮附近的翻页功能
    12     _pageControl.enabled = NO;
    13     // 6、代理方法中实现滚动页码的改变
    14 
    15     // 7、添加到view
    16     [self.view addSubview:_pageControl];

    代理方法中实现定位到当前页

    1 // 正在滚动时调用
    2 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    3 {
    4   
    5     int page  = scrollView.contentOffset.x / scrollView.frame.size.width;
    6     //NSLog(@"scrolling:%d",page);
    7     // 6、设置当前页码
    8     _pageControl.currentPage = page;
    9 }

    7、键盘处理

     新建几个text field 控件,可以设置控件的属性keyboard type 为所需类型

     1 - (IBAction)exitKeyboard
     2 {
     3     // 方法1:谁调出键盘,谁负责退出键盘,比较麻烦,需要各自退出
     4     //[_nameText resignFirstResponder];
     5     
     6     
     7     // 方法2:退出所有view的子控件的键盘
     8     [self.view endEditing:YES];
     9     
    10 }

    推荐使用方法2

    给键盘添加一个ToolBar,其中toolBar通过xib文件创建

     1 - (void)viewDidLoad
     2 {
     3     [super viewDidLoad];
     4     // Do any additional setup after loading the view, typically from a nib.
     5     
     6     UIToolbar *toolbar = [[NSBundle mainBundle] loadNibNamed:@"keyboard" owner:nil options:nil][0];
     7     // 将toolbar显示到键盘顶部
     8     _nameText.inputAccessoryView = toolbar;
     9     _phoneText.inputAccessoryView = toolbar;
    10     _birthdayText.inputAccessoryView = toolbar;
    11     _addressText.inputAccessoryView = toolbar;
    12 }

     8、MVC模式

    主要三者之间的关系:控制器负责通信,控制器可以访问模型,模型不可访问控制器。视图可以访问控制器,控制器也可以访问视图。视图和模型之间不存在访问关系。

  • 相关阅读:
    在 idea 下搭建的第一个MyBatis项目及增删改查用法
    解决idea中Tomcat服务器日志乱码及控制台输出乱码
    idea 设置自动生成方法的快捷键 类似于main() 方法
    windows下Tomcat根据日期生成日志catalina.out
    springmvc <from:from>标签的使用
    Spring+Quartz集群环境搭建
    Quartz整合Spring
    Quartz 基本编码
    java中 线程池和 callable 创建线程的使用
    SpringSecurity权限管理框架--基于springBoot实现授权功能
  • 原文地址:https://www.cnblogs.com/songliquan/p/4529962.html
Copyright © 2011-2022 走看看