android实验2界面设计：基本组件

实验2、Android应用界面开发(1)一、实验目的1.了解View类、ViewGroup的作用2.掌握常用布局管理器的使用3.掌握XML界面控制的设计方法4.掌握常用的界面设计组件的功能❑TextView和EditText的功能和用法❑Button和ImageButton的功能和用法❑RadioButton和CheckBox的功能和用法❑ToggleButton的功能和用法❑时钟的功能和用法❑ImageView的功能和用法❑AutoCompleteTextView的功能和用法❑Spinner的功能和用法❑日期和时间选择器的功能和用法5.掌握常用的XML属性6.使用XML属性来开发漂亮的用户界面7.从本周起，以后每次小课的实验内容，要求上传至小课老师的FTP。

二、实验步骤1.简要概括View和ViewGroup作用。

答：View：任何一个View对象都继承android.view.View类。

它是一个存储有屏幕上特定的一个矩形布局和内容属性的数据结构。

作为一个基类，View类为Widget 服务， Widget则是一组用于绘制交互屏幕元素的完全实现子类。

ViewGroup：是一个android.view. ViewGroup类的对象。

它的功能是装载和管理一组下层的View和其他的ViewGroup，作为一个基类， ViewGroup为Layout服务。

2.相对布局管理器的使用，补充代码，使程序运行的效果如下图所示：图1 实验效果图RelativeLayoutDemo.java中的源代码如下所示：下面是布局文件main.xml中的内容，请补充完整，实现图1中的界面：<?xml version="1.0"encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#000000"><TextViewandroid:id="@+id/label"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Type here"android:textSize="12pt"android:textStyle="bold"android:textColor="#AA0000"android:layout_marginLeft="15dip"/><EditTextandroid:id="@+id/entry"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="@android:drawable/editbox_background"android:layout_below="@+id/label"/><Buttonandroid:id="@+id/ok"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/entry"android:layout_alignParentRight="true"android:layout_marginLeft="10dip"android:text="OK"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignBaseline="@+id/ok"android:layout_alignBottom="@+id/ok"android:layout_toLeftOf="@+id/ok"android:text="Cancel"/></RelativeLayout>3.布局管理器的嵌套，编写程序，在模拟器中实现如下的效果界面，选择合适的布局管理器。

实验2 android的界面设计(控件与布局)学时：4学时一、实验目的：1、了解Android编程原理2、掌握界面控件设计3、了解和熟悉常用控件的使用、界面布局等内容。

二、实验内容：1.基本控件的制作：（1）TextView的制作：a)体会Autolink，依次更换属性：web/phone/all/email/b) 制作跑马灯效果android:ellipsize 设置当文字过长时,该控件该如何显示。

有如下值设置：”start”—-省略号显示在开头;”end”——省略号显示在结尾;”middle”—-省略号显示在中间;”marquee”——以跑马灯的方式显示(动画横向移动)android:marqueeRepeatLimit 在ellipsize 指定marquee 的情况下，设置重复滚动的次数，当设置为marquee_forever 时表示无限次。

android:focusableInTouchMode：是否在触摸模式下获得焦点。

android:focusable 控件是否能够获取焦点(2)EditView制作(a) maxLength：最大输入长度属性(b) singleLine：多行文本框(c) inputType：限制输入文本类型(d) hint：设置提示信息2.布局设计(1) LinearLayout布局：（2）Relative Layout：（3）Table Layout3．建立一个如图所示的图形界面:4.用ListView制作如图界面(图片自定) (将该题以你的学号命名，发给你班的学习委员，以班为单位统一发给我，我的邮箱为：****************)：5．用expandablelistview制作如下界面:6.对话框制作：(2)部分程序代码：protected void dialog() {AlertDialog.Builder builder = new Builder(Main.this);builder.setMessage("确认退出吗？");builder.setTitle("提示");builder.setPositiveButton("确认", new OnClickListener() { @Overridepublic void onClick(DialogInterface dialog, int which) { dialog.dismiss();Main.this.finish();}});builder.setNegativeButton("取消", new OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss();}});builder.create().show();}//在onKeyDown(int keyCode, KeyEvent event)方法中调用此方法public boolean onKeyDown(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {//点后退键的时候，为了防止点得过快，触发两次后退事件dialog();}return false;}(2)界面如下：部分代码：Dialog dialog = new AlertDialog.Builder(this).setIcon(android.R.drawable.btn_star).setTitle("喜好调查").setMessage("你喜欢李连杰的电影吗？").setPositiveButton("很喜欢",new OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {// TODO Auto-generated method stub Toast.makeText(Main.this, "我很喜欢他的电影。

实验二Android程序UI界面设计【目的】Android程序设计基础。

熟悉各种UI控件并且进行UI设计。

【要求】1、了解Android程序设计基础2、掌握各种UI控件的基本功能和用法3、掌握UI设计的方法4、完成【课堂练习】5、完成【课后作业】并且提交实验报告【原理】1、掌握各种控件的基本功能和用法。

常用的控件包括：TextView：Button：ImageView：ImageButton：ProgressBar：RadioButton：2、了解各种布局Layout的基本功能和用法。

多种Layout：AbsoluteLayoutFrameLayoutGridView LinearLayoutListLayoutRadioGroupTableLayout···【参考过程】1、新建一个名为Ex02的Android Project。

2、双击Layout->main.xml文件，即可切换到UI设计界面（默认布局为LinearLayout），增加所需控件，如：Button。

3、将Form Widgets中的Button拖入屏幕中，如图1所示。

