前兩天分析了菜鳥裹裹的具體業務，菜鳥裹裹能夠成功快遞行業的王牌產品，業務當然是非常重要的一環，不過App的操作體驗，以及能夠讓使用者使用上更加方便快捷，也是成功的重要因素，所以這次就來分析菜鳥裹裹的UI框架設計。
這次對主要功能頁面進行分析，分析工具：
UIAutomatorViewer-用來掃描和分析Android應用程式的UI元件的GUI工具
jadx-反編譯工具
首頁
圖中看出UI設計主要分為了：底部的menu_and_navigation_bar_container和內容區域navigation_bar_content
佈局檔案
libs_activity_navigation_bar。xml
內容區域佈局：
homepage_fragment。xml
佈局檔案的具體結構圖：
menu_and_navigation_bar_container主要包含了NavigationBarView，底部導航內容：首頁，取件，寄件，驛站，我。
navigation_bar_content：內容區域。透過底部導航的切換，內容顯示不同的頁面。
main_activity_content：首頁的內容區域顯示。分為三部分：
1。header_title_view：透過自定義ViewHomepageTitleView實現
2。homepage_fragment_scrollable_layout：透過HomepageNewFeatureLayout實現
3。store_house_ptr_frame：展現列表和下拉重新整理，分別透過ListView和PtrBirdFrameLayout實現
物流詳情
物流詳情的頁面比較有特色，地圖展示訂單的軌跡，列表展示從發貨到收貨各個節點資訊。
UI結構圖：
最底層是全屏mapview
選單操作層覆蓋在mapview上
最上面一層是物流從發貨到收貨的節點列表
不過從反編譯中無法找到對應的佈局xml，透過關鍵字logistic在AndroidManifest。xml檔案搜尋到相關的Activity。發現
com。cainiao。wireless。logisticsdetail。presentation。view。activity。ShowGoodInfoActivity有相關性，ShowGoodInfoActivity中使用ShowGoodInfoFragment渲染，
ShowGoodInfoFragment中有個方法會真正進入到詳情的邏輯。
ShowGoodInfoFragment。java
該方法透過Router進行跳轉到guoguo：//go/logistic，在AndroidManifest。xml有對應的宣告：
AndroidManifest。xml
沒錯就是它， LogisticDetailActivity就是我們要找的顯示物流詳情的頁面。
反編譯的程式碼中沒有對應的LogisticDetailActivity的原始碼，這些部分應該是透過Atlas動態部署的。
LogisticDetailActivity在Atlas框架中的宣告
FrameworkProperties。java
寄件記錄
為什麼分析這個頁面，因為這個cn_wx_page_container，看id的名字判斷出這是weex頁面。
UI佈局：
這個頁面，透過抓包分析，該頁面的請求url：
https：//cn。alicdn。com/cainiao-weex/order_center/0。3。0/main/order-center-homepage。js？navtype=weex&__fc__=true&__bs__=black&orderType=send&referrer=guoguo%3A%2F%2Fgo%2Fsendpackage
裡面主要是Vue編寫的頁面程式碼和邏輯。
總結
分析了App三個主要的功能，大致對菜鳥裹裹的UI框架有所瞭解。
在Android工程師角度分析App使用的開源框架-3。菜鳥裹裹一文中，羅列了App使用的一些框架。
透過分析，物流詳情中使用了Atlas，寄件記錄使用了Weex，其他的頁面，有興趣的同學可以自行分析。
雖然物流App，不像電商App（淘寶，天貓，京東等）那樣要求很高的動態化，不過菜鳥裹裹App使用了很多動態化框架，在不影響操作體驗的前提下，又增加了運營可以操作性，還是非常值得學習的。
以後有關菜鳥裹裹的分享，會集中在從零開始高仿菜鳥裹裹App（計劃中），希望同學們多多支援。
