原文：link
作者：Eli Hart
項目：github.com/airbnb/epoxy
安卓的RecyclerView是一個顯示列表的強大工具，但是它的使用涉及混雜的樣式和設置。我們團隊有個顯示多樣式的復雜列表的需求，要有分頁、支持平板電腦顯示以及item動畫。我們發現一直重復同樣的模板配置工作，于是我們開發了Epoxy來減緩這種趨勢，并且簡化靜態、動態加載內容的列表類視圖的實現。
Epoxy以組件的方式來創建列表，列表中的每個item通過model來定義繪制所需的layout,id和span(間距).model還負責綁定數據到它的view上，并且在view回收時釋放資源。這些model按你希望顯示的順序插入到Epoxy的adapter中，adapter來負責復雜的顯示工作。
用Epoxy顯示搜索結果
我們來通過一個例子來看一下它是如何工作的。這是一個Airbnb中顯示城市中鄰居的搜索結果頁。
我們可以將這個視圖拆分為:
- 一個城市介紹的標題欄
- 一個城市向導的鏈接
- 不定數量的街區視圖流
- 嵌入街區視圖流的過濾提示
除此之外有時還有一些其它的視圖，比如：
- 分頁的時候結尾部分的加載提示
- 網絡出問題時的錯誤信息
- 當滾動完所有結果之后的文字
- 在某些國家顯示的定價聲明
總共有8種不同類型的視圖，我們需要用RecyclerView來講他們組合在一起，從而使整個頁面可以完整顯示并滾動。
為這樣一個包含多樣式的頁面設置RecyclerView的adapter十分操蛋。我們將會有好多亂七八糟的東西：視圖類型id，item數量，間距值，view holder，點擊事件處理等等。
使用Epoxy的組件方式可以將注意力集中于item需要顯示什么，顯示適配工作將交由models代理完成。
大概這個樣：
public class SearchAdapter extends EpoxyAdapter {
public void bindSearchData(SearchData data) {
header.setCity(data.city);
guidebookRow.showIf(data.hasGuideBook());
for (Neighborhood neighborhood : data.neighborhoods) {
addModel(new NeighborhoodCarouselModel(neighborhood));
}
loader.showIf(data.hasMoreToLoad());
notifyModelsChanged();
}
}
bindSearchData方法接受一個object類型對象，其中包含了view所需的所有信息。它是冪等的（相同參數多次執行結果相同），當條件發生變化它將重新創建model state來反映新的搜索結果。最后一行，我們告訴Epoxy去執行diff操作，當數據發生變化時將通知到RecyclerView上。
這和React的組件UI非常類似。代碼只需描述什么需要被顯示，adapter來負責具體的顯示工作。我們不需要挨個定義ids，counts，holders等。另外，我們也不需要去處理變化通知的工作。
這使得其成為一個加載多數據源（數據庫，緩存，網絡請求）的非常優秀的框架。它在adapter中記錄一個狀態對象，adapter創建models來反映當前狀態。當狀態對象發生變化時，不論是用戶輸入或者新數據加載導致的，新的狀態將傳遞給adapter，然后models會再次更新。點擊事件可以在model中設置，來回調到Activity。
這種方式職責分離很清晰。models可以根據需求很簡單的引入或剔除。通過組件以及adapter的抽象封裝。
通常頻繁的item變化會十分影響效率，然而，Epoxy加入了一個相當牛逼的算法來檢測models的變化，只有在models真正變化時才更新UI（需要確認和google原生DiffUtil的關系）
檢測adapter item的變化
一般的adapter中另一個復雜點是跟蹤item的變化。item有可能被添加、刪除、更新、移動，adapter需要根據這些不同類型的通知去執行相應的處理。這些通知使得RecyclerView可以只重繪變化的views，以及執行相應的動畫效果。然而，在已經非常復雜的adapter中手動處理這些問題會十分困難。
Epoxy在models上使用了比對算法來幫你解決這類問題。任何時候當你改變model設置，Epoxy將找出這些變化并反映到RecyclerView上。這將簡化你的adapter代碼，很容易的添加item變化的動畫效果，并且通過只改變需要改變的views來提高性能。
比對算法根據每個model實現的哈希值，所以可以偵測到model的改變，Epoxy提供了注解的方式，所以你的model可以很簡單的通過注解來標注需要被考慮進model狀態變化的字段。自動生成的子類會幫你實現hashcode計算函數以及各字段的getter和setter。
繼續我們上面的例子，header model大概長這樣：
public class HeaderModel extends EpoxyModel<HeaderView> {
@EpoxyAttribute City city;
@Override
public void bind(HeaderView headerView){
headerView.setImage(city.getImage());
headerView.setTitle(city.getName());
headerView.setDescription(city.getDescription());
}
@LayoutRes
public int getDefaultLayout() {
return R.layout.model_header_view;
}
}
一個HeaderModel_類會被自動生成，并且包含setCity方法，我們就用這個實例來向models列表中添加一個頭部。頭部視圖只會在city對象變化時刷新。這里假設City對象也有一個hashCode的實現來定義它的狀態變化。
你可能注意到了，getDefaultLayout()方法返回了一個layout資源。這個就是用來綁定數據的視圖資源，同時這個值也被用作adapter中的視圖類型。
Stable IDs By Default
為了讓功能正常工作，Epoxy默認啟用了RecyclerView的stable id（要了解什么是stable id，參見RecyclerView Adapter的setHasStableIds(boolean hasStableIds)方法）。
這使得item動畫以及狀態保持得以實現。每一個model都需要定義它的id，我們手動在動態生成的model里設置了一個id。例如，每一個鄰居輪播圖model的id與網絡請求返回的鄰居對象相關聯。
靜態視圖，例如我們的頭部視圖，沒有與之關聯的id，所以我們得造一個出來。Epoxy會為每一個新創建的model自動生成一個id，并且這個id在app生命周期中確保唯一，負值的id用來避免和手動設置的id相沖突。
唯一需要注意的是，我們必須在adapter生命周期中使用同一個model。對于頭部視圖（或其他靜態視圖）這就代表我們定義了一個final類型的字段，并在內聯方法中將其初始化。然后將其加入model列表并且像通常一樣去更新。我們不必再去做更多工作來保證其唯一。
保存視圖狀態
Epoxy也加入了對視圖列表的狀態支持，RecyclerView默認并不支持。例如，上圖中的輪播圖可以左右滑動，為了更好的用戶體驗，我們希望保存其滑動位置。當用戶往下滑動然后再返回時，輪播圖應該停在之前相同的位置，同樣當用戶旋轉屏幕或者切換到其他app再切換回來，盡管Activity已經重新創建，我們也應該展現相同的頁面狀態。
在一般的RecyclerView adapter中實現要費了老勁了，然而，Epoxy直接就支持，啥model都能保存狀態。它是通過leveraging stable ids將model id與視圖的序列化狀態相關聯來實現的。
使用也很簡單：
@Override
public boolean shouldSaveViewState {
return true;
}
默認狀態為false，來減少對性能的影響。
Epoxy關于靜態內容的使用
RecyclerView經常被用來顯示遠程加載的動態內容。其他的內容一般用Scrollview來實現，使用Epoxy可以在不用做過多工作的情況下使用RecyclerView來替換Scrollview。下面的列表就是這么用的：
使用ScrollView實現最為簡單，但是使用Epoxy的RecyclerView可以有更快的加載速度，添加動畫效果也更簡單。
這個頁面的性能問題非常重要，因為用戶點擊搜索結果時就會跳轉到這個頁面，讓這個過渡動畫效果平滑是提升用戶搜索體驗的重要因素，同時還需要詳情頁加載非常快才行。
讓我們來看一下詳情頁上的元素是如何影響性能的。首先，頭部的照片是一個橫向的RecyclerView，中間有一個靜態地圖顯示地理位置，底部還有一個橫向RecyclerView顯示附近類似房子，中間還有一些描述性文字和小圖片。
整體上構成了一個十分復雜的視圖結構，包含了很多bitmaps。這使得測量和展現時間變得很長，并且需要更多的內存去加載圖片。
另外，我們通過多種渠道加載數據——數據庫，內存緩存，多個網絡請求——來支撐這個頁面，這對向用戶顯示即時信息很有幫助，但如果處理不好則需要花費額外的時間去更新視圖。
綜上所述，我們必須要關心效率問題。謝天謝地有了Epoxy！讓我們有了極致的用戶體驗！！（媽了個雞。。。我為啥要翻譯這個。。。）
- 因為使用了RecyclerView，當用戶首次加載時，只有一小部分視圖需要加載。這避免了過早加載地圖視圖和底部的輪播圖，以及中間的那些玩意兒。于是有了更快的加載速度，更小的內存使用，以及最為關鍵的梗平滑的過渡效果。
- 防止了上下滑動時視圖結構失效引起的幀率下降，假如有數據返回但對應的view不在屏幕上，我們都不用管。如果時間字段變化導致價格需要更新，Epoxy會自動更新價格。
- item變化動畫效果。數據變化時我們可以用平滑的動畫效果來隱藏、顯示或更新視圖。例如，點擊翻譯會插入一個loader動畫，當翻譯完成時會自動變為翻譯后的結果，避免了默認的不自然的變化效果。
Epoxy的未來
開源了, 歡迎貢獻~我們會持續改進注解處理，對比算法，以及工具類。歡迎引入其他牛逼的庫。
