devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

解锁Android高阶技能，探秘实战Jetpack<十二>-------全面用LiveData+ViewModel+savedState重构之前实现的页面&架构商品详情模块1...

作者：你好赵伟 | 2024-03-18 03:00:21

赞

踩

hitabbottomlayout

实战：全面用LiveData+ViewModel+savedState重构之前实现的页面

在上一次https://www.cnblogs.com/webor2006/p/14006380.html已经对于JetPack的核心组件进行了全面细致的学习，并且也将它们应用到了咱们的主APP里面了，这里继续来巩固实操一把，将首页相关数据也进行一个全面改造，为啥要用JetPack的组件进行改造呢？这里一定要明白为啥要使用它们，下面简单的再来回忆一下：

 

也就是利用LiveData可以完全代替EventBus，并且它还比EventBus要强，不用咱们反注册，干嘛不用？

而SavedState它是ViewModel的升级，在内存不足APP被杀时也能保证数据能够复用，所以需要考虑APP被杀数据需要保存的场景用它进行数据恢复是非常合适的。

对于我自己的理解，用它们的原因最重要的是因为是Google力推的，而且都集成到了androidx标准库了，还有啥理由不去拥抱它们呢？

HomePageFragment：基于LiveData+ViewModel+SavedState改造数据请求

1、编写HomeViewModel，把首页Tab相关的所有接口请求挪进去：

目前先来看一下首页Tab数据的请求还是普通的方式：

接下来改成ViewModel，怎么改造呢，其实是一个套路，由于这是第一次改，所以从0开始慢慢来,之后就不会这么详细了，先来移动一下包：

1、然后新建一个HomeViewModel，将首页相关的ViewModel的逻辑都封装于此：

2、让它继承着ViewModel：

根据之前https://www.cnblogs.com/webor2006/p/13956989.htmlViewModel的使用方式来：

3、增加SavedState：

由于咱们想在内存不足app被杀时数据也能够快速得到恢复，所以单凭ViewModel是办不到的，它只能是在配置发生变更时有用，而此时需要使用ViewModel的进阶用法了，回忆一下之前https://www.cnblogs.com/webor2006/p/13993984.html所介绍的这块东东。

所以咱们定义一个对应的构造方法：

而在创建ViewModel的底层实现就会通过这个构造参数传递进去，回忆一下：

 

所以此时咱们就可以使用这个savedState对象进行数据的保存与恢复啦。

4、将请求挪到此类中：

  1. package org.devio.`as`.proj.main.fragment.home
  2.  
  3. import androidx.lifecycle.SavedStateHandle
  4. import androidx.lifecycle.ViewModel
  5. import org.devio.`as`.proj.main.http.ApiFactory
  6. import org.devio.`as`.proj.main.http.api.HomeApi
  7. import org.devio.`as`.proj.main.model.TabCategory
  8. import org.devio.hi.library.restful.HiCallback
  9. import org.devio.hi.library.restful.HiResponse
  10.  
  11. /**
  12.  * 利用Jetpack中的LiveData+ViewModel+savedState组件进行数据的请求复用
  13.  */
  14. class HomeViewModel(private val savedState: SavedStateHandle) : ViewModel() {
  15.  
  16.     fun queryCategoryTabs() {
  17.         ApiFactory.create(HomeApi::class.java)
  18.             .queryTabList().enqueue(object : HiCallback<List<TabCategory>> {
  19.                 override fun onSuccess(response: HiResponse<List<TabCategory>>) {
  20.                     val data = response.data
  21.                     if (response.successful() && data != null) {
  22.                         //todo
  23.                     }
  24.                 }
  25.  
  26.                 override fun onFailed(throwable: Throwable) {
  27.  
  28.                 }
  29.             })
  30.     }
  31. } 

2、使用LiveData发送数据:

而对于结果的监听咱们利用LiveData来进行改造，这个在之前的账户中心信息获取就已经使用过了：

具体如下：

  1. package org.devio.`as`.proj.main.fragment.home
  2.  
  3. import androidx.lifecycle.LiveData
  4. import androidx.lifecycle.MutableLiveData
  5. import androidx.lifecycle.SavedStateHandle
  6. import androidx.lifecycle.ViewModel
  7. import org.devio.`as`.proj.main.http.ApiFactory
  8. import org.devio.`as`.proj.main.http.api.HomeApi
  9. import org.devio.`as`.proj.main.model.TabCategory
  10. import org.devio.hi.library.restful.HiCallback
  11. import org.devio.hi.library.restful.HiResponse
  12.  
  13. /**
  14.  * 利用Jetpack中的LiveData+ViewModel+savedState组件进行数据的请求复用
  15.  */
  16. class HomeViewModel(private val savedState: SavedStateHandle) : ViewModel() {
  17.  
  18.     fun queryCategoryTabs(): LiveData<List<TabCategory>?> {
  19.         val liveData = MutableLiveData<List<TabCategory>?>()
  20.         //先从savedState中进行获取，如果能获取则直接返回
  21.         val memCache = savedState.get<List<TabCategory>?>("categoryTabs")
  22.         if (memCache != null) {
  23.             liveData.postValue(memCache)
  24.             return liveData
  25.         }
  26.         ApiFactory.create(HomeApi::class.java)
  27.             .queryTabList().enqueue(object : HiCallback<List<TabCategory>> {
  28.                 override fun onSuccess(response: HiResponse<List<TabCategory>>) {
  29.                     val data = response.data
  30.                     if (response.successful() && data != null) {
  31.                         liveData.value = data
  32.                         savedState.set("categoryTabs", data)
  33.                     }
  34.                 }
  35.  
  36.                 override fun onFailed(throwable: Throwable) {
  37.                     //ignore
  38.                 }
  39.             })
  40.         return liveData
  41.     }
  42. } 

3、调用一下:

另外在updateUI时需要做一下小修改：

所以提取一下：

另外还有一个小细节，就是每次更新UI的这句判断就可以去掉了：

这也是使用Jetpack组件的好处，所以改一下：

至此整个类就已经改造成了，还是比较简单的，下面就依葫芦画瓢将剩下的界面快速改造一把。

HomeTabFragment：基于ViewModel+savedState实现首页Tab初始化数据的内存存储&复用：

