Android入门笔记 - 界面开发 - RadioButton,CheckBox,Spinner,AutoCompleteTextView,DatePicker,TimePicker

好了,今天进入界面开发第二课,今天的内容是:

  • RadioButton :单选框
  • CheckBox :多选框
  • Spinner:下拉选择框
  • AutoCompleteTextView:带自动提示的输入框
  • DatePicker:日期选择器
  • TimePicker:时间选择器

好了,还是先贴代码,我的项目叫 demo_UI。

(1)res/layout/ 目录下的main_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <RadioGroup
                android:id="@+id/radiogroup"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFFF00FF" >

                <RadioButton
                    android:id="@+id/radiobtn1"
                    android:text="单选1" />

                <RadioButton
                    android:id="@+id/radiobtn2"
                    android:text="单选2" />
            </RadioGroup>

            <CheckBox
                android:id="@+id/check1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="多选1" />

            <CheckBox
                android:id="@+id/check2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="多选2" />

            <Spinner
                android:id="@+id/spinner"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <AutoCompleteTextView
                android:id="@+id/autocomplete"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="自动提示" />

            <DatePicker
                android:id="@+id/datepicker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TimePicker
                android:id="@+id/timepicker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/btn_datepicker_dialog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="DatePickerDialog" />

            <Button
                android:id="@+id/btn_timepicker_dialog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TimePickerDialog" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

(2)src/ 目录下的MainActivity.java 文件:

package com.example.demo_ui;

import java.util.Calendar;

import android.os.Bundle;
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.app.TimePickerDialog;
import android.app.TimePickerDialog.OnTimeSetListener;
import android.content.Context;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.DatePicker;
import android.widget.DatePicker.OnDateChangedListener;
import android.widget.TimePicker.OnTimeChangedListener;
import android.widget.MultiAutoCompleteTextView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TimePicker;
import android.widget.Toast;

public class MainActivity extends Activity {
	private Context mCtx;
	private RadioGroup rg;
	private RadioButton rb1;
	private RadioButton rb2;
	private CheckBox ck1;
	private CheckBox ck2;
	private Spinner spin;
	private AutoCompleteTextView auto;
	private DatePicker mDatePicker;
	private Calendar mCalendar;
	private TimePicker mTimePicker;
	private Button mDatePickerDialog;
	private Button mTimePickerDialog;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mCtx = this;
		
