仿美团外卖两个RecyclerView联动与悬浮效果（最讨厌嵌套

作者: 遇见你误了终身又何妨 | 来源:发表于2017-10-12 16:46 被阅读378次

仿美团外卖两个RecyclerView联动与悬浮效果（最讨厌嵌套
仿美团悬浮效果
左右两侧recyclerView相互滑动
仿美团外卖tableview联动
【Objective-C 联动】：两个 TableView 之间
RecyclerView滑动
羊皮书APP（Android版）开发系列（二十一）双联动分组Li
NestedScrollView嵌套RecyclerView实现
微信小程序-实现类似美团外卖店铺页面滑动左右联动效果
转载：自定义控件之悬浮效果

想写好久了，第一篇博客，先上效果图

image.png

话不多说，不瞎逼逼，上代码
先看看xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="match_parent">

<android.support.v7.widget.RecyclerView
    android:id="@+id/a"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:scrollbars="none">
</android.support.v7.widget.RecyclerView>
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/a_b"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="none">
        </android.support.v7.widget.RecyclerView>
        <LinearLayout
            android:id="@+id/ll_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:orientation="vertical">
            <TextView
                android:id="@+id/tv_group_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:textColor="@color/white"
                />
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

这里的textview就是悬浮的效果
看activity代码：

package com.example.kun.recyclerview;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.kun.recyclerview.Adapter.AAdapter;
import com.example.kun.recyclerview.Adapter.A_B_Adapter;
import com.example.kun.recyclerview.View.UnKnowNameActivity;
import com.example.kun.recyclerview.constant.ItemEntity;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by Kun on 2017/9/7.
 */

public class RenXingActivity extends Activity {
    @BindView(R.id.a)
    RecyclerView a;
    @BindView(R.id.a_b)
    RecyclerView aB;
    @BindView(R.id.tv_group_name)
    TextView tvGroupName;
    @BindView(R.id.ll_group)
    LinearLayout llGroup;
    private List<ItemEntity> list = new ArrayList<>();
    private AAdapter a_Adapter;
    private A_B_Adapter a_B_Adapter;
    private LinearLayoutManager aLinerLayoutManager;
    private LinearLayoutManager a_bLinerLayoutManager;
    private int mCurrentPosition = 0;
    private int mSuspensionHeight;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ren_xing);
        ButterKnife.bind(this);
        initData();
        initEvent();
    }

    private void initData() {
        initAdapter();
        createData();
        setData();
    }

    /**
     * 初始化适配器，并初始化rc的linerLayoutManager
     */
    private void initAdapter() {
        aLinerLayoutManager = new LinearLayoutManager(this);
        aLinerLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        a_Adapter = new AAdapter(this);
        a.setLayoutManager(aLinerLayoutManager);
        a.setAdapter(a_Adapter);
        a_bLinerLayoutManager = new LinearLayoutManager(this);
        a_bLinerLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        a_B_Adapter = new A_B_Adapter(this);
        aB.setLayoutManager(a_bLinerLayoutManager);
        aB.setAdapter(a_B_Adapter);
    }

    /**
     * 创建数据，用一个list封装，用type来区别是爸爸还是儿子
     */
    private void createData() {
        ItemEntity item = new ItemEntity();
        item.setId("0");
        item.setName("0");
        item.setType(1);
        list.add(item);
        for (int i = 0; i < 10; i++) {
            ItemEntity item1 = new ItemEntity();
            item1.setId(i + 1 + "");
            item1.setName(i + 1 + "");
            item1.setType(2);
            list.add(item1);
        }
        ItemEntity item2 = new ItemEntity();
        item2.setId("11");
        item2.setName("11");
        item2.setType(1);
        list.add(item2);
        for (int i = 12; i < 15; i++) {
            ItemEntity item1 = new ItemEntity();
            item1.setId(i + "");
            item1.setName(i + "");
            item1.setType(2);
            list.add(item1);
        }
        ItemEntity item3 = new ItemEntity();
        item3.setId("15");
        item3.setName("15");
        item3.setType(1);
        list.add(item3);
        ItemEntity item4 = new ItemEntity();
        item4.setId("16");
        item4.setName("16");
        item4.setType(2);
        list.add(item4);
        ItemEntity item5 = new ItemEntity();
        item5.setId("17");
        item5.setName("17");
        item5.setType(1);
        list.add(item5);
        for (int i = 18; i < 25; i++) {
            ItemEntity item1 = new ItemEntity();
            item1.setId(i + "");
            item1.setName(i + "");
            item1.setType(2);
            list.add(item1);
        }
        ItemEntity item6 = new ItemEntity();
        item6.setId("25");
        item6.setName("25");
        item6.setType(1);
        list.add(item6);
        for (int i = 26; i < 35; i++) {
            ItemEntity item1 = new ItemEntity();
            item1.setId(i + "");
            item1.setName(i + "");
            item1.setType(2);
            list.add(item1);
        }

    }

    /**
     * 绑定数据
     */
    private void setData() {
        a_Adapter.setData(list, "0");
        a_Adapter.notifyDataSetChanged();
        a_B_Adapter.setData(list, "0");
        a_B_Adapter.notifyDataSetChanged();
        tvGroupName.setText(list.get(0).getName());
    }

    private void initEvent() {

        a_Adapter.setOnItemSelectListener(new AAdapter.OnItemSelectListener() {
            @Override
            public void onItemSelect(String mId) {
                //找到点击的item在数据源的什么位置
                int position = 0;
                for (int i = 0; i < list.size(); i++) {
                    ItemEntity itemEntity = list.get(i);
                    if (mId.equals(itemEntity.getId())) {
                        position = i;
                        break;
                    }
                }
                //让右侧的rc滑动到指定位置
                a_bLinerLayoutManager.scrollToPositionWithOffset(position, 0);
            }
        });
        a_B_Adapter.setOnItemSelectListener(new A_B_Adapter.OnItemSelectListener() {
            @Override
            public void onItemSelect(String mId) {
//                Intent intent=new Intent(RenXingActivity.this, UnKnowNameActivity.class);
//                startActivity(intent);
            }
        });
     //右侧的滑动监听
        aB.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                //得到text悬浮框的高度
                mSuspensionHeight = llGroup.getHeight();
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                //得到当前滑动的view
                View view = a_bLinerLayoutManager.findViewByPosition(mCurrentPosition+1);
                //view与悬浮textview的比较
                if (view != null) {
                    if (view.getTop() <= mSuspensionHeight) {
                        llGroup.setY(-(mSuspensionHeight - view.getTop()));
                    } else {
                        llGroup.setY(0);
                    }
                }
                //赋值将 第一个可见的item的position赋值给mCurrentPosition
                if (mCurrentPosition != a_bLinerLayoutManager.findFirstVisibleItemPosition()) {
                    mCurrentPosition = a_bLinerLayoutManager.findFirstVisibleItemPosition();
                    llGroup.setY(0);
                    tvGroupName.setText(list.get(mCurrentPosition).getName());
                }


            }
        });

    }
}