将这个请求进行改造，这块就不过多说明了，基本都是套路，将请求的逻辑抽到ViewModel类中：

  1. package org.devio.`as`.proj.main.fragment.home
  2.  
  3. import androidx.lifecycle.LiveData
  4. import androidx.lifecycle.MutableLiveData
  5. import androidx.lifecycle.SavedStateHandle
  6. import androidx.lifecycle.ViewModel
  7. import org.devio.`as`.proj.main.http.ApiFactory
  8. import org.devio.`as`.proj.main.http.api.HomeApi
  9. import org.devio.`as`.proj.main.model.HomeModel
  10. import org.devio.`as`.proj.main.model.TabCategory
  11. import org.devio.hi.library.restful.HiCallback
  12. import org.devio.hi.library.restful.HiResponse
  13. import org.devio.hi.library.restful.annotation.CacheStrategy
  14.  
  15. /**
  16.  * 利用Jetpack中的LiveData+ViewModel+savedState组件进行数据的请求复用
  17.  */
  18. class HomeViewModel(private val savedState: SavedStateHandle) : ViewModel() {
  19.  
  20.     fun queryCategoryTabs(): LiveData<List<TabCategory>?> {
  21.         val liveData = MutableLiveData<List<TabCategory>?>()
  22.         //先从savedState中进行获取，如果能获取则直接返回
  23.         val memCache = savedState.get<List<TabCategory>?>("categoryTabs")
  24.         if (memCache != null) {
  25.             liveData.postValue(memCache)
  26.             return liveData
  27.         }
  28.         ApiFactory.create(HomeApi::class.java)
  29.             .queryTabList().enqueue(object : HiCallback<List<TabCategory>> {
  30.                 override fun onSuccess(response: HiResponse<List<TabCategory>>) {
  31.                     val data = response.data
  32.                     if (response.successful() && data != null) {
  33.                         liveData.value = data
  34.                         savedState.set("categoryTabs", data)
  35.                     }
  36.                 }
  37.  
  38.                 override fun onFailed(throwable: Throwable) {
  39.                     //ignore
  40.                 }
  41.             })
  42.         return liveData
  43.     }
  44.  
  45.     fun queryTabCategoryList(
  46.         categoryId: String?,
  47.         pageIndex: Int,
  48.         cacheStrategy: Int
  49.     ): LiveData<HomeModel?> {
  50.         val liveData = MutableLiveData<HomeModel?>()
  51.  
  52.         val memCache = savedState.get<HomeModel>("categoryList")
  53.         //只有是第一次加载时  才需要从内存中取
  54.         if (memCache != null && pageIndex == 1 && cacheStrategy == CacheStrategy.CACHE_FIRST) {
  55.             liveData.postValue(memCache)
  56.             return liveData
  57.         }
  58.         ApiFactory.create(HomeApi::class.java)
  59.             .queryTabCategoryList(cacheStrategy, categoryId!!, pageIndex, 10)
  60.             .enqueue(object : HiCallback<HomeModel> {
  61.                 override fun onSuccess(response: HiResponse<HomeModel>) {
  62.                     val data = response.data;
  63.                     if (response.successful() && data != null) {
  64.                         //一次缓存数据，一次接口数据
  65.                         liveData.value = data
  66.                         //只有在刷新的时候，且不是本地缓存的数据 才存储到内容中
  67.                         if (cacheStrategy != CacheStrategy.NET_ONLY && response.code == HiResponse.SUCCESS) {
  68.                             savedState.set("categoryList", data)
  69.                         }
  70.                     } else {
  71.                         liveData.postValue(null)
  72.                     }
  73.                 }
  74.  
  75.                 override fun onFailed(throwable: Throwable) {
  76.                     liveData.postValue(null)
  77.                 }
  78.             })
  79.  
  80.         return liveData
  81.     }
  82. }

然后调用改一下：

 

另外判断生命周期的代码也可以去掉了：

熟悉了套路之后改造起来也非常之快。

CategoryFragment：分类数据请求用LiveData+ViewModel重构

这个页面由于不需要考虑app被杀数据恢复的问题，所以此时就不需要用savedState了，下面快速改一把，这界面涉及到两个请求：

将其抽取到ViewModel中：

  1. package org.devio.`as`.proj.main.fragment.category
  2.  
  3. import androidx.lifecycle.LiveData
  4. import androidx.lifecycle.MutableLiveData
  5. import androidx.lifecycle.ViewModel
  6. import org.devio.`as`.proj.main.http.ApiFactory
  7. import org.devio.`as`.proj.main.http.api.CategoryApi
  8. import org.devio.`as`.proj.main.model.Subcategory
  9. import org.devio.`as`.proj.main.model.TabCategory
  10. import org.devio.hi.library.restful.HiCallback
  11. import org.devio.hi.library.restful.HiResponse
  12.  
  13. class CategoryViewModel : ViewModel() {
  14.     fun querySubcategoryList(categoryId: String): LiveData<List<Subcategory>?> {
  15.         val subcategoryListData = MutableLiveData<List<Subcategory>?>()
  16.         ApiFactory.create(CategoryApi::class.java).querySubcategoryList(categoryId)
  17.             .enqueue(simpleCallback(subcategoryListData))
  18.  
  19.         return subcategoryListData
  20.     }
  21.  
  22.  
  23.     fun queryCategoryList(): LiveData<List<TabCategory>?> {
  24.         val tabCategoryData = MutableLiveData<List<TabCategory>?>()
  25.         ApiFactory.create(CategoryApi::class.java).queryCategoryList()
  26.             .enqueue(simpleCallback<List<TabCategory>>(tabCategoryData))
  27.         return tabCategoryData
  28.     }
  29.  
  30.     //回调抽取一下
  31.     private fun <T> simpleCallback(liveData: MutableLiveData<T?>): HiCallback<T> {
  32.         return object : HiCallback<T> {
  33.             override fun onSuccess(response: HiResponse<T>) {
  34.                 if (response.successful() && response.data != null) {
  35.                     liveData.postValue(response.data)
  36.                 } else {
  37.                     liveData.postValue(null)
  38.                 }
  39.             }
  40.  
  41.             override fun onFailed(throwable: Throwable) {
  42.                 liveData.postValue(null)
  43.             }
  44.         }
  45.     }
  46.  
  47. }

