微博個(gè)人詳情頁(yè)
一规哲、前言
- 個(gè)人詳情頁(yè)效果，是模仿現(xiàn)在主流的微博個(gè)人詳情主頁(yè)界面烫饼。
- 效果如圖：
二、界面布局分析
- 因?yàn)榭吹接袑?dǎo)航欄试读，所以分析出此視圖是有一個(gè)導(dǎo)航控制器杠纵。
- 頭視圖添加在tableView上還是作為單個(gè)的view？
分析1:因?yàn)轭^視圖在向上移動(dòng)的時(shí)候不存在懸停的效果钩骇，所以頭視圖不是tableView的組頭比藻。
分析2:在tableView向下移動(dòng)的時(shí)候頭視圖不會(huì)跟著向下移動(dòng)說明頭視圖不是表頭。
綜上分析設(shè)計(jì)布局:說明頭視圖是作為一個(gè)View添加在控制器上倘屹，所以可以設(shè)計(jì)布局银亲，頭視圖和選項(xiàng)視圖可以是兩個(gè)view，頭視圖的view 上添加一個(gè)imageView作為卡片標(biāo)簽纽匙，在卡片標(biāo)簽上在添加一個(gè)imageView用來顯示用戶的頭像圖片务蝠。
實(shí)現(xiàn)思路分析:由效果可以看出，頭視圖的高是隨著tableView的上下移動(dòng)改變而改變的哄辣。所以頭視圖的高要?jiǎng)討B(tài)改變请梢。這里我們改變約束的辦法動(dòng)態(tài)改變頭視圖的高度。
界面細(xì)節(jié):要先設(shè)置tableView的頂部?jī)?nèi)邊距力穗。使tableView的頂部與選項(xiàng)圖的底部對(duì)齊毅弧。
//設(shè)置tableView的內(nèi)邊距
self.tableView.contentInset = UIEdgeInsetsMake(TableViewContentTop, 0, 0, 0);
- 當(dāng)設(shè)置了tableView的頂部?jī)?nèi)邊距與選項(xiàng)視圖的底部對(duì)齊的時(shí)候，系統(tǒng)默認(rèn)會(huì)添加額外的滾動(dòng)區(qū)域当窗。所以要關(guān)閉滾動(dòng)的區(qū)域够坐。
//不需要添加額外的滾動(dòng)區(qū)域 設(shè)置控制器的屬性
self.automaticallyAdjustsScrollViewInsets = NO;
- 在tableView的代理方法ScrollViewDidScroll中實(shí)現(xiàn)此邏輯
//計(jì)算上下拖動(dòng)的距離
CGFloat delta = self.lastContentOffsetY - scrollView.contentOffset.y;
CGFloat height = headH + delta;
//判斷是否達(dá)到了最小高度
if (height < headMinH) {
height = headMinH;
}
//給headView的高度約束重新賦值
_headConstrsint.constant = height;
//設(shè)置透明度
CGFloat alpha = delta/(headMinH - headH);
if (alpha >= 1) {
alpha = 0.99;
}
self.nameLabel.alpha = alpha;
//定義根據(jù)color去初始化一個(gè)圖片 調(diào)用分類方法根據(jù)顏色生成圖片
UIImage *image = [UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha] ];
//重新設(shè)置導(dǎo)航欄的背景圖片
[self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