图14、从Graphical Layout切换至main.xml，可以看见代码中已新增了Button的xml代码，如图2所示。

图25、修改控件的属性：方法一：单击Button，在窗口下方的properties一栏中修改对应的属性，如：background，text，size等。

（如果没有properties一栏出现，右击Button，打开“Show In”->“Properties”即可。

）图3方法二：直接在main.xml文件中修改。

如修改Button的文本内容，则输入android:text=”Yes, I do!”，如图4所示。

图4再次切换回Graphical Layout预览页面，则看到Button的文本内容已经被修改，如图5所示。

Android 实验设计实验二：界面设计：控件与布局08计应 08386038 胡巍巍【目的】Android编程基础，UI设计。

【要求】1、了解Android编程原理2、掌握界面控件设计3、掌握控件的事件处理编程【原理】1.熟悉各种控件的基本功能常用控件包括：TextView，EditText，Button，ImageView:ImageButton，ProgressBar，Radio button:2.了解各种布局Layout的应用多种Layout： AbsoluteLayout FrameLayout GridViewLinearLayout ListLayout RadioGroupTableLayout ………【实验过程】新建一个Project，并对其布局文件进行简单修改。

1.New 一个 Android project：Project Name: Practice,Application name:Project,Build Target勾选Android 2.2,Package name:com.eoeAndroid.Practice ,Create Activity:Practice ,Min SDK Version:8. 然后点击Next→Finish。

2.Finish后，Eclipse Platform左边Package Explorer栏中出现了我们刚才新建的project。

根据实验要求在layout main.xml中修改布局文件（我选的是相对布局relative layout），增加所需控件。

分析实验要求后，对要求添加的控件按照从上到下，从左到右的顺序添加。

布局xml实现如下：<?xml version="1.0"encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:orientation="horizontal" //默认控件水平排列android:layout_width="fill_parent" //相对布局的有效范围android:layout_height="fill_parent"android:background="#ffffff"> //背景颜色<TextView android:id="@+id/text1" //第一个文本控件android:layout_width="wrap_content" //控件宽度和高度有文本决定android:layout_height="wrap_content"android:text="@string/hello"/>//文本内容：hello所定义的字符串<TextView android:id="@+id/text2" //第二个文本控件android:layout_width="wrap_content" //同上android:layout_height="wrap_content"android:layout_below="@id/text1"//这里实现text2布局在text1的下方android:text="Hello,It's Huweiwei's Android Project !"//内容android:textStyle="bold"/>//文本字体样式，这里是粗体<EditText android:id="@+id/ET1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_below="@id/text2"android:hint="Input what you want to say to TA"android:shadowColor="#ff0000"/>//边框阴影眼测<TextView android:id="@+id/text3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/ET1"android:text="Do you miss Miss TA^0^?"android:textStyle="bold"/><RadioGroup android:layout_width="wrap_content"//这里定义了一对单项android:layout_height="wrap_content" //选择，水平排列android:checkedButton="@+id/RB1"android:orientation="horizontal"android:layout_below="@id/text3"android:id="@+id/menu"><RadioButton android:id="@+id/RB1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Yes!^0^)/"android:textStyle="normal"android:textColor="#000000"/><RadioButton android:id="@+id/RB2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000000"android:text="No~(T_T)"android:textStyle="normal"/></RadioGroup><TextView android:id="@+id/text4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/menu"android:text="Button,Do you want to marry with ImageView?"android:textStyle="bold"/><ImageView android:id="@+id/IM1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/text4"android:src="@drawable/icon"/>//图像来源<Button android:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/IM1"//button1安置在IM1的左侧，并且android:layout_alignTop="@id/IM1"//与IM1并排android:text="Yes T do !"android:textColor="#0000ff"/><TextView android:id="@+id/text6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/text4"android:layout_toRightOf="@id/button1"android:visibility="invisible"android:layout_marginTop="10dip" //在文本上方预留10dip的空间android:text="Congratulations!"android:textStyle="bold"/><TextView android:id="@+id/text5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/button1"android:visibility="invisible" //设置text5默认情况下不可见android:text="Years later their son was born~,It'sImageButton~"android:textStyle="bold"/><ImageButton android:layout_below="@+id/text5"android:id="@+id/ImageButton01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:visibility="invisible"android:src="@drawable/icon"></ImageButton></RelativeLayout>以上完成了对各个控件的布局，由于是第一次使用xml文件进行布局工作，对控件的各种属性都不了解，因此我并没有采用拖拉的方法编写xml文件，而是一句句的编写，这虽然会花费相当长的时间，但我觉得这是值得的，因为在这个过程中，我知道了控件的每个属性的不同值决定控件怎样的特性，还有不同的控件之间的关系如何用他们的属性表示，这对以后的工作会有很大帮助的。

package lin.example.helloui;Android中有许多常用控件：文本框：TextView、EditText按钮：Button、RadioButton、CheckBox、ImageButton二，界面布局package lin.example.hellouib;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;import android.widget.Button;public class MainActivity extends Activity { @Override（2）ativity_main.xml:<LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:id="@+id/container"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"tools:context="lin.example.hellouib.MainActivity"tools:ignore="MergeRootFrame"><LinearLayout5、结果分析与实验体会本次试验我们学习Android的视图层与UI设计，再是严重我们熟悉了发中的UI设计，包括了解和熟悉常用控件的使用、界面布局和事件时间处理等内容，在熟悉和掌握了界面控件设计后，使我们更加了解了Android界面布局，控件的时限和属性设置，并且学会了创建和使用定制的控件。