您的位置：360文档中心› Android用户界面程序设计示例

Android用户界面程序设计示例

Android用户界面程序设计示例
Android用户界面程序设计示例

Android用户界面程序设计示例

[例1]按钮和Toast弹出对话框 (1)

[例2] TextView文本框（1） (4)

[例3]TextView文本框（2） (5)

[例4]编辑框EditText (6)

[例5]单选RadioButton (12)

[例6]Toast的用法简介 (14)

[例7]多选checkbox (18)

[例8]菜单Menu (20)

[例9]Dialog对话框 (22)

[例10]图片视图ImageView (25)

[例11]图片按钮ImageButton (27)

界面布局 (31)

[例12]垂直线性布局 (31)

[例13]水平线性布局 (33)

[例14]相对布局 (34)

绝对布局 (35)

[例15]表单布局 (35)

[例16]切换卡(TabWidget)40

[例1]按钮和Toast弹出对话框1、设计界面如图所示：

2、布局文件：

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

android:id="@+id/ok"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="OK"/>

3、Activity界面程序：

public class Activity01 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(https://www.360docs.net/doc/141490435.html,yout.main);

// 获得Button对象

Button button_ok = (Button) findViewById(R.id.ok);

// 设置Button控件监听器

button_ok.setOnClickListener(new Button.OnClickListener() {

public void onClick(View v) {

// 这里处理事件

//DisplayToast("点击了OK按钮");

Toast.makeText(this, ("点击了OK按钮", Toast.LENGTH_SHORT).show();

}

});

}

public void DisplayToast(String str) {

Toast.makeText(this, str, Toast.LENGTH_SHORT).show();

}

/* 按键按下所触发的事件*/

public boolean onKeyDown(int keyCode, KeyEvent event) {

switch (keyCode) {

case KeyEvent.KEYCODE_DPAD_CENTER:

DisplayToast("按下：中键");

break;

case KeyEvent.KEYCODE_DPAD_UP:

DisplayToast("按下：上方向键");

break;

case KeyEvent.KEYCODE_DPAD_DOWN:

DisplayToast("按下：下方向键");

break;

case KeyEvent.KEYCODE_DPAD_LEFT:

DisplayToast("按下：左方向键");

break;

case KeyEvent.KEYCODE_DPAD_RIGHT:

DisplayToast("按下：右方向键");

break;

}

return super.onKeyDown(keyCode, event);

}

/* 按键弹起所触发的事件*/

public boolean onKeyUp(int keyCode, KeyEvent event) {

switch (keyCode) {

case KeyEvent.KEYCODE_DPAD_CENTER:

DisplayToast("弹起：中键");

break;

case KeyEvent.KEYCODE_DPAD_UP:

DisplayToast("弹起：上方向键");

break;

case KeyEvent.KEYCODE_DPAD_DOWN:

DisplayToast("弹起：下方向键");

break;

case KeyEvent.KEYCODE_DPAD_LEFT:

DisplayToast("弹起：左方向键");

break;

case KeyEvent.KEYCODE_DPAD_RIGHT:

DisplayToast("弹起：右方向键");

break;

}

return super.onKeyUp(keyCode, event);

}

[例2]TextView（1）

1、设计界面如图所示：

2、布局文件：

android:id="@+id/textview"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

3、Activity界面程序的核心语句：

textview = (TextView)this.findViewById(R.id.textview);

String string = "TextView示例，wangzhiguo";

/* 设置文本的颜色 */

textview.setTextColor(Color.RED);

/* 设置字体大小 */

textview.setTextSize(20);

/* 设置文字背景 */

textview.setBackgroundColor(Color.BLUE);

/* 设置TextView显示的文字 */

textview.setText(string);

[例3]TextView（2）

1、设计界面（略）

2、布局文件：

android:id="@+id/textview"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

android:background="#FFFFFF"

android:textColor="#000000"

android:textSize="20px"

/>

其他一些属性

android:textColor="#ff0000"

android:textSize="24sp"

android:textStyle="bold"

3、Activity界面程序的核心语句：

setContentView(https://www.360docs.net/doc/141490435.html,yout.main);//设置内容显示的xml布局文件

TextView textView=(TextView)findViewById(R.id.text_view);//取得TextView组件textView.setTextColor(Color.RED);//设置成红色

textView.setTextSize(https://www.360docs.net/doc/141490435.html,PLEX_UNIT_SP, 24f);//设置成24sp textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗

android:autoLink="web"

android:autoLink="phone"

android:autoLink="all"

实现跑马灯效果

android:id="@+id/text_view"

1.android:autoLink="all"

2.android:layout_width="fill_parent"

3.android:layout_height="wrap_content"

4.android:text="@string/hello"

5.android:ellipsize="marquee"

6.android:focusable="true"

7.android:marqueeRepeatLimit="marquee_forever"

8.android:focusableInTouchMode="true"

9.android:singleLine="true"

10. android:scrollHorizontally="true"/>

11.

[例4]编辑框EditText

1、设计界面如图所示：

2、布局文件：

文本框中内容是

请输入账号

EditText_wangzhiguo

android:id="@+id/TextView01"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

android:id="@+id/EditText01"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="18sp"

android:layout_x="29px"

android:hint="@string/message"

android:layout_y="33px"

/>

3、Activity界面程序的核心语句：

super.onCreate(savedInstanceState);

setContentView(https://www.360docs.net/doc/141490435.html,yout.main);

m_TextView = (TextView) findViewById(R.id.TextView01);

m_EditText = (EditText) findViewById(R.id.EditText01);

m_TextView.setTextSize(20);

/**

* 设置当m_EditText中为空时提示的内容在XML中同样可以实现：

android:hint="请输入账号"

*/

// m_EditText.setHint("请输入账号");

/* 设置EditText事件监听 */

m_EditText.setOnKeyListener(new EditText.OnKeyListener() { @Override

public boolean onKey(View arg0, int arg1, KeyEvent arg2) { // 得到文字，将其显示到TextView中

m_TextView.setText(Activity01.this.getString(R.string.hello) +

m_EditText.getText().toString());

return false;

}

});

补充：关于EditText的一些细节操作

android:hint="请输入用户名..." 提示属性

android:textColorHint="#238745" 更改提示颜色

android:enabled="false" 不可编辑

android:lines=”10”通过设定行高，实现文本域功能

android:maxLength="40" 最大内容长度

android:password="true" 要求输入密码

android:phoneNumber="true" 只能输入电话号码

droid:numeric="signed"

android:inputType="date" 指定输入类型

android:imeOptions="actionSearch" Enter键图标设置

1.actionUnspecified 未指定，对应常量

EditorInfo.IME_ACTION_UNSPECIFIED.效果：

2.actionNone 没有动作,对应常量EditorInfo.IME_ACTION_NONE 效果：

3.actionGo 去往，对应常量EditorInfo.IME_ACTION_GO 效果：

4.actionSearch 搜索，对应常量EditorInfo.IME_ACTION_SEARCH 效果：

5.actionSend 发送，对应常量EditorInfo.IME_ACTION_SEND 效果：

6.actionNext 下一个，对应常量EditorInfo.IME_ACTION_NEXT 效果：

7.actionDone 完成，对应常量EditorInfo.IME_ACTION_DONE 效果：

课堂练习

作业提示

//监听EditText文本的回车键

editText.setOnEditorActionListener(new OnEditorActionListener() {

@Override

public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {

Toast.makeText(HelloEditText.this, String.valueOf(actionId), Toast.LENGTH_SHORT).show();

return false;

}

});

//获取EditText文本

public void onClick(View v) {

Toast.makeText(HelloEditText.this, editText.getText() .toString(), Toast.LENGTH_SHORT).show();

Button all=(Button)findViewById(R.id.btn_all);

all.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

editText.selectAll();

}

});

//让EditText全选

Button all=(Button)findViewById(R.id.btn_all);

all.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

editText.selectAll();

}

});

