点餐界面实现

上周给我们安排了一个任务，要我们仿一个点餐界面出来，我们当时真的挺懵的，真的啥也不会，幸好只要我们做一个大概的界面出来就好。我们只能现学现卖了，最后也是做出个这个样子，有点丑。

基本用到的东西就是viewpager+fragment+re’cycleview来实现，其实还有一种方案，tablayout+fragment+recycleview来实现这个我只做了基本效果，左右页面滑动的。

1.效果图

这个按钮点击滑动会变红其实是因为放了两组图，一组灰色，一组红色的图，你选择他就将红色的为true展示出来。

基本结构

这里的drable里面存放的图片内容和一些xml文件没展示出来，太长了，还有几个按钮的selector.xml我也没贴在里面，因为有7个，就懒得贴了。

代码

blankfragment.java

package com.example.orderingapplication;

import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link BlankFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class BlankFragment extends Fragment {
    private View view; //定义view设置fragment的layout
    public RecyclerView mCollectRecyclerView;//定义RecycleView
    //定义ImageListArray实体类作为对象的数据集合
    private  static ArrayList<ImageListArray> imageListArrays=new ArrayList<ImageListArray>();
    //自定义recyclerveiw的适配器
    private FootAdapter footAdapter;
    public BlankFragment() {
        // Required empty public constructor
    }



    public static BlankFragment newInstance(ArrayList<ImageListArray> list) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putSerializable("list",list);
        ArrayList<ImageListArray> temp= (ArrayList<ImageListArray>) args.getSerializable("list");
        imageListArrays=temp;
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        if (view == null) {
            view = inflater.inflate(R.layout.fragment_blank, container, false);
        }
        initRecyclerView();
        return view;
    }


    private void initRecyclerView() {
        //获取RecycleView
        mCollectRecyclerView=(RecyclerView) view.findViewById(R.id.rv);
        //创建adapter
        FootAdapter footAdapter = new FootAdapter(imageListArrays, getActivity());
        //给Recycle设置adapter
        mCollectRecyclerView.setAdapter(footAdapter);
        mCollectRecyclerView.setLayoutManager(new GridLayoutManager(getActivity(),3));
    }

}

footadapter.java

package com.example.orderingapplication;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

//RecyclerView的适配器
public class FootAdapter extends RecyclerView.Adapter<FootAdapter.MyViewHolder> {
    private List<ImageListArray> data;
    private Context context;

    public FootAdapter(List<ImageListArray> data, Context context) {
        this.data = data;
        this.context = context;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = View.inflate(context, R.layout.recycleview_item, null);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.iv.setImageResource(data.get(position).getImageId());
        holder.tv.setText(data.get(position).getTextname());
        holder.tv2.setText(data.get(position).getTextprice());
    }

    @Override
    public int getItemCount() {
        return data==null? 0:data.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        private ImageView iv;
        private TextView tv,tv2;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            iv=itemView.findViewById(R.id.order_image);
            tv=itemView.findViewById(R.id.order_text);
            tv2= itemView.findViewById(R.id.order_price);
        }
    }
}

imagelistarry.java

package com.example.orderingapplication;

import java.io.Serializable;

public class ImageListArray implements Serializable {
    private String textname;
    private int imageId;
    private String textprice;

    public ImageListArray(String textname, int imageId, String textprice) {
        this.textname = textname;
        this.imageId = imageId;
        this.textprice = textprice;
    }

    public String getTextname() {
        return textname;
    }