		rg = (RadioGroup) findViewById(R.id.radiogroup);
		rb1 = (RadioButton) findViewById(R.id.radiobtn1);
		rb2 = (RadioButton) findViewById(R.id.radiobtn2);
		ck1 = (CheckBox) findViewById(R.id.check1);
		ck2 = (CheckBox) findViewById(R.id.check2);
		spin = (Spinner) findViewById(R.id.spinner);
		auto = (AutoCompleteTextView) findViewById(R.id.autocomplete);
		// 单选框
		rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				if (checkedId == rb1.getId()) {
					showToast("one");
				} else if (checkedId == rb2.getId()) {
					showToast("two");
				}
			}
		});

		// 多选框
		ck1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(CompoundButton buttonView,
					boolean isChecked) {
				showToast("多选1" + isChecked);
			}
		});
		ck2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(CompoundButton buttonView,
					boolean isChecked) {
				showToast("多选2" + isChecked);
			}
		});

		// 下拉选择框
		ArrayAdapter<String> adapter;
		String[] data = new String[] { "O型血", "A型血", "B型血", "C型血" };
		adapter = new ArrayAdapter<String>(mCtx, R.layout.li,
				R.id.spiner_item_tv, data);
		spin.setAdapter(adapter);
		spin.setOnItemSelectedListener(new OnItemSelectedListener() {
			@Override
			public void onItemSelected(AdapterView<?> arg0, View arg1,
					int arg2, long arg3) {
				arg0.setVisibility(View.VISIBLE);
			}

			@Override
			public void onNothingSelected(AdapterView<?> arg0) {
			}
		});

		// 自动提示输入框
		String[] autoString = new String[] { "abc", "bcd", "abcd" };
		ArrayAdapter<String> auto_adapter = new ArrayAdapter<String>(mCtx,
				R.layout.simple_down_line, R.id.auto_item_tv, autoString);
		auto.setAdapter(auto_adapter);
		auto.setThreshold(1);
		
		// 日期选择
		mDatePicker = (DatePicker) findViewById(R.id.datepicker);
		mCalendar = Calendar.getInstance();
		mDatePicker.init(mCalendar.get(mCalendar.YEAR),
		mCalendar.get(mCalendar.MONTH),
		mCalendar.get(mCalendar.DAY_OF_MONTH), dateChange);

		// 时间选择
		mTimePicker = (TimePicker) findViewById(R.id.timepicker);
		mTimePicker.setCurrentHour(mCalendar.get(Calendar.HOUR_OF_DAY));
		mTimePicker.setCurrentMinute(mCalendar.get(Calendar.MINUTE));
		mTimePicker.setOnTimeChangedListener(timeChange);
		mTimePicker.setIs24HourView(true);
		
		 //日期选择对话框
		mDatePickerDialog = (Button) findViewById(R.id.btn_datepicker_dialog);
		mDatePickerDialog.setOnClickListener(new View.OnClickListener() {
			
		@Override
			 public void onClick(View v) {
				new DatePickerDialog(mCtx, dateset, 
						mCalendar.get(Calendar.YEAR), 
						mCalendar.get(Calendar.MONTH), 
						mCalendar.get(Calendar.DAY_OF_MONTH)).show();
			 }
		});
		
		 //时间选择对话框
 		mTimePickerDialog = (Button) findViewById(R.id.btn_timepicker_dialog);
		mTimePickerDialog.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				new TimePickerDialog(mCtx, timeset ,
						mCalendar.get(Calendar.HOUR_OF_DAY), 
						 mCalendar.get(Calendar.MINUTE), 
						true).show();
 			}
		});
		
	
 	}
	
	private OnDateSetListener dateset = new OnDateSetListener() {
		@Override
		public void onDateSet(DatePicker view, int year, int monthOfYear,
				int dayOfMonth) {
			showToast("year:"+year+"month:"+monthOfYear+"day:"+dayOfMonth);
		 }
	};
	
 	private OnTimeSetListener timeset = new OnTimeSetListener() {
		@Override
		public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
			showToast("hour:"+hourOfDay+"minute:"+minute);
		}
	};

	private OnTimeChangedListener timeChange = new OnTimeChangedListener() {
		@Override
 		public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
			showToast("hour:" + hourOfDay + "minute:" + minute);
		}
	};

	private OnDateChangedListener dateChange = new OnDateChangedListener() {

		@Override
		public void onDateChanged(DatePicker view, int year, int monthOfYear,
				int dayOfMonth) {
			 showToast("year:" + year + "month:" + monthOfYear + "day:"
					+ dayOfMonth);
		}
	};

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

 	private void showToast(String s) {
		Toast.makeText(mCtx, s, Toast.LENGTH_SHORT).show();
	}

}



好了开始讲解:


单选框:

配置:

            <RadioGroup
                android:id="@+id/radiogroup"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFFF00FF" >

                <RadioButton
                    android:id="@+id/radiobtn1"
                    android:text="单选1" />

                <RadioButton
                    android:id="@+id/radiobtn2"
                    android:text="单选2" />
            </RadioGroup>
以上是单选框的配置文件,其中单选框需要有一个 RadioGroup 包含要单选的 RadioButton ,确保Group中选中的Button只有一个。MainActivity 中怎么使用呢?

定义:

	private RadioGroup rg;
	private RadioButton rb1;
	private RadioButton rb2;