//从第2个字符开始选择EditText文本

public void onClick(View v) {

Editable editable=editText.getText();

Selection.setSelection(editable, 1,editable.length());

}

public void onClick(View v) {

int start=editText.getSelectionStart();

int end=editText.getSelectionEnd();

CharSequence selectText=editText.getText().subSequence(start, end);

oast.makeText(HelloEditText.this, selectText, Toast.LENGTH_SHORT) .show();

}

/**

* 交换两个变量的值

* @param start 变量初值

* @param end 变量终值

*/

protected void switchIndex(int start, int end) {

int temp=start;

start=end;

end=temp;

}

[例5]单选RadioButton

1、设计界面如图所示：

2、布局文件：

Android底层是基于什么操作系统？ 单选RadioButton_wangzhiguo Windows

Linux

Moc os

Java

android:id="@+id/TextView01"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

android:id="@+id/RadioGroup01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:layout_x="3px"

android:layout_y="54px"

>

android:id="@+id/RadioButton1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton1"

/>

android:id="@+id/RadioButton2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton2"

/>

android:id="@+id/RadioButton3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton3"

/>

android:id="@+id/RadioButton4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton4"

/>

3、Activity界面程序的核心语句：

/**

* 获得TextView对象获得RadioGroup对象获得4个RadioButton对象

*/

