1. 程式人生 > >iOS 類似QQ空間表檢視下拉頭部檢視放大效果實現

iOS 類似QQ空間表檢視下拉頭部檢視放大效果實現

UITableView 是 UIScrollView 的子類。
所以 UIScrollView 的代理方法,在UITableView 上同樣能夠得到適用。
既然如此那麼我們就能夠知道,在表格下拉的過程中,需要讓頭部的圖片能夠有稍微放大的效果出現,我們可以根據滾動檢視滾動監聽事件,通過獲取表格下拉的拉伸量,從而去改變圖片的大小即可!

所以:

     /**
     *  關鍵處理:通過滾動檢視獲取到滾動偏移量從而去改變圖片的變化
     */

以下是效果實現的程式碼:

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate
>
@property(nonatomic,strong)UIImageView *headImageView;//頭部圖片 @property(nonatomic,strong)UITableView *tableView;//列表 @property(nonatomic,strong)NSMutableArray *infoArray;//資料來源陣列 @end //螢幕寬、高 巨集定義 #define IPHONE_W ([UIScreen mainScreen].bounds.size.width) #define IPHONE_H ([UIScreen mainScreen].bounds.size.height)
@implementation ViewController static CGFloat kImageOriginHight =300; - (void)viewDidLoad { [super viewDidLoad]; //將檢視新增到介面上 [self.view addSubview:self.tableView]; [self.tableView addSubview:self.headImageView]; } #pragma mark -- 滾動檢視的代理方法 - (void)scrollViewDidScroll:(UIScrollView
*)scrollView{ /** * 關鍵處理:通過滾動檢視獲取到滾動偏移量從而去改變圖片的變化 */ //獲取滾動檢視y值的偏移量 CGFloat yOffset = scrollView.contentOffset.y; NSLog(@"yOffset===%f",yOffset); CGFloat xOffset = (yOffset +kImageOriginHight)/2; if(yOffset < -kImageOriginHight) { CGRect f =self.headImageView.frame; f.origin.y= yOffset ; f.size.height= -yOffset; f.origin.x= xOffset; //int abs(int i); // 處理int型別的取絕對值 //double fabs(double i); //處理double型別的取絕對值 //float fabsf(float i); //處理float型別的取絕對值 f.size.width=IPHONE_W + fabs(xOffset)*2; self.headImageView.frame= f; } } #pragma mark -- 表檢視代理 -(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath{ return 44; } -(NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section{ return self.infoArray.count; } -(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath{ static NSString *identify [email protected]"MyCellIndifer"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identify]; if (!cell) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identify]; } cell.textLabel.text= [self.infoArray objectAtIndex:indexPath.row]; return cell; } #pragma mark -- get 初始化操作 -(UITableView *)tableView { if (_tableView == nil) { _tableView= [[UITableView alloc]initWithFrame:CGRectMake(0,0,IPHONE_W,IPHONE_H)]; _tableView.delegate=self; _tableView.dataSource=self; _tableView.backgroundColor= [UIColor lightGrayColor]; //內容由kImageOriginHight 處開始顯示。 _tableView.contentInset=UIEdgeInsetsMake(kImageOriginHight,0,0,0); } return _tableView; } -(NSMutableArray *)infoArray { if (_infoArray == nil) { _infoArray = [[NSMutableArray alloc]init]; for (int i=0; i<40; i++) { [_infoArray addObject:@"這是一個測試!"]; } } return _infoArray; } -(UIImageView *)headImageView { if (_headImageView == nil) { _headImageView= [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"111"]]; _headImageView.frame=CGRectMake(0, -kImageOriginHight,IPHONE_W,kImageOriginHight); } return _headImageView; }

效果圖顯示:
普通狀態 下拉效果

關於:
iOS 關於滾動檢視contentSize、contentOffset、contentInset 設定以及用法,可以到此檢視 滾動檢視contentSize、contentOffset、contentInset

相關推薦

iOS 類似QQ空間檢視頭部檢視放大效果實現

UITableView 是 UIScrollView 的子類。 所以 UIScrollView 的代理方法,在UITableView 上同樣能夠得到適用。 既然如此那麼我們就能夠知道,在表格下拉的過程中,需要讓頭部的圖片能夠有稍微放大的效果出現,我們可以根據

iOS 類似美團外賣 app 兩個 tableView 聯動效果實現

來源:劉光軍_ 連結:http://www.jianshu.com/p/c118a29887ca 寫在前面 首先宣告哈,不是廣告,我就是用的時候覺得這個功能比較好玩,就想著實現了一下。效果如圖: 接下來簡單的說一下思路吧~ 大體思路

【已解決】如何做excel框多選

最近因為專案需求,要製作一個excel匯入的模板,模板中要求某幾列的下拉框是多選的。。不得不臨時研究了一下vba。其間各種心酸不多說。。。。。。 首先,這個是需要啟用巨集,在vb編輯器裡寫程式碼,所以你要確保你的excel是可以啟用巨集的。如果是正式版的office是可以直接用(破解版就不知道了

類似qq空間預覽圖片外掛

首次接觸面向物件程式設計,寫了一個類似qq空間預覽相簿的圖片小東西,沒什麼難點,程式碼有點low,見笑了,程式碼如下   只是用於記錄學習,實用性可能不是太強 //例項化相簿 的物件     &n

類似百度搜索框的實現

從百度截圖如下:要實現的功能與該圖類似,只不過沒有詳細優化樣式。哈哈,大家不要介意。(還有我的這個功能用的是百度的介面)我用了兩種方式來實現這個功能,一種是原生的js方式,一種是jQuery的方式。可以對比。1、用原生方式實現。<!DOCTYPE html> &l

新手自定義控制元件,建立屬於自己的重新整理(一)---Android,ListView實現IOS的彈性效果

前言 相信很多童鞋對於控制元件的下拉重新整理都比較熟悉吧,常用的PullToRefresh開源庫和Google自帶的SwipeRefreshLayout大家肯定也很熟悉吧,但作為一個Android開發新手,對於自定義控制元件和自定義View來實現一些效果肯定還

Android使用ViewPager、PhotoView實現類似QQ空間圖片瀏覽功能

最近的專案中需要用到類似QQ空間那樣的圖片瀏覽功能,於是Google了一波,發現使用ViewPager與PhotoView即可實現。有了思路便開擼了。 首先,我們定義一個用於展示原圖的Activity。 public class ImageBrows

為引數資料集中的空值新增中文描述

需求描述 潤乾的下拉資料集可以繫結資料庫資料,方便使用者選擇,避免手動輸入可能引起的誤差。 用下拉資料集來實現引數下拉表單,將查詢條件傳遞給結果報表進行計算。有時查詢條件可能不需要選擇或者保持為空值,這時可以使用下拉資料集中的允許空值選項,如下圖:   這時原有的下拉列表就變為   相比原來的選擇項多

自定義ScrollView 實現的回彈效果--並且子控件中有Viewpager的情況

是否 AS abs pri tar utils lda animation ted onInterceptTouchEvent就是對子控件中Viewpager的處理:左右滑動應該讓viewpager消費 1 public class MyScrollView ext

帶輸入查詢功能匹配框的幾種實現方式

sae idt hwnd 就會 bfd bmgr 使用方法 oaf adt 在Web開發中我們經常需要用戶進行輸入操作,輸入框內我們輸入幾個字,輸入框就會出現下拉提示你可能要輸入的完整信息。下面我總結了幾種常見的方案: 一:EasyUi combobox 組合框 具體使用方

列表的過渡效果

控制 結構 ansi 效果 部分 進行 下拉 結合 設置 一些場合我們可能需要一些類似於如下下拉過渡的效果 實現方法這裏總結兩種 html結構 必須是這種結構,思路就是通過控制第二個盒子(在這兒是ul)的高度,實現上拉,下拉的效果,這兒只需要將<ul>設置為

另類實現 ScrollView 頭部放大

一、前言 前兩天接到一個在列表下拉時頭部放大的需求,也就是這樣的效果: 二、思路 查了查資料,這樣的效果一般都是通過自定義 ScrollView 來實現,不過我總覺得這樣挺麻煩的,需要去修改原來的 XML 檔案,而且侷限性也挺大,需要縮放的控制元件必須放在第一個,在看了別人實現

JavaScript----框二級聯動效果

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>  

微信小程式上重新整理和載入2種方法實現

微信小程式上拉重新整理和下拉載入2種方法實現,onPullDownRefresh,scroll-view使用 一、XXX.json開啟下拉重新整理 {    "enablePullDownRefresh": true }   二、XXX.js onP

Android中ListView重新整理上載入更多效果實現

  在Android開發中,下拉重新整理和上拉載入更多在很多app中都會有用到,下面就是具體的實現的方法。 首先,我們自定義一個RefreshListView來繼承與ListView,下面是程式碼: package com.example.downrefresh; import

Android重寫ScrollView實現回彈,頭部放大功能

效果圖: 自定義ScrollView: public class MyScrollView extends ScrollView { //----頭部收縮屬性-------- // 記錄首次按下位置 private float mFirstPositi

select 列表選擇框效果及美化(before 和 after偽元素的妙用)

color dem cti relative ccs ota otto center round 參考博客:https://github.com/chokcoco http://www.cnblogs.com/libin-1/p/5766

select 列表選擇框效果及美化(before 和 after偽元素的妙用)

參考部落格:https://github.com/chokcoco http://www.cnblogs.com/libin-1/p/5766729.html http://www.cnblogs.com/coco1s/p/5667853.html http://sbco.cc/magicCss/

layui框複選框實現

html: <div class="layui-input-inline" style="width:100px;"> <select name="Field" lay-filter="Field" placeholder="選擇" multiple="multiple" cl

easyui-combotree實現樹形結構的控制元件,並實現節點回顯

專案開發,臨時的一個需求,將8000條資料整成樹形機構的下拉控制元件,網上找了資料,可以使用easyUI的combotree實現 看了官網資料,combotree需要的資料必須是json資料,json的key為 id,text,children,用的是jsonarray生成