Android仿eleme点餐页面二级联动列表

本周末外卖点得多,就仿一仿“饿了么”好了。先上图吧,这样的订单页面是不是很眼熟:

右边的listview分好组以后,在左边的Tab页建立索引。可以直接导航,是不是很方便。关键在于右边滑动,左边也会跟着滑;而点击左边呢,也能定位右边的项。它们存在这样一种特殊的交互。像这种联动的效果,还有些常见的例子呢,比如知乎采用了常见的toolbar+viewPager的联动,只不过是上下布局:

再看看点评,它的城市选择页面也有这种联动的影子,只是稍微弱一点。侧边栏可以对listview进行索引,这最早是在微信好友列表里出现的把:

趁着周末,我也撸一个。就拓展性而言,应该可以适配以上所有情况吧。我称其为LinkedLayout,看下效果图:

我把右边按5个一组,可以看到,左边的索引 = 右边/5

特点

右边滑动,左边跟着动

左边滑动到边界,右边跟着动

点击左边tab项,右边滑动定位到相应的group

源码

github 传送门: https://github.com/fashare2015/LinkedScrollDemo

知识点

做之前先罗列一下知识点,或者说我们能从这个demo里收获到什么。

面向抽象/接口编程

自定义 view

代理模式

UML类图

复习 listview && recyclerview 的细节

感觉做完以后收获最大的还是第一点,面向接口编程。事实上,完成功能的时间只占了一半,后边的时间一直在抽象和重构;哎,一步到位太难了,还是老老实实写具体类,再抽取基类把。

构思

UI部分

LinkedLayout

要做的呢是两个相互关联的列表,在左边的作为tab页,右边的作为content页。先不考虑交互,我们来打个界面:搞一个叫做LinkedLayout的类,用来盛放tab和content:

public class LinkedLayout extends LinearLayout {
  private Context mContext;
  private BaseScrollableContainer mTabContainer;
  private BaseScrollableContainer mContentContainer;
  private SectionIndexer mSectionIndexer; // 代理
  ...
}

我们让它继承了LinearLayout,同时持有两个Container的东东,还有一个上帝对象mContext,以及一个分组用的SectionIndexer。

BaseScrollableContainer

先别管这些,主要看两个Container,从名字上看一个是tab页,一个是content页,嘿嘿。因为它们都能scroll嘛,干脆搞一个BaseScrollableContainer把。取名为Container呢,当然是致敬Fragment啦。我们来定义一下这个类:
初步一想,无非有一个 mContext, 一个 viewGroup, 还有一些 Listener 嘛:

public abstract class BaseScrollableContainer<VG extends ViewGroup> {
  protected Context mContext;
  public VG mViewGroup;
  protected RealOnScrollListener mRealOnScrollListener;
  private EventDispatcher mEventDispatcher;
  ...
}

和我们预想的差不多嘛,mContext上下文,mViewGroup基本就是指代我们的两个listview了吧。当然,我之后可是要做toolbar+viewpager的,肯定得依赖抽象,不能直接写listview啦。余下两个是Listener,等我们界面搭好,写交互的时候在看把。

看来UML图还是有好处的,继承和依赖关系一目了然。

自定义View && 动态布局

好了到了自定义view地环节了。我们已经有了一个LinkedLayout,这是我们的activity_main.xml布局代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <com.fashare.linkedscrolldemo.ui.LinkedLayout
    android:id="@+id/linked_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"/>
</RelativeLayout>

擦,就没了嘛?剩下的得靠Java代码来搞啦。回到LinkedLayout咱们来布局UI~:

public class LinkedLayout extends LinearLayout {
  ...
  private static final int MEASURE_BY_WEIGHT = 0;
  private static final float WEIGHT_TAB = 1;
  private static final float WEIGHT_CONTENT = 3;

  public void setContainers(BaseScrollableContainer tabContainer, BaseScrollableContainer contentContainer) {
    mTabContainer = tabContainer;
    mContentContainer = contentContainer;
    mTabContainer.setEventDispatcher(this);
    mContentContainer.setEventDispatcher(this);

    // 设置 LayoutParams
    mTabContainer.mViewGroup.setLayoutParams(new LinearLayout.LayoutParams(
        MEASURE_BY_WEIGHT,
        ViewGroup.LayoutParams.WRAP_CONTENT,
        WEIGHT_TAB
    ));

    mContentContainer.mViewGroup.setLayoutParams(new LinearLayout.LayoutParams(
        MEASURE_BY_WEIGHT,
        ViewGroup.LayoutParams.MATCH_PARENT,
        WEIGHT_CONTENT
    ));

    this.addView(mTabContainer.mViewGroup);
    this.addView(mContentContainer.mViewGroup);
    this.setOrientation(HORIZONTAL);
  }
}