两个adapter的代码

package com.example.kun.recyclerview.Adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.kun.recyclerview.R;
import com.example.kun.recyclerview.RecyclerViewAdapter;
import com.example.kun.recyclerview.constant.ItemEntity;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Kun on 2017/9/7.
 */

public class AAdapter extends RecyclerView.Adapter<AAdapter.viewHolder> {
    private Context mContext;
    private List<ItemEntity> mList=new ArrayList<>();
    private String mId;

    public AAdapter(Context context){
        this.mContext=context;
    }
    @Override
    public viewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view =  LayoutInflater.from(mContext).inflate(R.layout.item_a,parent, false);
        viewHolder viewHolder = new  viewHolder(view);
        viewHolder.ll=(LinearLayout)view.findViewById(R.id.ll_a);
        viewHolder.aName=(TextView)view.findViewById(R.id.a_name);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(viewHolder holder, final int position) {
        ItemEntity itemEntity = mList.get(position);
        holder.aName.setText(itemEntity.getName());
        if(mId.equals(itemEntity.getId())){
            holder.ll.setBackgroundColor(mContext.getResources().getColor(R.color.colorPrimary));
            holder.aName.setTextColor(mContext.getResources().getColor(R.color.white));
        }else{
            holder.ll.setBackgroundColor(mContext.getResources().getColor(R.color.white));
            holder.aName.setTextColor(mContext.getResources().getColor(R.color.colorPrimary));
        }
        holder.ll.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mOnItemSelectListener!=null){
                 mOnItemSelectListener.onItemSelect(mList.get(position).getId());
                }
            }
        });

    }

    @Override
    public int getItemCount() {
        return mList==null ? 0: mList.size();
    }

    public void setData(List<ItemEntity> list, String id) {
        if(list==null&&list.isEmpty()){
            return;
        }
        mList.clear();
        for (ItemEntity itemEntity : list) {
            if(itemEntity.getType()==1){
                mList.add(itemEntity);
            }
        }
        this.mId=id;

    }

    class viewHolder extends RecyclerView.ViewHolder{
        LinearLayout ll;
        TextView aName;
        public viewHolder(View itemView) {
            super(itemView);
        }
    }

    public interface OnItemSelectListener {
        void onItemSelect(String mId);
    }

    private OnItemSelectListener mOnItemSelectListener;

    public void setOnItemSelectListener(OnItemSelectListener mOnItemSelectListener) {
        this.mOnItemSelectListener = mOnItemSelectListener;
    }
}

