Android开发实例-健康食谱应用(二)

来源：互联网发布：linux read函数编辑：程序博客网时间：2024/06/11 07:34

转载请注明出处：http://blog.csdn.net/einarzhang/article/details/44806975

本系列文章主要介绍如何利用Android开发一个简单的健康食谱软件。用到的相关技术如下所示：

提供GridView和ListView的基本使用
利用universal-image-loader异步加载网络图片
通过HttpClient获取网络http请求数据
滑动分页加载数据

软件所用的所有数据均来源于http://doc.yi18.net/cookwendang提供的食谱接口，感谢他们！

软件文件结构如下所示：

MainActivity：主界面Acitivity

MListActivity：子分类列表Acitivity

CListActivity：食谱列表Activity

DetailActivity：食谱详情Activity

MainGridAdapter：主界面食谱分类适配器

CListAdapter：食谱列表适配器

Cook：用于保存食谱信息的pojo

HttpUtils：提供Http请求相关功能

MUtils：提供食谱相关的处理逻辑功能

搜索食谱

我们在主界面提供了搜索食谱功能，当用户输入食谱名称时，软件将给用户展现出想要的食谱列表。搜索食谱我们主要用到http://api.yi18.net/cook/search接口。

我们在MUtils方法增加搜索食谱方法：

public static ArrayList<Cook> search(final String keyword, final int page) {String url = "http://api.yi18.net/cook/search";String result = HttpUtils.httpGet(url, new HashMap<String, Object>(){{put("keyword", URLEncoder.encode(keyword));put("page", page);put("limit", 20);}});ArrayList<Cook> dataMap = new  ArrayList<Cook>();if(result != null) {try {JSONObject root = new JSONObject(result);if(root.getBoolean("success")) {JSONArray datas = root.getJSONArray("yi18");for(int i = 0, len = datas.length(); i < len; i++) {JSONObject obj = datas.getJSONObject(i);Cook c = new Cook();c.id = obj.optInt("id");c.name = obj.optString("name");if(c.name != null) {c.name = c.name.replace("<font color=\"red\">", "").replace("</font>", "");}c.food = obj.optString("description");c.img = obj.optString("img");c.tag = obj.optString("keywords");dataMap.add(c);}}} catch (Exception e) {}}return dataMap;}

该搜索方法提供了食谱名称和分页页码参数，便于前端实现分页刷新功能，因为返回的食谱名称中包含Html信息，我们将其过滤掉。搜索结果将进入食谱列表界面，界面展示出搜索的结果信息

获取分类食谱

当用户点击某一子分类时，将获取出分类下的食谱列表，主要用到http://api.yi18.net/cook/list接口
我们在MUtils中增加如下方法：

public static ArrayList<Cook> getCooks(final int classId, final int page, final int sortType) {String url = "http://api.yi18.net/cook/list";String result = HttpUtils.httpGet(url, new HashMap<String, Object>(){{put("id", classId);put("page", page);put("limit", 20);put("type", sortType == SORT2 ? "count" : "id");}});ArrayList<Cook> dataMap = new  ArrayList<Cook>();if(result != null) {try {JSONObject root = new JSONObject(result);if(root.getBoolean("success")) {JSONArray datas = root.getJSONArray("yi18");for(int i = 0, len = datas.length(); i < len; i++) {JSONObject obj = datas.getJSONObject(i);Cook c = new Cook();c.id = obj.optInt("id");c.name = obj.optString("name");c.count = obj.optInt("count");c.fcount = obj.optInt("fcount");c.rcount = obj.optInt("rcount");c.food = obj.optString("food");c.img = obj.optString("img");c.tag = obj.optString("tag");dataMap.add(c);}}} catch (Exception e) {}}return dataMap;}

同搜索食谱功能一致，这里提供page对象，便于提供分页加载

食谱列表界面

食谱列表界面用于展示匹配相应结果的食谱列表，为了用户更好的了解食谱，在列表中我们提供缩略图展示。当用户搜索食谱或者点击某一分类时，将进入食谱列表界面。

食谱列表界面最终效果图如下所示：

每个列表展示出食谱的缩略图、食谱名称和食谱涉及的材料。列表布局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"    android:background="@drawable/list_item_bg"     android:orientation="vertical" >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@drawable/title_bg" >        <ImageView            android:id="@+id/clist_return"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:layout_centerVertical="true"            android:layout_marginLeft="20dp"            android:src="@drawable/arrowl" />        <TextView            android:id="@+id/clist_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:textColor="@android:color/white"            android:textSize="18sp"            android:textStyle="bold" />    </RelativeLayout>    <ListView        android:id="@+id/clist"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scrollbars="none" >    </ListView></LinearLayout>

每个Item的布局clist_item.xml如下所示：