m_TextView = (TextView) findViewById(R.id.TextView01);

m_RadioGroup = (RadioGroup) findViewById(R.id.RadioGroup01);

m_Radio1 = (RadioButton) findViewById(R.id.RadioButton1);

m_Radio2 = (RadioButton) findViewById(R.id.RadioButton2);

m_Radio3 = (RadioButton) findViewById(R.id.RadioButton3);

m_Radio4 = (RadioButton) findViewById(R.id.RadioButton4);

/* 设置事件监听 */

m_RadioGroup

.setOnCheckedChangeListener(new

RadioGroup.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub

if (checkedId == m_Radio2.getId()) {

DisplayToast("正确答案：" + m_Radio2.getText()

+ "，恭喜你，回答正确！");

} else {

DisplayToast("请注意，回答错误！");

}

}

});

}

/* 显示Toast */

public void DisplayToast(String str) {

Toast toast = Toast.makeText(this, str, Toast.LENGTH_LONG);

// 设置toast显示的位置

toast.setGravity(Gravity.TOP, 0, 220);

// 显示该Toast

toast.show();

}

[例6]Toast的用法简介

[例6_1] 弹出式提示框的默认样式

1、设计界面如图所示：

2、核心语句：

Toast.makeText(getApplicationContext(), "默认Toast样式", Toast.LENGTH_SHORT).show();

[例6_2] 自定义提示框显示位置

1、设计界面如图所示：

2、核心语句：

toast = Toast.makeText(getApplicationContext(),

"自定义位置Toast", Toast.LENGTH_LONG);

toast.setGravity(Gravity.CENTER, 0, 0);

toast.show();

[例6_3]带图片提示框效果

1、设计界面如图所示：

2、核心语句：

toast = Toast.makeText(getApplicationContext(),

"带图片的Toast", Toast.LENGTH_LONG);

toast.setGravity(Gravity.CENTER, 0, 0);

LinearLayout toastView = (LinearLayout) toast.getView();

ImageView imageCodeProject = new ImageView(getApplicationContext()); imageCodeProject.setImageResource(R.drawable.icon);

toastView.addView(imageCodeProject, 0);

toast.show();

[例6_4]带图片的自定义提示框效果

1、设计界面如图所示：

2、核心语句：

LayoutInflater inflater = getLayoutInflater();