    public void setTextname(String textname) {
        this.textname = textname;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getTextprice() {
        return textprice;
    }

    public void setTextprice(String textprice) {
        this.textprice = textprice;
    }
}

main_activity.java

package com.example.orderingapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.GridLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;

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



public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ViewPager2 viewPager;
    private LinearLayout cold,hot,meat,vegetable,soup,noodle;
    private ImageView ivcold,ivhot,ivmeat,ivvegetable,ivsoup,ivnoodle,ivCurrent;
    private List<ImageListArray> onePieceList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPager();
        initTabView();
        RecyclerView recyclerView = findViewById(R.id.rv);
        FootAdapter footAdapter = new FootAdapter(onePieceList, this);
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);
    }


    private void initImageListArray() {
        ImageListArray foot1 = new ImageListArray("菜1",R.drawable.foot1,"￥100RMB");
        ImageListArray foot2 = new ImageListArray("菜1",R.drawable.foot2,"￥200RMB");
        ImageListArray foot3 = new ImageListArray("菜1",R.drawable.foot3,"￥120RMB");
        ImageListArray foot4 = new ImageListArray("菜1",R.drawable.foot4,"￥150RMB");
        ImageListArray foot5 = new ImageListArray("菜1",R.drawable.foot5,"￥170RMB");
        ImageListArray foot6 = new ImageListArray("菜1",R.drawable.foot6,"￥340RMB");
        ImageListArray foot7 = new ImageListArray("菜1",R.drawable.foot7,"￥10RMB");
        ImageListArray foot8 = new ImageListArray("菜1",R.drawable.foot8,"￥12RMB");
        onePieceList.add(foot1);
        onePieceList.add(foot2);
        onePieceList.add(foot3);
        onePieceList.add(foot4);
        onePieceList.add(foot5);
        onePieceList.add(foot6);
        onePieceList.add(foot7);
        onePieceList.add(foot8);
    }

    private void initTabView() {
        cold=findViewById(R.id.id_tab_colddish);
        cold.setOnClickListener(this);
        hot=findViewById(R.id.id_tab_hotdish);
        hot.setOnClickListener(this);
        meat=findViewById(R.id.id_tab_meatdish);
        meat.setOnClickListener(this);
        vegetable=findViewById(R.id.id_tab_vegetabledish);
        vegetable.setOnClickListener(this);
        soup=findViewById(R.id.id_tab_soupdish);
        soup.setOnClickListener(this);
        noodle=findViewById(R.id.id_tab_noodledish);
        noodle.setOnClickListener(this);

        ivcold=findViewById(R.id.tab_iv_colddish);
        ivhot=findViewById(R.id.tab_iv_hotdish);
        ivmeat=findViewById(R.id.tab_iv_meatdish);
        ivvegetable=findViewById(R.id.tab_iv_vegetabledish);
        ivsoup= findViewById(R.id.tab_iv_soupdish);
        ivnoodle=findViewById(R.id.tab_iv_noodledish);

        ivhot.setSelected(true);
        ivCurrent=ivhot;
    }

    //初始化Page
    private void initPager() {
        viewPager=findViewById(R.id.id_viewpager);
        initImageListArray();//向onePieceList集合添加数据
        ArrayList<Fragment> list  = new ArrayList<>();
        //设置每一页的数据,这里设置的是一样的数据
        list.add(BlankFragment.newInstance((ArrayList<ImageListArray>) onePieceList));
        list.add(BlankFragment.newInstance((ArrayList<ImageListArray>) onePieceList));
        list.add(BlankFragment.newInstance((ArrayList<ImageListArray>) onePieceList));
        list.add(BlankFragment.newInstance((ArrayList<ImageListArray>) onePieceList));
        list.add(BlankFragment.newInstance((ArrayList<ImageListArray>) onePieceList));
        list.add(BlankFragment.newInstance((ArrayList<ImageListArray>) onePieceList));
        MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(),list);
        viewPager.setAdapter(pagerAdapter);
        //设置滚动
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                changeTap(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }

    //设置页面跳转以及菜品变化后对应的按钮变化
    private void changeTap(int position) {
        ivCurrent.setSelected(false);
        switch (position){
            case R.id.id_tab_hotdish:
                viewPager.setCurrentItem(0);
            case 0:
                ivhot.setSelected(true);
                ivCurrent=ivhot;
                break;
            case R.id.id_tab_colddish:
                viewPager.setCurrentItem(1);
            case 1:
                ivcold.setSelected(true);
                ivCurrent=ivcold;
                break;
            case R.id.id_tab_meatdish:
                viewPager.setCurrentItem(2);
            case 2:
                ivmeat.setSelected(true);
                ivCurrent=ivmeat;
                break;
            case R.id.id_tab_vegetabledish:
                viewPager.setCurrentItem(3);
            case 3:
                ivvegetable.setSelected(true);
                ivCurrent=ivvegetable;
                break;
            case R.id.id_tab_soupdish:
                viewPager.setCurrentItem(4);
            case 4:
                ivsoup.setSelected(true);
                ivCurrent=ivsoup;
                break;
            case R.id.id_tab_noodledish:
                viewPager.setCurrentItem(5);
            case 5:
                ivnoodle.setSelected(true);
                ivCurrent=ivnoodle;
                break;
        }
    }


    @Override
    public void onClick(View v) {
        changeTap(v.getId());
    }
}

