第5章 基础UI控件演示

第5章基础UI控件演示课程安排1、Button 2、TextView 3、EditText 4、CheckBox 5、RadioButton 6、Spinner 7、TimePicker/DatePicker8、ScrollView 9、ImageView 10、ImageButton 11、GridView认识Widget组件1、界面中展示的各个小组件2、有独立的事件处理能力3、所有Wiget组件都是继承View而来Widget组件类继承关系1、TextView类继承关系2、ImageButton类继承关系Android界面元素—Widgets(1)1、Button

按钮2、TextView

文本框3、EditText

文本编辑框4、CheckBox

多项选择5、RadioButton

单项选择6、Spinner

下拉列表7、TimePicker/DatePicker

时间选择器8、ScrollView

滚动视图9、ImageView

图片视图10、ImageButton

图片按钮11、GridView

网格视图Android界面元素—Widgets(2)12、ProgressBar 进度条13、ProgressDialog 进度条对话框14、SeekBar 拖动条15、ImageSwitcher 图片切换16、Gallery 图片切换17、TabHost 标签组件18、Menu 菜单**下次课讲12~18Widget组件Button按钮研究ButtonDemo

在activity_main.xml中这样加入Button<LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">……<Buttonandroid:id="@+id/button"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button"/></LinearLayout>

MainActivity中为Button的点击事件注册一个监听器publicclassMainActivityextendsActivity{

privateButtonbutton;

@Override

protectedvoidonCreate(BundlesavedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

button=(Button)findViewById(R.id.button);

button.setOnClickListener(newOnClickListener(){

@Override

publicvoidonClick(Viewv){

//在此处添加逻辑

}

});

}}TextView文本视图研究TextViewDemo<LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/text_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="ThisisTextView"/></LinearLayout>EditText文本框在activity_main.xml中这样加入EditText<LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">……<EditTextandroid:id="@+id/edit_text"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout>可以给TextView添加提示;

android:hint="Typesomethinghere"

也可以让多行显示

android:maxLines="2"CheckBox复选框在activity_main.xml中这样加入CheckBox<CheckBoxandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="苹果"android:id="@+id/cbB"android:layout_below="@+id/cbA"android:layout_alignParentLeft="true"android:layout_alignParentStart="true"/>在MainActivity中为CheckBox添加事件cb1=(CheckBox)findViewById(R.id.cbA);cb1.setOnCheckedChangeListener(newView.onCheckedChanged(){ Toast.makeText(MainActivity.this,"已选中CheckBox", Toast.LENGTH_SHORT).show(); });RadioButton单选按钮在activity_main.xml中这样加入RadioButton<RadioGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/radioGroup"android:layout_below="@+id/btnSubmit"android:layout_alignParentLeft="true"android:layout_alignParentStart="true"android:clickable="false"><RadioButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="windows"android:id="@+id/rbA"android:checked="true"/> ...</RadioGroup>在MainActivity中添加如下代码

rg=(RadioGroup)findViewById(R.id.radioGroup);rb=newRadioButton[]{(RadioButton)findViewById(R.id.rbA),(RadioButton)findViewById(R.id.rbB),(RadioButton)findViewById(R.id.rbC),(RadioButton)findViewById(R.id.rbD)};btnSubmit=(Button)findViewById(R.id.btnSubmit);btnSubmit.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){for(inti=0;i<rb.length;i++){if(rb[i].isChecked()){Toast.makeText(MainActivity.this,rb[i].getText().toString(),Toast.LENGTH_SHORT).show();break;}}}});完成单选框显示，我们需要使用到RadioGroup和RadioButton(单选框)，RadioGroup用于对单选框进行分组，相同组内的单选框只有一个单选框能被选中。(例子代码请见下方备注栏)RadioGroup.check(R.id.dotNet);将id名为dotNet的单选框设置成选中状态。(RadioButton)findViewById(radioGroup.getCheckedRadioButtonId());//获取被选中的单选框。RadioButton.getText();//获取单选框的值调用setOnCheckedChangeListener()方法，处理单选框被选择事件，把RadioGroup.OnCheckedChangeListener实例作为参数传入Spinner下拉菜单

