2. 程式人生 > >Android仿美團外賣點菜聯動列表

Android仿美團外賣點菜聯動列表

阿新 • • 發佈：2019-01-09

Android高仿美團外賣點菜聯動列表效果

最近專案中有一個新增購物車的需求，需要做成美團外賣點菜聯動ListView的效果，可能有的朋友覺得這很簡單，不就是2個Listview點選事件聯動處理機制嗎？沒錯，基本思路就是這樣子，只是美團外賣點菜效果上有一種根據右邊列表滑動可以監聽到左邊分類資訊的變化狀態。

可能言語上表達你們沒法想象，先上一張效果圖：

這裡寫圖片描述

完成此效果需要掌握以下知識點：

  • ListView基本使用
  • ListView點選監聽事件setOnItemClickListener和setOnScrollListener的瞭解掌握
  • 簡單動畫的技能(主要是點選新增複製一個圖層進行拋物線落到購物車內)
  • 介面回撥的基本使用

不多說了，直接上程式碼比較靠譜！
以下就是兩個ListView最主要的兩個監聽，來實現美團外賣點菜效果。

//左邊ListView的點選事件切換右邊列表資料
left_listView.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> arg0, View view,
            int position, long arg3) {
        isScroll = false
 
;

        for (int i = 0; i < left_listView.getChildCount(); i++) {
            if (i == position) {
                left_listView.getChildAt(i).setBackgroundColor(
                        Color.rgb(255, 255, 255));
            } else {
                left_listView.getChildAt(i).setBackgroundColor(
                        Color.TRANSPARENT);
            }
        }
        int
 
 rightSection = 0;
        for (int i = 0; i < position; i++) {
            rightSection += sectionedAdapter.getCountForSection(i) + 1;
        }
        right_listview.setSelection(rightSection);

    }

});
//右邊ListView滑動位置來更新左邊ListView分類資訊的位置切換
right_listview.setOnScrollListener(new OnScrollListener() {
    @Override
    public void onScrollStateChanged(AbsListView arg0, int arg1) {
    }
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        if (isScroll) {
            for (int i = 0; i < left_listView.getChildCount(); i++) {

                if (i == sectionedAdapter
                        .getSectionForPosition(firstVisibleItem)) {
                    left_listView.getChildAt(i).setBackgroundColor(
                            Color.rgb(255, 255, 255));
                } else {
                    left_listView.getChildAt(i).setBackgroundColor(
                            Color.TRANSPARENT);

                }
            }

        } else {
            isScroll = true;
        }
    }
});

其實程式碼很簡單，看到上述2個ListView的監聽事件後就能明白什麼原理了。
1.左邊ListView通過setOnItemClickListener點選item來切換更新右邊列表資料
2.右邊ListView通過setOnScrollListener滑動item來更新左邊ListView列表
3.右邊ListView的介面卡需要大家注意一下：

下面主要實現購物車增加、刪減商品功能

  • 自己定義2個介面onCallBackListener和ShopToDetailListener
  • onCallBackListener介面主要用於使用者操作商品列表時增加和刪減商品後對購物車商品價格以及數量的更新
    /**
     * Type表示新增或減少
     * @param product
     * @param type
     */
    void updateProduct(ShopProduct product, String type);
  • ShopToDetailListener介面主要用於使用者操作購物車商品時，對商品列表進行更新和購物車商品數目為0時更新刪除購物車該商品資訊
    /**
     * Type表示新增或減少
     * @param product
     * @param type
     */
    void onUpdateDetailList(ShopProduct product, String type);
    /**
     * 刪除購物車商品資訊
     * @param product
     */
    void onRemovePriduct(ShopProduct product);

下面操作是介面右邊ListView介面卡Adapter中增加和減少商品的點選事件處理：

viewHolder.increase.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int num = product.getNumber();
                num++;
                product.setNumber(num);
                viewHolder.shoppingNum.setText(product.getNumber()+"");
                if (callBackListener != null) {
                    callBackListener.updateProduct(product, "1");
                } else {
                }
                if(mHolderClickListener!=null){
                    int[] start_location = new int[2];
                    viewHolder.shoppingNum.getLocationInWindow(start_location);
                    //獲取點選商品圖片的位置
                    //複製一個新的商品圖示
                    //TODO:解決方案，先監聽到左邊ListView的Item中，然後在開始動畫新增
                    mHolderClickListener.onHolderClick(drawable, start_location);
                }
            }
        });
        viewHolder.reduce.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int num = product.getNumber();
                if (num > 0) {
                    num--;
                    product.setNumber(num);
                    viewHolder.shoppingNum.setText(product.getNumber()+"");
                    if (callBackListener != null) {
                        callBackListener.updateProduct(product, "2");
                    } else {
                    }
                }
            }
        });