package com.example.kun.recyclerview.Adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.kun.recyclerview.R;
import com.example.kun.recyclerview.constant.ItemEntity;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Kun on 2017/9/7.
 */

public class A_B_Adapter extends RecyclerView.Adapter<A_B_Adapter.viewHolder> {
    private Context mContext;
    private List<ItemEntity> mList=new ArrayList<>();
    private String mId;

    public A_B_Adapter(Context context){
        this.mContext=context;
    }
    @Override
    public viewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view =  LayoutInflater.from(mContext).inflate(R.layout.item_a_b,parent, false);
        A_B_Adapter.viewHolder viewHolder = new  A_B_Adapter.viewHolder(view);
        viewHolder.llGroup = (LinearLayout) view.findViewById(R.id.ll_group);
        viewHolder.llChild = (LinearLayout) view.findViewById(R.id.ll_child);
        viewHolder.tvChildName = (TextView) view.findViewById(R.id.tv_child_name);
        viewHolder.tvGroupName = (TextView) view.findViewById(R.id.tv_group_name);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(viewHolder holder, final int position) {
        ItemEntity itemEntity = mList.get(position);
        if(itemEntity.getType()==1){
            holder.llGroup.setVisibility(View.VISIBLE);
            holder.llChild.setVisibility(View.GONE);
            holder.tvGroupName.setText(itemEntity.getName());
        }else{
            holder.llGroup.setVisibility(View.GONE);
            holder.llChild.setVisibility(View.VISIBLE);
            holder.tvChildName.setText(itemEntity.getName());
        }
        holder.tvGroupName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mOnItemSelectListener!=null){
                 mOnItemSelectListener.onItemSelect(mList.get(position).getId());
                }
            }
        });
        holder.tvChildName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mOnItemSelectListener!=null){
                    mOnItemSelectListener.onItemSelect(mList.get(position).getId());
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return mList==null?0:mList.size();
    }

    public void setData(List<ItemEntity> list,String id) {
        if(list==null&&list.isEmpty()){
            return;
        }
        this.mList=list;
        this.mId=id;
    }


    class viewHolder extends RecyclerView.ViewHolder{
        private LinearLayout llGroup;
        private LinearLayout llChild;
        private TextView tvGroupName;
        private TextView tvChildName;
        public viewHolder(View itemView) {
            super(itemView);
        }

    }

    public interface OnItemSelectListener {
        void onItemSelect(String mId);
    }

    private OnItemSelectListener mOnItemSelectListener;

    public void setOnItemSelectListener(OnItemSelectListener mOnItemSelectListener) {
        this.mOnItemSelectListener = mOnItemSelectListener;
    }

}

好了,就这样了，最后建议大家自己去实现吧，持续更新，完成和美团一样的效果

仿美团外卖两个RecyclerView联动与悬浮效果（最讨厌嵌套
想写好久了，第一篇博客，先上效果图话不多说，不瞎逼逼，上代码先看看xml. 这里的textview就是悬浮的效果...
仿美团悬浮效果
PullToRefreshListView实现到顶部悬浮效果，这里主要是在ListView的addHeaderVi...
左右两侧recyclerView相互滑动
最近做项目需要用到两个RecyclerView互相联动的功能，类似美团外卖的点餐列表，不同的是项目用到的右侧是点击...
仿美团外卖tableview联动
tableview是我们开发中用的最多的控件,很多商城,外卖软件都用到了tableview联动的功能,今天就整理了...
【Objective-C 联动】：两个 TableView 之间
前言现在市面上有很多 app 都有联动功能，有的是两个 TableView 之间的联动，比如美团外卖，百度外卖，...
RecyclerView滑动
嵌套滑动的实现 RecyclerView结合CoordinatorLayout可以完成一个上滑悬浮（吸顶效果）的效...
羊皮书APP（Android版）开发系列（二十一）双联动分组Li
双联动ListView在很多APP中都有应用，美团外卖、糯米外卖、京东分类等都有使用。效果图如下：双ListV...
NestedScrollView嵌套RecyclerView实现
概述本文主要分享使用NestedScrollView嵌套RecyclerView实现仿京东Tab吸顶效果，先来看...
微信小程序-实现类似美团外卖店铺页面滑动左右联动效果
代码案例：微信小程序-实现类似美团外卖店铺页面滑动左右联动效果（代码案例）[https://github.com/...
转载：自定义控件之悬浮效果
转自：Android 仿美团网,大众点评购买框悬浮效果之修改版我之前写了一篇关于美团网，大众点评的购买框效果的文...