MyFragmentPagerAdapter.java

package com.example.orderingapplication;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.List;

//fragment的适配器
public class MyFragmentPagerAdapter extends FragmentStateAdapter{
    private List <Fragment> fragmentList= new ArrayList<>();
    public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> list) {
        super(fragmentManager, lifecycle);
        fragmentList=list;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

xml文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#AEABB5"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="44dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        >

        <!--        <GridLayout-->
        <!--            android:id="@+id/weekday_grid"-->
        <!--            android:layout_width="match_parent"-->
        <!--            android:layout_height="wrap_content"-->
        <!--            android:layout_gravity="center_horizontal"-->
        <!--            android:background="#0000FF">-->

        <Button
            android:id="@+id/week_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#0000FF"
            android:text="星期一"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        <Button
            android:id="@+id/week_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#0000FF"
            android:text="星期二"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        <Button
            android:id="@+id/week_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#0000FF"
            android:text="星期三"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        <Button
            android:id="@+id/week_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="3"
            android:layout_weight="1"
            android:background="#0000FF"
            android:text="星期四"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        <Button
            android:id="@+id/week_5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#0000FF"
            android:text="星期五"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        <Button
            android:id="@+id/week_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#0000FF"
            android:text="星期六"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />

        <Button
            android:id="@+id/week_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#0000FF"
            android:text="星期日"
            android:textColor="#FFFFFF"
            android:textSize="14sp" />
        <!--        </GridLayout>-->
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="#cccccc" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="早餐"
            android:textColor="#000000"
            android:textSize="20sp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="午餐"
            android:textColor="#000000"
            android:textSize="20sp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="晚餐"
            android:textColor="#000000"
            android:textSize="20sp" />
    </LinearLayout>

    <include layout="@layout/bottom_layout" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


</LinearLayout>

bottom_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="@color/gray">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_hotdish">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_hotdish"
            android:id="@+id/tab_iv_hotdish"/>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_hotdish"
            android:gravity="center"
            android:text="热菜"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_colddish">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_colddish"
            android:id="@+id/tab_iv_colddish"/>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_colddish"
            android:gravity="center"
            android:text="冷菜"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_meatdish">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_meatdish"
            android:id="@+id/tab_iv_meatdish"/>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_meatdish"
            android:gravity="center"
            android:text="荤菜"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_vegetabledish">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_vegetabledish"
            android:id="@+id/tab_iv_vegetabledish"/>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_vegetabledish"
            android:gravity="center"
            android:text="冷菜"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_soupdish">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_soupdish"
            android:id="@+id/tab_iv_soupdish"/>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_soupdish"
            android:gravity="center"
            android:text="汤"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_noodledish">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/tab_noodledish"
            android:id="@+id/tab_iv_noodledish"/>
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_noodledish"
            android:gravity="center"
            android:text="面条"/>
    </LinearLayout>
</LinearLayout>

fragment_blank.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BlankFragment"
    android:orientation="vertical">

    <!-- TODO: Update blank fragment layout -->
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rv"
        android:background="#ffffff"/>

</LinearLayout>

recycleview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#ffffff">

        <ImageView
            android:id="@+id/order_image"
            android:layout_width="300px"

            android:layout_height="300px"
            android:background="@drawable/foot10" />

        <TextView
            android:id="@+id/order_text"
            android:textColor="#000000"
            android:text="zzz"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="20dp"
            android:gravity="center"/>
        <TextView
            android:id="@+id/order_price"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:textColor="#a61c00"
            android:text="￥100RMB"
            android:textSize="20dp"/>
</LinearLayout>