调用一下：

  1. package org.devio.`as`.proj.main.fragment.category
  2.  
  3. import android.graphics.Color
  4. import android.os.Bundle
  5. import android.text.TextUtils
  6. import android.util.SparseIntArray
  7. import android.view.View
  8. import android.widget.ImageView
  9. import android.widget.LinearLayout
  10. import android.widget.TextView
  11. import androidx.lifecycle.Observer
  12. import androidx.lifecycle.ViewModelProvider
  13. import androidx.recyclerview.widget.GridLayoutManager
  14. import kotlinx.android.synthetic.main.fragment_category.*
  15. import org.devio.`as`.proj.common.ui.component.HiBaseFragment
  16. import org.devio.`as`.proj.common.ui.view.EmptyView
  17. import org.devio.`as`.proj.common.ui.view.loadUrl
  18. import org.devio.`as`.proj.main.R
  19. import org.devio.`as`.proj.main.model.Subcategory
  20. import org.devio.`as`.proj.main.model.TabCategory
  21. import org.devio.`as`.proj.main.route.HiRoute
  22. import org.devio.hi.ui.tab.bottom.HiTabBottomLayout
  23.  
  24. /**
  25.  * 商品分类
  26.  */
  27. class CategoryFragment : HiBaseFragment() {
  28.     private var viewModel: CategoryViewModel? = null
  29.     private var emptyView: EmptyView? = null
  30.     private val SPAN_COUNT = 3
  31.     private val layoutManager = GridLayoutManager(context, SPAN_COUNT)
  32.     private val subcategoryList = mutableListOf<Subcategory>()
  33.     private val groupSpanSizeOffset = SparseIntArray()
  34.     private val decoration = CategoryItemDecoration({ position ->
  35.         subcategoryList[position].groupName
  36.     }, SPAN_COUNT)
  37.     private val subcategoryListCache = mutableMapOf<String, List<Subcategory>>()
  38.     override fun getLayoutId(): Int {
  39.         return R.layout.fragment_category
  40.     }
  41.  
  42.     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  43.         super.onViewCreated(view, savedInstanceState)
  44.         HiTabBottomLayout.clipBottomPadding(root_container)
  45.         content_loading.visibility = View.VISIBLE
  46.         viewModel = ViewModelProvider(this).get(CategoryViewModel::class.java)
  47.         queryCategoryList()
  48.     }
  49.  
  50.     private fun queryCategoryList() {
  51.         viewModel?.queryCategoryList()?.observe(viewLifecycleOwner, Observer {
  52.             if (it == null) {
  53.                 showEmptyView()
  54.             } else {
  55.                 onQueryCategoryListSuccess(it)
  56.             }
  57.         })
  58.     }
  59.  
  60.     private fun onQueryCategoryListSuccess(data: List<TabCategory>) {
  61.         if (!isAlive) return
  62.         emptyView?.visibility = View.GONE
  63.         content_loading.visibility = View.GONE
  64.         slider_view.visibility = View.VISIBLE
  65.  
  66.         slider_view.bindMenuView(itemCount = data.size,
  67.             onBindView = { holder, position ->
  68.                 val category = data[position]
  69.                 // holder.menu_item_tilte    无法直接访问
  70.                 //  holder.itemView.menu_item_title.  findviewbyid
  71.                 holder.findViewById<TextView>(R.id.menu_item_title)?.text = category.categoryName
  72.             }, onItemClick = { holder, position ->
  73.                 val category = data[position]
  74.                 val categoryId = category.categoryId
  75.                 if (subcategoryListCache.containsKey(categoryId)) {
  76.                     onQuerySubcategoryListSuccess(subcategoryListCache[categoryId]!!)
  77.                 } else {
  78.                     querySubcategoryList(categoryId)
  79.                 }
  80.             })
  81.     }
  82.  
  83.     private fun querySubcategoryList(categoryId: String) {
  84.         viewModel?.querySubcategoryList(categoryId)?.observe(viewLifecycleOwner, Observer {
  85.             if (it != null) {
  86.                 onQuerySubcategoryListSuccess(it)
  87.                 if (!subcategoryListCache.containsKey(categoryId)) {
  88.                     subcategoryListCache.put(categoryId, it)
  89.                 }
  90.             }
  91.         })
  92.     }
  93.  
  94.     private val spanSizeLookUp = object : GridLayoutManager.SpanSizeLookup() {
  95.         override fun getSpanSize(position: Int): Int {
  96.             var spanSize = 1
  97.             val groupName: String = subcategoryList[position].groupName
  98.             val nextGroupName: String? =
  99.                 if (position + 1 < subcategoryList.size) subcategoryList[position + 1].groupName else null
  100.  
  101.             if (TextUtils.equals(groupName, nextGroupName)) {
  102.                 spanSize = 1
  103.             } else {
  104.                 //当前位置和 下一个位置 不再同一个分组
  105.                 //1 .要拿到当前组 position (所在组)在 groupSpanSizeOffset 的索引下标
  106.                 //2 .拿到 当前组前面一组 存储的 spansizeoffset 偏移量
  107.                 //3 .给当前组最后一个item 分配 spansize count
  108.  
  109.                 val indexOfKey = groupSpanSizeOffset.indexOfKey(position)
  110.                 val size = groupSpanSizeOffset.size()
  111.                 val lastGroupOffset = if (size <= 0) 0
  112.                 else if (indexOfKey >= 0) {
  113.                     //说明当前组的偏移量记录，已经存在了 groupSpanSizeOffset ，这个情况发生在上下滑动，
  114.                     if (indexOfKey == 0) 0 else groupSpanSizeOffset.valueAt(indexOfKey - 1)
  115.                 } else {
  116.                     //说明当前组的偏移量记录，还没有存在于 groupSpanSizeOffset ，这个情况发生在 第一次布局的时候
  117.                     //得到前面所有组的偏移量之和
  118.                     groupSpanSizeOffset.valueAt(size - 1)
  119.                 }
  120.                 //          3       -     (6     +    5               % 3  )第几列=0  ，1 ，2
  121.                 spanSize = SPAN_COUNT - (position + lastGroupOffset) % SPAN_COUNT
  122.                 if (indexOfKey < 0) {
  123.                     //得到当前组 和前面所有组的spansize 偏移量之和
  124.                     val groupOffset = lastGroupOffset + spanSize - 1
  125.                     groupSpanSizeOffset.put(position, groupOffset)
  126.                 }
  127.             }
  128.             return spanSize
  129.         }
  130.     }
  131.  
  132.     private fun onQuerySubcategoryListSuccess(data: List<Subcategory>) {
  133.         if (!isAlive) return
  134.         decoration.clear()
  135.         groupSpanSizeOffset.clear()
  136.         subcategoryList.clear()
  137.         subcategoryList.addAll(data)
  138.         if (layoutManager.spanSizeLookup != spanSizeLookUp) {
  139.             //设置一下sapnSizeLookup
  140.             layoutManager.spanSizeLookup = spanSizeLookUp
  141.         }
  142.         slider_view.bindContentView(
  143.             itemCount = data.size,
  144.             itemDecoration = decoration,
  145.             layoutManager = layoutManager,
  146.             onBindView = { holder, position ->
  147.                 val subcategory = data[position]
  148.                 holder.findViewById<ImageView>(R.id.content_item_image)
  149.                     ?.loadUrl(subcategory.subcategoryIcon)
  150.                 holder.findViewById<TextView>(R.id.content_item_title)?.text =
  151.                     subcategory.subcategoryName
  152.             },
  153.             onItemClick = { holder, position ->
  154.                 //是应该跳转到类目的商品列表页的
  155.                 val subcategory = data[position]
  156.                 val bundle = Bundle()
  157.                 bundle.putString("categoryId", subcategory.categoryId)
  158.                 bundle.putString("subcategoryId", subcategory.subcategoryId)
  159.                 bundle.putString("categoryTitle", subcategory.subcategoryName)
  160.                 HiRoute.startActivity(context!!, bundle, HiRoute.Destination.GOODS_LIST)
  161.             }
  162.         )
  163.     }
  164.  
  165.  
  166.     private fun showEmptyView() {
  167.         if (!isAlive) return
  168.  
  169.         if (emptyView == null) {
  170.             emptyView = EmptyView(context!!)
  171.             emptyView?.setIcon(R.string.if_empty3)
  172.             emptyView?.setDesc(getString(R.string.list_empty_desc))
  173.             emptyView?.setButton(getString(R.string.list_empty_action), View.OnClickListener {
  174.                 queryCategoryList()
  175.             })
  176.  
  177.             emptyView?.setBackgroundColor(Color.WHITE)
  178.             emptyView?.layoutParams = LinearLayout.LayoutParams(
  179.                 LinearLayout.LayoutParams.MATCH_PARENT,
  180.                 LinearLayout.LayoutParams.MATCH_PARENT
  181.             )
  182.             root_container.addView(emptyView)
  183.         }
  184.         content_loading.visibility = View.GONE
  185.         slider_view.visibility = View.GONE
  186.         emptyView?.visibility = View.VISIBLE
  187.     }
  188. }

另外对于更新UI的生命周期的判断可以去掉了，涉及到三处：

 

 

