用户界面设计及常用基本组件应用

北华航天工业学院《基于Android的移动云计算开发》实验报告报告题目：用户界面设计及常用基本组件应用作者所在系部：作者所在专业：作者学号：作者姓名：指导教师姓名：完成时间：北华航天工业学院教务处制幼TableLayout目我评价:性别：出生日期：2014年「月15日姓名：张三丰个人档案积极向上，自信提交4年9月15日出生工作2014年9月15日喜欢体6:45:01am幼TableLayout目我评价:性别：出生日期：2014年「月15日姓名：张三丰个人档案积极向上，自信提交4年9月15日出生工作2014年9月15日喜欢体6:45:01am个爱工年®°o女作限人好一、实验目的掌握界面布局设计的方法和技术；常用基本组件的属性、方法和事件的使用;应用常用基本组件设计应用程序。二、实验内容表1:全局设置：列属性设置该列可伸展该列可收缩I我向行方向伸展，我可以很长我向列方向收缩，我可以很深表2：单元格设置：指定单元格属性设置第0列第1列第2列我被指定在第1列我跨1到2列，不信你看！表3:应用一，非均匀布局一俩字三个字表4:应用二，均匀布局—俩字三个字使用线性布局的嵌套实现如图1所示的效果。使用表格布局的嵌套实现如图2所示的效果。（其中包含4个表格布局，第1个TableLayout,用于描述表中的列属性。有3列，第0列可伸展，第1列可收缩，第2列被隐藏；第2个TableLayout,用于描述表中单元格的属性，包括:android:layout_column及android:layout_span；第3个TableLayout，使用可伸展特性布局；第4个TableLayout，使用可伸展特性，并指定每个控件宽度一致）使用相对布局实现如图3所示的效果。编写应用程序实现EditText的取值、全选、部分选择和获取选中文本，效果图如图5所示。编写应用程序实现个人基本资料小程序（包括姓名、性别、出生日期、工作年限、个人爱好、自我评价等信息），如图5所示。要求如下：1）提前准备几张照片，当点击ImageView时循环切换照片。2）单击出生日期的编辑框后调出DatePickerDialog以设置出生日期。3）工作年限编辑框只能输入整数，最大长度为2。4）对单选按钮和复选框操作时给出相应提示（比如：你选择了XX）。5）点击“提交”按钮后，将在个人详细情况文本框中显示，并实现跑马灯效果。6）对各编辑框做内容校验，如果内容不符合要求则给出提示信息。三、实验步骤1.通过线性布局，将界面分成几块，再在每一部分中使用线性布局完成界面设计，主要代码如下:1.通过线性布局，将界面分成几块，再在每一部分中使用线性布局完成界面设计，主要代码如下:<LinearLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent”android:layout_height="fill_parent”android:orientation="vertical"</LinearLayout>android:layout_width="fill_parent”android:layout_height="fill_parent”android:orientation="vertical”android:layout_weight="1”><TextViewandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:text="Red”android:background="#ff0000”android:layout_weight="1"/><TextViewandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:text="White”android:background="#ffffff”android:layout_weight="1"/><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="fill_parent”android:orientation="horizontal”android:layout_weight="1”><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="fill_parent”android:orientation="horizontal”android:layout_weight="1”><TextViewandroid:layout_width="wrap_content”android:layout_height="fill_parent”android:text="Green”android:background="#00ff00”android:layout_weight="1”/><TextViewandroid:layout_width="wrap_content”android:layout_height="fill_parent”android:text="Blue”android:background="#0000aa”android:layout_weight="1”/></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="fill_parent”android:orientation="vertical”android:layout_weight="1”><TextViewandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:text="Black”android:background="#000000"android:layout_weight="1"/><TextViewandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:text="Yellow”android:background="#ffff00”android:layout_weight="1”/><TextViewandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:text="Blue”android:background="#0000ff”android:layout_weight="1”/></LinearLayout></LinearLayout></LinearLayout>2使用表格布局，再在表格布局中的加入相关属性，如可隐藏、可收缩等，主要代码如下：.android:id="@+id/button4”android:layout_width="wrap_content”android:layout_height="wrap_content”android:text="第2使用表格布局，再在表格布局中的加入相关属性，如可隐藏、可收缩等，主要代码如下：.android:id="@+id/button4”android:layout_width="wrap_content”android:layout_height="wrap_content”android:text="第0歹U”android:layout_column="0”/><Buttonandroid:id=”@+id/button5”<TableRow><Buttonandroid:id="@+id/button1”android:layout_width="wrap_content”android:layout_height="wrap_content”android:text="该列可伸展”android:stretchColumns="0”/><Buttonandroid:id="@+id/button2”android:layout_width="wrap_content”android:layout_height="wrap_content”android:text=”该列可收缩”android:shrinkColumns="1"/><Buttonandroid:id="@+id/button3”android:layout_width="wrap_content”android:layout_height="wrap_content”android:text="该列可隐藏”android:collapseColumns="2”/></TableRow><TableRow><Buttonandroid:layout_width="wrap_content”android:layout_height="wrap_content”android:text="第1歹U”android:layout_column="1”android:layout_span="2”/><Buttonandroid:id="@+id/button6”android:layout_width="wrap_content”android:layout_height="wrap_content”android:text="第2歹U”android:layout_column="2”/></TableRow><TableRowandroid:shrinkColumns=”0,1,2”><Buttonandroid:id=”@+id/button7”android:layout_width=”wrap_content”android:layout_height=”wrap_content”android:text=”一”/><Button3.使用相对布局，先确定第一张图片的位置，再通过其他图片与第一张图片的相对位置完成布局，主要代码如下：<RelativeLayoutxmlns:android="/apk/res/android"xmlns:tools="/tools”android:layout_width="fill_parent”android:layout_height="fill_parent”android:background="#000000”><EditTextandroid:id="@+id/middle”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_centerInParent="true”/><EditTextandroid:id="@+id/left”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_toLeftOf="@id/middle”android:layout_centerInParent="true”/><EditTextandroid:id="@+id/right”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_toRightOf="@id/middle”android:layout_centerInParent="true”/><EditTextandroid:id="@+id/up”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_above="@id/middle”android:layout_centerInParent="true”/><EditTextandroid:id="@+id/down”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_below="@id/middle”android:layout_centerInParent="true”/></RelativeLayout>通过添加实践监听完成相应的功能，布局使用线性布局完成，在此不做赘述。其3.使用相对布局，先确定第一张图片的位置，再通过其他图片与第一张图片的相对位置完成布局，主要代码如下：<RelativeLayoutxmlns:android="/apk/res/android"xmlns:tools="/tools”android:layout_width="fill_parent”android:layout_height="fill_parent”android:background="#000000”><EditTextandroid:id="@+id/middle”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_centerInParent="true”/><EditTextandroid:id="@+id/left”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_toLeftOf="@id/middle”android:layout_centerInParent="true”/><EditTextandroid:id="@+id/right”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_toRightOf="@id/middle”android:layout_centerInParent="true”/><EditTextandroid:id="@+id/up”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_above="@id/middle”android:layout_centerInParent="true”/><EditTextandroid:id="@+id/down”android:layout_width="wrap_content”android:layout_height="wrap_content”android:background="@drawable/jp"android:layout_below="@id/middle”android:layout_centerInParent="true”/></RelativeLayout>通过添加实践监听完成相应的功能，布局使用线性布局完成，在此不做赘述。其java文件中的相应方法代码如下：publicclassHelloEditTextextends@OverrideActionBarActivity{protectedvoidonCreate(BundlesetContentView(R.layout.he_activity_main);EditTexteditText1=(EditText)findViewById(R.id.et1);editText1.setOnEditorActionListener(newOnEditorActionListener()(publicbooleanonEditorAction(TextViewv,intactionId,KeyEventevent)(Toast.makeText(HelloEditText.this,String.valueOf(actionId),Toast.LENGTH_SHORT).show();returnfalse;}});Buttonbutton1=(Button)findViewById(R.id.bt1);Buttonbutton2=(Button)findViewById(R.id.bt2);Buttonbutton3=(Button)findViewById(R.id.bt3);Buttonbutton4=(Button)findViewById(R.id.bt4);button1.setOnClickListener(newButtonOnClickListener());button2.setOnClickListener(newButtonOnClickListener());button3.setOnClickListener(newButtonOnClickListener());button4.setOnClickListener(newButtonOnClickListener());}classButtonOnClickListenerimplementsOnClickListener(publicvoidonClick(Viewv)(switch(v.getId()){{EditTexteditText1=(EditText)findViewById(R.id.et1);editText1.setText("");}break;caseR.id.bt2:{EditTexteditText1=(EditText)findViewById(R.id.et1);editText1.selectAll();}break;caseR.id.bt3:{EditTexteditText1=(EditText)findViewById(R.id.et1);Editableeditable=editText1.getText();Selection.setSelection(editable,1,editable.length());}break;caseR.id.bt4:{EditTexteditText1=(EditText)findViewById(R.id.et1);intstart=editText1.getSelectionStart();intend=editText1.getSelectionEnd();CharSequenceselectText=editText1.getText().subSequence(start,end);Toast.makeText(HelloEditText.this,selectText,Toast.LENGTH_SHORT).show();}break;}}}}caseR.id.bt1:使用线性布局完成界面的布局，再通过设置监听实现相应的方法，进而获取内容显示，其布局文件的部分代码如下：（1）string文件部分如下：<stringname="hello_world">Helloworld!</string><stringname="action_settings">Settings</string><stringname="gerendangan">个人档案</string><stringname="xingming">M名：</string><stringname="xingbie">性别：</string><stringname="nan">男</string>android:id="@+id/tex1”android:layout_width="wrap_content”android:id="@+id/tex1”android:layout_width="wrap_content”（2）xml代码如下：<LinearLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent”android:layout_height="fill_parent”android:orientation="vertical”android:padding="10dp”><TextViewandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:text="@string/gerendangan”android:gravity="center”android:textSize="20sp"/><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><LinearLayoutandroid:layout_width="190dp”android:layout_height="wrap_content”android:orientation="vertical"><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content”android:layout_height="wrap_content”android:text="@string/xingming”/><EditTextandroid:id="@+id/et1”android:layout_width="130dip”android:layout_height="wrap_content"/></LinearLayout><LinearLayoutandroid:layout_width="190dpandroid:layout_height="wrap_content”android:orientation="horizontal"><TextViewandroid:id="@+id/tex2”android:layout_width="wrap_content”android:layout_height="wrap_content”android:layout_marginTop="10dp”android:text="@string/xingbie"/><RadioGroupandroid:id="@+id/rd1”android:layout_height="wrap_content”android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb1”android:text="@string/nan”android:checked="true”/><RadioButtonandroid:id="@+id/rb2”android:text="@string/nv”/></RadioGroup></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><TextViewandroid:id="@+id/tex3”android:layout_width="45dp”android:layout_height="wrap_content”android:text="@string/chusheng”/><EditTextandroid:id="@+id/et2”android:layout_width="130dip”android:layout_height="wrap_content”android:layout_marginTop="10dp”android:lines="2”/></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><TextViewandroid:id="@+id/tex4”android:layout_width="45dp”android:layout_height="wrap_content”android:text="@string/gongzuo”/><EditTextandroid:id="@+id/et3”android:layout_width="130dip”android:layout_height="wrap_content”android:numeric="integer”android:maxLength="2android:layout_marginTop="10dp”android:lines="2”/></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="fill_parent”android:layout_marginTop="20dp”android:layout_marginBottom="20dp”><ImageViewandroid:id="@+id/imag1android:layout_height="wrap_content”android:layout_width="fill_parent”android:layout_height="fill_parent”android:background="@drawable/background7"/></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><TextViewandroid:id="@+id/tex5”android:layout_width="45dp”android:layout_height="wrap_content”android:text="@string/aihao”/><CheckBoxandroid:id="@+id/che1”android:text="@string/tiyu”android:layout_width="wrap_content”android:layout_height="wrap_content”/><CheckBoxandroid:id="@+id/che2”android:text="@string/yinyue”android:layout_width="wrap_content”android:layout_height="wrap_content”/><CheckBoxandroid:id="@+id/che3”android:text="@string/meishu”android:layout_width="wrap_content”/></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><TextViewandroid:id="@+id/tex6”android:layout_width="fill_parent”android:layout_height="wrap_content”android:text="@string/ziwopingjia”/></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><EditTextandroid:id="@+id/et4”android:layout_width="200dp”android:layout_height="wrap_content"/><Buttonandroid:id="@+id/but1"android:layout_width="wrap_content”android:layout_height="wrap_content”android:text="@string/tijiao"/></LinearLayout><LinearLayoutandroid:layout_width="fill_parent”android:layout_height="wrap_content”android:orientation="horizontal"><TextViewandroid:id="@+id/tex7”android:layout_width="fill_parent”android:id="@+id/tex7”android:layout_width="fill_parent”android:layout_height="wrap_content”android:ellipsize="marquee”android:focusable="true"android:focusableInTouchMode="true”android:marqueeRepeatLimit="marquee_forever”android:singleLine="true”android:text="@string/xiangxixinxi”/></LinearLayout><LinearLayout(3)java文件中的部分实现方法如下：publicclassMaxLayoutextendsActionBarActivity{inti=0;EditTextet1,et2,et3,et4;RadioGrouprd1;CheckBoxche1,che2,che3;TextViewtex7,tex8;Buttonbut1;protectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.ma_activity_main);ImageViewimageView=(ImageView)findViewById(R.id.imag1);imageView.setOnClickListener(newClickListener());et1=(EditText)findViewById(R.id.et1);et2=(EditText)findViewById(R.id.et2);et2.setOnClickListener(newClickListener());et3=(EditText)findViewById(R.id.et3);et4=(EditText)findViewById(R.id.et4);rd1=(RadioGroup)this.findViewById(R.id.rd1);android:layout_height="wrap_content”android:orientation="horizontal"><DigitalClockandroid:id="@+id/digital”android:layout_width="wrap_content”android:layout_height="wrap_content”android:layout_gravity="center_horizontal"/></LinearLayout></LinearLayout>rd1.setOnCheckedChangeListener(newRadioGroup.OnCheckedChangeListener(){publicvoidonCheckedChanged(RadioGroupgroup,intcheckedId){switch(checkedId){caseR.id.rb1:{Toast.makeText(getApplicationContext(),你选择了“男””,0).show();}break;caseR.id.rb2:{Toast.makeText(getApplicationContext(),你选择了“女””,0).show();}break;}}});che1=(CheckBox)findViewById(R.id.che1);che2=(CheckBox)findViewById(R.id.che2);che3=(CheckBox)findViewById(R.id.che3);tex7=(TextView)findViewById(R.id.tex7);//tex8=(TextView)findViewById(R.id.tex8);but1=(Button)findViewByld(R.id.butl);che1.setOnCheckedChangeListener(newCheckChange());che2.setOnCheckedChangeListener(newCheckChange());che3.setOnCheckedChangeListener(newCheckChange());but1.setOnClickListener(newClickListener());}classCheckChangeimplementsOnCheckedChangeListener(publicvoidonCheckedChanged(CompoundButtonbuttonView,booleanisChecked)(switch(buttonView.getId()){caseR.id.che1:{if(che1.isChecked())Toast.makeText(getApplicationContext(),'你选择了“体育””,0).show();}break;caseR.id.che2:{if(che2.isChecked())Toast.makeText(getApplicationContext(),'你选择了“音乐””，0).show();}break;caseR.id.che3:{if(che3.isChecked())Toast.makeText(getApplicationContext(),'你选择了“美术””,0).show();}break;}}}classClickListenerimplementsOnClickListener{publicvoidonClick(Viewv){switch(v.getId()){caseR.id.imag1:{switch(i){case0:{ImageViewimageView=(ImageView)findViewById(R