Android仿美团外卖菜单界面

美团外卖菜单界面的Android实现代码,供大家参考,具体内容如下

布局文件

总布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:orientation="horizontal"
tools:context="com.example.a1_.activity.MainActivity">

<ListView
  android:id="@+id/lv_left"
  android:layout_width="100dp"
  android:layout_height="match_parent">
</ListView>

<se.emilsjolander.stickylistheaders.StickyListHeadersListView
  android:id="@+id/lv_right"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
</se.emilsjolander.stickylistheaders.StickyListHeadersListView>

</LinearLayout>

左侧布局

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

<TextView
  android:layout_margin="10dp"
  android:id="@+id/tv_title"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="菜单类别"
  android:textSize="18sp" />

</RelativeLayout>

右侧布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:orientation="vertical">

<ImageView
  android:src="@mipmap/ic_launcher"
  android:layout_margin="4dp"
  android:id="@+id/iv"
  android:layout_width="50dp"
  android:layout_height="50dp" />

<LinearLayout
  android:layout_toRightOf="@id/iv"
  android:orientation="vertical"
  android:layout_margin="4dp"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
    android:text="洋芋粉炒腊肉"
    android:textSize="20sp"
    android:id="@+id/tv_right_title1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

  <TextView
    android:id="@+id/tv_right_title2"
    android:text="洋芋粉炒腊肉"
    android:textSize="16sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

  <TextView
    android:id="@+id/tv_right_count"
    android:text="月销售54份"
    android:textSize="18sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</LinearLayout>

</RelativeLayout>

适配器

左侧适配器

package com.example.a1_.adapter;

import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.example.a1_.Bean.LeftBean;
import com.example.a1_.R;

import java.util.List;

/**
 * Created by Administrator on 2017.05.27.0027.
 */

public class LeftAdapter extends BaseAdapter {

private List<LeftBean> mList;
private int currentLeftItem = 0;
//创建一个构造方法

public LeftAdapter(List<LeftBean> mList) {
  this.mList = mList;
}

@Override
public int getCount() {
  return mList.size();
}

@Override
public LeftBean getItem(int position) {
  return mList.get(position);
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {

  ViewHolder viewHolder = null;
  if (convertView==null){
    convertView = View.inflate(parent.getContext(), R.layout.left_item,null);

    //创建viewHolder对象
    viewHolder = new ViewHolder();
    viewHolder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);
    //让viewholder挂在convertview上面一起复用
    convertView.setTag(viewHolder);
  }else {
    //当convertView不为空时,吧viewholder取出来
    viewHolder = (ViewHolder) convertView.getTag();
  }

  //获取对应条目的内容
  LeftBean leftBean = getItem(position);
  //把对应条目的内容设置在控件上
  viewHolder.tv_title.setText(leftBean.title);

  //给左侧条目设置颜色
  if (currentLeftItem ==position){
    viewHolder.tv_title.setTextColor(Color.RED);
  }
  return convertView;
}

public void setCurrentSelect(int currentLeftItem){
  this.currentLeftItem = currentLeftItem;
}

//创建一个viewholder,用来复用对象
class ViewHolder{
  TextView tv_title;
}
}

右侧适配器

package com.example.a1_.adapter;

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;

import com.example.a1_.Bean.LeftBean;
import com.example.a1_.Bean.RightBean;
import com.example.a1_.R;

import java.util.List;
import java.util.Random;

import se.emilsjolander.stickylistheaders.StickyListHeadersAdapter;

/**
 * Created by Administrator on 2017.05.27.0027.
 */

