用户
 找回密码
 注册会员
搜索

第十讲：用户界面 View（五）

[复制链接]
iyangxin
iyangxin 管理员 43390 楼主
跳转到指定楼层
发表于 2016-6-10 11:31:07
        
1335804081igg9Rnky.jpg

本讲内容：Spinner，AutoCompleteTextView，DatePicker，TimePicker
七、Spinner 下拉列表
spinner就相当于Html中的下拉列表框，在下面的例子里我们共同学习一下spinner的使用。在这一小节，让我们建一个小关于色彩的下拉列表，当某一个选项被选择时，弹出一个吐司消息。
1、建一个新的项目，打开res/values/strings.xml文件,写入如下代码：
[XML] 纯文本查看 复制代码
< ?xml version="1.0" encoding="utf-8"?>
<RESOURCES>
    <STRING name="app_name">MainHelloSpinner</STRING>
    <STRING name="color">选择色彩：</STRING>
    <STRING name="colors" -array>
        <ITEM>黑色 | Black</ITEM>
        <ITEM>蓝色 | Blue</ITEM>
        <ITEM>棕色 | Brown</ITEM>
        <ITEM>绿色 | Green</ITEM>
        <ITEM>灰色 | Grey</ITEM>
        <ITEM>粉色 | Pink</ITEM>
        <ITEM>紫色 | Purple</ITEM>
        <ITEM>红色 | Red</ITEM>
        <ITEM>白色 | White</ITEM>
        <ITEM>黄色 | Yellow</ITEM>
    </STRING>
</RESOURCES>

2、打开res/layout/main.xml 写入如下内容：
[XML] 纯文本查看 复制代码
< ?xml version="1.0" encoding="utf-8"?>
<LINEARLAYOUT android:layout_height="wrap_content" android:layout_width="fill_parent" android:padding="10dip" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
    <TEXTVIEW android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="@string/color" android:layout_marginTop="10dip" />
    <SPINNER android:layout_height="wrap_content" android:layout_width="fill_parent" android:prompt="@string/color" android:id="@+id/spinner" />
</LINEARLAYOUT>

3、打开MainHelloSpinner.java 写入下内容：
[Java] 纯文本查看 复制代码
package android.basic.lesson10;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainHelloSpinner extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        //找到Xml中定义的下拉列表
        Spinner spinner = (Spinner)findViewById(R.id.spinner);
        //准备一个数组适配器
        ArrayAdapter adapter = ArrayAdapter.createFromResource(
                this, R.array.colors, android.R.layout.simple_spinner_item);
        //设置下拉样式
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //为下拉列表设置适配器
        spinner.setAdapter(adapter);

        //定义子元素选择监听器
        OnItemSelectedListener oisl=  new OnItemSelectedListener() {

			@Override
			public void onItemSelected(AdapterView<?> parent, View view,
					int position, long id) {
	              Toast.makeText(MainHelloSpinner.this,"选择的色彩： " +
                  parent.getItemAtPosition(position).toString(), Toast.LENGTH_LONG).show();

			}

			@Override
			public void onNothingSelected(AdapterView<?> parent) {
			}
        };
        //为下拉列表绑定事件监听器
        spinner.setOnItemSelectedListener(oisl);
    }
}

