美团大众点评教你玩转手机点餐和结账
　来源：　
来源：作者：责任编辑：赵刚
　　要点菜叫服务员却没回应?懒癌症犯了不爱翻厚重的菜单?不知道哪道菜品最畅销?在移动互联网时代，去餐厅吃饭点菜也有了更新的玩法。通过美团大众点评推出的手机点餐功能，消费者可以在手机上完成自助点菜，更方便省时。
　　消费者通过大众点评客户端，进入商家页面，点击“点菜”按钮或者扫描商家桌台上的点餐二维码，进入线上点菜页面，选中菜品加入购物车，还可以多人同时点餐。确认菜单后，即可成功下单。商家在接单后会打印出小票，便于核实。由此，消费者的点餐过程就自助完成了，不需要服务员，也不用再翻看纸质的菜单，有效减少了点餐时间，更便捷迅速。同时，还可以在线上查看“网友热议”选项，查看大众点评网友推荐的热销菜品。
　　第一步：通过大众点评客户端商家页面，点击“点菜”按钮。
　　第二步：进入点菜页面，查看菜单，选中心仪的菜品加入购物车。
　　第三步：确认菜单，接下来扫描桌台二维码，绑定桌号，下单成功。
　　在位于上海金沙江路的辣府火锅店，每个餐桌上都贴有美团大众点评的手机点餐二维码座位帖，客人们入座后很自然拿出有机进行扫码点餐，整个点菜过程大概2-3分钟就可以完成了。而通过传统的点菜方式，需要的时间一般会超过6分钟。在杭州的马灯部落餐厅，手机点餐也受到消费者们的追捧。这家餐厅带有浓郁的原生态民族风情，融入美国西部乡村酒吧风格，菜单通过黑板进行展示，进店的顾客要聚集在黑板前完成点菜。随着消费者越来越多，这样的点菜方式便造成了拥挤。而近来顾客们通过手机点餐的方式便不用排队看黑板菜单，消费体验更好。
　　在杭州马灯部落餐厅，手机点餐功能受到消费者们的追捧。
　　目前，消费者可以在辣府，黄记煌、新石器烤肉、重庆德庄火锅、四川香天下、弄堂里等诸多知名餐厅体验美团大众点评手机点餐功能。通过手机自助完成点菜并结账，一气呵成，让菜单飞一会儿吧!
　　行业动态出于传递更多信息之目的登载此文，并不意味赞同其观点或证实其描述。文章内容仅供参考，新闻纠错或爆料请发信至：信箱。[责任编辑:赵刚]
光明网版权所有android开发 仿美团团购顶部的下拉菜单的问题
[问题点数：40分，结帖人u]
android开发 仿美团团购顶部的下拉菜单的问题
[问题点数：40分，结帖人u]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|大神们，美团外卖商家菜单排版应该怎么整啊 愁死啦。谁告诉我啊【商河吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：236,665贴子：
大神们，美团外卖商家菜单排版应收藏
大神们，美团外卖商家菜单排版应该怎么整啊 愁死啦。谁告诉我啊
大神都在干嘛
你找我老公啊！他知道
本人专业从事外卖平台营销策划，从2015年开始接触外卖平台，是第一批外卖商家，目前自己是任师傅烤肉饭专业外卖品牌连锁创始人，希望能帮道你，联系电话，联系后请备注需求，贴吧认识的
建议你联系任师傅专业从事外卖平台设计，营销策划
登录百度帐号首先上实现效果图，不会做动态图，就先凑合着看吧
使用了网上的一个开源控件viewpagerindicator,可以自定义切换时候显示的标记，圆点，或者下划线。
GrildView显示的是手机上的全部app，根据计算好的每页显示的数量来动态添加adapter.
public void initViews() {
final PackageManager packageManager = getPackageManager();
final Intent mainIntent = new Intent(Intent.ACTION_MAIN, null);
mainIntent.addCategory(Intent.CATEGORY_LAUNCHER);
// get all apps
final List&ResolveInfo& apps = packageManager.queryIntentActivities(mainIntent, 0);
// the total pages
final int PageCount = (int)Math.ceil(apps.size()/APP_PAGE_SIZE);
array = new ArrayList&GridView&();
for (int i=0; i&PageC i++) {
GridView appPage = new GridView(this);
appPage.setAdapter(new AppAdapter(this, apps, i));
appPage.setNumColumns(4);
array.add(appPage);
下方显示的切换标记其实两行代码就可以搞定了。
mIndicator = (LinePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(viewPager);
然后布局文件中要引用这个自定义View
&LinearLayout 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"
android:background="@android:color/white"
android:orientation="vertical" &
&android.support.v4.view.ViewPager
android:id="@+id/myviewpager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center"
android:scaleType="fitXY" /&
&LinearLayout
android:id="@+id/liner1"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal"
&&/LinearLayout&
&com.viewpagerindicator.LinePageIndicator
android:id="@+id/indicator"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:padding="10dip" /&
&/LinearLayout&
ViewPage滑动Adapter,这个里面可以自定义需求，比如说，你要实现一个可以无限循环滑动的view,那么你可以把最大数量设为500或者1000更大的然后需要处理好异常，addview跟removeview
package cn.example.
import java.util.L
import com.viewpagerindicator.IconPagerA
import android.content.C
import android.support.v4.view.PagerA
import android.support.v4.view.ViewP
import android.view.V
import android.widget.GridV
public class MyViewPagerAdapter extends PagerAdapter implements
IconPagerAdapter {
private List&GridView&
* 供外部调用（new）的方法
* @param context
* @param imageViews
添加的序列对象
public MyViewPagerAdapter(Context context, List&GridView& array) {
this.array =
public int getCount() {
// TODO Auto-generated method stub
return array.size();
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
public Object instantiateItem(View arg0, int arg1) {
View view = array.get(arg1);
((ViewPager) arg0).addView(array.get(arg1));
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
public int getIconResId(int index) {
// TODO Auto-generated method stub
实现GrildView点击事件
package cn.example.
import java.util.ArrayL
import java.util.L
import cn.example.activity.R;
import android.content.C
import android.content.pm.PackageM
import android.content.pm.ResolveI
import android.view.LayoutI
import android.view.V
import android.view.View.OnClickL
import android.view.ViewG
import android.widget.BaseA
import android.widget.ImageV
import android.widget.TextV
import android.widget.T
public class AppAdapter extends BaseAdapter {
private List&ResolveInfo& mL// 定义一个list对象
private Context mC// 上下文
public static final int APP_PAGE_SIZE = 8;// 每一页装载数据的大小
private PackageM// 定义一个PackageManager对象
* 构造方法
* @param context
* @param list
所有APP的集合
* @param page
public AppAdapter(Context context, List&ResolveInfo& list, int page) {
mContext =
pm = context.getPackageManager();
mList = new ArrayList&ResolveInfo&();
// 根据当前页计算装载的应用，每页只装载8个
int i = page * APP_PAGE_SIZE;// 当前页的其实位置
int iEnd = i + APP_PAGE_SIZE;// 所有数据的结束位置
while ((i & list.size()) && (i & iEnd)) {
mList.add(list.get(i));
public int getCount() {
// TODO Auto-generated method stub
return mList.size();
public Object getItem(int position) {
// TODO Auto-generated method stub
return mList.get(position);
public long getItemId(int position) {
// TODO Auto-generated method stub
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(
R.layout.app_item, parent, false);
final ResolveInfo appInfo = mList.get(position);
ImageView appicon = (ImageView) convertView
.findViewById(R.id.ivAppIcon);
final TextView appname = (TextView) convertView
.findViewById(R.id.tvAppName);
appicon.setImageDrawable(appInfo.loadIcon(pm));
appname.setText(appInfo.loadLabel(pm));
convertView.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(mContext, "点击了" + appInfo.loadLabel(pm),
Toast.LENGTH_SHORT).show();
return convertV
稍后贴出下载连接,CSDN上传出现问题，有需要的可以留邮箱给我。
阅读(...) 评论()Android开发之多级下拉列表菜单实现（仿美团，淘宝等）
我们在常用的电商或者旅游APP中，例如美团，手机淘宝等等，都能够看的到有那种下拉式的二级列表菜单。具体如图所示：
上面两张图就是美团的一个二级列表菜单的一个展示。我相信很多人都想开发一个跟它一样的功能放到自己的APP中。好，接下来我们就开始动手，解决它。
vcD4KPGgyPjGjrL3hubm31s72PC9oMj4KPHA+ytfPyKOsztLDx7j4s/bV4rj2z8LAtLLLtaXQ6NKqtcTX6b2ooaPO0sPH08PP37/yzbzAtLfWzvahozwvcD4KPHA+PGltZyBzcmM9"https://www.2cto.com/uploadfile/Collfiles/9.jpg" width="600" alt="\">
1）如上图所示，最外围的是一个Activity，顶部包含了一个View的容器，这个容器主要是装载ToggleButton来实现诸如美团里面的“美食，全城，理我最近，刷选”这一行。这一行一点就会弹出对应的下来菜单。
2）下拉菜单是如何实现的呢？，这里我们利用了PopupWindow来实现这一弹出式窗口。然后我们在弹出式窗口里面再定义我们的下来列表项，是单列还是二级菜单，都是由里面来定。
3）不同的菜单，需要一级或者需要二级，在这里根据我的需求而变动。我们在PopupWindow上面加一个自定义的LeftView，或者是MiddleView，RightView。主要是一个ToggleButton，你弹出一个窗口，你就定制一个窗口。
3）视图里面嵌入ListView，就形成了列表项。
好分析就到上面为止，接下来我们一步步的说明实现。
2，项目结构
本项目的项目结构如图所示：
1） Adapter。适配器，主要是为ListView提供数据适配的。
2）MainActivity。主活动页面。
3）ExpandTabView。本项目的核心类，它包含ToggleButton容器和PopupWindow，是控制弹出窗口的核心类。
4）ViewLeft,ViewMiddle,ViewRight。是弹出里面嵌套的类，实现不同的列表菜单。
3，MainActivity
承载所有元素。看代码比看文字实在。
package com.example.
import java.util.ArrayL
import android.app.A
import android.os.B
import android.util.L
import android.view.V
import android.widget.T
import com.example.view.ExpandTabV
import com.example.view.ViewL
import com.example.view.ViewM
import com.example.view.ViewR
public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
private ExpandTabView expandTabV
private ArrayList mViewArray = new ArrayList();
private ViewLeft viewL
private ViewMiddle viewM
private ViewRight viewR
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initVaule();
initListener();
private void initView() {
Log.d(TAG,"initView");
expandTabView = (ExpandTabView) findViewById(R.id.expandtab_view);
viewLeft = new ViewLeft(this);
viewMiddle = new ViewMiddle(this);
viewRight = new ViewRight(this);
private void initVaule() {
Log.d(TAG,"initValue");
mViewArray.add(viewLeft);
mViewArray.add(viewMiddle);
mViewArray.add(viewRight);
ArrayList mTextArray = new ArrayList();
mTextArray.add("距离");
mTextArray.add("区域");
mTextArray.add("距离");
expandTabView.setValue(mTextArray, mViewArray);//将三个下拉列表设置进去
expandTabView.setTitle(viewLeft.getShowText(), 0);
expandTabView.setTitle(viewMiddle.getShowText(), 1);
expandTabView.setTitle(viewRight.getShowText(), 2);
private void initListener() {
Log.d(TAG,"initListener");
viewLeft.setOnSelectListener(new ViewLeft.OnSelectListener() {
public void getValue(String distance, String showText) {
Log.d("ViewLeft", "OnSelectListener, getValue");
onRefresh(viewLeft, showText);
viewMiddle.setOnSelectListener(new ViewMiddle.OnSelectListener() {
public void getValue(String showText) {
Log.d("ViewMiddle","OnSelectListener, getValue");
onRefresh(viewMiddle,showText);
viewRight.setOnSelectListener(new ViewRight.OnSelectListener() {
public void getValue(String distance, String showText) {
Log.d("ViewRight","OnSelectListener, getValue");
onRefresh(viewRight, showText);
private void onRefresh(View view, String showText) {
Log.d(TAG,"onRefresh,view:"+view+",showText:"+showText);
expandTabView.onPressBack();
int position = getPositon(view);
if (position >= 0 && !expandTabView.getTitle(position).equals(showText)) {
expandTabView.setTitle(showText, position);
Toast.makeText(MainActivity.this, showText, Toast.LENGTH_SHORT).show();
private int getPositon(View tView) {
Log.d(TAG,"getPosition");
for (int i = 0; i < mViewArray.size(); i++) {
if (mViewArray.get(i) == tView) {
return -1;
public void onBackPressed() {
if (!expandTabView.onPressBack()) {
4 ，ExpandTabView
最主要就是如何处理当我们点击这些ToggleButton的时候要弹出或者收起这些PopupWindow。
package com.example.
import java.util.ArrayL
import com.example.expandtabview.R;
import android.app.A
import android.content.C
import android.util.AttributeS
import android.util.L
import android.view.LayoutI
import android.view.V
import android.widget.LinearL
import android.widget.PopupW
import android.widget.PopupWindow.OnDismissL
import android.widget.RelativeL
import android.widget.TextV
import android.widget.ToggleB
* 菜单控件头部，封装了下拉动画，动态生成头部按钮个数
* @author zengjinlong
public class ExpandTabView extends LinearLayout implements OnDismissListener {
private static final String TAG = "ExpandTabView";
private ToggleButton selectedB
private ArrayList mTextArray = new ArrayList();
private ArrayList mViewArray = new ArrayList();
private ArrayList mToggleButton = new ArrayList();
private Context mC
private final int SMALL = 0;
private int displayW
private int displayH
private PopupWindow popupW
private int selectP
public ExpandTabView(Context context) {
super(context);
init(context);
public ExpandTabView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
* 根据选择的位置设置tabitem显示的值
public void setTitle(String valueText, int position) {
if (position < mToggleButton.size()) {
mToggleButton.get(position).setText(valueText);
public void setTitle(String title){
* 根据选择的位置获取tabitem显示的值
public String getTitle(int position) {
if (position < mToggleButton.size() && mToggleButton.get(position).getText() != null) {
return mToggleButton.get(position).getText().toString();
return "";
* 设置tabitem的个数和初始值
* @param textArray 标题数组
* @param viewArray 控件数组
public void setValue(ArrayList textArray, ArrayList viewArray) {
if (mContext == null) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
Log.d(TAG,"setValue");
mTextArray = textA
for (int i = 0; i < viewArray.size(); i++) {
final RelativeLayout r = new RelativeLayout(mContext);
int maxHeight = (int) (displayHeight * 0.7);
RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, maxHeight);
rl.leftMargin = 10;
rl.rightMargin = 10;
r.addView(viewArray.get(i), rl);
mViewArray.add(r);
r.setTag(SMALL);
ToggleButton tButton = (ToggleButton) inflater.inflate(R.layout.toggle_button, this, false);
addView(tButton);
View line = new TextView(mContext);
line.setBackgroundResource(R.drawable.choosebar_line);
if (i < viewArray.size() - 1) {
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(2, LinearLayout.LayoutParams.MATCH_PARENT);
addView(line, lp);
mToggleButton.add(tButton);
tButton.setTag(i);
tButton.setText(mTextArray.get(i));
r.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Log.d("RelativeLayout","view:"+v);
onPressBack();
r.setBackgroundColor(mContext.getResources().getColor(R.color.popup_main_background));
tButton.setOnClickListener(new OnClickListener() {
public void onClick(View view) {
Log.d("tButton","setOnClickListener(l)");
// initPopupWindow();
ToggleButton tButton = (ToggleButton)
if (selectedButton != null && selectedButton != tButton) {
selectedButton.setChecked(false);
selectedButton = tB
selectPosition = (Integer) selectedButton.getTag();
startAnimation();
if (mOnButtonClickListener != null && tButton.isChecked()) {
mOnButtonClickListener.onClick(selectPosition);
private void startAnimation() {
Log.d(TAG,"startAnimation");
if (popupWindow == null) {
Log.d(TAG,"startAnimation(),new popupWindow now");
popupWindow = new PopupWindow(mViewArray.get(selectPosition), displayWidth, displayHeight);
popupWindow.setAnimationStyle(R.style.PopupWindowAnimation);
popupWindow.setFocusable(false);
popupWindow.setOutsideTouchable(true);
Log.d(TAG,"startAnimation(),selectedButton:"+selectedButton+",isChecked:"+selectedButton.isChecked()+
",popupWindow.isShowing:"+popupWindow.isShowing());
if (selectedButton.isChecked()) {
if (!popupWindow.isShowing()) {
showPopup(selectPosition);
popupWindow.setOnDismissListener(this);
popupWindow.dismiss();
hideView();
if (popupWindow.isShowing()) {
popupWindow.dismiss();
hideView();
private void showPopup(int position) {
View tView = mViewArray.get(selectPosition).getChildAt(0);
if (tView instanceof ViewBaseAction) {
ViewBaseAction f = (ViewBaseAction) tV
if (popupWindow.getContentView() != mViewArray.get(position)) {
popupWindow.setContentView(mViewArray.get(position));
popupWindow.showAsDropDown(this, 0, 0);
* 如果菜单成展开状态，则让菜单收回去
public boolean onPressBack() {
Log.d(TAG,"onPressBack");
if (popupWindow != null && popupWindow.isShowing()) {
popupWindow.dismiss();
hideView();
if (selectedButton != null) {
selectedButton.setChecked(false);
private void hideView() {
Log.d(TAG, "hide()");
View tView = mViewArray.get(selectPosition).getChildAt(0);
if (tView instanceof ViewBaseAction) {
ViewBaseAction f = (ViewBaseAction) tV
private void init(Context context) {
mContext =
displayWidth = ((Activity) mContext).getWindowManager().getDefaultDisplay().getWidth();
displayHeight = ((Activity) mContext).getWindowManager().getDefaultDisplay().getHeight();
setOrientation(LinearLayout.HORIZONTAL);
public void onDismiss() {
Log.d(TAG,"onDismiss,selectPosition:"+selectPosition);
showPopup(selectPosition);
popupWindow.setOnDismissListener(null);
private OnButtonClickListener mOnButtonClickL
* 设置tabitem的点击监听事件
public void setOnButtonClickListener(OnButtonClickListener l) {
mOnButtonClickListener =
* 自定义tabitem点击回调接口
public interface OnButtonClickListener {
public void onClick(int selectPosition);
5，ViewLeft
其中的一个示例，其他两个就不列举了
package com.example.
import com.example.adapter.TextA
import com.example.expandtabview.R;
import android.content.C
import android.util.AttributeS
import android.view.LayoutI
import android.view.V
import android.widget.ListV
import android.widget.RelativeL
import android.widget.T
public class ViewLeft extends RelativeLayout implements ViewBaseAction{
private static final String TAG = "ViewLeft";
private ListView mListV
private final String[] items = new String[] { "item1", "item2", "item3", "item4", "item5", "item6" };//显示字段
private final String[] itemsVaule = new String[] { "1", "2", "3", "4", "5", "6" };//隐藏id
private OnSelectListener mOnSelectL
private TextA
private String mD
private String showText = "item1";
private Context mC
public String getShowText() {
return showT
public ViewLeft(Context context) {
super(context);
init(context);
public ViewLeft(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
public ViewLeft(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
private void init(Context context) {
mContext =
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.view_distance, this, true);
setBackgroundDrawable(getResources().getDrawable(R.drawable.choosearea_bg_mid));
mListView = (ListView) findViewById(R.id.listView);
adapter = new TextAdapter(context, items, R.drawable.choose_item_right, R.drawable.choose_eara_item_selector);
adapter.setTextSize(17);
if (mDistance != null) {
for (int i = 0; i < itemsVaule. i++) {
if (itemsVaule[i].equals(mDistance)) {
adapter.setSelectedPositionNoNotify(i);
showText = items[i];
mListView.setAdapter(adapter);
adapter.setOnItemClickListener(new TextAdapter.OnItemClickListener() {
public void onItemClick(View view, int position) {
if (mOnSelectListener != null) {
showText = items[position];
mOnSelectListener.getValue(itemsVaule[position], items[position]);
public void setOnSelectListener(OnSelectListener onSelectListener) {
mOnSelectListener = onSelectL
public interface OnSelectListener {
public void getValue(String distance, String showText);
public void hide() {
public void show() {
好，今天就到这里。。希望有用。}