public class RightAdapter extends BaseAdapter implements StickyListHeadersAdapter {
private List<LeftBean> mLeft;
private List<RightBean> mRight;
private Context context;

public RightAdapter(List<LeftBean> mLeft, List<RightBean> mRight, Context context) {
  this.mLeft = mLeft;
  this.mRight = mRight;
  this.context = context;
}

@Override
public View getHeaderView(int position, View convertView, ViewGroup parent) {
  TextView tv = new TextView(context);
  tv.setTextColor(Color.RED);
  tv.setTextSize(18);
  tv.setText(mRight.get(position).type);
  return tv;
}

@Override
public long getHeaderId(int position) {
  return mRight.get(position).typeId;
}

@Override
public int getCount() {
  return mRight.size();
}

@Override
public RightBean getItem(int position) {
  return mRight.get(position);
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {

  ViewHolder viewHolder = null;
  if (convertView==null){
    convertView = View.inflate(context, R.layout.right_item,null);
    viewHolder = new ViewHolder();
    viewHolder.title1 = (TextView) convertView.findViewById(R.id.tv_right_title1);
    viewHolder.title2 = (TextView) convertView.findViewById(R.id.tv_right_title2);
    viewHolder.count = (TextView) convertView.findViewById(R.id.tv_right_count);

    convertView.setTag(viewHolder);
  }else {
    viewHolder = (ViewHolder) convertView.getTag();
  }
  RightBean rightBean = mRight.get(position);
  viewHolder.title1.setText(rightBean.biaoti);
  viewHolder.title2.setText(rightBean.biaoti);
  //使用Random获取随机数
  Random random = new Random();
  int i = random.nextInt(100);
  viewHolder.count.setText("月销量"+i+"份");
  return convertView;
}

static class ViewHolder{
  TextView title1;
  TextView title2;
  TextView count;
}
}

javabean文件

左侧

package com.example.a1_.Bean;

public class LeftBean {
public String title;
public int type;

}

右侧

package com.example.a1_.Bean;

import android.R.string;

public class RightBean {

public String biaoti;
public String type;
public int typeId;

}

数据源

package com.example.a1_.data;

import com.example.a1_.Bean.LeftBean;
import com.example.a1_.Bean.RightBean;

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

/**
 * Created by wangcaisheng on 2017/5/27.
 */

public class Data {

private static String[] leftData = new String[]{"13.9特价套餐","粗粮主食","佐餐小吃","用心营养套餐(不含主食)","三杯鸡双拼尊享套餐","带鱼双拼尊享套餐","红烧肉双拼尊享套餐"};
private static String[] rightData0 = new String[]{"洋芋粉炒腊肉","土鸡炖香菇","新疆大盘辣子土鸡","清炖土鸡块","农家蒸碗 ","香辣野猪肉","香辣薯条大虾","麻辣猪血"};
private static String[] rightData1 = new String[]{"商芝扣肉","羊肉萝卜","干烧鱼 ","干煸野猪肉 ","排骨火锅","土鸡火锅","牛肉火锅","狗肉火锅 "};
private static String[] rightData2 = new String[]{"虎皮辣子炒咸肉","重庆飘香水煮鱼","红烧土鸡块","干煸辣子土鸡","清炖全鸡 "};
private static String[] rightData3 = new String[]{"洋芋粉炒腊肉","土鸡炖香菇","新疆大盘辣子土鸡","清炖土鸡块","农家蒸碗 ","香辣野猪肉","香辣薯条大虾","麻辣猪血"};
private static String[] rightData4 = new String[]{"洋芋粉炒腊肉","土鸡炖香菇","新疆大盘辣子土鸡","清炖土鸡块","农家蒸碗 ","香辣野猪肉","香辣薯条大虾","麻辣猪血"};
private static String[] rightData5 = new String[]{"洋芋粉炒腊肉","土鸡炖香菇","新疆大盘辣子土鸡","清炖土鸡块","农家蒸碗 ","香辣野猪肉","香辣薯条大虾","麻辣猪血"};
private static String[] rightData6 = new String[]{"洋芋粉炒腊肉","土鸡炖香菇","新疆大盘辣子土鸡","清炖土鸡块","农家蒸碗 ","香辣野猪肉","香辣薯条大虾","麻辣猪血"};

public static List<LeftBean> getLeftData(){
  List<LeftBean> list = new ArrayList<LeftBean>();
  for (int i = 0; i < leftData.length; i++) {
    LeftBean bean = new LeftBean();
    bean.title = leftData[i];
    bean.type = i;
    list.add(bean);
  }

  return list;

}

public static List<RightBean> getRightData(List<LeftBean> list){
  List<RightBean> rightList = new ArrayList<RightBean>();
  for (int i = 0; i < list.size(); i++) {
    LeftBean leftBean = list.get(i);
    int mType = leftBean.type;
    switch (mType) {
      case 0:
        rightList = getRightList(rightData0, leftBean, mType, rightList);
        break;
      case 1:
        rightList = getRightList(rightData1, leftBean, mType, rightList);
        break;
      case 2:
        rightList = getRightList(rightData2, leftBean, mType, rightList);
        break;
      case 3:
        rightList = getRightList(rightData3, leftBean, mType, rightList);
        break;
      case 4:
        rightList = getRightList(rightData4, leftBean, mType, rightList);
        break;
      case 5:
        rightList = getRightList(rightData5, leftBean, mType, rightList);
        break;
      case 6:
        rightList = getRightList(rightData6, leftBean, mType, rightList);
        break;
    }

  }

  return rightList;

}

private static List<RightBean> getRightList(String[] arr, LeftBean leftBean, int mType, List<RightBean> rightList){
  for (int j = 0; j < arr.length; j++) {
    RightBean bean = new RightBean();
    bean.type = leftBean.title;
    bean.biaoti = arr[j];
    bean.typeId = mType;
    rightList.add(bean);
  }
  return rightList;
}
}

核心代码

package com.example.a1_.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

import com.example.a1_.Bean.LeftBean;
import com.example.a1_.Bean.RightBean;
import com.example.a1_.R;
import com.example.a1_.adapter.LeftAdapter;
import com.example.a1_.adapter.RightAdapter;
import com.example.a1_.data.Data;

import java.util.List;

import se.emilsjolander.stickylistheaders.StickyListHeadersListView;

public class MainActivity extends AppCompatActivity {

private ListView lv_left;
private StickyListHeadersListView lv_right;
private int currentLeftItem;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  initView();
  initData();

}

//初始化控件
private void initView() {
  //初始化控件
  lv_left = (ListView) findViewById(R.id.lv_left);
  lv_right = (StickyListHeadersListView) findViewById(R.id.lv_right);
}

//设置适配器
private void initData() {
  //创建适配器
  final LeftAdapter leftAdapter = new LeftAdapter(Data.getLeftData());
  //获取左侧数据
  final List<LeftBean> leftData = Data.getLeftData();
  //获取右侧数据
  final List<RightBean> rightData = Data.getRightData(leftData);
  RightAdapter rightAdapter = new RightAdapter(leftData, rightData, this);

  //为左侧布局设置适配器
  lv_left.setAdapter(leftAdapter);
  lv_right.setAdapter(rightAdapter);

  //为左侧条目设置点击事件
  lv_left.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      //当左侧条目被点击时,记录下被点击条目的type
      int type = leftData.get(position).type;
      //遍历右侧条目,并获取右侧条目的typeId,与刚刚获取的type对比,是否一致
      for (int i = 0; i < rightData.size(); i++) {
        if (type == rightData.get(i).typeId) {
          //如果找到对应的条目,那就将右侧条目滚动至对应条目,并跳出循环
          lv_right.smoothScrollToPosition(i);
          currentLeftItem = i;
          //设置当前被选中的左侧条目
          leftAdapter.setCurrentSelect(currentLeftItem);
          //刷新数据适配器
          leftAdapter.notifyDataSetChanged();
          break;
        }
      }

//        Toast.makeText(MainActivity.this, "您选中了"+leftData.get(position).title, Toast.LENGTH_SHORT).show();
    }
  });

  //为右侧条目设置点击事件
      lv_right.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//        Toast.makeText(MainActivity.this, "右侧条目被点击了"+position, Toast.LENGTH_SHORT).show();

      //当右侧条目被点击时,获取被点击条目的typeId
      int typeId = rightData.get(position).typeId;
      //遍历左侧条目
      for (int i = 0; i < leftData.size(); i++) {
        //获取左侧条目的type,与右侧条目的typeId对比是否一致
        if (typeId == leftData.get(i).type) {
          //说明找到了对应条目,跳出循环,设置当前被选中的条目
          currentLeftItem = i;
          //设置当前被选中的左侧条目
          leftAdapter.setCurrentSelect(currentLeftItem);
          //刷新数据适配器
          leftAdapter.notifyDataSetChanged();
          break;
        }

      }
    }
  });
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android使用RecyclerView仿美团分类界面

    RecyclerView目前来说对大家可能不陌生了.由于在公司的项目中,我们一直用的listview和gridview.某天产品设计仿照美团的分类界面设计了一个界面,我发现用gridview不能实现这样的效果,所以就想到了RecyclerView,确实是一个很好的控件.和大家分享一下. 效果图 简介 RecyclerView与ListView原理是类似的:都是仅仅维护少量的View并且可以展示大量的数据集.RecyclerView用以下两种方式简化了数据的展示和处理: * 使用LayoutMan

  • Android自定义StepView仿外卖配送进度

    本文实例为大家分享了Android自定义StepView配送进度展示的具体代码,供大家参考,具体内容如下 效果图 使用 可在layout文件下设置以下属性. <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="StepView"> <attr name="step_size" forma

  • Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】

    本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果.分享给大家供大家参考,具体如下: 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图:   主要代码: 1. PopupWindow初始化过程: popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.

  • Android仿美团下拉菜单(商品选购)实例代码

    美团电商应用平台大家使用非常频繁,下面小编通过本文给大家介绍电商应用平台中常用的选择类别下拉列表的实现.先给大家展示下效果图: 一.下拉列表的实现 其实实现方法有很多,这时实现的也没有什么技术含量,只是总结下自己在项目中的做法,也提供一个思路. 首先是列表的数据,一般数据都是从后台读过来,这里因为没有后台,所以写死在客户端: private void initMenuData() { menuData = new ArrayList<map<string, string=""

  • 模仿美团点评的Android应用中价格和购买栏悬浮固定的效果

    随着移动互联网的快速发展,它已经和我们的生活息息相关了,在公交地铁里面都能看到很多人的人低头看着自己的手机屏幕,从此"低头族"一词就产生了,作为一名移动行业的开发人员,我自己也是一名"低头族",上下班时间在公交地铁上看看新闻来打发下时间,有时候也会看看那些受欢迎的App的一些界面效果,为什么人家的app那么受欢迎?跟用户体验跟UI设计也有直接的关系,最近在美团和大众点评的App看到如下效果,我感觉用户好,很人性化,所以自己也尝试着实现了下,接下来就讲解下实现思路!

  • Android仿美团分类下拉菜单实例代码

    本文实例为大家分享了Android仿美团下拉菜单的实现代码,分类进行选择,供大家参考,具体内容如下 效果图 操作平台 AS2.0 第三方框架:butterknife build.gradle dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.4.0' compile

  • Android仿百度外卖自定义下拉刷新效果

    现如今的APP各式各样,同样也带来了各种需求,一个下拉刷新都能玩出花样了,前两天订饭的时候不经意间看到了"百度外卖"的下拉刷新,今天的主题就是它–自定义下拉刷新动画. 看一下实现效果吧: 动画 我们先来看看Android中的动画吧: Android中的动画分为三种: Tween动画,这一类的动画提供了旋转.平移.缩放等效果. Alpha – 淡入淡出 Scale – 缩放效果 Roate – 旋转效果 Translate – 平移效果 Frame动画(帧动画),这一类动画可以创建一个D

  • Android仿美团淘宝实现多级下拉列表菜单功能

    我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看的到有那种下拉式的二级列表菜单.具体如图所示: 上面两张图就是美团的一个二级列表菜单的一个展示.我相信很多人都想开发一个跟它一样的功能放到自己的APP中.好,接下来我们就开始动手,解决它. 1.结构分析 首先,我们给出这个下拉菜单需要的组建.我们用线框图来分析. 1)如上图所示,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的"美食,全城,理我最近,刷选&

  • Android仿外卖购物车功能

    先看看效果图: 知识点分析 效果图来看不复杂内容并没多少,值得介绍一下的知识点也就下面几个吧 - 列表标题悬停 - 左右列表滑动时联动 - 添加商品时的抛物线动画 - 底部弹出购物车清单 - 数据的同步 另外就是实现效果的时候可能会遇到的几个坑... 布局很简单直接进入代码 1:列表标题悬停 现在做项目列表什么的基本抛弃了ListView改用RecyclerView,上篇博客中的标题悬停也是使用了一个RecyclerView的开源项目sticky-headers-recyclerview,不过写

  • Android模仿美团顶部的滑动菜单实例代码

    前言 本文主要给大家介绍了关于Android模仿美团顶部滑动菜单的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下效果图: 实现方法 这是通过 ViewPager 和 GridView 相结合做出来的效果,每一个 ViewPager 页面都是一个 GridView,底部的每个滑动指示圆点都是从布局文件中 inflate 出来的 首先需要一个代表每个活动主题的 JavaBean /** * Created by CZY on 2017/6/23. */ publ

随机推荐