前言
至于怎么使用Reveal分析App我就不多說了,帖子也是一大把, 但是前提是你的手機是越獄的, 不然也是白搭, 我的手機是6p, 買來就越獄, 沒升過級, 現(xiàn)在還真舍不得升級??, 廢話這么多, 開始吧
分析的這款是非常非常非常重量級, 也是大家經(jīng)常用的, 融合了所有的功能點的一款A(yù)pp, 那就是TB, 當(dāng)然了不可能分析所有頁面的, 只分析一些我們經(jīng)常用看到的頁面, 首頁啊, 寶貝詳情啊,購物車啊等等...
先看首頁的吧, No Picture, Say Mao Xian
確實,Window根控制器是一個TabBarController, tabBar的子控制器意識一個導(dǎo)航控制器, 現(xiàn)在的主流架構(gòu), tabBar+nav, 通常我們的做法是, nav的根控制器就是我們要顯示的控制器了, 而這款A(yù)pp的做法是根控制器是一個ToolBar控制器, 其他的控制器我還沒有看是不是這樣的結(jié)構(gòu), 我們稍后驗證, 是否全部的導(dǎo)航控制器的根控制器都是這個ToolBar控制器, 導(dǎo)航欄是自定義的, 原本的導(dǎo)航欄被隱藏了, 應(yīng)該就是上面那一塊NavBar了把, 雖然我在我寫項目的時候, 也是隱藏了系統(tǒng)的導(dǎo)航欄, 但沒有去看視圖層, 到底是是隱藏到哪里去了, 應(yīng)該就是這個樣子的吧(??, 猜測哈), 下面我們看看其他的TabBar的子控制器的視圖層
其他的三個也都看過了, 就不截圖了, 確實是nav的根控制器是toolBar, toolBar上然后才是顯示我們需要顯示的控制器
讓我們繼續(xù)回到主頁去分析
以前我模仿過百度糯米的主頁面, 當(dāng)時是用TableView寫的, 上面也有很多不規(guī)則的組件, 跟淘寶主頁面有點類似, 我也是自定義每一個組件, 但并沒有放在Cell里, 把所有組件裝在一起, 成一個控制器, 作為頭部視圖這么做的, 后來看到糯米的商品排列可以切換的, 由橫條變?yōu)榉綁K, 此時才知道, 用tableView實現(xiàn)這個效果, 有點復(fù)雜了, 用CollectionView正好, 切換一下布局就可以了(UICollectionView確實是一個強大的控件, 當(dāng)然也TableView復(fù)雜), 如果是你, 遇到這樣的頁面, 你會怎么布局呢, 可以評論, 我們一起探討??
當(dāng)你知道用什么樣的控件來布局整體的時候, 那下面就好做了, 定義多個不同的Cell, 來根據(jù)數(shù)據(jù)去顯示對應(yīng)的Cell即可, 當(dāng)然了,這中間的邏輯有多復(fù)雜, 自己實現(xiàn)以下就知道了, 牛的人說的就很輕松, 但是對于初學(xué)者而言, 還是要下一番功夫的
留心的人應(yīng)該會發(fā)現(xiàn)中間有的Cell的灰色, 輪播圖Cell與下面的那個很多個按鈕的Cell有一個灰色的Cell, 灰色的表示在視圖上沒有顯示的, 我猜想的是留著給中間間隔用的, 往下看, 與頭條之間也有一個間隔Cell, 也是沒有顯示的, 便利店一小時達(dá)上面的那個間隔是這個cell上面的, 并不是單獨的, 這個Cell是刷新數(shù)據(jù)后出來的, 動態(tài)顯示的, 其余的這些應(yīng)該是都會顯示的, 搶購的Cell上面就有一個間隔的Cell, 那個在左邊的呈現(xiàn)白色, 確實是顯示出來的, 能看的出來, 這些個Cell中間都有一個間隔Cell, 接著看下一屏幕
再往下拉, 就都是商品, 都是同一種商品的Cell了
整體下來應(yīng)該是自定義布局的, 每一個Cell單獨寫, 還是很容易的, 但是要放在這同一個頁面, 怎么去顯示, 這兒邏輯怎么判斷, 還需要花點時間琢磨一下, 不然硬著頭皮寫下去, 代碼也就肯定跟......一樣, 我相信這不是你想要的, 我一慣的做法, 用數(shù)據(jù)去顯示控件, 控制好數(shù)據(jù), 也就控制了頁面, 這個頁面, 返回了很多內(nèi)容, 當(dāng)然, 這么大的公司, 服務(wù)架構(gòu)一起返回的數(shù)據(jù)格式, 肯定是相當(dāng)易于組合成一個數(shù)組去顯示這個頁面, 但是在小公司, 后臺沒有那么強大的情況下, 還是需要移動端的人員, 去合理處理數(shù)據(jù)之后再顯示頁面
除了商品的Cell之外, 每一個Cell的上點擊某一個位置, 處理的事情, 都是各不相同的, 至于怎么封裝, 怎么樣優(yōu)雅的實現(xiàn)這里的內(nèi)容, 不在本篇的討論范圍之內(nèi)(因為我也不知道, 我也不會??)
里面的每一個控件是什么樣的視圖層次結(jié)構(gòu)就不多看了, 都是自定義的View, 當(dāng)然了, 我們在寫頁面的時候, 控件的多少, 要與整個頁面的邏輯息息相關(guān), 有人說, 控件越少越好, 這個間隔Cell也是完全可以放在每一個Cell里面的, 但是還是放在了外面, 單獨成行, 這樣更易于我們?nèi)ヅ渲? 空格大一點小一點, 改個數(shù)字就好了, 放在Cell里面可能就需要調(diào)布局了, 如果產(chǎn)品要把間隔調(diào)大一點, 情況可想而知
下面我們看看第二個頁面 *淘(不是屏蔽了, 我就是打的星號)
上面我已有圖
本以為就一個TabelView, 只是咋也沒想到, 打開視圖層后, 嚇?biāo)缹殞毩? 這么層, 我也不知道是用干嘛的, 長時間的迭代, 或許每一層都有不同的用處
整一個暫且就作為tableView吧, 兩種類型的Cell, 第二個Cell
本以為是cell嵌套一個TabeView來著, 不是的, 加的自定義的View在ContainerView上
第一種Cell就是類似朋友圈的那種布局了, 我也實現(xiàn)過, tabelViewCell嵌套的CollectionView, 但是它不是我想的那種
里面的View都是同一個類型的View, 我感覺這樣的實現(xiàn)起來應(yīng)該是蠻復(fù)雜的, 用CollectionView是有什么不好么?(這一點有點疑惑)
確實, 是我想的簡單了, 這里面的Cell不是兩種這么簡單
看上面有一個導(dǎo)航欄, 真是傻了, 我說下面的ScrollView干嘛的 來滾動切換TableView的, 但是視圖層還是挺深的(尷尬!),上面有動態(tài), 上新, 視頻, 熱文等等多種樣式的(心好累, 這么深, 看的都想想??了....)
細(xì)細(xì)想來, 這個頁面確實不簡單
換個頁面, 看一下購物車的
下面的兩個一排,是一個Cell
點擊編輯之后
其他的Cell就不顯示了, 該怎么做?我覺得控制數(shù)據(jù)源顯示的行數(shù), 應(yīng)該是這個辦法吧
個人中心
很清晰能看到是用什么搭建的這個頁面
看看商品詳情的吧
scrollView里放TableView和一個自定義的圖片View
每一行, 每一個間隔都是一個Cell, 這個值得深思, 益處多多
當(dāng)往上拉 查看圖文詳情的時候, 我猜是用了自定義穿轉(zhuǎn)場了, 也有可能不是, 顯示的是用了一個WebView
點擊立即購買
只是沒想到這個View是加載TabBarView上的, 或許這樣更利于傳值, 解耦合吧
我的足跡 下拉就會出來
這個ScrollView上的顯示的ItemCell應(yīng)該是做了循環(huán)利用了, 最多只有5個Cell顯示出來, 即使我滑到了14個的時候
先看這些吧, 這里面的復(fù)雜度還是很大的, 邏輯結(jié)構(gòu)當(dāng)然是看不到, 從這些頁面的布局去推理為什么, 還是很值得去做的一件事情, 只身一人想完整的做出這一個項目, 那肯定要下很大的功夫, 也并非不可能的, 世上無難事只怕有心人!
現(xiàn)在只是簡單的看了一下幾個頁面, 這個App里的頁面, 相比我們現(xiàn)在看到了, 還只是冰山一角, 慢慢看吧
給自己先定一個小目標(biāo), 實現(xiàn)一個首頁, 或者詳情頁再說??
(如果真寫了,代碼會貼出來的哈, 關(guān)注我吧??)
或者說你想看哪一款A(yù)pp某一個頁面的搭建布局, 而你沒有辦法像我這樣看的話, 可以評論留言喔
喜歡就是點個贊吧(國慶還是在家比較合適!)
