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;
        }

      }
    }
  });
}
}

看完了這篇文章，相信你對“Android仿美團外賣菜單界面的實現方法”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！