注意：
這裡TestSectionedAdapter 繼承 SectionedBaseAdapter ，大家可能會有疑問，TestSectionedAdapter 是什麼東西，Google提供的API裡沒有這個類。沒錯，這就是繼承BaseAdapter後的一個子類，該類中封裝了右邊ListView的兩個item【1.列表item，2.列表中頭部顯示的分類名稱item】可能有的人會問“列表中頭部顯示的分類名稱是什麼？”我給大家準備了一張圖：

  • 2.列表中頭部顯示的分類名稱item

  • 下面貼出TestSectionedAdapter 程式碼的實現！用法跟普通的Adapter沒什麼區別，也是很簡單的填充資料

  • 補上大家疑惑的SectionedBaseAdapter 程式碼！
import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class TestSectionedAdapter extends SectionedBaseAdapter {
    private Context mContext;
    List<PruductCagest> pruductCagests;
    private LayoutInflater mInflater;
    public TestSectionedAdapter(Context context, List<PruductCagest> pruductCagests){
        this.mContext = context;
        this.pruductCagests = pruductCagests;
        mInflater = LayoutInflater.from(context);
    }

    @Override
    public Object getItem(int section, int position) {
        return pruductCagests.get(section).getPruducts().get(position);
    }

    @Override
    public long getItemId(int section, int position) {
        return position;
    }

    @Override
    public int getSectionCount() {
        return pruductCagests.size();
    }

    @Override
    public int getCountForSection(int section) {
        return pruductCagests.get(section).getPruducts().size();
    }

    @Override
    public View getItemView(final int section, final int position, View convertView, ViewGroup parent) {
        final ViewHolder viewHolder;
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.list_item, null);
            viewHolder = new ViewHolder();
            viewHolder.image = (ImageView) convertView.findViewById(R.id.image);
            viewHolder.name = (TextView) convertView.findViewById(R.id.textItem);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        viewHolder.name.setText(pruductCagests.get(section).getPruducts().get(position).getName());
        convertView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View arg0) {
                Toast.makeText(mContext, pruductCagests.get(section).getPruducts().get(position).getName(), Toast.LENGTH_SHORT).show();
            }
        });
        return convertView;
    }

    class ViewHolder {
        public  TextView name;
        public ImageView image;

    }

//這裡主要是右邊ListView頭部分類資訊展示的實現
    @Override
    public View getSectionHeaderView(int section, View convertView, ViewGroup parent) {
        LinearLayout layout = null;
        if (convertView == null) {
            LayoutInflater inflator = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            layout = (LinearLayout) inflator.inflate(R.layout.header_item, null);
        } else {
            layout = (LinearLayout) convertView;
        }
        layout.setClickable(false);
        ((TextView) layout.findViewById(R.id.textItem)).setText(pruductCagests.get(section).getCagName());
        return layout;
    }

}

以下是SectionedBaseAdapter 程式碼的實現
程式碼有點長，不過只是為了實現效果的朋友完全可以不用深入瞭解，你只需要知道TestSectionedAdapter 是如何實現的即可，不過喜歡鑽研的朋友還是可以好好看看這裡面到底是如何寫的。

import za.co.immedia.pinnedheaderlistviewexample.PinnedHeaderListView.PinnedSectionedHeaderAdapter;
import android.util.SparseArray;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

public abstract class SectionedBaseAdapter extends BaseAdapter implements PinnedSectionedHeaderAdapter {

    private static int HEADER_VIEW_TYPE = 0;
    private static int ITEM_VIEW_TYPE = 0;

    /**
     * Holds the calculated values of @{link getPositionInSectionForPosition}
     */
    private SparseArray<Integer> mSectionPositionCache;
    /**
     * Holds the calculated values of @{link getSectionForPosition}
     */
    private SparseArray<Integer> mSectionCache;
    /**
     * Holds the calculated values of @{link getCountForSection}
     */
    private SparseArray<Integer> mSectionCountCache;

    /**
     * Caches the item count
     */
    private int mCount;
    /**
     * Caches the section count
     */
    private int mSectionCount;