4、运行程序：
1335804081hExPXrz3.png
1335804081qNmuL4AW.png
13358040811oyvurF8.png
八、AutoCompleteTextView 自动完成文本框
AutoCompleteTextView和EditText一样都可以输入文本。但它可以和适配器绑定，当用户输入两个及以上字符时，系统将根据适配器提供的内容，进行文本的自动匹配提示。这个Web开发中Ajax里的一个标志性的功能，现在被Android弄成了一个标准组件。下面我们通过一个例子来学习一下：
1、建一个新的项目，打开res/values/strings.xml文件,写入如下代码：
[XML] 纯文本查看 复制代码
< ?xml version="1.0" encoding="utf-8"?>
<RESOURCES>
    <STRING name="app_name">HelloAutoCompleteTextView</STRING>
        <STRING name="province" -array>
        <ITEM>shan dong</ITEM>
        <ITEM>jiang su</ITEM>
        <ITEM>an hui</ITEM>
        <ITEM>zhe jiang</ITEM>
        <ITEM>fu jian</ITEM>
        <ITEM>shang hai</ITEM>
        <ITEM>guang dong</ITEM>
        <ITEM>guang xi</ITEM>
        <ITEM>hai nan</ITEM>
        <ITEM>hu bei</ITEM>
        <ITEM>hu nan</ITEM>
        <ITEM>he nan</ITEM>
        <ITEM>jiang xi</ITEM>
        <ITEM>bei jing</ITEM>
        <ITEM>tian jin</ITEM>
        <ITEM>he bei</ITEM>
        <ITEM>shan xi</ITEM>
        <ITEM>nei meng gu</ITEM>
        <ITEM>ning xia</ITEM>
        <ITEM>xin jiang</ITEM>
        <ITEM>qing hai</ITEM>
        <ITEM>shan xi</ITEM>
        <ITEM>gan su</ITEM>
        <ITEM>si chuan</ITEM>
        <ITEM>yun nan</ITEM>
        <ITEM>gui zhou</ITEM>
        <ITEM>xi zang</ITEM>
        <ITEM>chong qing</ITEM>
        <ITEM>liao ning</ITEM>
        <ITEM>ji lin</ITEM>
        <ITEM>hei long jiang</ITEM>
        <ITEM>tai wan</ITEM>
        <ITEM>xiang guang</ITEM>
        <ITEM>ao men </ITEM>
        <ITEM>山东</ITEM>
        <ITEM>江苏</ITEM>
        <ITEM>安徽</ITEM>
        <ITEM>浙江</ITEM>
        <ITEM>福建</ITEM>
        <ITEM>上海</ITEM>
        <ITEM>广东</ITEM>
        <ITEM>广西</ITEM>
        <ITEM>海南</ITEM>
        <ITEM>湖北</ITEM>
        <ITEM>湖南</ITEM>
        <ITEM>河南</ITEM>
        <ITEM>江西</ITEM>
        <ITEM>北京</ITEM>
        <ITEM>天津</ITEM>
        <ITEM>河北</ITEM>
        <ITEM>山西</ITEM>
        <ITEM>内蒙古</ITEM>
        <ITEM>宁夏</ITEM>
        <ITEM>新疆</ITEM>
        <ITEM>青海</ITEM>
        <ITEM>陕西</ITEM>
        <ITEM>甘肃</ITEM>
        <ITEM>四川</ITEM>
        <ITEM>云南</ITEM>
        <ITEM>贵州</ITEM>
        <ITEM>西藏</ITEM>
        <ITEM>重庆</ITEM>
        <ITEM>辽宁</ITEM>
        <ITEM>吉林</ITEM>
        <ITEM>黑龙江</ITEM>
        <ITEM>台湾</ITEM>
        <ITEM>香港</ITEM>
        <ITEM>澳门</ITEM>
    </STRING>
</RESOURCES>

2、打开res/layout/main.xml 写入如下内容：
[XML] 纯文本查看 复制代码
< ?xml version="1.0" encoding="utf-8"?>
<LINEARLAYOUT android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
    <TEXTVIEW android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="省份：" />

    <AUTOCOMPLETETEXTVIEW android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/AutoCompleteTextView01" android:completionThreshold="1" android:hint="请输入省份">
    </AUTOCOMPLETETEXTVIEW>
</LINEARLAYOUT>
      