搞了个setContainers用来注入我们的Container,里边有一些像layout_height,layout_width,layout_weight,orientation之类的,很眼熟吧,和xml没差。顺便一提的是,我们用了weight属性来控制这个比例1:3,一直感觉这个属性比较神奇。。。

注入ViewGroup, 使用自定义的LinkedLayout

到这里为止,LinkedLayout已经布局好了,我们分别注入ViewGroup就可以用了。我这里分别用listview作tab,recyclerview作content。想像力有限,用来用去好像也就这么几个控件。。。这部分代码很简单,在MainActivity里,就不贴了。

子类化 BaseScrollableContainer

按照常理,下边应该实现基类了吧。前面的MainActivity中,我们是这样实例化的:

mTabContainer = new ListViewTabContainer(this, mListView);
mContentContainer = new RecyclerViewContentContainer(this, mRecyclerView);

看名字一个是listview填充的tab,一个是recyclerview填充的content。就先实现这两个类吧,从图中可以看到,它们分别继承于BaseScrollableContainer,并被LinkedLayout所持有:

交互部分

与用户的交互:OnScrollListener 与 代理模式

终于到了交互部分,既然是滑动,那少不了定义监听器啦。然而,麻烦在于listview和recyclerview各自的OnScrollListener还不一样,这个时候如果各自实现的话,既麻烦,又有冗余。像这样子:

// RecyclerView
public class RecyclerViewContentContainer extends BaseScrollableContainer<RecyclerView> {
  ...
  @Override
  protected void setOnScrollListener() {
    mViewGroup.addOnScrollListener(new ProxyOnScrollListener());
  }

  private class ProxyOnScrollListener extends RecyclerView.OnScrollListener {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
      if(newState == RecyclerView.SCROLL_STATE_IDLE) {      // 停止滑动
        1.停止时的逻辑...
      }else if(newState == RecyclerView.SCROLL_STATE_DRAGGING){  // 按下拖动
        2.刚刚拖动时的逻辑...
      }
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) { // 滑动
      3.滑动时的逻辑...
    }
  }
}

// ListView
public class ListViewTabContainer extends BaseScrollableContainer<ListView> {
  ...
  @Override
  protected void setOnScrollListener() {
    mViewGroup.setOnScrollListener(new ProxyOnScrollListener());
    ...
  }

  public class ProxyOnScrollListener implements AbsListView.OnScrollListener{
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
      if(scrollState == SCROLL_STATE_IDLE) {       // 停止滑动
        1.停止时的逻辑...
      }else if(scrollState == SCROLL_STATE_TOUCH_SCROLL) // 按下拖动
        2.刚刚拖动时的逻辑...
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
      3.滑动时的逻辑...        // 滑动
    }
  }
}

那该怎么办呢,虽然各自的OnScrollListener差异挺大,但是仔细观察可以发现其实很多逻辑都是类似的,可以共用的。这时恰恰可以用代理模式来做重构。我抽取了1、2、3处的逻辑,由于在抽象意义上是一致的,可以整理成接口:

public interface OnScrollListener {
  // tab 点击事件
  void onClick(int position);

  // 1.滑动开始
  void onScrollStart();

  // 2.滑动结束
  void onScrollStop();

  // 3.触发 onScrolled()
  void onScrolled();

  // 用户手动滑, 触发的 onScrolled()
  void onScrolledByUser();

  // 程序调用 scrollTo(), 触发的 onScrolled()
  void onScrolledByInvoked();
}

与此同时,RecyclerView和ListView各自的监听器便分别作为代理类,把1、2、3的逻辑都委托给某个接盘侠,不必自己去实现,倒也落的轻松自在。如图所示:这里写图片描述

然后,让我们来看看这个接盘侠:RealOnScrollListener。。。