    public SectionedBaseAdapter() {
        super();
        mSectionCache = new SparseArray<Integer>();
        mSectionPositionCache = new SparseArray<Integer>();
        mSectionCountCache = new SparseArray<Integer>();
        mCount = -1;
        mSectionCount = -1;
    }

    @Override
    public void notifyDataSetChanged() {
        mSectionCache.clear();
        mSectionPositionCache.clear();
        mSectionCountCache.clear();
        mCount = -1;
        mSectionCount = -1;
        super.notifyDataSetChanged();
    }

    @Override
    public void notifyDataSetInvalidated() {
        mSectionCache.clear();
        mSectionPositionCache.clear();
        mSectionCountCache.clear();
        mCount = -1;
        mSectionCount = -1;
        super.notifyDataSetInvalidated();
    }

    @Override
    public final int getCount() {
        if (mCount >= 0) {
            return mCount;
        }
        int count = 0;
        for (int i = 0; i < internalGetSectionCount(); i++) {
            count += internalGetCountForSection(i);
            count++; // for the header view
        }
        mCount = count;
        return count;
    }

    @Override
    public final Object getItem(int position) {
        return getItem(getSectionForPosition(position), getPositionInSectionForPosition(position));
    }

    @Override
    public final long getItemId(int position) {
        return getItemId(getSectionForPosition(position), getPositionInSectionForPosition(position));
    }

    @Override
    public final View getView(int position, View convertView, ViewGroup parent) {
        if (isSectionHeader(position)) {
            return getSectionHeaderView(getSectionForPosition(position), convertView, parent);
        }
        return getItemView(getSectionForPosition(position), getPositionInSectionForPosition(position), convertView, parent);
    }

    @Override
    public final int getItemViewType(int position) {
        if (isSectionHeader(position)) {
            return getItemViewTypeCount() + getSectionHeaderViewType(getSectionForPosition(position));
        }
        return getItemViewType(getSectionForPosition(position), getPositionInSectionForPosition(position));
    }

    @Override
    public final int getViewTypeCount() {
        return getItemViewTypeCount() + getSectionHeaderViewTypeCount();
    }

    public final int getSectionForPosition(int position) {
        // first try to retrieve values from cache
        Integer cachedSection = mSectionCache.get(position);
        if (cachedSection != null) {
            return cachedSection;
        }
        int sectionStart = 0;
        for (int i = 0; i < internalGetSectionCount(); i++) {
            int sectionCount = internalGetCountForSection(i);
            int sectionEnd = sectionStart + sectionCount + 1;
            if (position >= sectionStart && position < sectionEnd) {
                mSectionCache.put(position, i);
                return i;
            }
            sectionStart = sectionEnd;
        }
        return 0;
    }

    public int getPositionInSectionForPosition(int position) {
        // first try to retrieve values from cache
        Integer cachedPosition = mSectionPositionCache.get(position);
        if (cachedPosition != null) {
            return cachedPosition;
        }
        int sectionStart = 0;
        for (int i = 0; i < internalGetSectionCount(); i++) {
            int sectionCount = internalGetCountForSection(i);
            int sectionEnd = sectionStart + sectionCount + 1;
            if (position >= sectionStart && position < sectionEnd) {
                int positionInSection = position - sectionStart - 1;
                mSectionPositionCache.put(position, positionInSection);
                return positionInSection;
            }
            sectionStart = sectionEnd;
        }
        return 0;
    }

    public final boolean isSectionHeader(int position) {
        int sectionStart = 0;
        for (int i = 0; i < internalGetSectionCount(); i++) {
            if (position == sectionStart) {
                return true;
            } else if (position < sectionStart) {
                return false;
            }
            sectionStart += internalGetCountForSection(i) + 1;
        }
        return false;
    }

    public int getItemViewType(int section, int position) {
        return ITEM_VIEW_TYPE;
    }

    public int getItemViewTypeCount() {
        return 1;
    }

    public int getSectionHeaderViewType(int section) {
        return HEADER_VIEW_TYPE;
    }

    public int getSectionHeaderViewTypeCount() {
        return 1;
    }

    public abstract Object getItem(int section, int position);

    public abstract long getItemId(int section, int position);

    public abstract int getSectionCount();

    public abstract int getCountForSection(int section);

    public abstract View getItemView(int section, int position, View convertView, ViewGroup parent);

    public abstract View getSectionHeaderView(int section, View convertView, ViewGroup parent);

