Android App 開發實戰系列 Part 5. Epoxy on RecyclerView

data class MovieModel(
...
val largeSize: Boolean
)
class MovieHomeAdapter(private val movieList: List<MovieModel>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
override fun getItemViewType(position: Int): Int {
return if (movieList.get(position).largeSize) {
R.layout.item_movie_large
} else {
R.layout.item_movie_normal
}
}
override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): RecyclerViewHolder {
val inflater = LayoutInflater.from(viewGroup.context)
return ViewHolder(inflater.inflate(viewType, viewGroup, false))
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
// bind the data to the view holder
}
class ViewHolder(view: View): RecyclerView.ViewHolder(view) {
// find the view by id, display the data
}
}

view raw MovieHomeAdapter.kt hosted with ❤ by GitHub

class LargeEpoxyModel : EpoxyModel {
override fun bind() {
// binding implementation
}
}
class NormalEpoxyModel : EpoxyModel {
override fun bind() {
// binding implementation
}
}
class ModelController(private val movieList: List<MovieModel>): EpoxyController() {
override fun buildModels() {
movieList.orEachIndexed { index, movie ->
if (index == 0) {
LargeEpoxyModel_()
.addTo(this)
} else {
NormalEpoxyModel_()
.addTo(this)
}
}
}
}

view raw MovieController.kt hosted with ❤ by GitHub

@ModelView(autoLayout = ModelView.Size.MATCH_WIDTH_WRAP_HEIGHT)
class DropdownItemView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {
@TextProp
var itemText: CharSequence? = null
@ModelProp
fun selected(selected: Boolean = false) {
textMenuItem.isSelected = selected
}
@CallbackProp
var clickListener: OnClickListener? = null
private val textMenuItem: TextView
init {
View.inflate(context, R.layout.item_dropdown_menu, this)
orientation = VERTICAL
textMenuItem = findViewById(R.id.textMenu)
}
@AfterPropsSet
fun userProps() {
textMenuItem.text = itemText
textMenuItem.setOnClickListener(clickListener)
}
}

view raw DropdownItemView.kt hosted with ❤ by GitHub

我們對於資料綁定本身在 Android 的設定不多做說明，我們假設你已經設定好且可以正常使用 Android data binding，這邊我們只講解如何在 Epoxy 使用，以常見一般情況來說，我們可以做一個設定，然後就可以靠 Epoxy 來幫我們自動產生 EpoxyModel 。

以 MovieHunt 專案來解說怎麼設定，我們會到 package 根目錄也就是 com.enginebai.moviehunt 新增一個檔案名稱是 package-info.java

@EpoxyDataBindingPattern(rClass = R.class, layoutPrefix = "item")
package com.enginebai.moviehunt;
import com.airbnb.epoxy.EpoxyDataBindingPattern;

view raw package-info.java hosted with ❤ by GitHub

<?xmlversion="1.0"encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="movieId"
type="String" />
<variable
name="posterImage"
type="String" />
<variable
name="title"
type="String" />
<variable
name="rating"
type="String" />
<variable
name="clickListener"
type="com.enginebai.moviehunt.ui.MovieClickListener" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="@{() -> clickListener.onMovieClicked(movieId)}"
>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/cardPoster"
app:cardBackgroundColor="https://www.tuicool.com/articles/iMj2aiF/@color/darkBlue"
app:cardCornerRadius="@dimen/corner"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="1:1.5"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/imagePoster"
android:scaleType="centerCrop"
android:src="https://www.tuicool.com/articles/iMj2aiF/@color/darkBlue"
app:imageUrl="@{posterImage}"
app:error="@{@color/darkBlue}"
app:placeholder="@{@color/darkBlue}"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textTitle"
style="@style/TitleText.Normal"
android:layout_marginTop="@dimen/size_8"
android:text="@{title}"
app:layout_constraintTop_toBottomOf="@+id/cardPoster"
tools:text="Avengers: III"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textRating"
android:layout_marginTop="@dimen/size_4"
android:drawableStart="@drawable/thumbs_up"
android:text="@{rating}"
style="@style/ContextText"
tools:text="89.6%"
app:layout_constraintTop_toBottomOf="@+id/textTitle"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

view raw item_movie_home_normal.xml hosted with ❤ by GitHub

MovieHomeLargeBindingModel_()
.id("${movieCategory}${this.id}")
.movieId(this.id)
.posterImage(this.getPosterUrl())
.title(this.displayTitle())
.rating(this.voteAverage)
.voteCount(this.displayVoteCount())
.duration(this.displayDuration())
.clickListener(clickListener)

view raw MovieHomeLargeBindingModel.kt hosted with ❤ by GitHub

@EpoxyModelClass(layout = R.layout.holder_movie_landscape)
abstract class MovieListEpoxyModel : EpoxyModelWithHolder<MovieListEpoxyModel.Holder>() {
@EpoxyAttribute
var movieId = ""
@EpoxyAttribute
var imagePoster = ""
...
@EpoxyAttribute(EpoxyAttribute.Option.DoNotHash)
var itemClickListener: (String) -> Unit = {}
override fun bind(holder: Holder) {
Glide.with(holder.imagePoster)
.load(imagePoster)
.error(R.color.darkBlue)
.placeholder(R.color.darkBlue)
.into(holder.imagePoster)
...
holder.itemView.setOnClickListener { itemClickListener(movieId) }
}
class Holder : EpoxyHolder() {
lateinit var itemView: View
lateinit var imagePoster: ImageView
...
override fun bindView(itemView: View) {
this.itemView = itemView
imagePoster = itemView.findViewById(R.id.imagePoster)
...
}
}
}

view raw MovieListEpoxyModel.kt hosted with ❤ by GitHub

class MovieListController(
private val context: Context,
private val clickListener: MovieClickListener
) : PagedListEpoxyController<MovieModel>() {
private val loadMoreView = LoadMoreView_().apply { id(LoadMoreView::class.java.simpleName) }
var loadingMore = false
set(value) {
field = value
requestModelBuild()
}
override fun buildItemModel(currentPosition: Int, item: MovieModel?): EpoxyModel<*> {
return item?.run {
MovieListEpoxyModel_()
.id(this.id)
.movieId(this.id)
.imagePoster(this.getPosterUrl())
.textTitle(this.displayTitle())
.rating(this.display5StarsRating())
.voteCount(context.getString(R.string.vote_count, this.displayVoteCount()))
.duration(this.displayDuration())
.releaseDate(this.displayReleaseDate())
.itemClickListener { clickListener.onMovieClicked(this.id) }
} ?: run {
MovieListEpoxyModel_()
.id(-currentPosition)
}
}
override fun addModels(models: List<EpoxyModel<*>>) {
super.addModels(models)
loadMoreView.addIf(loadingMore, this)
}
}

view raw MovieListController.kt hosted with ❤ by GitHub

class MyController : EpoxyController() {
override fun buildModels() {
HeaderImageModel_()
LoadingModel_()
MovieModel_()
MovieModel_()
FooterModel_()
}
}

view raw MyController.kt hosted with ❤ by GitHub

那麼最後畫面就會呈現這樣：