不愧是一个老实类,它老实地接盘了OnScrollListener的所有接口,并被两个代理类Proxy…所持有(图中并未画出。。)。
具体实现就不贴了,大家可以下源码来看。这里大致分析一下,它有三个成员:

public class RealOnScrollListener implements OnScrollListener {
  public boolean isTouching = false; // 处于触摸状态
  private int mCurPosition = 0;    // 当前选中项
  private BaseViewGroupUtil<VG> mViewUtil; // ViewGroup 工具类
  ...
}

isTouching:

为啥要维护这个触摸状态呢?这是由于我们的效果是联动的。这就比较讨厌了,当onScrolled()被调用,我们分不清是用户的滑动,还是来自另一个列表滑动时的联动效果。那我们记录一下isTouching状态呢,就能区分开这两种情况了。
更改isTouching的逻辑在onScrollStart()和onScrollStop()里边。

mCurPosition:

这个很好解释,我们每次滑动需要记录当前位置,然后通知另一个列表进行联动。
这段逻辑在onScrolled()里边。

mViewUtil:
一个工具库,用于简化逻辑。大概有scrollTo(),setViewSelected(),UpdatePosOnScrolled()等方法,如图:

两个Container之间的交互

之前都是对用户的交互,终于到联动部分了。不急着实现,先回答我一个问题:假设我一个Activity里持有两个Fragment,问它们之间如何通信?

A同学大声道:用广播
B同学:EventBus !!!
C同学:看我 RxBus 。。。
别闹好吗。。。给我老老实实用Listener。显然,我们这里面临的是同样的场景。LinkedLayout=Activity,Container=Fragment。
动手前先定义Listener吧,要取个中二点的名字:

/*
 * 事件分发者
 */
public interface EventDispatcher {
  /**
   * 分发事件: fromView 中的 pos 被选中
   * @param pos
   * @param fromView
   */
  void dispatchItemSelectedEvent(int pos, View fromView);
}
/*
 * 事件接受者
 */
public interface EventReceiver {
  /**
   * 收到事件: 立即选中 newPos
   * @param newPos
   */
  void selectItem(int newPos);
}

然后LinkedLayout作为父级元素,肯定是分发者的角色,应当实现EventDispatcher;而BaseScrollableContainer作为子元素,接受该事件,应当实现EventReceiver。看下类图:

看下相应的实现(EventReceiver):

public abstract class BaseScrollableContainer<VG extends ViewGroup>
    implements EventReceiver {
  protected RealOnScrollListener mRealOnScrollListener;
  private EventDispatcher mEventDispatcher; // 持有分发者
  ...
  public void setEventDispatcher(EventDispatcher eventDispatcher) {
    mEventDispatcher = eventDispatcher;
  }
  // 掉用 mEventDispatcher,也就是 LinkedLayout
  protected void dispatchItemSelectedEvent(int curPosition){
    if(mEventDispatcher != null)
      mEventDispatcher.dispatchItemSelectedEvent(curPosition, mViewGroup);
  }
  @Override
  public void selectItem(int newPos) {
    mRealOnScrollListener.selectItem(newPos);
  }
  // OnScrollListener: 代理模式
  public class RealOnScrollListener implements OnScrollListener {
    ...
    public void selectItem(int position){
      mCurPosition = position;
      Log.d("setitem", position + "");
      // 来自另一边的联动事件
      mViewUtil.smoothScrollTo(position);
//      if(mViewUtil.isVisiblePos(position))  // curSection 可见时, 不滚动
        mViewUtil.setViewSelected(position);
    }
    @Override
    public void onClick(int position) {
      isTouching = true;
      mViewUtil.setViewSelected(mCurPosition = position);
      dispatchItemSelectedEvent(position); // 点击tab,分发事件
      isTouching = false;
    }
    ...
    @Override
    public void onScrolled() {
      mCurPosition = mViewUtil.updatePosOnScrolled(mCurPosition);
      if(isTouching)     // 来自用户, 通知 对方 联动
        onScrolledByUser();
      else          // 来自对方, 被动滑动不响应
        onScrolledByInvoked();
    }
    @Override
    public void onScrolledByUser() {
      dispatchItemSelectedEvent(mCurPosition);  // 来自用户, 通知 对方 联动
    }
  }
}

再看(EventDispatcher):

