码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2015-04-01 17:50:53      阅读：234      评论：0      收藏：0      [点我收藏+]

标签：

转载请注明出处：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));
	}

	@Override
	public int getCount() {
		return dataList.size();
	}

	@Override
	public Object getItem(int position) {
		return position;
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public 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() {
			@Override
			public 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;		//分类ID
	String keyword;	//搜索关键词
	CListAdapter mAdapter;	
	List<Cook> cList;
	ListView mlistView;
	
	@Override
	protected 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();
	}
	
	@Override
	public void onItemClick(AdapterView<?> av, View arg1, int arg2, long arg3) {
		
	}
	
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.clist_return:
			CListActivity.this.finish();
			break;

		default:
			break;
		}
	}
	
	@Override
	public 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() {
		@Override
		public 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() {

		@Override
		public 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();
			}
		}

		@Override
		public 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;
	
	@Override
	protected 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();
	}
	
	@Override
	public void run() {
		cook = MUtils.show(id);
		handler.sendEmptyMessage(0);
	}
	
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.detail_return:
			DetailActivity.this.finish();
			break;

		default:
			break;
		}
	}
	
	Handler handler = new Handler() {
		@Override
		public 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));
		}
	};
}

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

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

标签：

原文地址：http://blog.csdn.net/einarzhang/article/details/44806975
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！