整个代码如下：

  1. package org.devio.`as`.proj.main.fragment.category
  2.  
  3. import android.graphics.Color
  4. import android.os.Bundle
  5. import android.text.TextUtils
  6. import android.util.SparseIntArray
  7. import android.view.View
  8. import android.widget.ImageView
  9. import android.widget.LinearLayout
  10. import android.widget.TextView
  11. import androidx.lifecycle.Observer
  12. import androidx.lifecycle.ViewModelProvider
  13. import androidx.recyclerview.widget.GridLayoutManager
  14. import kotlinx.android.synthetic.main.fragment_category.*
  15. import org.devio.`as`.proj.common.ui.component.HiBaseFragment
  16. import org.devio.`as`.proj.common.ui.view.EmptyView
  17. import org.devio.`as`.proj.common.ui.view.loadUrl
  18. import org.devio.`as`.proj.main.R
  19. import org.devio.`as`.proj.main.model.Subcategory
  20. import org.devio.`as`.proj.main.model.TabCategory
  21. import org.devio.`as`.proj.main.route.HiRoute
  22. import org.devio.hi.ui.tab.bottom.HiTabBottomLayout
  23.  
  24. /**
  25.  * 商品分类
  26.  */
  27. class CategoryFragment : HiBaseFragment() {
  28.     private var viewModel: CategoryViewModel? = null
  29.     private var emptyView: EmptyView? = null
  30.     private val SPAN_COUNT = 3
  31.     private val layoutManager = GridLayoutManager(context, SPAN_COUNT)
  32.     private val subcategoryList = mutableListOf<Subcategory>()
  33.     private val groupSpanSizeOffset = SparseIntArray()
  34.     private val decoration = CategoryItemDecoration({ position ->
  35.         subcategoryList[position].groupName
  36.     }, SPAN_COUNT)
  37.     private val subcategoryListCache = mutableMapOf<String, List<Subcategory>>()
  38.     override fun getLayoutId(): Int {
  39.         return R.layout.fragment_category
  40.     }
  41.  
  42.     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  43.         super.onViewCreated(view, savedInstanceState)
  44.         HiTabBottomLayout.clipBottomPadding(root_container)
  45.         content_loading.visibility = View.VISIBLE
  46.         viewModel = ViewModelProvider(this).get(CategoryViewModel::class.java)
  47.         queryCategoryList()
  48.     }
  49.  
  50.     private fun queryCategoryList() {
  51.         viewModel?.queryCategoryList()?.observe(viewLifecycleOwner, Observer {
  52.             if (it == null) {
  53.                 showEmptyView()
  54.             } else {
  55.                 onQueryCategoryListSuccess(it)
  56.             }
  57.         })
  58.     }
  59.  
  60.     private fun onQueryCategoryListSuccess(data: List<TabCategory>) {
  61.         emptyView?.visibility = View.GONE
  62.         content_loading.visibility = View.GONE
  63.         slider_view.visibility = View.VISIBLE
  64.  
  65.         slider_view.bindMenuView(itemCount = data.size,
  66.             onBindView = { holder, position ->
  67.                 val category = data[position]
  68.                 // holder.menu_item_tilte    无法直接访问
  69.                 //  holder.itemView.menu_item_title.  findviewbyid
  70.                 holder.findViewById<TextView>(R.id.menu_item_title)?.text = category.categoryName
  71.             }, onItemClick = { holder, position ->
  72.                 val category = data[position]
  73.                 val categoryId = category.categoryId
  74.                 if (subcategoryListCache.containsKey(categoryId)) {
  75.                     onQuerySubcategoryListSuccess(subcategoryListCache[categoryId]!!)
  76.                 } else {
  77.                     querySubcategoryList(categoryId)
  78.                 }
  79.             })
  80.     }
  81.  
  82.     private fun querySubcategoryList(categoryId: String) {
  83.         viewModel?.querySubcategoryList(categoryId)?.observe(viewLifecycleOwner, Observer {
  84.             if (it != null) {
  85.                 onQuerySubcategoryListSuccess(it)
  86.                 if (!subcategoryListCache.containsKey(categoryId)) {
  87.                     subcategoryListCache.put(categoryId, it)
  88.                 }
  89.             }
  90.         })
  91.     }
  92.  
  93.     private val spanSizeLookUp = object : GridLayoutManager.SpanSizeLookup() {
  94.         override fun getSpanSize(position: Int): Int {
  95.             var spanSize = 1
  96.             val groupName: String = subcategoryList[position].groupName
  97.             val nextGroupName: String? =
  98.                 if (position + 1 < subcategoryList.size) subcategoryList[position + 1].groupName else null
  99.  
  100.             if (TextUtils.equals(groupName, nextGroupName)) {
  101.                 spanSize = 1
  102.             } else {
  103.                 //当前位置和 下一个位置 不再同一个分组
  104.                 //1 .要拿到当前组 position (所在组)在 groupSpanSizeOffset 的索引下标
  105.                 //2 .拿到 当前组前面一组 存储的 spansizeoffset 偏移量
  106.                 //3 .给当前组最后一个item 分配 spansize count
  107.  
  108.                 val indexOfKey = groupSpanSizeOffset.indexOfKey(position)
  109.                 val size = groupSpanSizeOffset.size()
  110.                 val lastGroupOffset = if (size <= 0) 0
  111.                 else if (indexOfKey >= 0) {
  112.                     //说明当前组的偏移量记录，已经存在了 groupSpanSizeOffset ，这个情况发生在上下滑动，
  113.                     if (indexOfKey == 0) 0 else groupSpanSizeOffset.valueAt(indexOfKey - 1)
  114.                 } else {
  115.                     //说明当前组的偏移量记录，还没有存在于 groupSpanSizeOffset ，这个情况发生在 第一次布局的时候
  116.                     //得到前面所有组的偏移量之和
  117.                     groupSpanSizeOffset.valueAt(size - 1)
  118.                 }
  119.                 //          3       -     (6     +    5               % 3  )第几列=0  ，1 ，2
  120.                 spanSize = SPAN_COUNT - (position + lastGroupOffset) % SPAN_COUNT
  121.                 if (indexOfKey < 0) {
  122.                     //得到当前组 和前面所有组的spansize 偏移量之和
  123.                     val groupOffset = lastGroupOffset + spanSize - 1
  124.                     groupSpanSizeOffset.put(position, groupOffset)
  125.                 }
  126.             }
  127.             return spanSize
  128.         }
  129.     }
  130.  
  131.     private fun onQuerySubcategoryListSuccess(data: List<Subcategory>) {
  132.         decoration.clear()
  133.         groupSpanSizeOffset.clear()
  134.         subcategoryList.clear()
  135.         subcategoryList.addAll(data)
  136.         if (layoutManager.spanSizeLookup != spanSizeLookUp) {
  137.             //设置一下sapnSizeLookup
  138.             layoutManager.spanSizeLookup = spanSizeLookUp
  139.         }
  140.         slider_view.bindContentView(
  141.             itemCount = data.size,
  142.             itemDecoration = decoration,
  143.             layoutManager = layoutManager,
  144.             onBindView = { holder, position ->
  145.                 val subcategory = data[position]
  146.                 holder.findViewById<ImageView>(R.id.content_item_image)
  147.                     ?.loadUrl(subcategory.subcategoryIcon)
  148.                 holder.findViewById<TextView>(R.id.content_item_title)?.text =
  149.                     subcategory.subcategoryName
  150.             },
  151.             onItemClick = { holder, position ->
  152.                 //是应该跳转到类目的商品列表页的
  153.                 val subcategory = data[position]
  154.                 val bundle = Bundle()
  155.                 bundle.putString("categoryId", subcategory.categoryId)
  156.                 bundle.putString("subcategoryId", subcategory.subcategoryId)
  157.                 bundle.putString("categoryTitle", subcategory.subcategoryName)
  158.                 HiRoute.startActivity(context!!, bundle, HiRoute.Destination.GOODS_LIST)
  159.             }
  160.         )
  161.     }
  162.  
  163.  
  164.     private fun showEmptyView() {
  165.         if (emptyView == null) {
  166.             emptyView = EmptyView(context!!)
  167.             emptyView?.setIcon(R.string.if_empty3)
  168.             emptyView?.setDesc(getString(R.string.list_empty_desc))
  169.             emptyView?.setButton(getString(R.string.list_empty_action), View.OnClickListener {
  170.                 queryCategoryList()
  171.             })
  172.  
  173.             emptyView?.setBackgroundColor(Color.WHITE)
  174.             emptyView?.layoutParams = LinearLayout.LayoutParams(
  175.                 LinearLayout.LayoutParams.MATCH_PARENT,
  176.                 LinearLayout.LayoutParams.MATCH_PARENT
  177.             )
  178.             root_container.addView(emptyView)
  179.         }
  180.         content_loading.visibility = View.GONE
  181.         slider_view.visibility = View.GONE
  182.         emptyView?.visibility = View.VISIBLE
  183.     }
  184. }

ProfileFragment：基于LiveData+ViewModel改造数据请求

还有最后一个页面：

抽到ViewModel当中：

  1. package org.devio.`as`.proj.main.fragment.profile
  2.  
  3. import androidx.lifecycle.LiveData
  4. import androidx.lifecycle.MutableLiveData
  5. import androidx.lifecycle.ViewModel
  6. import org.devio.`as`.proj.common.BuildConfig
  7. import org.devio.`as`.proj.main.http.ApiFactory
  8. import org.devio.`as`.proj.main.http.api.AccountApi
  9. import org.devio.`as`.proj.main.model.CourseNotice
  10. import org.devio.hi.library.restful.HiCallback
  11. import org.devio.hi.library.restful.HiResponse
  12.  
  13. class ProfileViewModel : ViewModel() {
  14.  
  15.     fun queryCourseNotice(): LiveData<CourseNotice> {
  16.         val noticeData = MutableLiveData<CourseNotice>();
  17.         ApiFactory.create(AccountApi::class.java).notice()
  18.             .enqueue(object : HiCallback<CourseNotice> {
  19.                 override fun onSuccess(response: HiResponse<CourseNotice>) {
  20.                     if (response.data != null && response.data!!.total > 0) {
  21.                         noticeData.postValue(response.data)
  22.                     }
  23.                 }
  24.  
  25.                 override fun onFailed(throwable: Throwable) {
  26.                     //ignore
  27.                     if (BuildConfig.DEBUG) {
  28.                         throwable.printStackTrace()
  29.                     }
  30.                 }
  31.             })
  32.         return noticeData
  33.     }
  34. }