3、打开MainHelloAutoCompleteTextView.java 写入下内容：
[Java] 纯文本查看 复制代码
package android.basic.lesson10;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class MainHelloAutoCompleteTextView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        //定义数组
        String[] province = getResources().getStringArray(R.array.province);

        //定义数组适配器
        ArrayAdapter adapter = new ArrayAdapter(this, R.layout.list_item, province);

        //找到自动完成组件
        AutoCompleteTextView atv = (AutoCompleteTextView) findViewById(R.id.AutoCompleteTextView01);

        //为其设置适配器
        atv.setAdapter(adapter);

    }
}

4、运行程序，在英文输入法下输入”h”看看效果，再切换到中文输入法下输入”河”看看效果：
1335804081g1ezHd5I.png
1335804081sdE7zkdc.png
这里留意一下，android:completionThreshold=”1″ 属性设置了一个阀值，规定用户打了多少字符之后才出现自动提示，默认值是2，我们在这里改成了1。
九、DatePicker 日期选择控件 DatePickerDialog 日期选择对话框
日期选择的对话框漂亮，我们用一个例子演示一下：
1、main.xml的代码：
[XML] 纯文本查看 复制代码
< ?xml version="1.0" encoding="utf-8"?>
<LINEARLAYOUT android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
    <TEXTVIEW android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/dateDisplay" android:textSize="20sp">
     </TEXTVIEW>
    <BUTTON type=submit android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="改变日期" android:id="@+id/pickDate" android:textSize="20sp">
    </BUTTON>
</LINEARLAYOUT>

其中文本框用来显示时间，按钮为了触发日期选择对话框，当然用其他组件来触发日期选择对话框也是的。
2、java代码：
[Java] 纯文本查看 复制代码
package android.basic.lesson10;

import java.util.Calendar;

import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;

public class MainHelloDatePicker extends Activity {

	//准备公用属性
    private TextView dateDisplay;
    private Button pickDate;
    private int mYear;
    private int mMonth;
    private int mDay;

    //准备对话框Id
    static final int DATE_DIALOG_ID = 0;

    //准备日期设置监听器
    private OnDateSetListener dsl = new DatePickerDialog.OnDateSetListener(){

		@Override
		public void onDateSet(DatePicker view, int year, int monthOfYear,
				int dayOfMonth) {
			mYear =year;
			mMonth= monthOfYear;
			mDay= dayOfMonth;
			dateDisplay.setText(mYear+"-"+(mMonth+1)+"-"+mDay);
		}
    };

    //重写创建对话框方法
    @Override
	protected Dialog onCreateDialog(int id){
    	switch(id){
    	case DATE_DIALOG_ID:
    		//把Activity上下文、日期设置监听器、以及日期的年月日都作为参数传给那个新成立的对话框组件
    		return new DatePickerDialog(this, dsl, mYear, mMonth, mDay);
    	}
    	return null;
    }

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        //得到当前日期
        final Calendar c = Calendar.getInstance();
        mYear = c.get(Calendar.YEAR);
        mMonth = c.get(Calendar.MONTH);
        mDay = c.get(Calendar.DAY_OF_MONTH);

        //获取xml中的组件
        dateDisplay= (TextView)findViewById(R.id.dateDisplay);
        pickDate = (Button)findViewById(R.id.pickDate);

        //给日期显示组件一个初始值
        dateDisplay.setText(mYear+"-"+(mMonth+1)+"-"+mDay);

        //给按钮绑定点击监听器
        pickDate.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                showDialog(DATE_DIALOG_ID);
            }
        });
    }
}

3、运行程序
1335804081bgCIhEfk.png
1335804081Duf165DN.png
13358040810gSXO8WI.png
读者可以特别留意一下本节关于OnDateSetListener的代码，体会监听器的作用，有兴趣的同学可以看一下DatePickDialog和DatePick的源代码。
十、TimePicker 时间选择控件 和 TimePickerDialog 时间选择对话框
和上一小节的例子基本相同，就不举了。
本讲暂时就到这里。
        
使用道具 举报 回复
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

返回顶部