天天看點

iOS之UI--微網誌個人詳情頁

前言:微網誌個人詳情頁,和我常用的的qq空間的詳情頁是同樣的。要求能夠融會貫通,做這一類的界面能夠快速上手實作。

動态圖效果展示:

直接使用uinavigationbar->uitableviewcontroller,也就是不用通過協定,然後設定資料源datasource = self,delegate = self等。

iOS之UI--微網誌個人詳情頁

因為直接使用uitableviewcontroller有一定的局限性,是以使用靈活的控件組合,在uiviewcontroller中使用多個uiview,uiimageview以及uitableview,

它們直接的空間關系如下:

iOS之UI--微網誌個人詳情頁
iOS之UI--微網誌個人詳情頁

之後我自己從零開始通過uinavigationbar -> uiviewcontroller來實作,然後先僅僅實作了表面上的架構,為什麼說是表面的呢?因為下拉tableview的時候uiimageview還沒有動态的效果:

iOS之UI--微網誌個人詳情頁

接着,因為uitableview的父類是scrollview,是以一定有父類的方法,通過重寫父類的方法擷取拖拽偏移量:

然後通過拖線,将storyboard上的背景控件uiimageview對象的高度限制拖拽到控制器代碼中,擷取其高度限制對象:

iOS之UI--微網誌個人詳情頁

然後目前的效果圖是:

iOS之UI--微網誌個人詳情頁

将背景的填充模式改為:

iOS之UI--微網誌個人詳情頁

然後效果是:

iOS之UI--微網誌個人詳情頁

進一步設定了clipsubview屬性:

iOS之UI--微網誌個人詳情頁
iOS之UI--微網誌個人詳情頁

然後接着:

iOS之UI--微網誌個人詳情頁

最後接着設定導覽列文本内容:

iOS之UI--微網誌個人詳情頁
iOS之UI--微網誌個人詳情頁
iOS之UI--微網誌個人詳情頁

最後的效果就是:

iOS之UI--微網誌個人詳情頁

微網誌個人詳情頁(導航控制器注意點)

uitablview的頭部視圖的寬度,位置都是系統來決定的, 隻有高度是由我們自己來決定;

uiview *headerview = [[uiview alloc] initwithframe:cgrectmake(0, 0, 0, 200)];

headerview.backgroundcolor = [uicolor redcolor];

self.tableview.tableheaderview = headerview;

ios7之後,隻要是導航控制器下的所有uiscrollview頂部都會添加額外的滾動區域.

設定目前控制器不要調整scrollview的contentinsets

self.automaticallyadjustsscrollviewinsets = no;

設定導覽列隐藏

但是我們這裡導覽列隐藏不是直接隐藏的,而是有一個透明度, 根據滾到的位置,設定透明度的.

self.navigationcontroller.navigationbar.hidden = yes;

設定導覽列透明度為0

設定導覽列透明度為0,沒有效果,還是原來的樣子.

原因是因為導覽列上面那一塊并不直接是導覽列,它是導覽列裡面的一個子控件.

是以在這裡設定它沒有效果,因為系統會生成一個半透明的圖檔.

self.navigationcontroller.navigationbar.alpha = 0;

是以在這裡我們可以考慮給它設定一個半透明的圖檔.

在這裡,有一個模式,必須要傳預設uibarmetricsdefault模式.

在這裡發現設為nil的時候,也沒有效果,那是因為系統它做了一層判斷,

它會判斷如果傳入的系統圖檔為空的話,它就會幫你生成一個半透明的圖檔,設定導覽列的背景圖檔.

[self.navigationcontroller.navigationbar setbackgroundimage:nil forbarmetrics:uibarmetricsdefault];

那在這裡傳入一張空的圖檔,然後就有效果了.

[self.navigationcontroller.navigationbar setbackgroundimage:[[uiimage alloc] init] forbarmetrics:uibarmetricsdefault];

但是設定完後,發現有一根線,這根線其實是導覽列的一個陰影.直接把它清空就行了.

[self.navigationcontroller.navigationbar setshadowimage:[[uiimage alloc] init]];

===想法有些禁锢===

本篇"微網誌個人詳情頁"設定頭像的view用的額外添加的uiimageview并設定布局限制,然後設定uitableview的内邊距向下偏移頭像的高度。

而我的想法卻是下面截圖示意,也就是直接在uitableview上動手了:

iOS之UI--微網誌個人詳情頁

===使用uitableviewcontroller關于header和footer的的兩個細節:===

iOS之UI--微網誌個人詳情頁
iOS之UI--微網誌個人詳情頁

但是:

iOS之UI--微網誌個人詳情頁

注釋去掉就沒事了。

繼續閱讀