public class LinkedLayout extends LinearLayout implements EventDispatcher {
  private BaseScrollableContainer mTabContainer;
  private BaseScrollableContainer mContentContainer;
  private SectionIndexer mSectionIndexer; // 分组接口
  ...
  @Override
  public void dispatchItemSelectedEvent(int pos, View fromView) {
    if (fromView == mContentContainer.mViewGroup) { // 来自 content, 转发给 tab
      int convertPos = mSectionIndexer.getSectionForPosition(pos);
      mTabContainer.selectItem(convertPos);
    } else {          // 来自 tab, 转发给 content
      int convertPos = mSectionIndexer.getPositionForSection(pos);
      mContentContainer.selectItem(convertPos);
    }
  }
}

总结

到此为止,有没有一种酣畅淋漓的感觉?不管怎么说,面向对象是信仰,定义好接口以后,实现起来怎么写怎么舒服。
// TODO: 之前说了,这个联动是通用的。之后有时间会继续实现一个toolbar+viewPager的联动…

彩蛋

高清无码类图:(完整)

时间: 2016-10-17

Android实现三级联动下拉框 下拉列表spinner的实例代码

主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值              XML布局: 复制代码 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_w

仿饿了吗点餐界面ListView联动的实现

在上篇文章给大家介绍了仿饿了吗点餐界面两个ListView联动效果 主要实现了2个ListView怎样实现互相关联,正好上篇博客review了ListView控件常规使用,因此本篇博客主要对大神的那篇博客的实现进行代码层的剖析. 一方面,方便自己,在以后的代码实现上加以参考.另一方面,供刚入门的Android菜鸟们共同学习. 二.最终的效果图 如上图效果图为仿饿了么点餐界面的ListView级联 三.实现ListView级联的困难点 为了好做区分,在本文中左侧的ListView称之为MenuLi

Android实现两个ScrollView互相联动的同步滚动效果代码

本文实例讲述了Android实现两个ScrollView互相联动的同步滚动效果代码.分享给大家供大家参考,具体如下: 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意思就是滑动其中的一个ScrollView另一个ScrollView也一同跟着滑动,要做到一起同步滑动.感觉在以后的项目开发中大家可能也会用到,绝对做个Demo分享出来,供大家一起学习,以便大家以后好用,觉的不错,有用的可以先收藏起来哦! 其实对于ScrollView,Android官方并没有提供相关

Android中使用开源框架Citypickerview实现省市区三级联动选择

1.概述 记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省市区的xml文件,思路很简单,但是代码量相对大了些.偶然期间发现了另外一个开源组件,也就是今天要介绍的citypickerview. github地址:crazyandcoder/citypicker 2. 实现效果 下面给大家演示下实现效果: 3.   实现方法 (1)添加依赖 dependenc

android-wheel控件实现三级联动效果

本文实例为大家分享了android wheel省市县三级联动效果,供大家参考,具体内容如下 在github上面有一个叫做 Android-wheel 的开源控件, 代码地址:https://github.com/maarek/android-wheel 源码下载地址:http://xiazai.jb51.net/201610/yuanma/AndroidCascadeMaster(jb51.net).rar 主界面布局 activity_main.xml <LinearLayout xmlns:

Android使用android-wheel实现省市县三级联动

今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为是Andriod内置的控件,google一把,发现是个github上的一个控件. 下载地址:https://code.google.com/p/android-wheel/    发现很适合做省市县三级联动就做了一个. 先看下效果图: 1.首先导入github上的wheel项目 2.新建个项目,然后选择记得右键->Properties->Android中将wheel添加为lib: 上面两个步骤是导入所有开源项目的过程了

仿饿了吗点餐界面两个ListView联动效果

如图是效果图 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适配器中设置Item来改变颜色,再通过notifyDataSetInvalidated来刷新并用lv_home.setSelection(showTitle.get(arg2));来关联右侧的 2.右侧的主要是重写下onScroll的方法:来改变左侧ListView的颜色及背景 不过程序中还有个问题,望大神解答就是我右侧的ListView下拉时,上面的TextView能改变:但是上拉时,TextView的不能及时改变应为滑

6步轻松实现两个listView联动效果