调用一下：

基于ViewModel+LiveData架构商品详情模块：

目标：

接下来则来构建商品的详情模块，它是电商中至为重要的一个页面，该页面如果做得不好直接导致用户的流失公司收益的减少，所以要做好这么复杂的模块还是巨有一定的挑战的，下面先来看一下整体的大纲：

架构分析：

化整为零：

对于复杂模块得将其进行细分，一点点进行攻破， 先来看一下整个详情的效果：

大致可以看到有如下功能：

1、商品顶部Banner轮播：

 

2、标题滑动渐变效果：

3、商品评价：

4、店铺模块：

5、商品属性展示：

6、商品图片广告长图展示，这个是由多张图展示的，就不多说了，人人皆知的效果。

7、相似商品推荐列表：

8、底部操作区域：

针对这么多列表类型拆分成多个独立的HiDataItem，需求拆分按照数据流入的规则，看一下Item拆解如下：

而这里涉及到的用户交互：

疑难解惑：

  • 评论标签流式布局-ChipGroup，注意滑动复用问题
    通常的写法是会用RecyclerView+FlowLayoutManager来实现，但是咱们这种个数不多，也不存在滑动复用的问题，所有用它来实现有点小题大作了，所以这里会以一种全新的思路进行开发。
  • 商品相册浏览避免滑动抖动，需要提前预设宽高，图片载加成功后再等比计算实际尺寸。
  • 滑动标题栏渐变，需要动态计算白色---透明色的中间颜色值。
  • 页面布局样式：GridLayoutManager(spanCount=2)。
    其实就是指这两个Grid：

    对于这块会再嵌一个RecyclerView，然后将它的spansize设置为3列，而

    而对于它则对整个RecyclerView的GridLayoutManager设置为2列既可。

大厂经验分享【涨姿势】：

这里来看一下像大厂对于这种重量级的详情页可能会用到哪些手段呢，这里纵观一下：

骨架屏：

使用页面加载更加真实，减少等待感。也就是请设计切一张跟详情类似的图片用来先前展示。

predraw：

也就是在接口请求之前使用列表页的数据进行预渲染头部信息，这样在页面一打开时就能看到商品轮播，名称，价格等基础信息， 而当数据成功请求之后再做页面刷新既可，如果使用这种方式那就没必要使用骨架屏了。

Http接口耗时优化：

接口合并。多个Http请求合并到一个总的接口。由服务端做商品详情信息的组装，减少http时延。对于大厂像详情页基本上都是一个接口，不会弄非常多的接口的。

图片加载滑动优化：

