iOS开发之视差滚动视图

首先声明一点,由于自己iOS开发经验有限,这里给下面将要实现的效果起名叫视差滚动视图,自己也不知道是否严谨,等以后有经验了,再来更新吧。

一、需求

  有的时候我们可能会有这样一种需求,在一个UITableView的上方放置一个View(为了下面实现方便,这里就叫TopView吧),想要实现的效果是,当滚动UITableView时,让TopView也一起向上滚动;当TopView滚动到一定位置时,不再继续滚动TopView,而只是滚动UITableView。

二、思路

  1、开始时的思路是这样的,因为TopView是需要滚动的,所以将TopView和UITableView添加到一个UIScrollView中,根据UIScrollView的contentOffset.y判断是否需要继续滚动,也即默认禁用UITableView的scrollEnabled属性,当UIScrollView的contentOffset.y达到一定值以后,禁用UIScrollView的scrollEnabled属性,启用UITableView的scrollEnabled属性。但是经过试验发现,这种做法总是会出现各种各样的问题,问题这里就不一一列举了,总之在一番折腾之后,最终抛弃了这种思路。

  2、既然把它俩添加到一个父控件UIScrollView中是不可行的,那就只能从UITableView本身去分析了。如果想要UITableView滚动的同时,cell一直处于UITableView的视图上而没有被卸载存入缓存池中,那是否可以通过设置UITableView的contentInset属性来实现呢?也就是像这样:

  这样的话,如果再在cell的上方放置一个TopView,在cell滚动的同时改变TopView的y值使之同步上移,也就造成了一种假象:UITableView和TopView一起向上滚动,但是实际上只是cell和TopView一起滚动。也就是像这样:

三、实现

  所以最终可以理解为这样:

  那么在UITableView滚动的同时,TopView需要上移多少呢?也即怎么保证他们是同步的呢?那就需要计算cell上移了多少,cell上移多少,TopView也就跟着上移多少,这样不就可以严格同步了么?用UITableView最初的偏移量减去当前的偏移量,就得到了cell上移了多少。也就是像这样:

  当UITableView的偏移量为0时,也即意味着TopView不再需要上移了,如果此时再继续滚动的话,cell就会因为超出UITableView的视图边界而被卸载存入到缓存池中,这就会造成一种假象:TopView不再滚动了,但是UITableView还在滚动。

  所以最终的效果就是这样的:

ps:可能这样的效果实现起来在各位看来并不是什么问题,但是真的是由于自己经验有限,所以还是将折腾的过程记录下来,作为一个归纳总结吧,不喜勿喷。

时间: 2024-10-11 12:00:42

iOS开发之视差滚动视图的相关文章

iOS开发——代码生成TabBar与视图切换详解

我在之前多篇博客中讲解了在不使用storyboard而使用nib文件的情况下,使用代码生成导航栏并进行跳转,具体可以参考<iOS开发--界面跳转与返回及视图类型详解><iOS纯代码实现界面建立.跳转.导航栏(无storyboard.无nib)(Objective-C)>.今天我来讲解下在使用nib搭建界面的情况下,用代码生成TabBar,并进行界面之间的跳转.代码示例已经上传至:https://github.com/chenyufeng1991/TabBarTest   . (1)

iOS开发——代码生成TabBar与视图切换具体解释

我在之前多篇博客中解说了在不使用storyboard而使用nib文件的情况下.使用代码生成导航栏并进行跳转,具体能够參考<iOS开发--界面跳转与返回及视图类型具体解释><iOS纯代码实现界面建立.跳转.导航栏(无storyboard.无nib)(Objective-C)>. 今天我来解说下在使用nib搭建界面的情况下,用代码生成TabBar,并进行界面之间的跳转.代码演示样例已经上传至:https://github.com/chenyufeng1991/TabBarTest  

iOS开发之多表视图滑动切换示例(仿&quot;头条&quot;客户端)

好长时间没为大家带来iOS开发干货的东西了,今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例.在Demo中对所需的组件进行的简单封装,在封装的组件中使用的是纯代码的形式,如果想要在项目中进行使用,稍微进行修改即可. 废话少说,先介绍一下功能点,下图是整个Demo的功能点,最上面左边的TabBarButtonItem是用来减少条目的,比如下图有三个按钮,点击减号会减少一个条目.右边的为增加一个条目.点击相应的按钮是切换到对应的表视图上,下方红色的是滑动的指示器,同时支持手势滑动.运行具体

iOS开发初探篇——表视图中的MVC运用

概述 本初探篇为本人学习iOS开发中的一个总结系列,为工作和业余学习中遇到的初级问题的一个初步探究.本文初探的内容是MVC设计模式在表视图中的应用.首先感谢博主KC写的精彩博文. 本文主要内容如下: 1.MVC基本介绍 2.MVC在表视图中的应用 3.总结 MVC基本介绍 MVC模式这个名词太熟悉,不过本人由于缺乏工程实践经验,对其理解目前还停留在理论的表面层次上.在iOS开发中MVC模式第一次在表视图设计中应用到,想借此机会对其有个初步的认识.MVC在表视图中的对号入座,目前的理解为如下图所示

iOS 开发之头部滚动展示视图(转)

// //  RootViewController.m //  头部滚动展示视图 //  头部滚动广告视图 #define SCREEN_SIZE [UIScreen mainScreen].bounds.size #define KImageCnt 5 #define KImage_H  250 #import "RootViewController.h" @interface RootViewController ()<UIScrollViewDelegate> @pr

iOS 开发之头部滚动展示视图

效果: // //  RootViewController.m //  头部滚动展示视图 // //  Created by 寒竹子 on 15/4/1. //  Copyright (c) 2015年 摩天居士. All rights reserved. //  头部滚动广告视图 #define SCREEN_SIZE [UIScreen mainScreen].bounds.size #define KImageCnt 5 #define KImage_H  250 #import "Roo

iOS开发之窗口和视图

视图就是应用程序的界面.视图可以使用nib文件实现,也可以使用代码创建.一个视图也是一个响应器(UIResponder的子类)这意味着一个视图可以与用户交互.因此,视图不只是用户可看到的界面,也是可以和用户交互的界面. 视图相关结构的名称.属性和功能 CGPoint   {x,y}  坐标信息  视图所在的坐标信息 CGSize     {width,height}   宽度和高度  视图所在的大小信息 CGRect    {origin,size}  CGPoint和CGSize的综合 视图所

Android 开发笔记___滚动视图__scroll view

1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" android:layout_width="match_parent" 4 android:l

iOS开发学习之#表视图#(2)添加行

继续上篇学到的删除行,有删除就有添加:添加行我们用 - (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation 其中(NSArray *)indexPaths用于识别表视图中得行,(UITableViewRowAnimation)animation用来指定动画 核心代码如下: //设置表单元的编辑风格 - (UITableViewCellEditi