View layout = inflater.inflate(https://www.360docs.net/doc/141490435.html,yout.custom,

(ViewGroup) findViewById(R.id.llToast));

ImageView image = (ImageView) layout

.findViewById(https://www.360docs.net/doc/141490435.html,ImageToast);

image.setImageResource(R.drawable.icon);

TextView title = (TextView) layout.findViewById(https://www.360docs.net/doc/141490435.html,TitleToast); title.setText("Attention");

TextView text = (TextView) layout.findViewById(https://www.360docs.net/doc/141490435.html,TextToast); text.setText("完全自定义Toast");

toast = new Toast(getApplicationContext());

toast.setGravity(Gravity.RIGHT | Gravity.TOP, 12, 40);

toast.setDuration(Toast.LENGTH_LONG);

toast.setView(layout);

toast.show();

[例6_5]其他线程

1、设计界面如图所示：

2、核心语句：

new Thread(new Runnable() {

public void run() {

showToast();

}

}).start();

[例7]多选checkbox

1、设计界面如图所示：

2、布局文件：

调查：你喜欢Android的原因？

CheckBox_wangzhiguo

无界限的应用程序

应用程序是在平等的条件下创建的 应用程序可以轻松地嵌入网络

应用程序可以并行运行

android:id="@+id/TextView1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

android:id="@+id/CheckBox1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/CheckBox1"

>

android:id="@+id/CheckBox4"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/CheckBox4"

>

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="提交"

>

3、核心语句：

m_CheckBox1.setOnCheckedChangeListener(new

CheckBox.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (m_CheckBox1.isChecked()) {

DisplayToast("你选择了：" + m_CheckBox1.getText());

}

}

});

m_Button1.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) {

int num = 0;

if (m_CheckBox1.isChecked()) {

num++;

}

if (m_CheckBox2.isChecked()) {

num++;

}

if (m_CheckBox3.isChecked()) {

num++;

}

if (m_CheckBox4.isChecked()) {

num++;

}

DisplayToast("谢谢参与！你一共选择了" + num + "项！");

}

});

[例8] 菜单Menu

1、设计界面如图所示：

Android简单的登陆界面的设计开发

通信实训报告 -Android移动平台开发 学院：信息工程学院 班级： 学号： 姓名：

