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生成