由于图片在加载之前是无法知道它的宽高值的，那么在列表滑动时就会出现列表闪动现象，为了解决此类问题，通常会有如下几种解决方案：

  • 产品约定好图片的宽高比(1:1，3：4，9：16)，从而根据宽度计算出高度进行展示。
  • 根据Url携带的图片实际尺寸等比计算出视图的宽高，这里需要借助于CDN的能力(比如：https://img.xxx.com/tfs/android-logo-large-720-720.png)。
  • cdn裁剪，根据ImageView的宽高size，往图片Url上拼接尺寸信息(100-100)，根据当前设备评分，网络环境拼接quanlity=70图片质量参数。
  • 如果不具备以上条件怎么办？视图添加到列表上之前，设置宽高相等的尺寸，图片下载完成后，等比缩放视图的尺寸。可以有效防止图片加载成功页面闪跳的问题。【咱们要采用的方案】

搭建详情页整体结构：

1、定义详情API：

其数据格式比较复杂：

下面来定义一下：

  1. package org.devio.`as`.proj.main.http.api
  2.  
  3. import org.devio.`as`.proj.main.model.DetailModel
  4. import org.devio.hi.library.restful.HiCall
  5. import org.devio.hi.library.restful.annotation.GET
  6. import org.devio.hi.library.restful.annotation.Path
  7.  
  8. interface DetailApi {
  9.  
  10.     @GET("goods/detail/{id}")
  11.     fun queryDetail(@Path("id") goodsId: String): HiCall<DetailModel>
  12. }

其中需要定义一下DetailModel数据模型：

  1. package org.devio.`as`.proj.main.model
  2.  
  3.  
  4. data class DetailModel(
  5.     val categoryId: String,
  6.     val commentCountTitle: String,
  7.     val commentModels: List<CommentModel>?,
  8.     val commentTags: String,
  9.     val completedNumText: String,
  10.     val createTime: String,
  11.     val flowGoods: List<GoodsModel>?,
  12.     val gallery: List<SliderImage>?,
  13.     val goodAttr: List<MutableMap<String, String>>?,
  14.     val goodDescription: String,
  15.     val goodsId: String,
  16.     val goodsName: String,
  17.     val isFavorite: Boolean,
  18.     val groupPrice: String,
  19.     val hot: Boolean,
  20.     val marketPrice: String,
  21.     val shop: Shop,
  22.     val similarGoods: List<GoodsModel>?,
  23.     val sliderImage: String,
  24.     val sliderImages: List<SliderImage>?,
  25.     val tags: String
  26. )
  27.  
  28. data class CommentModel(
  29.     val avatar: String,
  30.     val content: String,
  31.     val nickName: String
  32. )
  33.  
  34. data class Shop(
  35.     val completedNum: String,
  36.     val evaluation: String,
  37.     val goodsNum: String,
  38.     val logo: String,
  39.     val name: String
  40. )
  41.  
  42. data class Favorite(val goodsId: String, var isFavorite: Boolean)

2、新建Activity：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import android.os.Bundle
  4. import com.alibaba.android.arouter.facade.annotation.Route
  5. import org.devio.`as`.proj.common.ui.component.HiBaseActivity
  6. import org.devio.`as`.proj.main.R
  7.  
  8. /**
  9.  * 商品详情页
  10.  */
  11. @Route(path = "/detail/main")
  12. class DetailActivity : HiBaseActivity() {
  13.  
  14.     override fun onCreate(savedInstanceState: Bundle?) {
  15.         super.onCreate(savedInstanceState)
  16.         setContentView(R.layout.activity_detail)
  17.     }
  18. }

3、准备布局：

这里采用约束布局，重要的页面能尽量减少布局的嵌套尽量减少， 关于布局这块只对关键处进行说明，因为这块基本上都比较熟了，

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:id="@+id/root_container"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:background="@color/color_eee">
  9.  
  10.     <androidx.recyclerview.widget.RecyclerView
  11.         android:id="@+id/recycler_view"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="0dp"
  14.         android:overScrollMode="never"
  15.         app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
  16.         app:layout_constraintLeft_toLeftOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent" />
  18.  
  19.     <!-- 底部操作栏 -->
  20.     <LinearLayout
  21.         android:id="@+id/bottom_layout"
  22.         android:layout_width="match_parent"
  23.         android:layout_height="58dp"
  24.         android:background="@color/color_white"
  25.         android:orientation="horizontal"
  26.         app:layout_constraintBottom_toBottomOf="parent"
  27.         app:layout_constraintLeft_toLeftOf="parent">
  28.  
  29.  
  30.         <org.devio.as.proj.common.ui.view.IconFontTextView
  31.             android:id="@+id/action_favorite"
  32.             android:layout_width="0dp"
  33.             android:layout_height="match_parent"
  34.             android:layout_weight="1"
  35.             android:gravity="center"
  36.             android:text="&#xe60e;\n收藏"
  37.             android:textColor="@color/color_999"
  38.             android:textSize="@dimen/sp_14" />
  39.  
  40.  
  41.         <TextView
  42.             android:id="@+id/action_order"
  43.             android:layout_width="0dp"
  44.             android:layout_height="match_parent"
  45.             android:layout_weight="1"
  46.             android:background="@color/color_de3"
  47.             android:gravity="center"
  48.             android:textColor="@color/color_white"
  49.             android:textSize="@dimen/sp_14"
  50.             tools:text="￥29元\n现在购买" />
  51.     </LinearLayout>
  52. </androidx.constraintlayout.widget.ConstraintLayout>

其中这块标红处需要说明一下，它需要设置成0dp：

注意：它不能是match_parent，因为它会充满整个高度：

接下来准备标题：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:id="@+id/root_container"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:background="@color/color_eee">
  9.  
  10.     <!-- 标题栏 -->
  11.     <FrameLayout
  12.         android:id="@+id/title_bar"
  13.         android:layout_width="match_parent"
  14.         android:layout_height="70dp"
  15.         android:fitsSystemWindows="true"
  16.         app:layout_constraintRight_toLeftOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent">
  18.  
  19.         <org.devio.as.proj.common.ui.view.IconFontTextView
  20.             android:id="@+id/action_back"
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:gravity="center"
  24.             android:paddingLeft="12dp"
  25.             android:paddingTop="@dimen/dp_5"
  26.             android:paddingRight="12dp"
  27.             android:paddingBottom="@dimen/dp_5"
  28.             android:text="@string/if_back"
  29.             android:textSize="18sp" />
  30.  
  31.         <org.devio.as.proj.common.ui.view.IconFontTextView
  32.             android:id="@+id/action_share"
  33.             android:layout_width="wrap_content"
  34.             android:layout_height="wrap_content"
  35.             android:layout_gravity="right"
  36.             android:gravity="center"
  37.             android:paddingLeft="12dp"
  38.             android:paddingTop="@dimen/dp_5"
  39.             android:paddingRight="12dp"
  40.             android:paddingBottom="@dimen/dp_5"
  41.             android:text="@string/if_share"
  42.             android:textSize="18sp" />
  43.  
  44.     </FrameLayout>
  45.  
  46.     <androidx.recyclerview.widget.RecyclerView
  47.         android:id="@+id/recycler_view"
  48.         android:layout_width="match_parent"
  49.         android:layout_height="match_parent"
  50.         android:overScrollMode="never"
  51.         app:layout_constraintBottom_toTopOf="@+id/bottom_layout"
  52.         app:layout_constraintLeft_toLeftOf="parent"
  53.         app:layout_constraintTop_toTopOf="parent" />
  54.  
  55.     <!-- 底部操作栏 -->
  56.     <LinearLayout
  57.         android:id="@+id/bottom_layout"
  58.         android:layout_width="match_parent"
  59.         android:layout_height="58dp"
  60.         android:background="@color/color_white"
  61.         android:orientation="horizontal"
  62.         app:layout_constraintBottom_toBottomOf="parent"
  63.         app:layout_constraintLeft_toLeftOf="parent">
  64.  
  65.  
  66.         <org.devio.as.proj.common.ui.view.IconFontTextView
  67.             android:id="@+id/action_favorite"
  68.             android:layout_width="0dp"
  69.             android:layout_height="match_parent"
  70.             android:layout_weight="1"
  71.             android:gravity="center"
  72.             android:text="&#xe60e;\n收藏"
  73.             android:textColor="@color/color_999"
  74.             android:textSize="@dimen/sp_14" />
  75.  
  76.  
  77.         <TextView
  78.             android:id="@+id/action_order"
  79.             android:layout_width="0dp"
  80.             android:layout_height="match_parent"
  81.             android:layout_weight="1"
  82.             android:background="@color/color_de3"
  83.             android:gravity="center"
  84.             android:textColor="@color/color_white"
  85.             android:textSize="@dimen/sp_14"
  86.             tools:text="￥29元\n现在购买" />
  87.     </LinearLayout>
  88. </androidx.constraintlayout.widget.ConstraintLayout>

其中由于需要沉浸式的效果，这里给标题View增加了一个这个属性：

4、设置状态栏风格：

5、注入Arouter：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import android.graphics.Color
  4. import android.os.Bundle
  5. import android.text.TextUtils
  6. import com.alibaba.android.arouter.facade.annotation.Autowired
  7. import com.alibaba.android.arouter.facade.annotation.Route
  8. import org.devio.`as`.proj.common.ui.component.HiBaseActivity
  9. import org.devio.`as`.proj.main.R
  10. import org.devio.`as`.proj.main.model.GoodsModel
  11. import org.devio.`as`.proj.main.route.HiRoute
  12. import org.devio.hi.library.util.HiStatusBar
  13.  
  14. /**
  15.  * 商品详情页
  16.  */
  17. @Route(path = "/detail/main")
  18. class DetailActivity : HiBaseActivity() {
  19.  
  20.     @JvmField
  21.     @Autowired
  22.     var goodsId: String? = null
  23.  
  24.     /*此字段是用来提前加载商品轮播及基础信息用的*/
  25.     @JvmField
  26.     @Autowired
  27.     var goodsModel: GoodsModel? = null
  28.  
  29.     override fun onCreate(savedInstanceState: Bundle?) {
  30.         super.onCreate(savedInstanceState)
  31.         HiStatusBar.setStatusBar(this, true, statusBarColor = Color.TRANSPARENT, translucent = true)
  32.         HiRoute.inject(this)
  33.         assert(!TextUtils.isEmpty(goodsId)) { " goodsId must bot be null" }
  34.         setContentView(R.layout.activity_detail)
  35.     }
  36. }

6、initView()：

 

7、数据请求API准备：

此时则需要使用ViewModel了，新建一个类：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import androidx.lifecycle.ViewModel
  5. class DetailViewModel() : ViewModel() {
  7. }

对于ViewModel的使用目前也已经比较熟悉了，不过这里用一种自定义参数的方式演练一把，对于ViewModel带参数不是正常只支持这两种嘛：

用的都是系统的参数，但是！！！有些情况可以需要携带一些自定义的参数，就比如此时此刻，对于详情的请求需要有一个goodsId，所以看一下这时该怎么来定义ViewModel：

此时需要指定一下创建工厂，因为我们在获得ViewModel时可以指定一个factory：

而工厂的编写方法可以参数系统创建的思路：

所以咱们可以这样定义：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import androidx.lifecycle.ViewModel
  4. import androidx.lifecycle.ViewModelProvider
  5. import androidx.lifecycle.ViewModelStoreOwner
  6.  
  7. class DetailViewModel(val goodsId: String?) : ViewModel() {
  8.  
  9.     companion object {
  10.         private class DetailViewModelFactory(val goodsId: String?) :
  11.             ViewModelProvider.NewInstanceFactory() {
  12.             override fun <T : ViewModel?> create(modelClass: Class<T>): T {
  13.                 try {
  14.                     val constructor = modelClass.getConstructor(String::class.java)
  15.                     if (constructor != null) {
  16.                         return constructor.newInstance(goodsId)
  17.                     }
  18.                 } catch (exception: Exception) {
  19.                     //ignore
  20.                 }
  21.                 //如果发生异常，则直接用降级方案由父类进行创建
  22.                 return super.create(modelClass)
  23.             }
  24.         }
  25.  
  26.         fun get(goodsId: String?, viewModelStoreOwner: ViewModelStoreOwner): DetailViewModel {
  27.             return ViewModelProvider(viewModelStoreOwner, DetailViewModelFactory(goodsId)).get(
  28.                 DetailViewModel::class.java
  29.             )
  30.         }
  31.     }
  32. }

其中标红的可以看一下父类的创建行为：

接下来定义请求方法：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import android.text.TextUtils
  4. import androidx.lifecycle.*
  5. import com.alibaba.android.arouter.BuildConfig
  6. import org.devio.`as`.proj.main.http.ApiFactory
  7. import org.devio.`as`.proj.main.http.api.DetailApi
  8. import org.devio.`as`.proj.main.model.DetailModel
  9. import org.devio.hi.library.restful.HiCallback
  10. import org.devio.hi.library.restful.HiResponse
  11.  
  12. class DetailViewModel(val goodsId: String?) : ViewModel() {
  13.  
  14.     companion object {
  15.         private class DetailViewModelFactory(val goodsId: String?) :
  16.             ViewModelProvider.NewInstanceFactory() {
  17.             override fun <T : ViewModel?> create(modelClass: Class<T>): T {
  18.                 try {
  19.                     val constructor = modelClass.getConstructor(String::class.java)
  20.                     if (constructor != null) {
  21.                         return constructor.newInstance(goodsId)
  22.                     }
  23.                 } catch (exception: Exception) {
  24.                     //ignore
  25.                 }
  26.                 //如果发生异常，则直接用降级方案由父类进行创建
  27.                 return super.create(modelClass)
  28.             }
  29.         }
  30.  
  31.         fun get(goodsId: String?, viewModelStoreOwner: ViewModelStoreOwner): DetailViewModel {
  32.             return ViewModelProvider(viewModelStoreOwner, DetailViewModelFactory(goodsId)).get(
  33.                 DetailViewModel::class.java
  34.             )
  35.         }
  36.     }
  37.  
  38.     fun queryDetailData(): LiveData<DetailModel?> {
  39.         val pageData = MutableLiveData<DetailModel?>()
  40.         if (!TextUtils.isEmpty(goodsId)) {
  41.             ApiFactory.create(DetailApi::class.java).queryDetail(goodsId!!)
  42.                 .enqueue(object : HiCallback<DetailModel> {
  43.                     override fun onSuccess(response: HiResponse<DetailModel>) {
  44.                         if (response.successful() && response.data != null) {
  45.                             pageData.postValue(response.data)
  46.                         } else {
  47.                             pageData.postValue(null)
  48.                         }
  49.                     }
  50.  
  51.                     override fun onFailed(throwable: Throwable) {
  52.                         pageData.postValue(null)
  53.                         if (BuildConfig.DEBUG) {
  54.                             throwable.printStackTrace()
  55.                         }
  56.                     }
  57.  
  58.                 })
  59.         }
  60.         return pageData
  61.     }
  62. }

8、发起请求：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import android.graphics.Color
  4. import android.os.Bundle
  5. import android.text.TextUtils
  6. import android.view.View
  7. import androidx.constraintlayout.widget.ConstraintLayout
  8. import androidx.lifecycle.Observer
  9. import androidx.recyclerview.widget.GridLayoutManager
  10. import com.alibaba.android.arouter.facade.annotation.Autowired
  11. import com.alibaba.android.arouter.facade.annotation.Route
  12. import kotlinx.android.synthetic.main.activity_detail.*
  13. import org.devio.`as`.proj.common.ui.component.HiBaseActivity
  14. import org.devio.`as`.proj.common.ui.view.EmptyView
  15. import org.devio.`as`.proj.main.R
  16. import org.devio.`as`.proj.main.model.DetailModel
  17. import org.devio.`as`.proj.main.model.GoodsModel
  18. import org.devio.`as`.proj.main.route.HiRoute
  19. import org.devio.hi.library.util.HiStatusBar
  20. import org.devio.hi.ui.item.HiAdapter
  21.  
  22. /**
  23.  * 商品详情页
  24.  */
  25. @Route(path = "/detail/main")
  26. class DetailActivity : HiBaseActivity() {
  27.  
  28.     private lateinit var viewModel: DetailViewModel
  29.     private var emptyView: EmptyView? = null
  30.  
  31.     @JvmField
  32.     @Autowired
  33.     var goodsId: String? = null
  34.  
  35.     /*此字段是用来提前加载商品轮播及基础信息用的*/
  36.     @JvmField
  37.     @Autowired
  38.     var goodsModel: GoodsModel? = null
  39.  
  40.     override fun onCreate(savedInstanceState: Bundle?) {
  41.         super.onCreate(savedInstanceState)
  42.         HiStatusBar.setStatusBar(this, true, statusBarColor = Color.TRANSPARENT, translucent = true)
  43.         HiRoute.inject(this)
  44.         assert(!TextUtils.isEmpty(goodsId)) { " goodsId must bot be null" }
  45.         setContentView(R.layout.activity_detail)
  46.  
  47.         initView()
  48.         queryDetailData()
  49.     }
  50.  
  51.     private fun initView() {
  52.         action_back.setOnClickListener { onBackPressed() }
  53.         action_share.setOnClickListener {
  54.             showToast("share,not support for now.")
  55.         }
  56.  
  57.         /* 这里的Grid全局设置成2列 */
  58.         recycler_view.layoutManager = GridLayoutManager(this, 2)
  59.         recycler_view.adapter = HiAdapter(this)
  60.  
  61.     }
  62.  
  63.     private fun queryDetailData() {
  64.         viewModel = DetailViewModel.get(goodsId, this)
  65.         viewModel.queryDetailData().observe(this, Observer {
  66.             if (it == null) {
  67.                 showEmptyView()
  68.             } else {
  69.                 bindData(it)
  70.             }
  71.         })
  72.     }
  73.  
  74.     private fun bindData(detailModel: DetailModel) {
  75.         TODO("Not yet implemented")
  76.     }
  77.  
  78.     //还是采用动态添加的方式来实现空View，因为大多数情况下是用不到的，为了提高布局性能
  79.     private fun showEmptyView() {
  80.         if (emptyView == null) {
  81.             emptyView = EmptyView(this)
  82.             emptyView!!.setIcon(R.string.if_empty3)
  83.             emptyView!!.setDesc(getString(R.string.list_empty_desc))
  84.             emptyView!!.layoutParams = ConstraintLayout.LayoutParams(-1, -1)
  85.             emptyView!!.setBackgroundColor(Color.WHITE)
  86.             emptyView!!.setButton(getString(R.string.list_empty_action), View.OnClickListener {
  87.                 viewModel.queryDetailData()
  88.             })
  89.  
  90.             root_container.addView(emptyView)
  91.         }
  92.  
  93.         recycler_view.visibility = View.GONE
  94.         emptyView!!.visibility = View.VISIBLE
  95.     }
  96. }

基于HiBanner+HiDataItem实现列表主图轮播：

接下来则来绑定数据到RecyclerView上面了。

1、准备商品轮播头部Item布局：

由于商品头部又有相对嵌套的关系，为了减少布局层级还是使用约束根布局来搭建，具体布局细节就不过多描述了，只针对关键点进行说明：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="wrap_content"
  7.     android:layout_marginBottom="@dimen/dp_10"
  8.     android:background="@color/color_white"
  9.     android:paddingBottom="@dimen/dp_10">
  10.  
  11.     <org.devio.hi.ui.banner.HiBanner
  12.         android:id="@+id/hi_banner"
  13.         android:layout_width="match_parent"
  14.         android:layout_height="360dp"
  15.         app:autoPlay="true"
  16.         app:layout_constraintLeft_toLeftOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent"
  18.         app:loop="true"
  19.         tools:background="@color/colorAccent" />
  20.  
  21.  
  22.     <TextView
  23.         android:id="@+id/price"
  24.         android:layout_width="wrap_content"
  25.         android:layout_height="wrap_content"
  26.         android:layout_marginLeft="@dimen/dp_10"
  27.         android:layout_marginTop="@dimen/dp_20"
  28.         android:textColor="@color/color_d43"
  29.         android:textSize="@dimen/sp_14"
  30.         android:textStyle="bold"
  31.         app:layout_constraintLeft_toLeftOf="parent"
  32.         app:layout_constraintTop_toBottomOf="@+id/hi_banner"
  33.         tools:text="￥100" />
  34.  
  35.     <TextView
  36.         android:id="@+id/sale_desc"
  37.         android:layout_width="wrap_content"
  38.         android:layout_height="wrap_content"
  39.         android:layout_marginTop="@dimen/dp_20"
  40.         android:layout_marginRight="@dimen/dp_10"
  41.         android:textColor="@color/color_9b9"
  42.         android:textSize="@dimen/sp_12"
  43.         app:layout_constraintRight_toRightOf="parent"
  44.         app:layout_constraintTop_toBottomOf="@+id/hi_banner"
  45.         tools:text="已拼100件" />
  46.  
  47.     <TextView
  48.         android:id="@+id/title"
  49.         android:layout_width="match_parent"
  50.         android:layout_height="wrap_content"
  51.         android:layout_marginLeft="@dimen/dp_10"
  52.         android:layout_marginTop="6dp"
  53.         android:layout_marginRight="@dimen/dp_10"
  54.         android:ellipsize="end"
  55.         android:maxLines="2"
  56.         android:textColor="@color/color_000"
  57.         android:textSize="14sp"
  58.         android:textStyle="bold"
  59.         app:layout_constraintLeft_toLeftOf="parent"
  60.         app:layout_constraintTop_toBottomOf="@+id/price"
  61.         tools:text="移动端架构师成长体系课谁学谁知道\n\n移动端架构师成长体系课谁学谁知道" />
  62. </androidx.constraintlayout.widget.ConstraintLayout>

预览如下：

2、绑定Item数据：

根据咱们之前https://www.cnblogs.com/webor2006/p/13607431.html封装的HiDataItem，新建一个对应的Item：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import android.widget.ImageView
  4. import kotlinx.android.synthetic.main.layout_detail_item_header.*
  5. import org.devio.`as`.proj.common.ui.view.loadUrl
  6. import org.devio.`as`.proj.main.R
  7. import org.devio.`as`.proj.main.model.DetailModel
  8. import org.devio.`as`.proj.main.model.SliderImage
  9. import org.devio.hi.ui.banner.core.HiBannerAdapter
  10. import org.devio.hi.ui.banner.core.HiBannerModel
  11. import org.devio.hi.ui.banner.indicator.HiNumIndicator
  12. import org.devio.hi.ui.item.HiDataItem
  13. import org.devio.hi.ui.item.HiViewHolder
  14.  
  15. class HeaderItem(
  16.     val sliderImages: List<SliderImage>?,
  17.     val price: String?,
  18.     val completedNumText: String?,
  19.     val goodsName: String?
  20. ) : HiDataItem<DetailModel, HiViewHolder>() {
  21.     override fun onBindData(holder: HiViewHolder, position: Int) {
  22.         val context = holder.itemView.context ?: return
  23.         val bannerItems = arrayListOf<HiBannerModel>()
  24.         sliderImages?.forEach {//将其转换成Banner对应的Model
  25.             val bannerMo = object : HiBannerModel() {}
  26.             bannerMo.url = it.url
  27.             bannerItems.add(bannerMo)
  28.         }
  29.         holder.hi_banner.setHiIndicator(HiNumIndicator(context))
  30.         holder.hi_banner.setBannerData(bannerItems)
  31.         holder.hi_banner.setBindAdapter { viewHolder: HiBannerAdapter.HiBannerViewHolder?, mo: HiBannerModel?, position: Int ->
  32.             val imageView = viewHolder?.rootView as? ImageView
  33.             mo?.let { imageView?.loadUrl(it.url) }
  34.         }
  35.     }
  36.  
  37.     override fun getItemLayoutRes(): Int {
  38.         return R.layout.layout_detail_item_header
  39.     }
  40. }

其中目前报错了：

因为HiDataItem的构造中有一个参数需要赋值，看一下：

其它这个data参数木有用到，所以将其给一个默认的值既可

所以下而来搞一下：

然后再将剩一下的View进行数据绑定，没啥好说的：

  1. package org.devio.`as`.proj.main.biz.detail
  2.  
  3. import android.text.SpannableString
  4. import android.text.Spanned
  5. import android.text.TextUtils
  6. import android.text.style.AbsoluteSizeSpan
  7. import android.widget.ImageView
  8. import kotlinx.android.synthetic.main.layout_detail_item_header.*
  9. import org.devio.`as`.proj.common.ui.view.loadUrl
  10. import org.devio.`as`.proj.main.R
  11. import org.devio.`as`.proj.main.model.DetailModel
  12. import org.devio.`as`.proj.main.model.SliderImage
  13. import org.devio.hi.ui.banner.core.HiBannerAdapter
  14. import org.devio.hi.ui.banner.core.HiBannerModel
  15. import org.devio.hi.ui.banner.indicator.HiNumIndicator
  16. import org.devio.hi.ui.item.HiDataItem
  17. import org.devio.hi.ui.item.HiViewHolder
  18.  
  19. class HeaderItem(
  20.     val sliderImages: List<SliderImage>?,
  21.     val price: String?,
  22.     val completedNumText: String?,
  23.     val goodsName: String?
  24. ) : HiDataItem<DetailModel, HiViewHolder>() {
  25.     override fun onBindData(holder: HiViewHolder, position: Int) {
  26.         val context = holder.itemView.context ?: return
  27.         val bannerItems = arrayListOf<HiBannerModel>()
  28.         sliderImages?.forEach {
  29.             val bannerMo = object : HiBannerModel() {}
  30.             bannerMo.url = it.url
  31.             bannerItems.add(bannerMo)
  32.         }
  33.         holder.hi_banner.setHiIndicator(HiNumIndicator(context))
  34.         holder.hi_banner.setBannerData(bannerItems)
  35.         holder.hi_banner.setBindAdapter { viewHolder: HiBannerAdapter.HiBannerViewHolder?, mo: HiBannerModel?, position: Int ->
  36.             val imageView = viewHolder?.rootView as? ImageView
  37.             mo?.let { imageView?.loadUrl(it.url) }
  38.         }
  39.  
  40.         holder.price.text = spanPrice(price)
  41.         holder.sale_desc.text = completedNumText
  42.         holder.title.text = goodsName
  43.     }
  44.  
  45.     /**
  46.      * 设置价格的富文本
  47.      */
  48.     private fun spanPrice(price: String?): CharSequence {
  49.         if (TextUtils.isEmpty(price)) return ""
  50.  
  51.         val ss = SpannableString(price)
  52.         ss.setSpan(AbsoluteSizeSpan(18, true), 1, ss.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
  53.         return ss
  54.     }
  55.  
  56.     override fun getItemLayoutRes(): Int {
  57.         return R.layout.layout_detail_item_header
  58.     }
  59. }

3、DetailActivity.bindData()添加到HiAdapter中：

其中标红的商品价格有情况需要说明一下，先看一下它们的数据形态：

marketPrice金额前面有¥符号，而groupPrice木有，而且marketPrice有可能为空，此时就应该显示成groupPrice，所以。。咱们需要封装一下价格的显示：

另外还需要预加载一下，对于有传goodsModel的情况下，这样可以一进界面就可以看到商品的头倍信息，增加用户体验：

这里有一个细节需要提一下：

因为在preBindData()时其布局都还没有完成，此时调用它recyclerView的notify()肯定就会抛异常的，看一下调用的方法就知道了：

 

4、增加跳转事件：

给首页Banner和商品列表增加一下跳转事件：

其中在ARouter中增加一个页面映射：

另外对于商品列表的点击也得加一下事件：

不过此时报错了，是因为GoodsModel木有实现Parcelable接口，不是往Bundle可以传序列号对象么？是的，但是！！这里是要学习一下在Koltin中使用Parcelable跟在Java中使用有啥不一样，感受一下：

其实在Kotlin中使用Parcelable非常之简单，只要再加一个注解既可：

然后就可以了，是不是超赞，回想一下Java中的写法，不要太清爽哦~~

5、运行：

报错了。。

其实是咱们字段定义没有允许为空造成，如下：

然后GoodsItem这块得判空了：

再运行：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/259927
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号