经验之谈—实现图片下拉放大的效果

  • 这里我们主要是用一下,如何能保持原来的图片的宽高比来轻松的实现放大的效果,主要的是UIViewContentModeScaleAspectFill这个起的效果:
  • 我们用tableView来展示这个效果吧

  • 我们这里并没有计算图片的宽高比,直接用UIViewContentModeScaleAspectFill来实现

#import "ViewController.h"
const CGFloat ZYTopViewH = 350;
@interface ViewController ()
@property(nonatomic,weak)UIImageView *topView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.tableView.contentInset = UIEdgeInsetsMake(ZYTopViewH * 0.5, 0, 0, 0);
    UIImageView *topView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"biaoqingdi"]];
    topView.frame = CGRectMake(0, -ZYTopViewH, 375, ZYTopViewH);

    topView.contentMode = UIViewContentModeScaleAspectFill;

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

    self.topView = topView;

}
  • 实现tableView的数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (cell == nil)
    {
       cell =  [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }

    cell.textLabel.text = [NSString stringWithFormat:@"test---%zd",indexPath.row];

    return cell;
}
  • 最后用scrollViewDidScroll来监听拖动事件
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offsetY = scrollView.contentOffset.y;

    CGFloat offsetH = -ZYTopViewH * 0.5 - offsetY;

    if (offsetH < 0) return;

    CGRect frame = self.topView.frame;
    frame.size.height = ZYTopViewH + offsetH;
    self.topView.frame = frame;

}

看一下效果:



这里主要是讲UIViewContentModeScaleAspectFill的作用,但是我觉得这个demo中也牵扯到一些东西,也顺便讲讲

  • 为什么将UIImageView采用
[self.tableView insertSubview:topView atIndex:0];

这种方式来添加,其实一开始我也是直接让UIImageView作为headerView的,但是作为headerView的话,就不能让图片一开始显示一部分在外面了,也不好控制

  • 然后偏移量等,就自然而然的想到了。多尝试,就多收获。。。。
时间: 2024-08-25 15:56:11

经验之谈—实现图片下拉放大的效果的相关文章

iOS开发-UITableView顶部图片下拉放大

关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollView的顶部图片也可以实现同样的效果,简单看一下实现的效果: 控制器中设置需要的属性变量: @property (strong,nonatomic) UITableView *tableView; @property (strong,nonatomic) NSArray *data; @proper

图片下拉放大

// ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UITableViewController @end // ViewController.m #import "ViewController.h" const CGFloat HMTopViewH = 350; // 设置图片高度 @interface ViewController () @property (nonatomic,

iOS:tableView表头下拉放大的效果

现在很多app设置了这样的效果,如何实现这一效果呢,其实只需要简单的两个方法,那么我们直接上代码 首先我们在storyBoard里拖一个tableView并设置Navigation,接下来我们在tableView中设置图片我是自己写了个方法然后在viewDidLoad中调用,也可以直接在viewDidLoad中设置 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 2

iOS下拉放大的效果

一,code // 创建UIImageView UIImageView* topView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"IMG_1483"]]; topView.frame = CGRectMake(0, -HGTopViewH, self.tableView.frame.size.width, HGTopViewH); // 设置模式,自动伸缩,全拼显示 topView.contentMode =

动画特效十:下拉放大

今天继续我们的动画之行.这一次讲解的动画效果,在很多app中都能见到,就是下拉放大图片的效果.先看看效果图. 注:UITableView中内容的展示,不是本节的重点,所以忽略不计. 一.动画分析: 1. 默认情况下,图片正常显示(没有被拉大),并且导航条是隐藏的. 2. 当往下拉动的时候,图片等比例放大,并且选项卡(Tab1 和 Tab2)的View也会跟着下来. 3. 当往上推的时候,当选项卡推到导航栏正下方的时候,图片完全消失,导航栏也完全出现,并且不允许再往上推. 二.方案设计: 1. 头

表格的下拉放大 ----------王朋

表格下拉放大的效果是: 创建TableView和ImageView,分别设置相关属性: _tableView=[[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain]; _tableView.delegate=self; _tableView.dataSource=self; [_tableView registerClass:[UITableViewCell class] forCellReu

android 滚动栏下拉反弹的效果(相似微信朋友圈)

微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源代码下载:点击 1.效果图 这部手机显示的分辨率有限,非常老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; im

android 滚动条下拉反弹的效果(类似微信朋友圈)

微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动条实现的.下拉,当松开时候,反弹至原来的位置.下拉时候能看到背景图片.那么这里简单介绍一下这种效果的实现. 本文源码下载:点击 1.效果图 这部手机显示的分辨率有限,很老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; imp

iOS 使用TableView实现下拉放大

第一步: 布置需要放大的TopView: 1. 创建TopView UIImageView *topView = [[UIImageView alloc] init]; 2. 设置图片 UIImage *image = [UIImage imageNamed:@"Big.jpg"]; topView.image = image; 3. 设置TopView的初始位置及内容模式 // 初始位置 topView.frame = CGRectMake(0, -TopViewH, ScreenW