使用分頁資料時,通常必須在資料載入時轉換資料串流。例如,您可能需要篩選項目清單,或是將項目轉換為其他類型,才能在使用者介面中顯示。資料串流轉換的另一個常見用途是新增清單分隔符。
一般而言,如果直接將轉換套用至資料串流,您就可以將存放區建構和使用者介面建構分開。
本頁面假設您已熟悉 Paging 程式庫的基本使用。
套用基本轉換
由於 PagingData
會封裝在回應串流中,因此您可以從載入資料到顯示資料這段期間,逐步對資料套用轉換作業。
為了將轉換套用至串流中的每個 PagingData
物件,請將轉換放入串流的 map()
作業中:
pager.flow // Type is Flow<PagingData<User>>.
// Map the outer stream so that the transformations are applied to
// each new generation of PagingData.
.map { pagingData ->
// Transformations in this block are applied to the items
// in the paged data.
}
PagingRx.getFlowable(pager) // Type is Flowable<PagingData<User>>.
// Map the outer stream so that the transformations are applied to
// each new generation of PagingData.
.map(pagingData -> {
// Transformations in this block are applied to the items
// in the paged data.
});
// Map the outer stream so that the transformations are applied to
// each new generation of PagingData.
Transformations.map(
// Type is LiveData<PagingData<User>>.
PagingLiveData.getLiveData(pager),
pagingData -> {
// Transformations in this block are applied to the items
// in the paged data.
});
轉換資料
資料串流最基本的作業就是將資料轉換為不同類型。取得 PagingData
物件的存取權後,您就能在 PagingData
物件中分頁清單上的個別項目執行 map()
作業。
其中一個常見的用途是將網路或資料庫層物件對應至使用者介面層專用的物件。下列範例說明如何套用此類對應作業:
pager.flow // Type is Flow<PagingData<User>>.
.map { pagingData ->
pagingData.map { user -> UiModel(user) }
}
// Type is Flowable<PagingData<User>>.
PagingRx.getFlowable(pager)
.map(pagingData ->
pagingData.map(UiModel.UserModel::new)
)
Transformations.map(
// Type is LiveData<PagingData<User>>.
PagingLiveData.getLiveData(pager),
pagingData ->
pagingData.map(UiModel.UserModel::new)
)
另一個常見的資料轉換是透過使用者輸入內容 (例如查詢字串),將其轉換成要求輸出內容並顯示。設定時,您需要監聽及擷取使用者的查詢輸入內容、執行要求,以及將查詢結果推送回使用者介面。
您可以使用串流 API 監聽查詢輸入內容。請將串流參考資料保留在 ViewModel
。使用者介面層不應直接存取;而會定義函式,以通知使用者查詢的 ViewModel。
private val queryFlow = MutableStateFlow("")
fun onQueryChanged(query: String) {
queryFlow.value = query
}
private BehaviorSubject<String> querySubject = BehaviorSubject.create("");
public void onQueryChanged(String query) {
queryFlow.onNext(query)
}
private MutableLiveData<String> queryLiveData = new MutableLiveData("");
public void onQueryChanged(String query) {
queryFlow.setValue(query)
}
資料串流中的查詢值變更時,您可以執行作業,將查詢值轉換成所需的資料類型,並將結果回傳至使用者介面層。特定轉換函式取決於所用語言和架構,但都能提供類似的功能。
val querySearchResults = queryFlow.flatMapLatest { query ->
// The database query returns a Flow which is output through
// querySearchResults
userDatabase.searchBy(query)
}
Observable<User> querySearchResults =
querySubject.switchMap(query -> userDatabase.searchBy(query));
LiveData<User> querySearchResults = Transformations.switchMap(
queryLiveData,
query -> userDatabase.searchBy(query)
);
使用 flatMapLatest
或 switchMap
等作業可以確保只有最新的結果回傳至使用者介面。如果使用者在資料庫作業完成前變更了查詢輸入內容,這些作業就會捨棄舊查詢的結果,並立即啟動新的搜尋。
篩選資料
另一個常見作業是篩選。您可以根據使用者的條件篩選資料,也可以從使用者介面移除系統根據其他條件隱藏的資料。
由於篩選條件會套用至 PagingData
物件,因此您必須將這些篩選作業放置於 map()
呼叫內。資料從 PagingData
中濾除後,系統會將新的 PagingData
執行個體傳遞至使用者介面層來顯示。
pager.flow // Type is Flow<PagingData<User>>.
.map { pagingData ->
pagingData.filter { user -> !user.hiddenFromUi }
}
// Type is Flowable<PagingData<User>>.
PagingRx.getFlowable(pager)
.map(pagingData ->
pagingData.filter(user -> !user.isHiddenFromUi())
)
}
Transformations.map(
// Type is LiveData<PagingData<User>>.
PagingLiveData.getLiveData(pager),
pagingData ->
pagingData.filter(user -> !user.isHiddenFromUi())
)
新增清單分隔符
Paging 程式庫支援動態清單分隔符。您可將分隔符直接插入資料串流做為 RecyclerView
清單項目,藉此提升清單可讀性。因此,分隔符為功能完整的 ViewHolder
物件,可提供互動性、無障礙功能焦點,以及 View
提供的所有其他功能。
下列是將分隔符插入分頁清單中的三個步驟:
- 轉換使用者介面模型以符合分隔符項目。
- 轉換資料串流,在資料載入和呈現資料之間動態新增分隔符。
- 更新使用者介面來處理分隔符項目。
轉換使用者介面模型
Paging 程式庫將清單分隔符插入至 RecyclerView
中做為實際清單項目,但分隔符項目必須和清單中的資料項目有區別,才能將這些項目繫結至具有不同使用者介面的不同 ViewHolder
類型。方法是建立 Kotlin 封閉類別搭配子類別,來代表您的資料和分隔符。或者,您也可以建立由清單項目類別和分隔符類別擴充的基本類別。
假設您想將分隔符新增至 User
項目的分頁清單。下列程式碼片段說明如何建立基本類別,其中執行個體可以是 UserModel
或 SeparatorModel
:
sealed class UiModel {
class UserModel(val id: String, val label: String) : UiModel() {
constructor(user: User) : this(user.id, user.label)
}
class SeparatorModel(val description: String) : UiModel()
}
class UiModel {
private UiModel() {}
static class UserModel extends UiModel {
@NonNull
private String mId;
@NonNull
private String mLabel;
UserModel(@NonNull String id, @NonNull String label) {
mId = id;
mLabel = label;
}
UserModel(@NonNull User user) {
mId = user.id;
mLabel = user.label;
}
@NonNull
public String getId() {
return mId;
}
@NonNull
public String getLabel() {
return mLabel;
}
}
static class SeparatorModel extends UiModel {
@NonNull
private String mDescription;
SeparatorModel(@NonNull String description) {
mDescription = description;
}
@NonNull
public String getDescription() {
return mDescription;
}
}
}
class UiModel {
private UiModel() {}
static class UserModel extends UiModel {
@NonNull
private String mId;
@NonNull
private String mLabel;
UserModel(@NonNull String id, @NonNull String label) {
mId = id;
mLabel = label;
}
UserModel(@NonNull User user) {
mId = user.id;
mLabel = user.label;
}
@NonNull
public String getId() {
return mId;
}
@NonNull
public String getLabel() {
return mLabel;
}
}
static class SeparatorModel extends UiModel {
@NonNull
private String mDescription;
SeparatorModel(@NonNull String description) {
mDescription = description;
}
@NonNull
public String getDescription() {
return mDescription;
}
}
}
轉換資料串流
您必須在資料串流載入之後及呈現之後,將轉換套用至資料串流。轉換方法應如下所示:
- 轉換載入的清單項目,以反映新的基礎項目類型。
- 使用
PagingData.insertSeparators()
方法新增分隔符。
如要進一步瞭解轉換作業,請參閱「套用基本轉換」。
下列範例顯示將 PagingData<User>
串流更新至 PagingData<UiModel>
串流 (新增分隔符) 的轉換作業:
pager.flow.map { pagingData: PagingData<User> ->
// Map outer stream, so you can perform transformations on
// each paging generation.
pagingData
.map { user ->
// Convert items in stream to UiModel.UserModel.
UiModel.UserModel(user)
}
.insertSeparators<UiModel.UserModel, UiModel> { before, after ->
when {
before == null -> UiModel.SeparatorModel("HEADER")
after == null -> UiModel.SeparatorModel("FOOTER")
shouldSeparate(before, after) -> UiModel.SeparatorModel(
"BETWEEN ITEMS $before AND $after"
)
// Return null to avoid adding a separator between two items.
else -> null
}
}
}
// Map outer stream, so you can perform transformations on each
// paging generation.
PagingRx.getFlowable(pager).map(pagingData -> {
// First convert items in stream to UiModel.UserModel.
PagingData<UiModel> uiModelPagingData = pagingData.map(
UiModel.UserModel::new);
// Insert UiModel.SeparatorModel, which produces PagingData of
// generic type UiModel.
return PagingData.insertSeparators(uiModelPagingData,
(@Nullable UiModel before, @Nullable UiModel after) -> {
if (before == null) {
return new UiModel.SeparatorModel("HEADER");
} else if (after == null) {
return new UiModel.SeparatorModel("FOOTER");
} else if (shouldSeparate(before, after)) {
return new UiModel.SeparatorModel("BETWEEN ITEMS "
+ before.toString() + " AND " + after.toString());
} else {
// Return null to avoid adding a separator between two
// items.
return null;
}
});
});
// Map outer stream, so you can perform transformations on each
// paging generation.
Transformations.map(PagingLiveData.getLiveData(pager),
pagingData -> {
// First convert items in stream to UiModel.UserModel.
PagingData<UiModel> uiModelPagingData = pagingData.map(
UiModel.UserModel::new);
// Insert UiModel.SeparatorModel, which produces PagingData of
// generic type UiModel.
return PagingData.insertSeparators(uiModelPagingData,
(@Nullable UiModel before, @Nullable UiModel after) -> {
if (before == null) {
return new UiModel.SeparatorModel("HEADER");
} else if (after == null) {
return new UiModel.SeparatorModel("FOOTER");
} else if (shouldSeparate(before, after)) {
return new UiModel.SeparatorModel("BETWEEN ITEMS "
+ before.toString() + " AND " + after.toString());
} else {
// Return null to avoid adding a separator between two
// items.
return null;
}
});
});
在使用者介面中處理分隔符
最後一個步驟是變更使用者介面,以符合分隔符的項目類型。針對分隔符項目建立版面配置和檢視畫面持有者,然後變更清單轉接程式以使用 RecyclerView.ViewHolder
做為其檢視畫面持有者類型,以便處理多種類型的檢視畫面持有者。或者,您也可以定義常見的基礎類別,並讓項目與分隔符檢視畫面持有者類別延伸。
您也必須對清單轉接程式進行下列變更:
- 在
onCreateViewHolder()
和onBindViewHolder()
方法中新增案例,以說明分隔符清單項目。 - 導入新的比較子。
class UiModelAdapter :
PagingDataAdapter<UiModel, RecyclerView.ViewHolder>(UiModelComparator) {
override fun onCreateViewHolder(
parent: ViewGroup,
viewType: Int
) = when (viewType) {
R.layout.item -> UserModelViewHolder(parent)
else -> SeparatorModelViewHolder(parent)
}
override fun getItemViewType(position: Int) {
// Use peek over getItem to avoid triggering page fetch / drops, since
// recycling views is not indicative of the user's current scroll position.
return when (peek(position)) {
is UiModel.UserModel -> R.layout.item
is UiModel.SeparatorModel -> R.layout.separator_item
null -> throw IllegalStateException("Unknown view")
}
}
override fun onBindViewHolder(
holder: RecyclerView.ViewHolder,
position: Int
) {
val item = getItem(position)
if (holder is UserModelViewHolder) {
holder.bind(item as UserModel)
} else if (holder is SeparatorModelViewHolder) {
holder.bind(item as SeparatorModel)
}
}
}
object UiModelComparator : DiffUtil.ItemCallback<UiModel>() {
override fun areItemsTheSame(
oldItem: UiModel,
newItem: UiModel
): Boolean {
val isSameRepoItem = oldItem is UiModel.UserModel
&& newItem is UiModel.UserModel
&& oldItem.id == newItem.id
val isSameSeparatorItem = oldItem is UiModel.SeparatorModel
&& newItem is UiModel.SeparatorModel
&& oldItem.description == newItem.description
return isSameRepoItem || isSameSeparatorItem
}
override fun areContentsTheSame(
oldItem: UiModel,
newItem: UiModel
) = oldItem == newItem
}
class UiModelAdapter extends PagingDataAdapter<UiModel, RecyclerView.ViewHolder> {
UiModelAdapter() {
super(new UiModelComparator(), Dispatchers.getMain(),
Dispatchers.getDefault());
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent,
int viewType) {
if (viewType == R.layout.item) {
return new UserModelViewHolder(parent);
} else {
return new SeparatorModelViewHolder(parent);
}
}
@Override
public int getItemViewType(int position) {
// Use peek over getItem to avoid triggering page fetch / drops, since
// recycling views is not indicative of the user's current scroll position.
UiModel item = peek(position);
if (item instanceof UiModel.UserModel) {
return R.layout.item;
} else if (item instanceof UiModel.SeparatorModel) {
return R.layout.separator_item;
} else {
throw new IllegalStateException("Unknown view");
}
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder,
int position) {
if (holder instanceOf UserModelViewHolder) {
UserModel userModel = (UserModel) getItem(position);
((UserModelViewHolder) holder).bind(userModel);
} else {
SeparatorModel separatorModel = (SeparatorModel) getItem(position);
((SeparatorModelViewHolder) holder).bind(separatorModel);
}
}
}
class UiModelComparator extends DiffUtil.ItemCallback<UiModel> {
@Override
public boolean areItemsTheSame(@NonNull UiModel oldItem,
@NonNull UiModel newItem) {
boolean isSameRepoItem = oldItem instanceof UserModel
&& newItem instanceof UserModel
&& ((UserModel) oldItem).getId().equals(((UserModel) newItem).getId());
boolean isSameSeparatorItem = oldItem instanceof SeparatorModel
&& newItem instanceof SeparatorModel
&& ((SeparatorModel) oldItem).getDescription().equals(
((SeparatorModel) newItem).getDescription());
return isSameRepoItem || isSameSeparatorItem;
}
@Override
public boolean areContentsTheSame(@NonNull UiModel oldItem,
@NonNull UiModel newItem) {
return oldItem.equals(newItem);
}
}
class UiModelAdapter extends PagingDataAdapter<UiModel, RecyclerView.ViewHolder> {
UiModelAdapter() {
super(new UiModelComparator(), Dispatchers.getMain(),
Dispatchers.getDefault());
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent,
int viewType) {
if (viewType == R.layout.item) {
return new UserModelViewHolder(parent);
} else {
return new SeparatorModelViewHolder(parent);
}
}
@Override
public int getItemViewType(int position) {
// Use peek over getItem to avoid triggering page fetch / drops, since
// recycling views is not indicative of the user's current scroll position.
UiModel item = peek(position);
if (item instanceof UiModel.UserModel) {
return R.layout.item;
} else if (item instanceof UiModel.SeparatorModel) {
return R.layout.separator_item;
} else {
throw new IllegalStateException("Unknown view");
}
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder,
int position) {
if (holder instanceOf UserModelViewHolder) {
UserModel userModel = (UserModel) getItem(position);
((UserModelViewHolder) holder).bind(userModel);
} else {
SeparatorModel separatorModel = (SeparatorModel) getItem(position);
((SeparatorModelViewHolder) holder).bind(separatorModel);
}
}
}
class UiModelComparator extends DiffUtil.ItemCallback<UiModel> {
@Override
public boolean areItemsTheSame(@NonNull UiModel oldItem,
@NonNull UiModel newItem) {
boolean isSameRepoItem = oldItem instanceof UserModel
&& newItem instanceof UserModel
&& ((UserModel) oldItem).getId().equals(((UserModel) newItem).getId());
boolean isSameSeparatorItem = oldItem instanceof SeparatorModel
&& newItem instanceof SeparatorModel
&& ((SeparatorModel) oldItem).getDescription().equals(
((SeparatorModel) newItem).getDescription());
return isSameRepoItem || isSameSeparatorItem;
}
@Override
public boolean areContentsTheSame(@NonNull UiModel oldItem,
@NonNull UiModel newItem) {
return oldItem.equals(newItem);
}
}
避免重複作業
需避免的關鍵問題為讓應用程式執行不必要的作業。擷取資料是極昂貴的作業,資料轉換也可能耗費寶貴時間。一旦資料載入完成並準備在使用者介面中顯示後,請在變更設定及需重新建立使用者介面時,儲存相關的資料。
cachedIn()
作業會快取任何轉換發生之前的結果。因此,cachedIn()
應是 ViewModel 中的最後呼叫。
pager.flow // Type is Flow<PagingData<User>>.
.map { pagingData ->
pagingData.filter { user -> !user.hiddenFromUi }
.map { user -> UiModel.UserModel(user) }
}
.cachedIn(viewModelScope)
// CoroutineScope helper provided by the lifecycle-viewmodel-ktx artifact.
CoroutineScope viewModelScope = ViewModelKt.getViewModelScope(viewModel);
PagingRx.cachedIn(
// Type is Flowable<PagingData<User>>.
PagingRx.getFlowable(pager)
.map(pagingData -> pagingData
.filter(user -> !user.isHiddenFromUi())
.map(UiModel.UserModel::new)),
viewModelScope);
}
// CoroutineScope helper provided by the lifecycle-viewmodel-ktx artifact.
CoroutineScope viewModelScope = ViewModelKt.getViewModelScope(viewModel);
PagingLiveData.cachedIn(
Transformations.map(
// Type is LiveData<PagingData<User>>.
PagingLiveData.getLiveData(pager),
pagingData -> pagingData
.filter(user -> !user.isHiddenFromUi())
.map(UiModel.UserModel::new)),
viewModelScope);
如要進一步瞭解如何將 cachedIn()
與 PagingData
串流搭配使用,請參閱「設定 PagingData 串流」。
其他資源
如要進一步瞭解 Paging 程式庫,請參閱以下資源:
程式碼研究室
範例
目前沒有任何建議。
建議登入 Google 帳戶。