前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android仿美团外卖菜单界面

Android仿美团外卖菜单界面

作者头像
砸漏
发布2020-11-04 11:02:48
2.3K0
发布2020-11-04 11:02:48
举报
文章被收录于专栏:恩蓝脚本

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

布局文件

总布局

代码语言:javascript
复制
<?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 

左侧布局

代码语言:javascript
复制
<?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 

右侧布局

代码语言:javascript
复制
<?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 

适配器

左侧适配器

代码语言:javascript
复制
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;
}
}

右侧适配器

代码语言:javascript
复制
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文件

左侧

代码语言:javascript
复制
package com.example.a1_.Bean;


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

}

右侧

代码语言:javascript
复制
package com.example.a1_.Bean;

import android.R.string;

public class RightBean {

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

}

数据源

代码语言:javascript
复制
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;
}
}

核心代码

代码语言:javascript
复制
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;
}
}
}
});
}
}

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档