用户人机界面可分为视图,视图容器,布局等。一个复杂的Android界面设计往往需要不同的组件组合才能实现,别介将介绍Android主要组件的特点及其功能。
1.TextView控件
TextView控件的使用格式:
<TextView
android:属性1="属性值1"
android:属性2="属性值2" />
TextView控件的属性
(1)android:id="@+id/当前控件的id"-----标示当前控件的id
(2)android:layout_width="属性值"-----标示当前控件的宽度
(3)android:layout_height="属性值"-----标示当前控件的高度
其中(2)(3)的属性值分别都有3个:fill_parent,match_parent,wrap_content;
fill_parent:表示整个屏幕的宽度或高度
match_parent:标示高度或者宽度与父元素相同
wrap_content:表示控件的宽度或高度随着控件内容的大小而改变
(4)android:text="@string/name"-----标示当前的TextView控件所要显示的内容
(5)android:textSize="属性值"-----标示当前的控件的文本内容的大小
(6)android:textColor="属性值(一般采用RGB颜色#******)"-----标示当前的控件的文本的颜色
......其它属性在之后再慢慢学习,再继续补充完善该文章
2.EditText控件
EditText控件的使用格式参照TextView
EditText控件的属性包含以上的TextView所列举的所有的属性,还有比较常用的特有属性
(1)android:hint="属性值"-----表示当前的输入框中的提示字符,当你输入新的字符时他会自动删除
3.ImageView控件
ImageView使用格式(同上,以下不在赘述)
ImageView属性(包含上述的大部分属性,下面列举特有的属性,下同)
(1)android:src="属性值(推荐以@drawable/name形式来设置属性值)"-----表示当前要显示的图片
(2)android:background="属性值(可以为图片也可以为颜色)"-----表示当前控件的背景图片或者背景颜色
4.Button与ImageButton控件
拥有ImageButton所不具有的属性
(1)android:text="属性值"-----用来显示当前按钮上的文本
还具有与ImageButton所共有的属性
(2)android:backgroundColor="颜色值"-----标示当前的按钮的背景颜色
ImageButton控件看还有特有的属性
(3)android:src="属性值"-----表示当前的控件上的图片,因为该控件本身是图片按钮。
在使用的时候需要在Activity中设置监听器OnClickListener
使用步骤:
step1:初始化控件
示例:Button bt = (Button)findViewById(R.id.button1);----findViewById返回的是一个View类,需要强制向下转型为Button(下同)
step2:配置监听器(方法后面介绍(共三种))
示例(匿名内部类):bt.setOnClickListener(new OnClickListener(){
public void onClick(){
//TODO
}
});
step3:在监听器中实现要实现的操作(step2中以实现)
5.AutoCompleteTextView与MultiAutoCompleteTextview
共同点:两个控件的功能都是实现输入文本的自动匹配
不同点:AutoCompleteTextView是单个文本的匹配,也就是说只能在文本框内输入一个内容
而MultiAutoCompleteTextView是多个输入的匹配,就是说当你输入一个字符串是可以进行匹配,输入结束后会添加一个
分隔符,然后可以继续接着输入下一个字符串,而且同样可以进行匹配.
需要设置的属性
(1)android:completionThreshold="属性值(int型)"-----表示在输入了"属性值"位个字符后开始匹配
在使用的时候需要设置适配器
使用步骤:
step1:初始化控件(同上)
step2:需要一个适配器,一般简单的使用ArrayAdapter适配器
step3:初始化数据资源,即设置一个数组预存储一些字符串用来和输入的字符串匹配
step4:将当前的控件与该适配器绑定
step5:设置分隔符
示例:
acTextView = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView1);
ArrayAdapter<String> adapter = /*第二步*/new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,/*第三步*/ res);
/*第四步*/
acTextView.setAdapter(adapter);
/*第五步(仅仅MultiAutoCompleteTextView需要)*/ macTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
6.ToggleButton
使用格式同上
属性(包含以上的通有属性)
(1)android:checked="true或false"-----标示当前控件是开还是关,具有开关两种状态,与其他Button的不同之处
(2)android:textOn="属性值(一般写为"开")"-----表示当前控件处于开(checked="true"时)所显示的文本
(3)android:textOff="属性值(一般写为"关")"-----表示当前控件处于关(checked="false"时)所显示的文本
使用时也需要监听器
7.CheckBox
使用格式同上
属性(包含以上的通有属性)
(1)android:checked=""-----意义同上述的一样,但只有选中或不选中一种状态
(2)android:text=""-----标示当前控件后面所显示的值
使用OnCheckedChangeListener监听器
8.RadioGroup与RadioButton
几乎同CheckBox类似
单不同的是Radio是单选框,也是使用OnCheckedChangeListener监听器
一般不单独使用RadioButton,而是将RadioButton放入RadioGroup中使用作为一组按钮.
上述1,2,3,4的演示代码,包含activity代码和xml代码activity代码package com.example.helloworldtext;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.Toast;public class MainActivity extends Activity implements OnClickListener{ public Button loginButton; private Button button2,button3,button4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* * 1.初始化当前所需要的控件 * 通过findViewById()方法初始化当前控件 * findViewById()方法返回的是View对象,需要向下转型为Button对象 * * 2.设置Button的监听器 */ loginButton = (Button)findViewById(R.id.button1); loginButton.setOnClickListener(new OnClickListener() { /* * 第一种方法:匿名内部类 */ @Override public void onClick(View arg0) { // TODO Auto-generated method stub System.out.println("我的Button被点击了"); } }); button2 = (Button)findViewById(R.id.button2); button3 = (Button)findViewById(R.id.button3); button4 = (Button)findViewById(R.id.button4); button2.setOnClickListener(new MyOnClickListener(){ @Override public void onClick(View arg0){ super.onClick(arg0); Toast.makeText(MainActivity.this, "button2 要执行的逻辑", 1).show(); } }); button3.setOnClickListener(new MyOnClickListener(){ @Override public void onClick(View arg0){ super.onClick(arg0); Toast.makeText(MainActivity.this, "button3 要执行的逻辑", 1).show(); } }); button4.setOnClickListener(this); } @Override public void onClick(View arg0) { // TODO Auto-generated method stub Log.i("tag", "第四种方式"); }}class MyOnClickListener implements OnClickListener{ @Override public void onClick(View arg0) { // TODO Auto-generated method stub Log.i("tag", "父类的onclick事件"); } }xml代码<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="@string/yourName" android:textColor="#00ff00" android:textSize="28sp" /> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/textView1" android:layout_toRightOf="@+id/textView1" android:ems="10" android:hint="@string/hintName" android:inputType="textPersonName" android:textSize="24sp" > <requestFocus /> </EditText> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/buttunName" android:background="#ff3300"/> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignLeft="@+id/button1" android:layout_alignParentBottom="true" android:text="按钮3" /> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/button3" android:layout_alignLeft="@+id/button3" android:text="按钮2" /> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/button1" android:layout_centerHorizontal="true" android:layout_marginTop="14dp" android:text="按钮4" /> <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignRight="@+id/editText1" android:layout_below="@+id/editText1" android:background="@drawable/ic_launcher" /> <!-- 实现文本的跑马灯效果 android:ellipsize="marquee" android:focusable="true" android:focusableInTouchMode="true" android:singleLine="true" --> <com.example.helloworldtext.MarQueeTextView android:id="@+id/textView2" android:ellipsize="marquee" android:focusable="true" android:focusableInTouchMode="true" android:singleLine="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageView1" android:layout_centerHorizontal="true" android:layout_marginTop="18dp" android:text="我是一个TextView,我是一个TextView,我是一个TextView" /> <com.example.helloworldtext.MarQueeTextView android:id="@+id/textView3" android:ellipsize="marquee" android:focusable="true" android:focusableInTouchMode="true" android:singleLine="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView2" android:layout_below="@+id/textView2" android:layout_marginTop="16dp" android:text="我是一个TextView,我是一个TextView,我是一个TextView" /></RelativeLayout>上述5的演示代码,包含activity代码和xml代码activity代码package com.example.demon1;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.widget.ArrayAdapter;import android.widget.AutoCompleteTextView;import android.widget.MultiAutoCompleteTextView;public class MainActivity extends Activity { private AutoCompleteTextView acTextView; private MultiAutoCompleteTextView macTextView; private String [] res = {"android1","android2","anroid3", "beijing1","beijing2","beijing3", "shanghai1","shanghai2","shnghai3"}; /* * 第一步:初始化控件 * 第二步:构造适配器 * 第三步:初始化数据源---用来与当前的输入相匹配 * 第四步:将适配器与当前的控件相绑定 */ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /*第一步*/ acTextView = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView1); ArrayAdapter<String> adapter = /*第二步*/new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,/*第三步*/ res); /*第四步*/ acTextView.setAdapter(adapter); /* * 第一步:初始化控件 * 第二步:需要一个适配器 * 第三步:初始化数据源与输入的数据相匹配 * 第四步:将当前控件与适配器绑定 * 第五步:设置分隔符 */ macTextView = (MultiAutoCompleteTextView)findViewById(R.id.multiAutoCompleteTextView1); macTextView.setAdapter(adapter); macTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer()); }}xml代码<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <AutoCompleteTextView android:id="@+id/autoCompleteTextView1" android:completionThreshold="3" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入查询单字符串" > <requestFocus /> </AutoCompleteTextView> <MultiAutoCompleteTextView android:id="@+id/multiAutoCompleteTextView1" android:completionThreshold="2" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="输入收件人" /></LinearLayout>上述6的演示代码,包含activity代码和xml代码activity代码package com.example.demo2;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.widget.CompoundButton;import android.widget.CompoundButton.OnCheckedChangeListener;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.ToggleButton;public class MainActivity extends Activity implements OnCheckedChangeListener{ private ToggleButton tb; private ImageView img; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* * 1.初始化控件 * 2.设置监听器 */ tb = (ToggleButton)findViewById(R.id.toggleButton1); img = (ImageView)findViewById(R.id.imageView1); tb.setOnCheckedChangeListener(this); } @Override public void onCheckedChanged(CompoundButton arg0, boolean arg1) { // TODO Auto-generated method stub img.setBackgroundResource(arg1?R.drawable.on:R.drawable.off); }}xml代码<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ToggleButton android:id="@+id/toggleButton1" android:textOff="关" android:textOn="开" android:layout_width="match_parent" android:layout_height="wrap_content" /> <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>上述7,8的演示代码,包含activity代码和xml代码activity代码package com.example.demon3;import android.os.Bundle;import android.app.Activity;import android.util.Log;import android.view.Menu;import android.widget.CheckBox;import android.widget.Checkable;import android.widget.CompoundButton;import android.widget.CompoundButton.OnCheckedChangeListener;import android.widget.RadioButton;import android.widget.RadioGroup;public class MainActivity extends Activity implements android.widget.RadioGroup.OnCheckedChangeListener{ private CheckBox check; private RadioGroup rg; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); check = (CheckBox)findViewById(R.id.checkBox1); check.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton arg0, boolean arg1) { // TODO Auto-generated method stub if(arg1){ Log.i("tag", "已婚"); } } }); rg = (RadioGroup)findViewById(R.id.radioGroup1); rg.setOnCheckedChangeListener(this); } @Override public void onCheckedChanged(RadioGroup arg0, int arg1) { // TODO Auto-generated method stub switch(arg1){ case R.id.radio0: Log.i("tag", "男"); break; case R.id.radio1: Log.i("tag","女"); break; } }}xml代码<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:text="已婚" /> <RadioGroup android:id="@+id/radioGroup1" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/radio0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="男" /> <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="女" /> </RadioGroup></LinearLayout>