Android UI设计
实验目的:
本实验的目的是使学生深入了解Android程序框架结构、了解和掌握Android界面设计和界面编程。通过程序设计,掌握常用界面控件、菜单、以及界面事件的响应。
实验要求:
设计程序实现一个电子菜单,应具有显示菜单功能和选菜功能。通过选择,将选中的菜单选项在界面做显示,如下图:
[实现提示]
1、建立Android工程,其中
工程名称:MenuSelect579
应用名称:MenuSelect579
包名称:cn.edu.bistu.dj1001. MenuSelect579
Activity名称:MenuSelect579
2、工程建立完毕后,进行相应界面设计,再编写Java文件
程序源码
package cn.edu.bistu.dj1001.MenuSelect579;
import android.app.Activity;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.ContextMenu.ContextMenuInfo;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
public class MenuSelect579 extends Activity {
/** Called when the activity is first created. */
TextView LabelView = null;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LabelView = (TextView)findViewById(R.id.label);
registerForContextMenu(LabelView);
}
final static int CONTEXT_MENU_1 = Menu.FIRST;
final static int CONTEXT_MENU_2 = Menu.FIRST+1;
final static int CONTEXT_MENU_3 = Menu.FIRST+2;
@Override
public void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo menuInfo){
menu.setHeaderTitle("今日菜单");
menu.add(0, CONTEXT_MENU_1, 0,"宫保鸡丁");
menu.add(0, CONTEXT_MENU_2, 1,"干煸豆角");
menu.add(0, CONTEXT_MENU_3, 2,"鱼香肉丝");
}
@Override
public boolean onContextItemSelected(MenuItem item){
switch(item.getItemId()){
case CONTEXT_MENU_1:
LabelView.setText("宫保鸡丁");
return true;
case CONTEXT_MENU_2:
LabelView.setText("干煸豆角");
return true;
case CONTEXT_MENU_3:
LabelView.setText("鱼香肉丝");
return true;
}
return false;
}
}
程序运行结果:
实验心得体会:(可选)
通过本次实验熟悉了android的界面设计简单方法和界面编程,锻炼了实际动手能力,熟悉了 Android程序框架结构、Android界面设通过程序设计,掌握了常用界面控件、菜单、以及界面事件的响应。
第二篇:Android的UI设计
UI设计9要素:
Do:
◆为高分辨率的屏幕创建资源(缩小总比放大好)
◆ 需要点击的元素要够大
◆图标设计遵循 Android 的准则
◆ 使用适当的间距(margins, padding)
◆ 支持D-pad和trackball导航
◆正确管理活动(activity)堆栈
◆ 正确处理屏幕方向变化
◆使用主题/样式,尺寸和颜色资源来减少多余的值
◆和视觉交互设计师合作!
UI设计5不要
Don’t:
◆不要照搬你在其它平台的UI设计,应该让用户感觉是在真正使用一个 Android 软件,在你的商标显示和平台整体观感之间做好平衡
◆不要过度使用模态对话框
◆不要使用固定的绝对定位的布局
◆不要使用px单位,使用dp或者为文本使用sp
◆ 不要使用太小的字体
4则Android UI的设计哲学:
◆干净而不过于简单
◆关注内容而非修饰
◆保存一致,让用户容易投入其中,可附加少许变化
◆使用云端服务(存储和同步用户资料)来加强用户体验
优秀界面的设计5条准则:
◆关注用户
◆显示正确的内容
◆给予用户适当的回馈
◆有章可循的行为模式
◆容忍错误
设计需要考量的8地方:
◆屏幕的物理尺寸
◆屏幕密度
◆屏幕的方向(竖向和横向)
◆主要的UI交互方式(触屏还是使用D-pad/trackball)
◆软键盘还是物理键盘
◆了解不同设备之间的相异之处是非常重要的!
◆阅读CDD,学习设备可能差异的地方
◆了解屏幕尺寸和密度分类
TextView重要属性:
RelativeLayout用到的一些重要的属性:
第一类:属性值为true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物
第二类:属性值必须为id的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
第三类:属性值为具体的像素值,如30dip,40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
EditText的android:hint
设置EditText为空时输入框内的提示信息。
android:gravity
android:gravity属性是对该view 内容的限定.比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置.以button为例,android:gravity="right"则button上面的文字靠右 android:layout_gravity
android:layout_gravity是用来设置该view相对与起父view 的位置.比如一个button 在
linearlayout里,你想把该button放在靠左、靠右等位置就可以通过该属性设置.以button为例,android:layout_gravity="right"则button靠右
android:layout_alignParentRight
使当前控件的右端和父控件的右端对齐。这里属性值只能为true或false,默认false。
android:scaleType:
android:scaleType是控制图片如何resized/moved来匹对ImageView的size。
ImageView.ScaleType / android:scaleType值的意义区别:
CENTER /center 按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示
CENTER_CROP / centerCrop 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)
CENTER_INSIDE / centerInside 将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽
FIT_CENTER / fitCenter 把图片按比例扩大/缩小到View的宽度,居中显示
FIT_END / fitEnd 把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置
FIT_START / fitStart 把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置 FIT_XY / fitXY 把图片?不按比例扩大/缩小到View的大小显示
MATRIX / matrix 用矩阵来绘制,动态缩小放大图片来显示。
** 要注意一点,Drawable文件夹里面的图片命名是不能大写的。