实战项目-布局优化

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

应用场景

最近做的一个项目，门店设置从刚开始的三个按钮被活生生的添加到十几个，本来是准备为省时间，准备复制粘贴了事，但是发现复制复制，搞到块500行，刚好今天有点时间，搞一下优化

思路：采用RecyclerView，添加两种不同的布局的方式优化一下

使用的第三方库

使用BaseRecyclerViewAdapterHelper，以前在项目中也使用过它的2.x的版本，但是现在最新是3.0.7，看了一下它的源码发现现3.x改动其实还有有点的大，特别是针对多重布局这块的优化，而且弄完之后发现相比2.x其实更加简洁了

改造xml

将以前的那些xml删除换成RecyclerView（UmeRecyclerView是自己封装的）

<com.trendlab.ui.recyclerview.UmeRecyclerView
    android:id="@+id/urvMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

新建bean对象

class MenuEntityBean(  val name: String = "",
                       val path: String? = null,
                       val imageResource: Int = 0,
                       val headerTitle: String = "") : SectionEntity{
    override val isHeader: Boolean
        get() = headerTitle.isNotBlank()


}

• name 是功能的名称
• path 是对应的路径，因为我使用了aroute使用path好处理一下，你们也可以换成activity对象
• imageResource 功能的图片
• headerTitle 相当于模块的名称

adapter的编写

class MenuAdapter(data: MutableList<MenuEntityBean>) :
    BaseSectionQuickAdapter<MenuEntityBean, BaseViewHolder>(R.layout.item_dept_head_layout, R.layout.item_dept_menu_layout, data) {

    override fun convert(helper: BaseViewHolder, item: MenuEntityBean) {
        helper.setText(R.id.ivMenuName, item.name)
        helper.setImageResource(R.id.ivMenuIcon, item.imageResource)
    }

    override fun convertHeader(helper: BaseViewHolder, item: MenuEntityBean) {
        helper.setText(R.id.tvHeadTitle, item.headerTitle)
    }
}

• item_dept_head_layout 是头的布局，是一个textview控件

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tvHeadTitle"
   xmlns:tools="http://schemas.android.com/tools"
   style="@style/gray66sp16Text"
   android:layout_marginTop="@dimen/dp_20"
   android:layout_marginLeft="@dimen/dp_20"
   tools:showIn="@layout/dept_manager_fragment"
   tools:ignore="ResourceName" />

• item_dept_menu_layout 是一个imageview+ textview 的简单布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    tools:ignore="ResourceName">

    <ImageView
        android:id="@+id/ivMenuIcon"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dp_30"
        android:src="@drawable/icon_appointment_setting"
        android:layout_marginTop="@dimen/dp_14" />

    <TextView
        android:id="@+id/ivMenuName"
        style="@style/black12spText"
        android:layout_marginTop="@dimen/dp_10"
         />
</LinearLayout>

fragment中代码的编写

@AndroidEntryPoint
@Route(path = RouteKey.Dept.DEPT_MANAGER)
class DeptManagerFragment : BaseFragment<DeptManagerFragmentBinding, DeptManagerViewModel>(),
    OnItemClickListener {

    override val mViewModel: DeptManagerViewModel by viewModels()

    private val menuAdapter by lazy {
        MenuAdapter(menuItemData).apply {
            animationEnable = true
            setOnItemClickListener(this@DeptManagerFragment)
        }
    }

    override fun onItemClick(adapter: BaseQuickAdapter<*, *>, view: View, position: Int) {
        val item = adapter.data[position] as MenuEntityBean
        if (!item.isHeader) {
            item.path?.let {
                when (it) {
                  //点击事件的处理
                }
            }
        }
    }

    override fun DeptManagerFragmentBinding.initView() {
        umeNavigationBar.setTitle(getStringByRes(R.string.dept_management_lable))
        urvMenu.apply {
            layoutManager = GridLayoutManager(requireActivity(), 4)
            adapter = menuAdapter
        }
    }

    private val menuItemData: ArrayList<MenuEntityBean>
        get() = arrayListOf(
            MenuEntityBean(headerTitle = getString(R.string.dept_management_store_setting_lable)),
           .....
        );

}

最后的效果

优化之后的代码减少了几百行（xml+跳转逻辑等），而且变的可以扩展了。