仿饿了么商品列表页面

0.996字数 1128阅读 6046
android.jpg

一直在学习Kotlin,所以Demo都是使用Kotlin实现。
ps:其实用什么实现不重要,这里只是为了仿一个UI,闲来写的,希望给新手参考,老司机请绕道;没有啥难得技术,主要就是分享下自己分析和实现的过程。

首先来看一下饿了么商品列表是什么样子

饿了么原图.gif

1、分析

①首先是标题栏显示大分类、返回键、搜索键----可用Toolbar实现

②展示分类,滑动切换和点击切换,典型的TabLayout

③分类列表切换用ViewPager

④向上滑动时标题栏隐藏,可使用ScrollView监听滑动,也可以使用CoordinatorLayout加AppBarLayout(推荐)

⑤列表用RecyclerView实现,顶部的推荐食品可用不同的ViewType控制

⑥列表向上滑动,列表筛选项悬停;可在固定位置放一个默认隐藏的view,筛选项为一个Item,监听滑动,当滑动一定距离后显示View,

也可以使用RecyclerView的ItemDecoration绘制该View

⑦下拉刷新

2、动手实现

①主页面使用CoordinatorLayout+AppBarLayout(ToolBar+SlidingTabLayout)+ViewPager实现,如下是一个很常见的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...
    >

    <android.support.design.widget.AppBarLayout
        ...
        >

        <android.support.v7.widget.Toolbar
            ...
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <com.flyco.tablayout.SlidingTabLayout
            ...
            />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

需要滑动隐藏标题栏是靠app:layout_scrollFlags="scroll|enterAlways",以下为简介,详情请搜索layout_scrollFlags

layout_scrollFlags共有5个属性,需要Child View伴随着滚动事件而滚出或滚进屏幕首先加入"scroll"

enterAlways:快速返回模式。

enterAlwaysCollapsed:enterAlways的附加值,涉及最小高度

exitUntilCollapsed:发生向上滚动事件时,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。

snap:Child View滚动比例的一个吸附效果。

SlidingTabLayout是使用别人造好的轮子,使用它很久了很好用很方便,能满足大多数需求,源码也很清晰需要修改也很方便。

ViewPager设置app:layout_behavior="@string/appbar_scrolling_view_behavior"这是官方提供的behavior,我的理解是约定可滚动View和AppBar的折叠关系,有兴趣可以去研究下源码。

然后仅需关联ViewPager和TabLayout即可

mToolBar = findViewById(R.id.toolbar)
mViewPager = findViewById(R.id.viewPager)
mTabLayout = findViewById(R.id.tabLayout)
mToolBar.title = "下午茶"
mToolBar.setNavigationIcon(R.mipmap.ic_back)
setSupportActionBar(toolbar)
mViewPager.adapter = MyViewPagerAdapter(titles, supportFragmentManager)
mTabLayout.setViewPager(mViewPager)

②推荐商品和列表

其实这个就很简单了,用过RecyclerView的都知道我们可以用ViewType来使其展示不同的布局

override fun getItemViewType(position: Int): Int {
    return if (position == 0) {
        R.layout.item_recommend //第一个展示推荐商品的布局
    } else {
        R.layout.item_test      //后续展示商品列表项
    }
}

③上滑筛选项悬停

这里我们使用ItemDecoration绘制该View来实现

问:为什么?

答:简单啊!

问:简单吗?

答:简单,因为又有轮子可以用;哈哈,看来我们不生产代码,只是代码的搬运工。

这里的实现借用了StickyRecyclerHeadersDecoration

这个库的好处是不用改造RecyclerView就可以轻松实现StickyRecyclerHeaders,平时的城市列表,商品分类也可以用到。

首先使你的Adapter实现StickyRecyclerHeadersAdapter<VH extends RecyclerView.ViewHolder>,header的布局即为筛选布局
在实现getHeaderId时将第一个Item的ID返回-1就不会显示,其他商品Item的headerID统一为一个即可,这样在上滑过程中超过position==0筛选即可悬停

class TestAdapter(private var isHome: Boolean) : RecyclerView.Adapter<ViewHolder>(), StickyRecyclerHeadersAdapter<HeaderViewHolder> {


    override fun onBindHeaderViewHolder(holder: HeaderViewHolder?, position: Int) {

    }

    override fun getHeaderId(position: Int): Long = if (position == 0 && isHome) -1 else 1

    override fun onCreateHeaderViewHolder(parent: ViewGroup?): HeaderViewHolder {
        val view = LayoutInflater.from(parent!!.context).inflate(R.layout.item_header, parent, false)
        return HeaderViewHolder(view)
    }

    override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent!!.context).inflate(viewType, parent, false)
        return ViewHolder(view)
    }

    override fun getItemViewType(position: Int): Int {
        return if (position == 0 && isHome) R.layout.item_recommend else R.layout.item_test
    }

    override fun onBindViewHolder(holder: ViewHolder?, position: Int) {

    }

    override fun getItemCount(): Int = 30

}

④下拉刷新
下拉刷新只是模拟实现,并未实现饿了么的动画,Demo中使用的是最近很火的SmartRefreshLayout

我们来看一下Demo实现的效果

Demo图.gif

问题分析

实际上头的实现使用ItemDecoration确实比较方便,但是无法实现点击效果。所以达不到筛选的目的,上面的那个粘性头部控件一般只适合那种只做展示的使用,
最后为了实现这个效果我们使用了sticky-layoutmanager
关于上面这个控件的使用大家可以参考原作者的说明。这东西也是上班的时候突然想到此前的这个Demo的点击事件没有完善,所以特来加上这个实现。
sticky-layoutmanager是更改的layoutmanager所以我们要确定头实际上就是多一个ViewType,实现如下

override fun isStickyHeader(position: Int): Boolean {
        return if (isHome) {
            position == 1
        } else {
            position == 0
        }
    }

override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): RecyclerView.ViewHolder? {
    val view = LayoutInflater.from(parent!!.context).inflate(viewType, parent, false)
    return when (viewType) {
        R.layout.item_recommend -> {
            view.setOnClickListener {
                Toast.makeText(parent.context, "点击", Toast.LENGTH_SHORT).show()
            }
            RecommendViewHolder(view)
        }
        R.layout.item_header -> {
            view.findViewById<TextView>(R.id.type1).setOnClickListener { Toast.makeText(parent.context, "综合排序", Toast.LENGTH_SHORT).show() }
            view.findViewById<TextView>(R.id.type2).setOnClickListener { Toast.makeText(parent.context, "好评优先", Toast.LENGTH_SHORT).show() }
            view.findViewById<TextView>(R.id.type3).setOnClickListener { Toast.makeText(parent.context, "距离最近", Toast.LENGTH_SHORT).show() }
            view.findViewById<TextView>(R.id.type4).setOnClickListener { Toast.makeText(parent.context, "筛选", Toast.LENGTH_SHORT).show() }
            HeaderViewHolder(view)
        }
        else -> {
            view.setOnClickListener {
                Toast.makeText(parent.context, it.tag as String, Toast.LENGTH_SHORT).show()
            }
            ViewHolder(view)
        }
    }
}

最后我们来看一下增加点击的Demo实现的效果

增加点击效果的Demo.gif

最后附上GitHub地址仿饿了么商品列表页面,希望各位看官不吝Star
额!工程中应该是ELeMe居然打成了ELeMa,惭愧!语文老师别怪我~

推荐阅读更多精彩内容