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,来保证图片在变化的过程中可以保持比例。

  • 相关阅读:
    面试笔试题目集
    [vs2010]:fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "StdAfx.h"”?
    [数据库] SQLite常见问题解答
    安卓学习资料总结39
    Android 学习资料总结40
    python变量的定义和使用
    python运算符
    python的注释
    print输出函数
    python数据类型转换
  • 原文地址:https://www.cnblogs.com/ihojin/p/scale-image-in-scrollview.html
Copyright © 2011-2022 走看看