私厨菜谱app的设计与实现（三）

一.详情界面的功能设计

  

 

 

对上一篇文章的补充

1.要做到信息传输，需要序列化操作
  //在JsonToBean中的所有类加上接口implements Serializable
  //intent.putExtra("data", (Serializable) courseInfo);
2.新加的RecipeDetailActivity要在AndroidManifest.xml进行手动添加
  //<activity android:name=".RecipeDetailActivity"/>

二.界面设计代码

  1.recipe_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="5dp"
        android:layout_gravity="center">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/dot"
            android:layout_gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="食材用料："
            android:textColor="#0000ff"
            android:textSize="28sp"
            android:textStyle="bold"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button_favorite"
            android:text="收藏"/>
    </LinearLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recy_view_yl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/colorAccent"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="5dp"
        android:layout_gravity="center">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/dot"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/text_zuofa"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="做法步骤："
            android:textColor="#0000ff"
            android:textSize="28sp"
            android:textStyle="bold"/>
    </LinearLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recy_view_step"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"/>

</LinearLayout>

  2.recy_item_step.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="170dp">
    <ImageView
        android:id="@+id/i_imageurlstep"
        android:layout_width="180dp"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher_round"
        android:layout_marginRight="10dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/dot"/>
            <TextView
                android:id="@+id/i_ordernumstep"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_marginLeft="10dp"
                android:textColor="#f87f00"/>
        </LinearLayout>
        <TextView
            android:id="@+id/i_contentstep"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="#0000ff"/>
    </LinearLayout>

</LinearLayout>

  3.recy_item_yl.xml

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

    <TextView
        android:id="@+id/i_ylname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:textColor="#000000"
        android:layout_gravity="center"
        android:text="aa"/>
    <TextView
        android:id="@+id/i_ylUnit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:textColor="#aaaaaa"
        android:text="bb"
        android:layout_gravity="center"/>

</LinearLayout>

三.代码部分

  1.RecipeDetailActivity.java

package com.example.cookbook;

import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.util.Log;

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

public class RecipeDetailActivity extends AppCompatActivity {
    RecyclerView recyclerView_yl;  //"食材用料"列表
    RecyclerView recyclerView_step;   //"做法步骤"列表
    JsonToBean.ShowapiResBodyBean.DatasBean  bean;  //存放上一个界面传递过来的数据

    private void initView(){
        recyclerView_yl = findViewById(R.id.recy_view_yl);
        recyclerView_step = findViewById(R.id.recy_view_step);
        bean = (JsonToBean.ShowapiResBodyBean.DatasBean) getIntent().getSerializableExtra("data");
    }

    //将数据动态更新到UI界面上
    private  void loadData(){
        List<JsonToBean.ShowapiResBodyBean.DatasBean.YlBean> arrlistyl = new ArrayList<>(bean.getYl());
        List<JsonToBean.ShowapiResBodyBean.DatasBean.StepsBean> arrliststep = new ArrayList<>(bean.getSteps());
        YlAdapter adapteryl = new YlAdapter(this, arrlistyl);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
        recyclerView_yl.setLayoutManager(layoutManager);
        recyclerView_yl.setAdapter(adapteryl);
        StepAdapter adapterstep = new StepAdapter(this, arrliststep);
        StaggeredGridLayoutManager layoutManager1 = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL);
        recyclerView_step.setLayoutManager(layoutManager1);
        recyclerView_step.setAdapter(adapterstep);
    }

    //重写onCreate()方法

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recipe_detail);
        initView();
        loadData();
    }
}

  2.StepAdapter.java

package com.example.cookbook;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;

public class StepAdapter extends RecyclerView.Adapter<StepAdapter.ViewHolder> {
    @NonNull
    private List<JsonToBean.ShowapiResBodyBean.DatasBean.StepsBean> mStepList;
    private Context homecontext;
    public class ViewHolder extends RecyclerView.ViewHolder{
        ImageView i_imageurlstep;
        TextView i_ordernumstep,i_contentstep;
        public ViewHolder(View view){
            super(view);
            i_imageurlstep = view.findViewById(R.id.i_imageurlstep);
            i_ordernumstep = view.findViewById(R.id.i_ordernumstep);
            i_contentstep = view.findViewById(R.id.i_contentstep);
        }
    }
    //构造函数
    public StepAdapter(Context context,List<JsonToBean.ShowapiResBodyBean.DatasBean.StepsBean> StepList){
        mStepList = StepList;
        homecontext = context;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int i) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.recy_item_step,parent,false);
        ViewHolder holder=new ViewHolder(view);
        return holder;
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        JsonToBean.ShowapiResBodyBean.DatasBean.StepsBean stepsBean = mStepList.get(position);
        //这里选用了Glide框架，其中load()中传入的为图片地址，into()中表明将图片指向哪个ImageView
        Glide.with(homecontext).load(stepsBean.getImgUrl()).into(holder.i_imageurlstep);
        holder.i_ordernumstep.setText("第"+stepsBean.getOrderNum()+"步");
        holder.i_contentstep.setText(stepsBean.getContent());
    }
    @Override
    public int getItemCount() {
        return mStepList.size();
    }
}

  3.YlAdapter.java

package com.example.cookbook;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class YlAdapter extends RecyclerView.Adapter<YlAdapter.ViewHolder> {
    @NonNull
    private List<JsonToBean.ShowapiResBodyBean.DatasBean.YlBean> mYLlist;
    private Context homecontext;

    public class ViewHolder extends RecyclerView.ViewHolder{
        TextView i_nameyl,i_unityl;

        public ViewHolder(View view){
            super(view);
            i_nameyl = view.findViewById(R.id.i_ylname);
            i_unityl = view.findViewById(R.id.i_ylUnit);
        }
    }

    public YlAdapter(Context context,List<JsonToBean.ShowapiResBodyBean.DatasBean.YlBean> YLlist)
    {
        mYLlist = YLlist;
        homecontext = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int i) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recy_item_yl,parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        JsonToBean.ShowapiResBodyBean.DatasBean.YlBean ylBean = mYLlist.get(position);
        holder.i_nameyl.setText(ylBean.getYlName());
        holder.i_unityl.setText(ylBean.getYlUnit());
    }

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