看了网上更新的好多联动demo,感觉写的不是很简洁(表示不知道他们在说什么) 自己写了一个简单的Demo分享给大家- -! 效果图: 直接上车,少说废话! 所用到以下的这几个依赖,直接粘到Build.gradle文件中 compile 'com.squareup.picasso:picasso:2.5.2' compile 'io.reactivex:rxjava:1.2.7' compile 'io.reactivex:rxandroid:1.2.1' compile 'com.squareu

Android省市区三级联动控件使用方法实例讲解

最近有需求需要实现省市区三级联动,但是发现之前的实现不够灵活,自己做了一些优化.为了方便以后使用,抽离出来放在了github上WheelView.同时把其核心库放在了JCenter中了,可以直接引用.也可以参考项目中的Demo进行引用 下面介绍一下如何使用 如果用的是AndroidStudio那么直接在build.gradle文件中添加依赖: dependencies { compile 'chuck.WheelItemView:library:1.0.1' } 成功引入库之后,可以在需要弹出省

Android自定义WheelView地区选择三级联动

本文实例为大家分享了WheelView地区选择三级联动的具体代码,供大家参考,具体内容如下 1. 效果 最近需要做一个地区选择的功能,但是在网上和github上找了很久都没找到满意的,然后朋友推荐了一个给我,我花了点时间把代码大致看懂并改成我想要的,并写上我的理解.效果如图: 2. 注意 a. 首先我们要明白,网上这写三级联动的demo,不管是把数据库文件放在raw还是assets中,我们都要进行复制,将这个文件复制到app目录下,即 /data/data/"+context.getPackag

Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

本文主要介绍使用 Jquery+Ajax+xml,首先需要一个包含我国所有地图信息的xml文档. 此处选用的xml文档(共1000多行)主要结构如下: <?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province ID="1" provinceID="110000" province="

Android日期选择器实现年月日三级联动

最近项目里面用到了一个日期选择器,实现现在主流的WheelView滑动选择,整理了下,做了个Demo.废话不多说,直接上代码. 主布局:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo

android实现下拉菜单三级联动

android中的下拉菜单联动应用非常普遍,android中的下拉菜单用Spinner就能实现,以下列子通过简单的代码实现三级菜单联动. 一 样式文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_p

Android自定义dialog可选择展示年月日时间选择栏

自定义dialog package com.poptest; import android.app.DatePickerDialog; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.DatePicker; //dialog类 public class YearPickerDialog extends DatePickerD

Android 自定义日期段选择控件功能(开始时间-结束时间)

开发中碰到个需求,需要在一个空间中选择完成开始和结束时间.实现的过程走的是程序员开发的老路子,找到轮子后自己改吧改吧就成了. 当时做的时候有几个需求:1.当天为最大的结束日期,2.最大选择范围1年,3.开始时间和结束时间可以为同一天.如有其他需求实现,可以参考代码改进一下.先上效果图: 视频点击后的虚影是屏幕录制的原因.实现步骤:(如有缺失什么资源,请告知.开始时间和结束时间显示自己布局内添加就可以) 1.自定义控件属性 <declare-styleable name="MyCalenda

vue基于mint-ui实现城市选择三级联动

项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1.实际效果 地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据 如下: (这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) (一个更好的中国地区数据,推荐用这个) 3.具体代码 主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <mt-picker :slots="my

Android自定义标尺滑动选择值效果

本文实例为大家分享了Android实现滑动标尺选择值,效果图 1.自定义属性attrs.xml <declare-styleable name="RulerView"> <attr name="textColor" format="color" /> <attr name="textSize" format="dimension" /> <attr name=&qu

Android自定义wheelview随机选号效果

先看下利用wheelview实现滚动随机选择号码效果: 直接上代码 首页就是dialog显示不在描述 主要看dialog代码 package com.yskj.jh.wheeldemo; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android

Android自定义wheelview实现滚动日期选择器

本文实例为大家分享了Android实现滚动日期选择器的具体代码,供大家参考,具体内容如下 wheelview滚动效果的View 这段时间需要用到一个时间选择器,但是不能使用日期对话框, 因为它是筛选条件框架下的,只能是View!这个WheelView改造后可以达到要求! 这个wheelview框架使用的类不多,就几个,还有一些资源文件. 我根据这个框架设计了日期的选择器. 主页面: 第一种日期选择器页面: 动态效果: 使用: 具体的实现是一个LoopView的类,这是一个继承View的类! 理解