Spinner.getItemAtPosition(Spinner.getSelectedItemPosition());获取下拉列表框的值 调用setOnItemSelectedListener()方法，处理下拉列表框被选择事件，把AdapterView.OnItemSelectedListener实例作为参数传入<!--定义了一个Spinner组件，指定显示该Spinner组件的数组--> <Spinner android:layout_width="match_parent" android:layout_height="wrap_content" android:entries="@array/books" android:prompt="@string/tip"/> <Spinner android:id="@+id/spinner" android:layout_width="match_parent" android:layout_height="wrap_content" android:prompt="@string/tip"/><!--Spinner组件的数组资源文件--><?xmlversion="1.0"encoding="utf-8"?><resources> <string-arrayname="books"> <item>疯狂Java讲义</item> <item>疯狂Ajax讲义</item> <item>疯狂XML讲义</item> </string-array></resources>在MainActivity中使用ArrayAdapter为Apinner添加选项publicvoidonCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //获取界面布局文件中的Spinner组件 spinner=(Spinner)findViewById(R.id.spinner); String[]arr={"孙悟空","猪八戒","唐僧"}; //创建ArrayAdapter对象 ArrayAdapter<String>adapter=newArrayAdapter<String>(this, android.R.layout.simple_list_item_multiple_choice,arr); //为Spinner设置Adapter spinner.setAdapter(adapter); }日期时间选取器Time/DatePickerDatePicker示例代码

btnChooseDate=(Button)findViewById(R.id.btnChooseDate);btnChooseDate.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){//新建一个日期选择器newDatePickerDialog(MainActivity.this,newDatePickerDialog.OnDateSetListener(){@OverridepublicvoidonDateSet(DatePickerdatePicker,inti,inti1,inti2){Log.d("选择的日期是:",i+"-"+(i1+1)+"-"+i2);btnChooseDate.setText(String.format("%d-%d-%d",i,i1+1,i2));}},2015,7,4).show();}});TimePicker示例代码btnChooseTime=(Button)findViewById(R.id.btnChooseTime);btnChooseTime.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){//新建一个时间选择器newTimePickerDialog(MainActivity.this,newTimePickerDialog.OnTimeSetListener(){@OverridepublicvoidonTimeSet(TimePickertimePicker,inti,inti1){Log.d("选择的时间是:",i+":"+i1);btnChooseTime.setText(String.format("%02d:%02d",i,i1));}},0,0,true).show();}});ScrollView可滚动视图<?xmlversion="1.0"encoding="utf-8"?><!--定义ScrollView，为里面的组件添加垂直滚动条--><ScrollViewxmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"><!--定义HorizontalScrollView，为里面的组件添加水平滚动条--> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content"><LinearLayoutandroid:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> !--省略多个TextView组件--> ...</LinearLayout></HorizontalScrollView></ScrollView>ImageView图片视图 <!--定义显示图片整体的ImageView--> <ImageViewandroid:id="@+id/image1" android:layout_width="wrap_content" android:layout_height="280dp" android:src="@drawable/shuangta" android:scaleType="fitCenter"/> <!--定义显示图片局部细节的ImageView--> <ImageViewandroid:id="@+id/image2" android:layout_width="120dp" android:layout_height="120dp" android:background="#00f" android:layout_margin="10dp"/>ImageButton图片按钮<Buttonandroid:text="无9切图"android:background="@drawable/btn_bg"android:layout_width="match_parent"android:layout_height="wrap_content"/><Buttonandroid:text="有9切图"android:background="@drawable/btn_bg_9"android:layout_width="match_parent"android:layout_height="wrap_content"/>GridView网格视图<!--定义一个GridView组件--><GridView android:id="@+id/grid01" android:layout_width="match_parent" android:layout_height="wrap_content" android:horizontalSpacing="1pt" android:verticalSpacing="1pt" android:numColumns="4" android:gravity="center"/><!--定义一个ImageView组件--><ImageViewandroid:id="@+id/imageView" android:layout_width="240dp" android:layout_height="240dp" android:layout_gravity="center_horizontal"/> GridViewgrid; ImageViewimageView; int[]imageIds=newint[]{R.drawable.bomb5,R.drawable.bomb6,R.drawable.bomb7

,R.drawable.bomb8,R.drawable.bomb9,R.drawable.bomb10

,R.drawable.bomb11,R.drawable.bomb12,R.drawable.bomb13

,R.drawable.bomb14,R.drawable.bomb15,R.drawable.bomb16}; @Override publicvoidonCreate(BundlesavedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //创建一个List对象，List对象的元素是Map List<Map<String,Object>>listItems= newArrayList<Map<String,Object>>(); for(inti=0;i<imageIds.length;i++) { Map<String,Object>listItem=newHashMap<String,Object>(); listItem.put("image",imageIds[i]); listItems.add(listItem); } //获取显示图片的ImageView imageView=(