美文网首页iOS学习征服iOS
UIScrollView - 大图移动

UIScrollView - 大图移动

作者: js_huh | 来源:发表于2017-08-28 22:35 被阅读77次

    效果图

    UIScrollView-大图移动.gif
    需求:
    1.实现大图可以移动
    2.点击按钮,实现移动图片
    思路:
    1. 拖入UIScrollView控件 --> UIImageView
    2. 设置contentSize,
      2.1 注意: 图片大小>UIScrollView的大小,就可以拖动
    3. 实现点击按钮,移动图片!
      3.1 设置contentOffSet属性就可以实现移动图片!
    4. 实现动画
      4.1 block动画
      4.2 UIScrollView自带动画

    代码

    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
    @property (weak, nonatomic) IBOutlet UIImageView *imgTest;
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // 重点: contentSize属性
        CGSize imgViewSize = self.imgTest.bounds.size;
        self.scrollView.contentSize = imgViewSize;
    
        //是否有,弹簧效果
        self.scrollView.bounces = NO;
        //是否滚动
        self.scrollView.scrollEnabled = YES;
        //是否显示水平/垂直滚动条
        self.scrollView.showsVerticalScrollIndicator = NO;
        self.scrollView.showsHorizontalScrollIndicator = NO;
    }
    
    
    /*
        重点: contentOffSet属性
        点击按钮,移动图片
     
        重点: 动画方式实现移动
        1. block动画
        2. UIScrollView自带的动画
     */
    - (IBAction)didOffSetBtn:(id)sender {
        CGPoint scrollOffset = self.scrollView.contentOffset;
        scrollOffset.x += 50;
        scrollOffset.y += 50;
        //没有动画效果
        //self.scrollView.contentOffset = scrollOffset;
        
        //block动画
        [UIView animateWithDuration:2.0 animations:^{
            self.scrollView.contentOffset = scrollOffset;
        }];
        
        //UIScrollView自带的动画
        //[self.scrollView setContentOffset:scrollOffset animated:YES];
        NSLog(@"scrollOffset = %@",NSStringFromCGPoint(scrollOffset));
    }
    
    

    相关文章

      网友评论

        本文标题:UIScrollView - 大图移动

        本文链接:https://www.haomeiwen.com/subject/ofourxtx.html