All Projects → leiyun1993 → ELeMaList

leiyun1993 / ELeMaList

Licence: other
仿饿了么商品列表页面

Programming Languages

kotlin
9241 projects
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to ELeMaList

CoolCoodinatorLayout
banner沉浸式+滚动视差+悬浮搜索框+标题置顶复杂联动效果
Stars: ✭ 46 (+6.98%)
Mutual labels:  toolbar, coordinatorlayout, appbarlayout
NestedScrollingDemo
😋😋😋A good app for understanding android nested scrolling
Stars: ✭ 98 (+127.91%)
Mutual labels:  coordinatorlayout, appbarlayout
Titlebar
Android 标题栏框架,从此布局属性不用记
Stars: ✭ 980 (+2179.07%)
Mutual labels:  toolbar, coordinatorlayout
Materialdesignsamples
Material Design 系列控件samples,讲了Material Design 系列新控件的使用方法和一些场景示例,使用详情请看对应博客,持续更新中...
Stars: ✭ 900 (+1993.02%)
Mutual labels:  toolbar, coordinatorlayout
Alipayhome
高仿支付宝首页的头部伸缩动画(使用design实现效果,CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar)
Stars: ✭ 164 (+281.4%)
Mutual labels:  toolbar, coordinatorlayout
NotchToolkit
Use the iPhone X notch in creative ways 👩‍🎨👨‍🎨.
Stars: ✭ 55 (+27.91%)
Mutual labels:  toolbar
react-native-nested-scroll-view
react-native wrapper for android NestedScrollView
Stars: ✭ 77 (+79.07%)
Mutual labels:  coordinatorlayout
qt-quick-responsive-helper
A simple toolbar for QtQuick based applications, to let developers test different resolutions and dpi settings easily. It was made to be integrated with minimal effort (only one QML file), and to be configurable for your specific usage.
Stars: ✭ 26 (-39.53%)
Mutual labels:  toolbar
Snap-Assist
MacOS toolbar utility application that makes window management easier.
Stars: ✭ 17 (-60.47%)
Mutual labels:  toolbar
tool-bar
Package providing customisable toolbar for Atom
Stars: ✭ 161 (+274.42%)
Mutual labels:  toolbar
imgui
Dear ImGui Addons Branch = plain unmodified dear imgui plus some extra addon.
Stars: ✭ 348 (+709.3%)
Mutual labels:  toolbar
LiteRefresh
Nested scrolling UI library for Android based on CoordinatorLayout. Pull-to-refresh and pull-to-load-more are supported.
Stars: ✭ 37 (-13.95%)
Mutual labels:  coordinatorlayout
SuperToolbar
Android native Toolbar on steroids 💪
Stars: ✭ 52 (+20.93%)
Mutual labels:  toolbar
MaterialSettings
The open repository with a global support for Android 5 Toolbar within any Settings Activity
Stars: ✭ 58 (+34.88%)
Mutual labels:  toolbar
atom-toolbar-almighty
Atom editor's missing toolbar
Stars: ✭ 21 (-51.16%)
Mutual labels:  toolbar
android-materialButton-behavior
Android Material Button(Extended FAB) Behavior on RecyclerView
Stars: ✭ 25 (-41.86%)
Mutual labels:  coordinatorlayout
SimpleToolbar
Custom Android Toolbar
Stars: ✭ 22 (-48.84%)
Mutual labels:  toolbar
CleanUI
Android library to create beautiful, clean and minimal UIs.
Stars: ✭ 19 (-55.81%)
Mutual labels:  toolbar
Toolbar-Elevation-Pre-Lollipop
Toolbar Elevation on Pre-lollipop devices
Stars: ✭ 56 (+30.23%)
Mutual labels:  toolbar
KeepSafeNew
Sample app to demonstrate MVP (Model - View - Presenter), Android Architecture Components (Room Persistence, LiveData), RxJava2, ButterKnife in Android.
Stars: ✭ 58 (+34.88%)
Mutual labels:  coordinatorlayout

仿饿了么商品列表页面

(ps:其实用什么实现不重要,这里只是为了仿一个UI,闲来写的,希望给新手参考,老司机请绕道)

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

image

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,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实现的效果

image

问题分析

实际上头的实现使用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实现的效果

image

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].