实训内容： 一．1.Andriod的简介 Android一词的本义指“机器人”，同时也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称，该平台由操作系统、中间件、用户界面和应用软件组成，号称是首个为移动终端打造的真正开放和完整的移动软件。目前，最新版本为Android 2.4 Gingerbread 和Android 3.0 Honeycomb。 Android是基于Linux开放性内核的操作系统，是Google公司在2007年11月5日公布的手机操作系统。 Android早期由原名为"Android"的公司开发，谷歌在2005年收购"Android.Inc"后，继续对Android系统开发运营，它采用了软件堆层（software stack，又名软件叠层）的架构，主要分为三部分。底层Linux内核只提供基本功能，其他的应用软件则由各公司自行开发，部分程序以Java编写。2011年初数据显示，仅正式上市两年的操作系统Android已经超越称霸十年的塞班系统，使之跃居全球最受欢迎的智能手机平台。现在，Android系统不但应用于智能手机，也在平板电脑市场急速扩张，在智能MP4方面也有较大发展。采用Android系统主要厂商包括台湾的HTC,(第一台谷歌的手机G1由HTC生产代工）美国摩托罗拉,SE等，中国大陆厂商如：魅族（M9），华为、中兴、联想、蓝魔等。 2.Android构架图 二．1软件下载 Android SDK，网址是https://www.360docs.net/doc/141490435.html,. JDK的下载地址https://www.360docs.net/doc/141490435.html,/javase/downloads/widget/jdk6.jsp。Eclipse的下载网址是https://www.360docs.net/doc/141490435.html,/downloads/ 2.Android开发环境搭建

Android人机界面(UI)设计规范(带目录)

Android 人机界面设计规范 1Android 设计的依据 1.1 框架结构及流程 是什么使得android 有着独特的用户体验？ 后台处理支持多任务功能 正在进行和事件驱动的提示信息 通过Widgets 和live folders 来实现实时信息的预览 用户想用时，任一应用程序都可以挑选和选择 android 不是关于程序的，它是关于活动，把任务分层， 1.2 架构基础 硬件平台 android 设备代表的是硬件和软件的完美组合。硬件辅助导航操作，并给android 提供更多更好的功能。当菜单没有开启，要把屏幕最大化时，菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆（back stack）。 竖屏与横屏 一般来说，用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android 手机中。99％的android 布局支持横屏。 焦点和菜单 在触摸模式里没有焦点，只有轨迹球。Android 平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能；它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5 个图标，使用点击more menu 菜单来查看那些不太重要的菜单项。上下文菜单（长按）集中在一个特定对象。 总是把那些与所选项最相关的行为放在长按菜单的顶部。 需要记住的几点： 设计时要考虑速度和简洁 尽量分层来分等级 屏幕上的活动尽量最小 使用下载进度条，下载数据时，而不是让用户等待去看一个加载完全的页面。 考虑活动流而不是线性行为 1.3 屏幕上的行为

android 设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android 行为的标准，避免混淆用户。 1.4 表达 细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO 是开始你的工具包的好地方。 2 用户界面原则 这部分试图讲述创造一个好的用户界面的一些基本的交互设计原则。这些原则是基本的，不止能应用于android 的用户界面设计，也可以应用于其他。苹果建议开发者花费60％的开发时间来进行设计工作。下面的用户界面原则将为好的设计提供一个基础。 2.1 隐喻 隐喻是构建一个基于操作任务心智模型的模块；用它们来传递应用程序的概念和功能。基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时，要注意andriod 中存在的隐喻，不要重新定义它们。同时，检查你的应用程序执行的任务，看是否有些自然隐喻你可以使用。 2.2 反映用户的心智模型 用户已经有了一个来描述你的程序正在进行的任务的心智模型。这个心智模型产生于真实世界经验、其它软件和一般电脑基本知识的结合。比如说，用户在真实世界里有写字、寄信的经验，也会产生特定的期待，像写一封新的信，选一个接受者，然后寄出信。一个忽略用户心智模型的电子邮件程序用起来会很困难和不舒服。这是因为程序强加给用户一个不熟悉的概念模型，而不是建立一个用户已有的知识经验模式。 在设计程序用户界面之前，试着去发现你的用户的心智模型,这样帮助用户去执行任务。心智模型中内在的隐喻，它代表了任务的概念组成。在写信这个例子中，隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中，隐喻包括照片、照相机和专辑。我们要努力地发现用户的期望，包括任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。 要通过努力地何必把个下面的特征与用户心智模型相融合： 熟悉性 用户的心智模型主要是建立在经验的基础上 简单化 一项任务的心智模型通常是流线型，关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节，但是基本的组成部分占大部分，并且不会占用用户的注意。 可利用性Availability

第4章 Android用户界面设计

视图组件的使用模式 常用组件 高级组件 提示框与警告对话框

就是Android应用程序的开发过程。一般过程是先通过XML布局文件或Java代码创建界面布局，设定组件显示样式，随后获取UI组件对象，并处理组件事件响应。 视图组件的定义 资源的访问 生成视图组件资源标识 视图组件的引用 视图组件的事件响应 组件的常用属性

1.1视图组件的定义 使用XML布局文件定义视图组件 使用Java代码定义视图组件(不推荐)

1.1视图组件的定义 使用XML布局文件定义视图组件 Android平台为大多数视图组件以及其子类提供了XML标记，可通过XML布局文件中的标记来定义视图组件。XML中的每个元素代表了一个组件，即元素名称对应相应的Java类。

1.1视图组件的定义

相关主题
相关文档
最新文档