    private int internalGetCountForSection(int section) {
        Integer cachedSectionCount = mSectionCountCache.get(section);
        if (cachedSectionCount != null) {
            return cachedSectionCount;
        }
        int sectionCount = getCountForSection(section);
        mSectionCountCache.put(section, sectionCount);
        return sectionCount;
    }

    private int internalGetSectionCount() {
        if (mSectionCount >= 0) {
            return mSectionCount;
        }
        mSectionCount = getSectionCount();
        return mSectionCount;
    }

}

好了以上基本上就是本篇文章給Android愛好者們分享的內容，剛剛開始寫部落格，可能其中有很多地方寫的不太到位或者文章方式有待提高，還希望各位朋友能給我提出一些意見，在日後的分享部落格中能夠提高自身的能力。歡迎互相交流！
愛學習，愛程式設計，愛生活！

後期特意整理出來一份原始碼，可供大家參考學習：
**

下載地址：

**

相關推薦

Android仿美團外賣點菜聯動列表

Android高仿美團外賣點菜聯動列表效果 最近專案中有一個新增購物車的需求，需要做成美團外賣點菜聯動ListView的效果，可能有的朋友覺得這很簡單，不就是2個Listview點選事件聯動處理機制嗎？沒錯，基本思路就是這樣子，只是美團外賣點菜效果上有一種根據

微信小程式（初學篇）——仿美團外賣

初識小程式，為它的小巧玲瓏所吸引，不由得心血來潮。這不正是使用者所需要的嗎？既方便快捷，又不佔手機記憶體。所以我下定決心一定要做出一個自己的小程式，然後賺錢、賺錢、賺錢...當然現在只是學習階段，所以先仿一個高階產品來挑戰自我吧。說到高階，自然然而的就想到了美團。之後噼裡啪

仿美團外賣效果

下面ListView向上滾動時，先讓上面的圖片往上滾動，直到圖片看不到時再讓下面的ListView向上滾動。 當向下滑動時，先讓ListView往下滑動，直到ListView不能往下滑動時在讓上面圖片往下滾動。             實現效果如下：         

訂餐外賣網站原始碼模板多使用者帶後臺 仿餓了麼美團外賣o2o

系統簡介： 網上訂餐系統，是石家莊晟訊網路科技有限公司為滿足眾多餐飲外賣企業的迫切需要，開發定製的一款成熟的“B2C網上訂餐系統”。目前已經運用到全國各地，網上點餐系統致力於幫助專業從事餐飲外賣企業或有外賣業務的餐飲企業快速部署外賣訂餐系統，拓展網路外賣訂餐業務

WMRouter：美團外賣Android開源路由框架

WMRouter是一款Android路由框架，基於元件化的設計思路，功能靈活，使用也比較簡單。 WMRouter最初用於解決美團外賣C端App在業務演進過程中的實際問題，之後逐步推廣到了美團其他App，因此我們決定將其開源，希望更多技術同行一起開發，應用到更廣泛的場

iOS 類似美團外賣 app 兩個 tableView 聯動效果實現

來源：劉光軍_ 連結：http://www.jianshu.com/p/c118a29887ca 寫在前面 首先宣告哈，不是廣告，我就是用的時候覺得這個功能比較好玩，就想著實現了一下。效果如圖： 接下來簡單的說一下思路吧~ 大體思路

美團外賣商家獲取訂單-signToken取值

post ima gsl ffffff hid eve extend -1 ati 所需工具： findller chrome 獲取外賣歷史訂單地址為： http://e.waimai.meituan.com/v2/order/history/r/query?getNe

移動Web APP開發之實戰美團外賣 高清無密 百度網盤

管理 如何 第6章 代碼管理 view 優化 移動web webp flex 第1章 課程介紹 通過課程介紹，了解學習課程的必要性，所包含的知識點，課程安排，學習前提，課程收獲，快速全面了解課程。 1-1 課程導學 第2章 移動web硬知識點 本章主要講解移動web開發中必

移動Web APP開發之實戰美團外賣

第1章 課程介紹 通過課程介紹，瞭解學習課程的必要性，所包含的知識點，課程安排，學習前提，課程收穫，快速全面瞭解課程。 1-1 課程導學 第2章 移動web硬知識點 本章主要講解移動web開發中必要掌握的基本知識，是進行後續學習的前提。從概述到開發除錯方法

WeGeek Talk | 美團外賣

