zoukankan      html  css  js  c++  java
  • iOS UI开发--下拉放大

    1. 要实现的效果,左图为下拉前,右图为下拉后

     

    2.首先最容易想到的是往tableHeaderView上,放一张图片.

       但是tableHeaderView的宽度是固定的,这就意味着不容易做缩放效果;

     顶部的上边界始终和tableView的上边界挨着,这就意味着下拉前只显示部分图片的效果,不容易实现.

    3.最终方案:给tableView添加一张图片作为子视图, 并且图片应该在cell的下面,一开始图片只显示一部分

    4. 示例代码

      4.1 在ViewDidload方法中:  

        UIImage *a = [UIImage imageNamed:@"Image"] 

        UIImageView *imageV = [[UIImageView alloc] init];

        [imageV setImage:[UIImage imageNamed:@"Image.jpg"]];

      4.2 设置图片的frame

      imageV.frame = CGRectMake(0, -150, 320, 300); // 300是随便设的,y的数值设为300的一半,方便计算

      [self.tableView addSubview:imageV]; // 先尝试addSubView

      4.3 现在图片是把cell遮挡,可以设置tableView的contentInset: 左图是设置contentInset之前,右图是设置之后

      self.tableView.contentInset = UIEdgeInsetsMake(150, 0, 0, 0);

      4.4 为了让图片开始时,只露部分,就要改图片的Y值,至此就实现了下拉不缩放的效果,见右图

      imageV.frame = CGRectMake(0, -300, 320, 300);

      

      4.5 要舰艇tableView的滚动,用scrollView的代理方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView;

        第1种思路: 1>在代理方法内,算出滚动的距离

              2>imageView的高=原高+滚动的距离

              3>根据新算出的高,由原来长宽比例算出图片的宽

              4>imageView的Y值不用算,但是要根据宽算出X值,算出的X值,要让图片水平居中显示

        总之很繁琐.

        第2种思路: 1>在代理方法内,算出滚动的距离

                2>imageView的高=原高+滚动的距离

                3>设置图片的内容模式,设置为 ScaleAspectFill = 缩放+ 等比例+ 填满

           imageV.contentMode = UIViewContentModeScaleAspectFill; //在ViewDidLoad里

         //在代理方法里: 

         float distance =  - self.tableView.contentOffset.y - 150; 

             self.imageV.height = 300 + distance  ;

       4.6 修复往上拉时,图片下边界和cell之间产生距离的问题

         float distance =  - self.tableView.contentOffset.y - 150;

         if (distance < 0) return ; 

             self.imageV.height = 300 + distance  ;

       4.7 修复往下拉,图片放大时,会遮挡cell的问题

           [self.tableView insertSubview:imageV atIndex:0];

        

  • 相关阅读:
    【原】独立小应用程序性能优化简化版,减少数据库访问次数,提高应用程序处理效率,缓存之 HttpRuntime.Cache
    【转】SQL索引一步到位
    C# Excel读取导入数据库碰到的问题
    VS2010SP1修复补丁&Microsoft Visual Studio 2010 Service Pack 1
    ImportError: No module named ‘MySQLdb'
    【转】(C#)OPC客户端源码
    【转】DCOM远程调用权限设置
    【转】OPC远程访问相关配置信息
    WPF之DataAnnotations 注解说明
    WPF中,输入完密码回车提交 ,回车触发按钮点击事件
  • 原文地址:https://www.cnblogs.com/oumygade/p/4285192.html
Copyright © 2011-2022 走看看