zoukankan      html  css  js  c++  java
  • UITableView 顶部能够放大的图片

    UITableView 顶部能够放大的图片

    现在有挺多的应用在 UITableView 顶部加入图片,通过拖拽 UITableView 来实现图片的放大。

    对比一下腾讯出品的两款App

    QQ:可展示更多的图片,向下滑动TableView,顶部的图片可以展示更多的内容,而不是局限于默认状态下可展示的默认大小。

      

    再来看看微信的朋友圈:固定的大小,向下拖动TableView后,顶部露出了背景图片。

      

    两种实现方式,各有各的好处。微信的效果是默认的,即什么都不用设置。这种状态下,我们可以在背景图上做文章,加个Logo之类的都可以。

    QQ的实现方式是我比较喜欢的,对于不需要下拉刷新的页面,又不想分配太大的空间来显示顶部图片,则可以选择这种。想要看大图?只要下拉TableView即可。^_^

    如何开始

    设置一个 UIImageView 为 UITableView 的 tableHeaderView,设置 UITableView 的 UIScrollViewDelegate

     table.delegate = self;

    在 .m 文件中加入如下代码,在 TableView 滚动时,动态改变 tableHeaderView 的状态。

    #pragma mark - UIScrollViewDelegate
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        CGPoint offset = scrollView.contentOffset;
        if (offset.y < 0) {
            CGRect rect = merchantImage.frame;
            rect.origin.y = offset.y;
            rect.size.height = 140 - offset.y;
            merchantImage.frame = rect;
        }
    }

    举一反三

    1.鉴于 UITableView 是 UIScrollView 的子类,添加在 UIScrollView 顶部的图片也能实现这个效果。

    2.对于添加在顶部的 UIImageView,可以设置它的 contentMode,来保证图片在变化的过程中可以保持比例。

  • 相关阅读:
    微软外服 AlI In One
    js 循环多次和循环一次的时间的性能对比 All In One
    vue inject All In One
    Excel 表格数据倒置 All In One
    SVG tickets All In One
    OH MY ZSH All In One
    js array for loop performance compare All In One
    mac terminal show You have new mail All In one
    新闻视频 26 制作母版页
    转自牛腩 母版页和相对路径
  • 原文地址:https://www.cnblogs.com/ihojin/p/scale-image-in-scrollview.html
Copyright © 2011-2022 走看看