<?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="150dp"    android:background="@drawable/list_selector" >    <ImageView        android:id="@+id/clist_item_icon"        android:layout_width="100dp"        android:layout_height="60dp"        android:layout_margin="10dp"        android:scaleType="fitCenter"        android:layout_alignParentLeft="true"        android:layout_centerVertical="true"         />    <LinearLayout        android:layout_centerVertical="true"        android:layout_toRightOf="@+id/clist_item_icon"        android:layout_toLeftOf="@+id/clist_item_arrow"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical" >        <TextView            android:id="@+id/clist_item_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@android:color/white"            android:textSize="18sp" />        <TextView            android:id="@+id/clist_item_detail"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:singleLine="true"            android:lines="1"            android:ellipsize="end"            android:textColor="@color/clist_item_tag"            android:textSize="14sp" />    </LinearLayout>    <ImageView        android:id="@+id/clist_item_arrow"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_marginRight="20dp"        android:layout_marginLeft="10dp"        android:src="@drawable/arrowr" /></RelativeLayout>

我们利用clist_item.xml渲染自定义的ListAdapter，取名CListApdater，其代码如下所示：

import java.util.List;import android.content.Intent;import android.graphics.Bitmap;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import com.nostra13.universalimageloader.core.DisplayImageOptions;import com.nostra13.universalimageloader.core.ImageLoader;import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;import com.nostra13.universalimageloader.core.assist.ImageScaleType;public class CListAdapter extends BaseAdapter {private CListActivity activity;private List<Cook> dataList;public CListAdapter(CListActivity activity, List<Cook> dataList) {this.activity = activity;this.dataList = dataList;//初始化Android-Universal-Image-Loader框架ImageLoader.getInstance().init(ImageLoaderConfiguration.createDefault(activity));}@Overridepublic int getCount() {return dataList.size();}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(final int position, View convertView, ViewGroup parent) {convertView = LayoutInflater.from(activity).inflate(R.layout.clist_item, null);final Cook c = dataList.get(position);((TextView)convertView.findViewById(R.id.clist_item_title)).setText(c.name);((TextView)convertView.findViewById(R.id.clist_item_detail)).setText(c.tag);//设置图片显示格式(我们可以设置圆角、缓存等一些列配置)DisplayImageOptions options = new DisplayImageOptions.Builder()          .showImageOnLoading(R.drawable.loading)  //加载中显示的正在加载中的图片        .showImageOnFail(R.drawable.loading)  //为了方便，加载失败也显示加载中的图片        .cacheInMemory(true)  //在内存中缓存图片        .cacheOnDisk(true)          .bitmapConfig(Bitmap.Config.RGB_565)        .imageScaleType(ImageScaleType.EXACTLY)//设置图片以如何的编码方式显示        .build(); //异步加载图片，并渲染到指定的控件上ImageLoader.getInstance().displayImage(MUtils.PREFIX_IMG + c.img, (ImageView)convertView.findViewById(R.id.clist_item_icon), options);//Item点击后进入食谱详情界面convertView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Intent intent = new Intent(activity, DetailActivity.class);intent.putExtra("id", c.id);intent.putExtra("title", c.name);activity.startActivity(intent);}});return convertView;}//为Adapter增加新的食谱数据，当分页加载时，用于更新分页信息public void add(List<Cook> newData) {dataList.addAll(newData);}}

CListAcitivity同时实现了搜索和分类进入的展示功能，并加入下拉分页加载，其代码如下所示：

import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.os.Handler.Callback;import android.os.Message;import android.view.View;import android.view.View.OnClickListener;import android.widget.AbsListView;import android.widget.AbsListView.OnScrollListener;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ListView;import android.widget.TextView;public class CListActivity extends Activity implements OnClickListener, OnItemClickListener, Runnable {int lastVisibleIndex = 0;//滚动的最后可见条目int page = 1;//当前分页页码int cId;//分类IDString keyword;//搜索关键词CListAdapter mAdapter;List<Cook> cList;ListView mlistView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.clist);findViewById(R.id.clist_return).setOnClickListener(this);mlistView = (ListView) findViewById(R.id.clist);mlistView.setOnItemClickListener(this);mlistView.setOnScrollListener(scrollListener);cId = getIntent().getIntExtra("id", 0);if(cId == 0) {//食谱搜索keyword = getIntent().getStringExtra("keyword");((TextView)findViewById(R.id.clist_title)).setText(keyword);} else {//分类进入((TextView)findViewById(R.id.clist_title)).setText(getIntent().getStringExtra("title"));}cList = new ArrayList<Cook>();new Thread(this).start();}@Overridepublic void onItemClick(AdapterView<?> av, View arg1, int arg2, long arg3) {}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.clist_return:CListActivity.this.finish();break;default:break;}}@Overridepublic void run() {loadData();handler.sendEmptyMessage(0);}public void loadData() {List<Cook> results;if(cId == 0) {results = MUtils.search(keyword, page++);} else {results = MUtils.getCooks(cId, page++, MUtils.SORT1);}//获取成功，则更新数据列表cList.addAll(results);}Handler handler = new Handler(new Callback() {@Overridepublic boolean handleMessage(Message msg) {//更新列表界面if(mAdapter == null) {mAdapter = new CListAdapter(CListActivity.this, cList);mlistView.setAdapter(mAdapter);} else {mAdapter.notifyDataSetChanged();}return false;}});OnScrollListener scrollListener = new OnScrollListener() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {int itemsLastIndex = mAdapter.getCount() - 1; // 数据集最后一项的索引if ((scrollState == SCROLL_STATE_TOUCH_SCROLL || scrollState == SCROLL_STATE_IDLE)&& lastVisibleIndex == itemsLastIndex) {//当滚动最后一项时，加载新的一页数据new Thread(CListActivity.this).start();}}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {//滚动过程中更新最后可见索引lastVisibleIndex = firstVisibleItem + visibleItemCount - 1;}};}

从代码中可以看到，我们通过为ListView定制OnScrollListener来实现滚动的分页加载逻辑

食谱详情

食谱详情用户展示食谱的详细信息，用户可以在详情里面看到食物的具体制作方法。

最终效果图如下所示：

我们首先在MUtils加上获取详情的功能：

public static Cook show(final int id) {String url = "http://api.yi18.net/cook/show";String result = HttpUtils.httpGet(url, new HashMap<String, Object>(){{put("id", id);}});if(result != null) {try {JSONObject root = new JSONObject(result);if(root.getBoolean("success")) {JSONObject obj = root.getJSONObject("yi18");Cook c = new Cook();c.id = obj.optInt("id");c.name = obj.optString("name");c.count = obj.optInt("count");c.fcount = obj.optInt("fcount");c.rcount = obj.optInt("rcount");c.food = obj.optString("food");c.img = obj.optString("img");c.tag = obj.optString("tag");c.message = obj.optString("message");return c;}} catch (Exception e) {}}return null;}

详情的布局xml如下所示：

<?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="match_parent"    android:background="@drawable/list_item_bg" >    <RelativeLayout        android:id="@+id/detail_layout"        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_alignParentTop="true"        android:background="@drawable/title_bg" >        <ImageView            android:id="@+id/detail_return"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:layout_centerVertical="true"            android:layout_marginLeft="20dp"            android:src="@drawable/arrowl" />        <TextView            android:id="@+id/detail_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:textColor="@android:color/white"            android:textSize="18sp"            android:textStyle="bold" />    </RelativeLayout>    <ScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@+id/detail_layout"        android:scrollbars="none" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center_horizontal"            android:orientation="vertical" >            <ImageView                android:id="@+id/detail_img"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_margin="10dp" >            </ImageView>            <TextView                android:id="@+id/detail_name"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginBottom="10dp"                android:textColor="@color/clist_item_tag"                android:textSize="20sp" />            <TextView                android:id="@+id/detail_food"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginBottom="10dp"                android:textSize="14sp" />            <ImageView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginBottom="10dp"                android:background="@drawable/lines" />            <TextView                android:id="@+id/detail_text"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:layout_marginBottom="10dp"                android:padding="20dp"                android:textSize="16sp" />        </LinearLayout>    </ScrollView></RelativeLayout>

DetailActivity的完整实现代码如下所示：

import com.nostra13.universalimageloader.core.ImageLoader;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.text.Html;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import android.widget.TextView;public class DetailActivity extends Activity implements OnClickListener, Runnable {private TextView titleView, contentView, foodView, nameView;private ImageView imgView;private int id;private Cook cook;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.detail);titleView = (TextView) findViewById(R.id.detail_title);contentView = (TextView) findViewById(R.id.detail_text);foodView = (TextView) findViewById(R.id.detail_food);nameView = (TextView) findViewById(R.id.detail_name);imgView = (ImageView) findViewById(R.id.detail_img);findViewById(R.id.detail_return).setOnClickListener(this);initData();}private void initData() {titleView.setText(getIntent().getStringExtra("title"));id = getIntent().getIntExtra("id", 1);new Thread(this).start();}@Overridepublic void run() {cook = MUtils.show(id);handler.sendEmptyMessage(0);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.detail_return:DetailActivity.this.finish();break;default:break;}}Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {//异步显示图片ImageLoader.getInstance().displayImage(MUtils.PREFIX_IMG + cook.img, imgView);nameView.setText(cook.name);foodView.setText(cook.food);//内容以Html的方式展示contentView.setText(Html.fromHtml(cook.message));}};}

至此，完整的健康食谱软件开发完成

完整的代码详见git链接：https://github.com/einarzhang/CookBook

1 0