uitableview 弹性_iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo...
今天修改日期為2017年11月25日
兩個月前做了iOS11的bug修復,才對博客進行更新,見諒。
在iOS11上需要注意兩個問題
1.使用UIScrollview,UITableView,UIWebView等滾動UI控件的頁面造成的頁面錯位,會上面空白20像素(不用iPhoneX做適配情況下)
解決:
//防止頂端留出狀態(tài)欄高度空白
if (@available(iOS 11.0, *)) {
_tableView.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever;
}else{
self.automaticallyAdjustsScrollViewInsets=NO;
}
(2)滾動的頭部內(nèi)部self.iconImageView 部分 要賦值指定的大小,不能使用約束。
在iOS11上使用約束再來回拉伸頭圖表現(xiàn)水土不服的bug(具體可以描述為 拉伸過程會出現(xiàn)到某個位置卡頓,或者 或者整體拉伸位置錯位,或者還是會出現(xiàn)白條)。當然你沒有這個問題最好
解決:
#pragma mark - private
- (void)configSubViews
{
[self addSubview:self.iconImageView];
self.iconImageView.frame= self.frame;//這里不使用約束 iOS11以后有 拉伸時候適配bug//[self.iconImageView mas_makeConstraints:^(MASConstraintMaker *make) {//make.edges.equalTo(self);//}];
}
獻上demo,可以在github上給我點個星星最好 ?
========華麗分割線========
歷史:
接著上一篇來講 頭圖在向下的滾動拉伸時候有一個放大的效果, 這里就講講具體的實現(xiàn)過程.
理解起來也很簡單,肯定就是監(jiān)聽了滾動過程,然后 判斷滾動位移的相對位置是否滿足,滿足則需要拉伸處理.
這里的拉伸 一般都是相對圖片的等比拉伸,不能讓圖片比例失調(diào).
監(jiān)聽方法就是
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
首先
這個頭圖headerView 和 self.tableView的關(guān)系
1 可以是 addSubView的關(guān)系
2 可以是 setTableViewHead 的關(guān)系
區(qū)別 不大 ? 1 適合 設(shè)計復雜 已經(jīng)有了setTableViewHeaderView ? 2 ?適合經(jīng)典設(shè)計 "headerView + tableView"
(1)設(shè)置 這個headerView 高度為 ImageViewHeight為常亮 比如 200
(2)如果是 關(guān)系1
設(shè)置 ?self.tableView.contentInset = UIEdgeInsetsMake(ImageViewHeight, 0, 0, 0); 當 addSubView時候 正好headView在位置從0開始 高度為?ImageViewHeight的位置.
如果是 關(guān)系2
直接設(shè)置 ?[self.tableView setTableHeaderView:headerView];
(3)需要設(shè)置 headerImageView.contentMode = UIViewContentModeScaleAspectFill; //會保證圖片比例不變,但是是填充整個ImageView的
(4)監(jiān)聽處理
/**
* 做伸縮處理
*
* @param scrollView*/
#pragma mark - ScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//HF_TITLE_NAV_HEIGHT 64 ?是狀態(tài)欄 + 導航欄的高度
CGFloat yOffset = scrollView.contentOffset.y + HF_TITLE_NAV_HEIGHT;
//拉伸處理start
if (yOffset < 0 ){
float originHeight = ImageViewHeight;
float resizeScale = - (scrollView.contentOffset.y +HF_TITLE_NAV_HEIGHT)/originHeight;
float offset = - scrollView.contentOffset.y - HF_TITLE_NAV_HEIGHT;
CGRect frame = CGRectMake(0 - (SCREEN_WIDTH * resizeScale / 2),
- offset,
round(SCREEN_WIDTH + SCREEN_WIDTH * resizeScale),
round(originHeight + originHeight * resizeScale));
self.headImageView.frame = frame; //這個 UIImageView是headerView的子視圖,這樣拉伸時候才不會頂部出現(xiàn)位移空白
headerView.frame = CGRectMake(0, 0, SCREEN_WIDTH, frame.size.height);
}
//end
}
效果:
總結(jié)
以上是生活随笔為你收集整理的uitableview 弹性_iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python学生名片系统_python学
- 下一篇: unity3d 虚拟博物馆_基于Unit