今天前來專欄分享的極客，是來自美團外賣的小程式前端團隊。 在 2017 年 1 月 9 日，美團外賣作為首批小程式正式上線，截止到目前，美團外賣小程式 DAU 已近千萬。但事實上，美團外賣早期時更多的是主打手機網頁端，在美團外賣的小程式剛上線時並沒有過多去維護，之後才與微信官方有了更多交流。

最新移動Web APP開發之實戰美團外賣

1.1 在設定中勾中Build project automatically 1.2 使用快捷鍵Ctrl + shift + alt + /，開啟Maintenance操作面板，選擇Registry，開啟Registry操作面板 1.3 找到並勾線"compiler.aut0mak

下午不知道吃什麼？用Python爬取美團外賣評論幫你選餐！

一、介紹 朋友暑假實踐需要美團外賣APP評論這一份資料，一開始我想，這不就抓取網頁原始碼再從中提取資料就可以了嗎，結果發現事實並非如此，情況和之前崔大講過的分析Ajax來抓取今日頭條街拍美圖類似，都是通過非同步載入的方式傳輸資料，不同的是這次的是通過JS傳輸，其他的基本思路基本一致，希望那些資料

iOS App冷啟動治理：來自美團外賣的實踐

一、背景 冷啟動時長是App效能的重要指標，作為使用者體驗的第一道“門”，直接決定著使用者對App的第一印象。美團外賣iOS客戶端從2013年11月開始，歷經幾十個版本的迭代開發，產品形態不斷完善，業務功能日趨複雜；同時外賣App也已經由原來的獨立業務App演進成為一個平臺App，陸續接入了閃購、跑腿等其他

美團外賣iOS App冷啟動治理

一、背景 冷啟動時長是App效能的重要指標，作為使用者體驗的第一道“門”，直接決定著使用者對App的第一印象。美團外賣iOS客戶端從2013年11月開始，歷經幾十個版本的迭代開發，產品形態不斷完善，業務功能日趨複雜；同時外賣App也已經由原來的獨立業務App演進成為一個平臺App，陸續接入了閃購、跑腿等其他

美團外賣：日訂單量超1600萬的自動化業務運維之路

背景 美團外賣業務在網際網路行業是非常獨特的，不僅流程複雜——從使用者下單、商家接單到配送員接單、交付，而且壓力和流量在午、晚高峰時段非常集中。同時，外賣業務的增長非常迅猛，自2013年11月上線到最近峰值突破1600萬，還不到4年。在這種情況下，一旦出現事故，單純靠人工排查解決問題，存在較多的侷限

Android 仿美團懸浮購物車顯示隱藏

效果圖： 這是美團的效果 通過效果圖可以看到 靜止的時候是購物車圖示是顯示的，滑動的時候是隱藏一半並半透明顯示的。 這裡用到一個觸控反饋的方法dispatchTouchEvent MotionEvent.ACTION_DOWN://手指按下 Mot

Android 仿美團網,大眾點評購買框懸浮效果之修改版

我之前寫了一篇關於美團網，大眾點評的購買框效果的文章Android對ScrollView滾動監聽，實現美團、大眾點評的購買懸浮效果，我自己感覺效果並不是很好，如果快速滑動介面，顯示懸浮框的時候會出現一卡的現象，有些朋友說有時候會出現兩個佈局的情況，特別是對ScrollView

移動WebAPP開發之實戰美團外賣視訊教程

第1章 課程介紹通過課程介紹，瞭解學習課程的必要性，所包含的知識點，課程安排，學習前提，課程收穫，快速全面瞭解課程。1-1 課程導學第2章 移動web硬知識點本章主要講解移動web開發中必要掌握的基本知識，是進行後續學習的前提。從概述到開發除錯方法，以及viewport視窗概念和原理的講解，在到移動web開發

Android 仿美團網,大眾點評購買框懸浮效果，仿美團詳情頁，可下拉放大圖片，向上滾動圖片，鬆手有動畫

先看效果圖 直接上程式碼註釋都寫到程式碼裡面了： 自定義的ScrollView package mm.shandong.com.testmtxqcomplex.myui; import android.content.Context; import andro

爬蟲實戰----美團外賣商家資料介面分析

本文發表於2017年11月6號，不保證其在之後的時間仍適用，只作例子分享 準備工作 抓包工具:Fiddler,Firebug等工具，此文使用Chrome瀏覽器自帶的抓包工具 介面分析(從H5端入手) 首先進入美團外賣h5的商家列表頁