Android开发实例-健康食谱应用(一)
转载请注明出处：http://blog.csdn.net/einarzhang/article/details/44774635
本系列文章的重点是如何使用Android开发一个简单的健康食谱软件。使用了以下相关技术中见例如：
- 提供GridView和ListView的基本使用
- 利用universal-image-loader异步载入网络图片
- 通过HttpClient获取网络http请求数据
- 滑动分页载入数据
软件所用的全部数据均来源于http://doc.yi18.net/cookwendang提供的食谱接口，感谢他们。
软件文件结构例如以下所看到的：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZWluYXJ6aGFuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
MainActivity：主界面Acitivity
MListActivity：子分类列表Acitivity
CListActivity：食谱列表Activity
DetailActivity：食谱详情Activity
MainGridAdapter：主界面食谱分类适配器
CListAdapter：食谱列表适配器
Cook：用于保存食谱信息的pojo
HttpUtils：提供Http请求相关功能
MUtils：提供食谱相关的处理逻辑功能
软件主界面设计开发
主界面主要提供了健康食谱的主分类控件，用户能够选择自己感兴趣的分类进行食谱查看。
为了便于用户更好的找到自己须要的食谱，我们提供一个全局搜索功能，用户能够输入关键词搜索自己想要的食谱信息。如：萝卜。将载入出全部与萝卜相关的食谱
主界面终于效果图例如以下所看到的：
主界面共分为两大块：全局搜索布局和Grid分类布局，其布局xml例如以下所看到的：
<RelativeLayout 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"
android:background="@drawable/list_item_bg"
tools:context=".MainActivity" > <RelativeLayout
android:id="@+id/top_layout"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_alignParentTop="true"
android:background="@drawable/main_top" > <TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/main_title"
android:text="@string/app_name"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:layout_alignParentTop="true" >
</TextView> <EditText
android:id="@+id/main_input"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_margin="20dp"
android:background="@drawable/edit_shape"
android:hint="@string/search_tip"
android:lines="1"
android:paddingLeft="32dp"
android:paddingRight="32dp"
android:singleLine="true"
android:textSize="16sp" >
</EditText> <ImageView
android:id="@+id/main_clear_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/main_input"
android:layout_alignLeft="@+id/main_input"
android:layout_alignTop="@+id/main_input"
android:src="@drawable/clear" /> <ImageView
android:id="@+id/main_search_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/main_input"
android:layout_alignRight="@+id/main_input"
android:layout_alignTop="@+id/main_input"
android:src="@drawable/search" >
</ImageView>
</RelativeLayout> <GridView
android:id="@+id/main_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/top_layout"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:numColumns="3"
android:scrollbars="none"
android:verticalSpacing="20dp" >
</GridView> </RelativeLayout>
通过 http://api.yi18.net/cook/cookclass接口能够获取到全部的主分类信息。
我们通过定制自有的MainGridAdapter实现GridView的渲染。源代码例如以下所看到的：
import java.util.List; import android.content.Context;
import android.content.Intent;
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; public class MainGridAdapter extends BaseAdapter { private List<Item> items;
private Context ctx; public MainGridAdapter(List<Item> items, Context ctx) {
this.items = items;
this.ctx = ctx;
} @Override
public int getCount() {
return items.size();
} @Override
public Object getItem(int arg0) {
return items.get(arg0);
} @Override
public long getItemId(int arg0) {
return arg0;
} @Override
public View getView(final int position, View view, ViewGroup arg2) {
if(view == null) {
view = LayoutInflater.from(ctx).inflate(R.layout.item, null);
}
final Item item = items.get(position);
ImageView icon = (ImageView) view.findViewById(R.id.item_icon);
icon.setImageResource(item.icon);
TextView text = (TextView) view.findViewById(R.id.item_text);
text.setText(ctx.getString(item.text));
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.putExtra("id", position+1);
intent.putExtra("title", ctx.getString(item.text));
intent.setClass(ctx, MListActivity.class);
ctx.startActivity(intent);
}
});
return view;
} static class Item { public Item() { } public Item(int bgColor, int icon, int text) {
super();
this.bgColor = bgColor;
this.icon = icon;
this.text = text;
} public int bgColor;
public int icon;
public int text;
} }
当中Item为保存了背景图、分类图标和分类名称的模型对象。
我们为了实现方便。将背景图忽略。
MainGridAdapter为每一个分类提供了单击事件。点击后将进入子分类列表：
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.putExtra("id", position+1);
intent.putExtra("title", ctx.getString(item.text));
intent.setClass(ctx, MListActivity.class);
ctx.startActivity(intent);
}
});
该Adapter使用方式例如以下所看到的：
private void initGrid() {
List<Item> items = new ArrayList<Item>();
items.add(new Item(R.color.item1, R.drawable.item1, R.string.item1));
items.add(new Item(R.color.item2, R.drawable.item2, R.string.item2));
items.add(new Item(R.color.item3, R.drawable.item3, R.string.item3));
items.add(new Item(R.color.item4, R.drawable.item4, R.string.item4));
items.add(new Item(R.color.item5, R.drawable.item5, R.string.item5));
items.add(new Item(R.color.item6, R.drawable.item6, R.string.item6));
items.add(new Item(R.color.item7, R.drawable.item7, R.string.item7));
items.add(new Item(R.color.item8, R.drawable.item8, R.string.item8));
items.add(new Item(R.color.item9, R.drawable.item9, R.string.item9));
items.add(new Item(R.color.item9, R.drawable.item10, R.string.item10));
items.add(new Item(R.color.item9, R.drawable.item11, R.string.item11));
items.add(new Item(R.color.item9, R.drawable.item12, R.string.item12));
items.add(new Item(R.color.item9, R.drawable.item13, R.string.item13));
items.add(new Item(R.color.item9, R.drawable.item14, R.string.item14));
grid.setAdapter(new MainGridAdapter(items, this));
}
以下给出主界面Activity：
import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask; import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast; public class MainActivity extends Activity implements OnClickListener { private GridView grid;
private ImageView clearButton, searchButton;
private EditText input; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
clearButton = (ImageView) findViewById(R.id.main_clear_btn);
clearButton.setOnClickListener(this);
searchButton = (ImageView) findViewById(R.id.main_search_btn);
searchButton.setOnClickListener(this);
input = (EditText) findViewById(R.id.main_input);
grid = (GridView) findViewById(R.id.main_grid);
initGrid();
} private void initGrid() {
List<Item> items = new ArrayList<Item>();
items.add(new Item(R.color.item1, R.drawable.item1, R.string.item1));
items.add(new Item(R.color.item2, R.drawable.item2, R.string.item2));
items.add(new Item(R.color.item3, R.drawable.item3, R.string.item3));
items.add(new Item(R.color.item4, R.drawable.item4, R.string.item4));
items.add(new Item(R.color.item5, R.drawable.item5, R.string.item5));
items.add(new Item(R.color.item6, R.drawable.item6, R.string.item6));
items.add(new Item(R.color.item7, R.drawable.item7, R.string.item7));
items.add(new Item(R.color.item8, R.drawable.item8, R.string.item8));
items.add(new Item(R.color.item9, R.drawable.item9, R.string.item9));
items.add(new Item(R.color.item9, R.drawable.item10, R.string.item10));
items.add(new Item(R.color.item9, R.drawable.item11, R.string.item11));
items.add(new Item(R.color.item9, R.drawable.item12, R.string.item12));
items.add(new Item(R.color.item9, R.drawable.item13, R.string.item13));
items.add(new Item(R.color.item9, R.drawable.item14, R.string.item14));
grid.setAdapter(new MainGridAdapter(items, this));
} @Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.main_clear_btn:
input.setText("");
break;
case R.id.main_search_btn:
String searchStr = input.getText().toString();
if(searchStr == null || searchStr.trim().equals("")) {
Toast.makeText(this, "请输入要搜索的菜谱!", Toast.LENGTH_SHORT).show();
} else {
Intent intent = new Intent();
intent.putExtra("keyword", searchStr);
intent.setClass(this, CListActivity.class);
startActivity(intent);
}
break; default:
break;
}
} }
子分类界面设计开发
当用户点击主界面的主分类条目时，将进入该分类的子分类列表界面。子分类接口为：http://api.yi18.net/cook/cookclass?id=myid
我们在MUtils中提供获取子分类的方法：
@SuppressWarnings("serial")
public static ArrayList<HashMap<String, Object>> getChildClass(final int pid) {
String url = "http://api.yi18.net/cook/cookclass";
String result = HttpUtils.httpGet(url, new HashMap<String, Object>(){{
put("id", pid);
}});
ArrayList<HashMap<String, Object>> dataMap = new ArrayList<HashMap<String, Object>>();
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++) {
HashMap<String, Object> data = new HashMap<String, Object>();
JSONObject obj = datas.getJSONObject(i);
data.put("id", obj.getInt("id"));
data.put("name", obj.getString("name"));
dataMap.add(data);
}
}
} catch (Exception e) {
}
}
return dataMap;
}
返回ArrayList<HashMap>是为了便于SimpleAdapter直接使用，使用见例如以下的MListActivity中的相关代码：
import java.util.ArrayList;
import java.util.HashMap; import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView; import com.my.lib.Utils; public class MListActivity extends Activity implements OnClickListener, OnItemClickListener, Runnable { private ImageView unconnect;
private ListView mlist;
Handler handler;
ArrayList<HashMap<String, Object>> mdata; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.list);
findViewById(R.id.list_return).setOnClickListener(this);
mlist = (ListView) findViewById(R.id.mlist);
mlist.setOnItemClickListener(this);
unconnect = (ImageView) findViewById(R.id.list_unconnect);
unconnect.setOnClickListener(this);
((TextView)findViewById(R.id.list_title)).setText(getIntent().getStringExtra("title"));
handler = new Handler() {
@Override
public void handleMessage(Message msg) {
if(mdata == null) {
change(true);
} else {
change(false);
mlist.setAdapter(new SimpleAdapter(MListActivity.this, mdata, R.layout.list_item, new String[]{"name"}, new int[]{R.id.list_item_text}));
}
}
};
new Thread(this).start();
} @Override
@SuppressWarnings("unchecked")
public void onItemClick(AdapterView<? > av, View v, int position, long arg3) {
HashMap<String, Object> item = (HashMap<String, Object>)av.getItemAtPosition(position);
Intent intent = new Intent();
intent.putExtra("id", (Integer)item.get("id"));
intent.putExtra("title", (String)item.get("name"));
intent.setClass(this, CListActivity.class);
startActivity(intent);
} @Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.list_return:
MListActivity.this.finish();
break;
case R.id.list_unconnect:
new Thread(this).start();
break;
default:
break;
}
} @Override
public void run() {
if(Utils.canAccessNetwork(MListActivity.this)) {
mdata = MUtils.getChildClass(getIntent().getIntExtra("id", 1));
}
handler.sendEmptyMessage(1);
} void change(boolean flag) {
if(flag) {
mlist.setVisibility(View.GONE);
unconnect.setVisibility(View.VISIBLE);
} else {
mlist.setVisibility(View.VISIBLE);
unconnect.setVisibility(View.GONE);
}
}
}
须要注意的是：Http请求处理不能在主线程中调用，须要开启新的线程调用。子分类点击后将进入该子分类的食谱列表
分类列表布局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/list_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/list_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/mlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" >
</ListView> <ImageView
android:id="@+id/list_unconnect"
android:layout_marginTop="160dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/unconnect"
android:visibility="gone"/> </LinearLayout>
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="50dp"
android:background="@drawable/list_selector" > <ImageView
android:id="@+id/mlist_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="@drawable/list_item_icon"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp" /> <TextView
android:id="@+id/list_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/mlist_item_icon"
android:textColor="@android:color/white"
android:textSize="16sp" /> <ImageView
android:id="@+id/mlist_item_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/arrowr"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp" /> </RelativeLayout>
版权声明：本文博主原创文章，博客，未经同意不得转载。
Android开发实例-健康食谱应用(一)的更多相关文章
- Android开发实例之miniTwitter登录界面的实现
原文: http://www.jizhuomi.com/android/example/134.html 本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界 ...
- Android开发实例详解之IMF（Android SDK Sample—SoftKeyboard）
本博前面的文章介绍了Android开发环境的搭建和模拟器的常用操作.本次,将以Android Sample中经典的SoftKeyboard项目为例,详细解析Android上一个小型项目的开发过程和注意 ...
- Android开发实例总结
写一个修改密码的界面 1画界面总结: 需要弄清楚什么地方用相对布局,什么地方使用线性布局 希望这过后自己花时间去弄清楚他们内嵌的的所有组件以及组件的属性包括用法. 2逻辑总结: 逻辑描述总是那么几步的 ...
- Android开发实例之多点触控程序
智能终端设备的多点触控操作为我们带来了种种炫酷体验,这也使得很多Android开发者都对多点触控程序的开发感兴趣.实际上多点触控程序的实现并不是那么遥不可及,而是比较容易.本文就主要通过一个实例具体讲 ...
- Android开发实例之闹钟提醒
本实例通过TimePickerDialog时间选择对话框让用户设置闹钟.并通过AlarmManager全局定时器在指定的时间启动闹钟Activity . 程序执行效果图: 实例代码: package ...
- 【Android 开发实例】时间管理APP开发之数据库设计
当然也能够先写界面什么的.可是,总认为先把数据库后台写好在写界面比較放心. 对于数据库的设计,我一開始没什么概念.甚至不知道怎样下手,一開始想着设计成几个表?有哪些字段? 最后用了两天时间,还是一无所 ...
- Android开发实例 Unity显示Toast
Android中的Toast是一种简易的消息提示框. 当视图显示给用户,在应用程序中显示为浮动.和Dialog不一样的是,它永远不会获得焦点,无法被点击.用户将可能是在中间键入别的东西.Toast类的 ...
- Android音乐播放器的开发实例
本文将引导大家做一个音乐播放器,在做这个Android开发实例的过程中,能够帮助大家进一步熟悉和掌握学过的ListView和其他一些组件.为了有更好的学习效果,其中很多功能我们手动实现,例如音乐播放的 ...
- android开发学习---基础知识学习、如何导入已有项目和开发一个电话拨号器
一.基础知识点学习 1.Android体系结构 如图所示,android 架构分为三层: (1)最底层是linux内核,主要是各种硬件的驱动,如相机驱动(Camera Driver),闪存驱动(Fl ...
随机推荐
- php开源项目学习二次开发的计划
开源项目: cms 国内 dedecms cmstop 国外 joomla, drupal 电商 国内 ecshop 国外 Magento 论坛 discuz 博客 wordpress 学习时 ...
- 关闭linux终端命令行退格报警声(centos7亲测有效)
首先这个声音不是外置音频设备发出,而是主板上的蜂鸣器 1,使用root账户登录 2,vi 打开 ~/.bashrc 脚本 3,在脚本的最后一行加上 setterm -blength 0 4,保存脚本 ...
- android sdk api的层次结构
一.系统级:android.accounts android.app 1.OS 相关 android.os android.os.storage ...
- Android Binder机制简单了解
Binder -- 一种进程间通信(IPC)机制, 基于OpenBinder来实现 毫无疑问, 老罗的文章是不得不看的 Android进程间通信(IPC)机制Binder简要介绍和学习计划 浅谈Ser ...
- svn修改密码跟账户
在co的时候直接输入账户跟密码 svn co ${SVNURL} ./ --username **--password *** 或者删除缓存文件,在Linux上面 删除~/.subversion/a ...
- uboot启动linux的过程
一.概述 linux内核镜像常见到的有两种形式,zImage和uImage.这两种文件的格式稍有差别,所以启动这两种格式的内核镜像也会有所不同.目前,uboot只支持启动uImage类型的镜像,对zI ...
- win32画线考虑去锯齿
整理日: 2015年2月16日 这几天一直在研究win32 SDk下画线去锯齿,之前一直用的QT的画线接口函数,里面有去锯齿的效果,可是突然项目要求不能用QT的只能用win32 SDK下的GDI画线接 ...
- Dataguard配置前提条件
Data Guard配置前提条件 配置Data Guard必须保证以下前提条件: 1.Data Guard是Oracle企业版的组件.Oracle标准版里没有这个控件.所以Data Guard配置所使 ...
- [BZOJ 3942] [Usaco2015 Feb] Censoring 【KMP】
题目链接:BZOJ - 3942 题目分析 我们发现,删掉一段 T 之后,被删除的部分前面的一段可能和后面的一段连接起来出现新的 T . 所以我们删掉一段 T 之后应该接着被删除的位置之前的继续向后匹 ...
- Spring MVC 解读——@RequestMapping （1）（转）
转自:http://my.oschina.net/HeliosFly/blog/212329 Spring MVC 解读——@RequestMapping 为了降低文章篇幅,使得文章更目标化,简洁化, ...