一個方法搞定iOS下拉放大及上推縮小_IOS

來源:互聯網
上載者:User

下面這種效果在ios應用中很常見:

實現思路:

1、建立頭部的視圖和tableview,需要注意的是tableview要設定contentInset,contentInsent 的頂部要和頭部視圖的背景圖的高度一樣,否則會有空隙(或是有遮擋)。

myTableView.contentInset = UIEdgeInsetsMake(headRect.size.height-navHeight-navHeight, 0, 0, 0);

2、對頭部視圖的背景圖片的尺寸進行處理,當然,你也可以直接找一個適合尺寸的圖片,就不用處理圖片了,為了增加程式的擴充性,我就隨便選了張圖,並進行圖片尺寸處理。

 UIImage * image = [UIImage imageNamed:name]; UIImage * newImg = [self image:image byScalingToSize:self.bounds.size]; backgroundView.image = newImg; backgroundView.clipsToBounds = YES;//切掉圖片多餘的部分
//處理圖片方法- (UIImage *)image:(UIImage*)image byScalingToSize:(CGSize)targetSize {  UIImage *sourceImage = image;  UIImage *newImage = nil;  UIGraphicsBeginImageContext(targetSize);  CGRect thumbnailRect = CGRectZero;  thumbnailRect.origin = CGPointZero;  thumbnailRect.size.width = targetSize.width;  thumbnailRect.size.height = targetSize.height;  [sourceImage drawInRect:thumbnailRect];  newImage = UIGraphicsGetImageFromCurrentImageContext();  UIGraphicsEndImageContext();  return newImage ;}

3.搞定了這些,準備工作就完成了,接下來,一個方法實現我們的下拉放大、上推縮小的功能,當然,重點和痛點是邏輯,技術很easy。大家都知道UITableView是繼承UIScrollView的,利用UIScrollView的代理方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView;來實現。

下拉放大

在這個方法中,我們將功能分為兩部分,一個是下拉放大,這個是比較容易的,就是對頭部視圖的背景圖進行放大,調整frame,需要注意的是在此需要調整圖片的顯示方式,因為下拉和上推中圖片顯示的方式是不同的,否則即使你調整了frame,也不會按frame來顯示的。

 _myView.backgroundView.contentMode = UIViewContentModeScaleToFill; _myView.backgroundView.frame = CGRectMake(offset_Y*0.5 , -navHeight, VCWidth - offset_Y, headRect.size.height - offset_Y);

上推移動縮小

這個就比較難理解了,當然,我說的是中間對frame的演算法,我們將三個視圖分開說。

1.背景圖:先切換顯示模式,然後將y隨著tableview位移移動到0,高度也是隨著tableview位移,最終移動到需要的高度(Demo留的是44)

_myView.backgroundView.contentMode = UIViewContentModeTop;_myView.backgroundView.frame = CGRectMake(0 ,navHeight* offset_Y/(headRect.size.height-navHeight-navHeight)-navHeight; , VCWidth , headRect.size.height -(navHeight + navHeight* offset_Y/(headRect.size.height-navHeight-navHeight)-navHeight;) - offset_Y);

2.頭像:頭像需要隨著tableview的位移而移動自身的位置,並且還要進行縮小。這裡面就是一個線性方程的關係,和上面的的背景圖是一樣的。

CGFloat width = offset_Y*(40-(VCWidth / 4))/(headRect.size.height-navHeight-navHeight)+(VCWidth / 4);_myView.headView.frame =CGRectMake(0, 0, width,width);_myView.headView.layer.cornerRadius =width*0.5;_myView.headView.center = _myView.backgroundView.center;

3.簽名:簽名比較簡單,只要跟著頭像動就行,然後再根據位移調整自己的透明度就行了。

_myView.signLabel.frame =CGRectMake(0, CGRectGetMaxY(_myView.headView.frame), VCWidth, 40);_myView.signLabel.alpha = 1 - (offset_Y*3 / (headRect.size.height-navHeight-navHeight) /2);

好了,然後就大功告成了,裡的的邏輯挺麻煩的,但有初中的數學水平就夠了,因為都只是簡單的線性關係。希望本文給大家學習IOS開發有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.