找到资源:

	rg = (RadioGroup) findViewById(R.id.radiogroup);
	rb1 = (RadioButton) findViewById(R.id.radiobtn1);
	rb2 = (RadioButton) findViewById(R.id.radiobtn2);
添加监听事件:

	rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			if (checkedId == rb1.getId()) {
				showToast("one");
			} else if (checkedId == rb2.getId()) {
				showToast("two");
			}
		}
	});
简单吧!这里要注意的是添加监听事件是对 Group添加, OnCheckedChangedListener 也很好理解,当改变选中按钮的时候触发。


复选框:

配置:

            <CheckBox
                android:id="@+id/check1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="多选1" />

            <CheckBox
                android:id="@+id/check2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="多选2" />
定义:

	private CheckBox ck1;
	private CheckBox ck2;
	ck1 = (CheckBox) findViewById(R.id.check1);
	ck2 = (CheckBox) findViewById(R.id.check2);
添加监听事件:

	ck1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
		@Override
		public void onCheckedChanged(CompoundButton buttonView,
				boolean isChecked) {
			showToast("多选1" + isChecked);
		}
	});
	ck2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
		@Override
		public void onCheckedChanged(CompoundButton buttonView,
				boolean isChecked) {
			showToast("多选2" + isChecked);
		}
	});
这里和单选框不一样哦,添加事件的对象是每一个多选框。


下拉选择框:

配置:

            <Spinner
                android:id="@+id/spinner"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

定义:

        private Spinner spin<pre name="code" class="java">	ArrayAdapter<String> adapter;
	String[] data = new String[] { "O型血", "A型血", "B型血", "C型血" };
	adapter = new ArrayAdapter<String>(mCtx, R.layout.li,
			R.id.spiner_item_tv, data);
	spin.setAdapter(adapter);

 

这里够着下拉选择框的时候我们看到了一个新东西 ArrayAdapter,这是一个简单的数组适配器,来看看它的构造:

adapter = new ArrayAdapter<String>(mCtx, R.layout.li,
		R.id.spiner_item_tv, data);
mCtx是上下文对象, R.layout.li 这是一个 layout/ 文件目录下的xml文件:layout/li.xml, R.id.spiner_item_tv 是里面TextView的id, data是我们要显示的数据。来看看layout/li.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/spiner_item_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="10dp" 
        />

</LinearLayout>
适配器是用来填充数据,意在通过配置适配器提高重用性。android中还有很多适配器:SimpleAdapter, BaseAdapter 等,后面我们来做讲解。

添加监听事件:

<pre name="code" class="java">	spin.setOnItemSelectedListener(new OnItemSelectedListener() {
		@Override
		public void onItemSelected(AdapterView<?> arg0, View arg1,
				int arg2, long arg3) {
			arg0.setVisibility(View.VISIBLE);
		}
		@Override
		public void onNothingSelected(AdapterView<?> arg0) {
		}
	});

 看名字就知道 当某个选项被选择时触发。 



日期选择器:

配置:

            <DatePicker
                android:id="@+id/datepicker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
定义:

	private DatePicker mDatePicker;
	mDatePicker = (DatePicker) findViewById(R.id.datepicker);
	Calendar mCalendar = Calendar.getInstance();
	mDatePicker.init(mCalendar.get(mCalendar.YEAR),
	mCalendar.get(mCalendar.MONTH),
	mCalendar.get(mCalendar.DAY_OF_MONTH), dateChange);
监听事件:

	private OnDateChangedListener dateChange = new OnDateChangedListener() {

		@Override
		public void onDateChanged(DatePicker view, int year, int monthOfYear,
				int dayOfMonth) {
			 showToast("year:" + year + "month:" + monthOfYear + "day:"
					+ dayOfMonth);
		}
	};
当日期选择改变的时候触发。


其他的实例这里就不做讲解了,我相信大家都能看懂。这些简单的控件知道会用就可以了,今天就到这里。






  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值