UI设计及应用案例Word文件下载.docx
- 文档编号:19143772
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:16
- 大小:702.85KB
UI设计及应用案例Word文件下载.docx
《UI设计及应用案例Word文件下载.docx》由会员分享,可在线阅读,更多相关《UI设计及应用案例Word文件下载.docx(16页珍藏版)》请在冰豆网上搜索。
第3天:
根据详细设计,编写调试程序
第4天:
编写调试程序,写设计报告
第5天:
答辩
主要参考书及参考资料:
1.张东玲,杨宁,Android应用开发教程,清华大学出版社2013-4
2.何晨光,李洪刚,Android编程入门经典(移动与嵌入式开发技术),清华大学出版社,2012-4-1
教研室主任(签名)系(部)主任(签名)2013年12月30日
课程设计说明书
题目名称:
UI设计及应用案例
系部:
计算机工程系
专业班级:
软件技术11-10
学号:
**********
学生姓名:
***
指导教师:
******
完成日期:
2014-1-3
课程设计评定意见
设计题目:
UI设计及应用案例
***
评定意见:
评定成绩:
指导教师(签名):
***2014年1月3日
摘要
Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑。
本次设计主要实现掌上微博的相册功能,通过listview组件显示相册列表,浏览相册时使用幻灯片形式的切换效果,并且在“掌上微博”的相册管理界面和图片浏览界面添加菜单项。
通过此次设计项目,了解到手机android应用开发的基本步骤,在开发过程中,有明显的层次感,有基本的套路。
先要准备好相关的资源文件,然后通过layout.xml、string.xml,style.xml等和自定义的xml文件设计好界面布局,最后重写组件的方法事件监听,并在AndroidMainfest.xml中声明需要用到的activity,以此来完成此次设计。
关键字:
android;
Activity;
listview;
imageswitcher;
UI设计及应用案例
1、掌上微博的功能
随着移动互联网技术的发展,风靡全球的博客也从计算机向移动便携设备发展,并且在风格上趋向于微型化和简捷化。
通常,设计一个博客系统包括Web服务器、Web端系统和手机客户端。
本次设计主要实现掌上微博的相册功能,通过listview组件显示相册列表,浏览相册时使用幻灯片形式的切换效果,并且在“掌上微博”的相册管理界面和图片浏览界面添加菜单项。
2、开发步骤
2.1创建项目
在Eclipse中创建一个名为Activity_ListViewSimpleAdt的Android的项目,其应用程序名为ListViewSimpleAdt,包名.sgmsc.listviewsimpleadt,Avtivity组件名为ListViewSimpleAdtActivity。
2.2准备图片
将图片资源复制到本项目res/drawable-mdpi目录中。
2.3准备字符串资源
编写res/layout目录下的string.xml文件,代码如下。
<
?
xmlversion="
1.0"
encoding="
utf-8"
>
resources>
stringname=”hello”>
HelloWorder,
ListViewSimpleAdtActivity!
/string>
<
stringname="
app_name"
相册<
app_name1"
相册1<
app_name2"
相册2<
btnAdd"
添加<
fanhui"
返回<
paizhao"
拍照<
btnDelete"
删除<
/resources>
2.4设计初始进入的Activity布局
创建并编写Listitem.xml的布局文件,该文件为ListView每一个Item对象布局,代码如下。
LinearLayout
xmlns:
android="
android:
orientation="
horizontal"
layout_width="
fill_parent"
layout_height="
ImageView
android:
id="
@+id/img"
49dip"
50dip"
layout_margin="
5px"
/>
vertical"
wrap_content"
TextView
@+id/title"
textColor="
#000000"
textSize="
22px"
/>
TextView
@+id/info"
13px"
/LinearLayout>
2.5设计其他Activity布局
创建并编写image_switch.xml文件。
代码如下。
RelativeLayout
ImageSwitcher
@+id/switcher"
layout_alignParentTop="
true"
layout_alignParentLeft="
Gallery
@+id/gallery"
background="
#55000000"
60dp"
layout_alignParentBottom="
gravity="
center_vertical"
spacing="
16dp"
unselectedAlpha="
1"
/RelativeLayout>
2.6开发项目的第一个Activity
对ListViewSimpleAdtActivity.Java文件编辑。
package.sgmsc.listviewsimpleadt;
importjava.util.ArrayList;
importjava.util.HashMap;
importjava.util.List;
importjava.util.Map;
importandroid.app.Activity;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.widget.ListView;
importandroid.widget.SimpleAdapter;
importandroid.view.Menu;
importandroid.view.View;
importandroid.widget.AdapterView;
importandroid.widget.AdapterView.OnItemClickListener;
publicclassListViewSimpleAdtActivityextendsActivity{
finalintMENU_ADD=Menu.FIRST;
//声明菜单选行的ID
finalintMENU_DELETE=Menu.FIRST+1;
//声明菜单项的编号
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.listv_sa);
//获得Layout里面的ListView
ListViewlist=(ListView)findViewById(R.id.ListView01);
//生成适配器的Item和动态数组对应的元素
SimpleAdapterlistItemAdapter=newSimpleAdapter(
this,
getData(),
R.layout.listitem,
newString[]{"
img"
"
title"
info"
},
newint[]{R.id.img,R.id.title,R.id.info});
//添加并且显示
list.setAdapter(listItemAdapter);
//添加单击监听
list.setOnItemClickListener(newOnItemClickListener(){
@Override
publicvoidonItemClick(AdapterView<
arg0,Viewarg1,intarg2,longarg3){
if(arg2==0){Intentintent=newIntent(ListViewSimpleAdtActivity.this,Picture1.class);
startActivity(intent)}
if(arg2==1){Intentintent=newIntent(ListViewSimpleAdtActivity.this,Picture2.class);
startActivity(intent);
}
}
});
}
publicbooleanonCreateOptionsMenu(Menumenu){
menu.add(0,MENU_ADD,0,R.string.btnAdd).setIcon(R.drawable.add);
//添加“添加”菜单选项
menu.add(0,MENU_DELETE,0,R.string.btnDelete).setIcon(R.drawable.delete);
//添加“删除”菜单选项
returntrue;
}//生成多维动态数组,并加入数据
privateList<
Map<
String,Object>
getData(){ArrayList<
listitem=newArrayList<
();
Map<
map=newHashMap<
map.put("
R.drawable.youxi);
"
游戏"
);
2011年1月5日"
listitem.add(map);
map=newHashMap<
R.drawable.ziran);
自然"
2011年1月6日"
R.drawable.renwu);
人物"
2011年1月7日"
R.drawable.jianzhu);
map.put("
建筑"
2011年1月8日"
returnlistitem;
}
2.7开发查看照片picture1对应的Activity
代码如下。
importandroid.content.Context;
importandroid.view.ViewGroup;
importandroid.view.Window;
importandroid.view.animation.AnimationUtils;
importandroid.widget.BaseAdapter;
importandroid.widget.Gallery;
importandroid.widget.ImageSwitcher;
importandroid.widget.ImageView;
importandroid.widget.ViewSwitcher;
importandroid.widget.Gallery.LayoutParams;
publicclassPicture1extendsActivityimplements
AdapterView.OnItemSelectedListener,ViewSwitcher.ViewFactory{
privateImageSwitchermySwitcher;
privateInteger[]myThmIds={R.drawable.youxi,R.drawable.a,R.drawable.b};
privateInteger[]myImgIds={R.drawable.youxi,R.drawable.a,R.drawable.b};
requestWindowFeature(Window.FEATURE_NO_TITLE);
//设置这个Activity没有标题栏
setContentView(R.layout.image_switch);
mySwitcher=(ImageSwitcher)findViewById(R.id.switcher);
mySwitcher.setFactory(this);
mySwitcher.setInAnimation(AnimationUtils.loadAnimation(thisandroid.R.anim.fade_in));
mySwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
Galleryg=(Gallery)findViewById(R.id.gallery);
g.setAdapter(newImageAdapter(this));
g.setOnItemSelectedListener(this);
publicvoidonItemSelected(AdapterView<
parent,Viewv,intposition,longid){
mySwitcher.setImageResource(myImgIds[position]);
}//为mSwitcher设选中的图片资源
publicvoidonNothingSelected(AdapterView<
parent){
publicViewmakeView(){
ImageViewiv=newImageView(this);
iv.setBackgroundColor(0xFF000000);
//设置背景颜色
iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
//
iv.setLayoutParams(newImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
returniv;
}//自定义ImageAdapter适配器
publicclassImageAdapterextendsBaseAdapter{
privateContextmyContext;
publicImageAdapter(Contextc){myContext=c;
publicintgetCount(){returnmyThmIds.length;
publicObjectgetItem(intposition){returnposition;
publiclonggetItemId(intposition){returnposition;
publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
ImageViewi=newImageView(myContext);
i.setImageResource(myThmIds[position]);
i.setAdjustViewBounds(true);
i.setLayoutParams(newGallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
returni;
finalintMENU_paizhao=Menu.FIRST;
//声明菜单选行的ID
finalintMENU_fanhui=Menu.FIRST+1;
publicbooleanonCreateOptionsMenu(Menumenu){
menu.add(0,MENU_paizhao,0,R.string.paizhao);
menu.add(0,MENU_fanhui,0,R.string.fanhui);
returntrue;
}
2.8开发查看照片picture2对应的Activity
publicclassPicture2extendsActivityimplements
AdapterView.On
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- UI 设计 应用 案例