Android程序开发范例宝典
上QQ阅读APP看书,第一时间看更新

第3章 Android常用组件应用

文本类组件的使用

按钮类组件的使用

选择类组件的使用

列表组件的使用

图形组件的使用

实例045 应用 TextView 显示多种样式的文本

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\045

实例说明

本实例主要实现为文本中的E-mail地址添加超链接、显示带图像的文本、显不同颜色的单行文本和多行文本。运行本实例,将显示图3.1所示的运行结果。

图3.1 应用TextView 显示多种样式的文本

技术要点

在Android中,TextView用于在屏幕上显示文本,这与Java中的文本框组件不同,它相当于Java中的标签,也就是JLable。需要说明的是,Android中的文本框组件可以显示单行文本,也可以显示多行文本,而且还可以显示带图像的文本。

在 Android 中,可以使用两种方法向屏幕中添加文本框,一种是通过在 XML 布局文件中使用<TextView>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<TextView>在XML布局文件中添加。在XML布局文件中添加文本框的基本语法格式如下:

<TextView

属性列表

/>

TextView支持的常用XML属性如表3.1所示。

表3.1 TextView支持的XML属性

续表

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,首先添加两个TextView组件,分别用来显示单行文本和多行文本,代码如下:

<TextView

android:id="@+id/tv1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:singleLine="true"

android:text="单行文本:在Android中,文本框使用TextView表示,用于在屏幕上显示文本"

android:textSize="14sp"

android:textColor="#00FF00"

/>

<TextView

android:id="@+id/tv2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="多行文本:在Android中,文本框使用TextView表示,用于在屏幕上显示文本"

android:textSize="14sp"

android:textColor="#00FF00"

/>

(2)在main.xml布局文件中添加一个TextView组件,通过设置其autoLink属性使其文本显示为E-mail格式,代码如下:

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="mingrisoft@mingrisoft.com"

android:autoLink="email"

android:height="50px"

/>

(3)在main.xml布局文件中添加一个TextView组件,通过设置其drawableTop属性为其添加一个图片,代码如下:

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="带图片的TextView"

android:drawableTop="@drawable/icon"

android:height="50px"

/>

(4)在main.xml布局文件中添加两个TextView组件,这两个TextView组件的文本显示样式将在java文件中进行设置,代码如下:

<TextView

android:id="@+id/tv3"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="16sp"

/>

<TextView

android:id="@+id/tv4"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="18sp"

/>

(5)打开MainActivity.java文件,在OnCreate方法中,首先使用findViewById方法找到id为tv3的组件,然后使用setText方法为该组件设置文本,在设置文本时,用到了HTML标记,代码如下:

TextView tView1=(TextView) findViewById(R.id.tv3);     //找到tv3组件

//使用HTML标记设置文本

tView1.setText(Html.fromHtml("大家好<font color=red>改变局部颜色</font>!"));

(6)在MainActivity.java文件的OnCreate方法中,使用findViewById方法找到id为tv4的组件,并使用SpannableStringBuilder对象的setSpan方法设置文本的显示样式,最后将要显示的文本通过setText方法显示在id为tv4的TextView组件中,代码如下:

String str="根据段落改变文本颜色!";           //定义要显示的字符串

TextView tView2=(TextView) findViewById(R.id.tv4);     //找到tv4组件

//创建SpannableStringBuilder对象

SpannableStringBuilder styleBuilder=new SpannableStringBuilder(str);

//使用SpannableStringBuilder对象的setSpan方法设置样式

styleBuilder.setSpan(new ForegroundColorSpan(Color.GREEN), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

styleBuilder.setSpan(new ForegroundColorSpan(Color.YELLOW), 4,6, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

styleBuilder.setSpan(new ForegroundColorSpan(Color.RED), 6, 11, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

tView2.setText(styleBuilder);               //为tv4组件设置文本

举一反三

根据本实例,读者可以开发以下程序。

将显示的文本设置为网站超链接形式。

实例046 使用EditText组件实现用户注册信息的输入

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\046

实例说明

本实例主要使用 EditText 组件实现用户注册信息的输入功能,运行本实例,将显示图3.2所示的运行结果。

图3.2 使用EditText 组件实现用户注册信息的输入

技术要点

在Android中,编辑框使用EditText表示,用于在屏幕上显示文本输入框,这与Java中的编辑框组件功能类似。需要说明的是,Android 中的编辑框组件可以输入单行文本,也可以输入多行文本,而且还可以输入指定格式的文本(例如,密码、电话号码、E-mail地址等)。

在 Android 中,可以使用两种方法向屏幕中添加编辑框,一种是通过在 XML 布局文件中使用<EditText>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<EditText>在XML布局文件中添加。在XML布局文件中添加编辑框的基本语法格式如下:

<EditText

属性列表

/>

由于EditText类是TextView的子类,所以表3.1中列出的XML属性同样适用于EditText组件。特别需要注意的是,android:inputType 属性,在 EditText 组件中,通过指定该属性可以帮助输入法显示合适的类型。例如,要添加一个只能显示电话号码的编辑器,可以将android:inputType属性设置为phone。

实现过程

修改新建项目的res/layout目录下的布局文件main.xml,为默认添加的垂直线性布局管理器<LinearLayout>设置背景,并为默认添加的TextView组件设置高度和对其中的E-mail格式的文本设置超链接,修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入用户名:"

android:textSize="12sp"

/>

<EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:inputType="text"

android:hint="请输入用户名"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入用户密码:"

android:textSize="12sp"

/>

<EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:inputType="textPassword"

android:hint="请输入用户密码"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入出生日期:"

android:textSize="12sp"

/>

<EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:inputType="date"

android:hint="请输入出生日期"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入手机号码:"

android:textSize="12sp"

/>

<EditText

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:maxLength="11"

android:inputType="phone"

android:hint="请输入手机号码"

android:drawableLeft="@drawable/icon"

/>

</LinearLayout>

举一反三

根据本实例,读者可以实现以下功能。

控制EditView中只允许输入汉字。

控制EditView中只允许输入日期。

实例047 为文本框组件添加滚动条

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\047

实例说明

本实例主要实现为显示公司简介的文本框添加垂直滚动条的功能,运行本实例,将显示图3.3所示的运行结果。

图3.3 为文本框组件添加滚动条

技术要点

滚动视图用ScrollView表示,用于为其他组件添加滚动条。在默认的情况下,当窗体中的内容比较多,而一屏显示不下时,超出的部分将不能被用户所看到,因为Android的布局管理器本身没有提供滚动屏幕的功能。如果要让其滚动,就需要使用滚动视图ScrollView,这样用户就可以通过滚动屏幕查看完整的内容了。

滚动视图是android.widget.FrameLayout(帧布局管理器)的子类。因此,在滚动视图中,可以添加任何想要放入其中的组件。但是,一个滚动视图中只能放置一个组件。如果想要放置多个,可以先放置一个布局管理器,再将要放置的其他组件放置到该布局管理器中。在滚动视图中,使用比较多的是线性布局管理器。

说明:滚动视图ScrollView 只支持垂直滚动。如果想要实现水平滚动条;可以使用水平滚动视图(HorizontalScrollView)来实现。

在Java代码中,通过new关键字创建滚动视图比较简单,只需要经过以下步骤即可实现。

(1)使用构造方法ScrollView(Context context)创建一个滚动视图。

(2)创建或者获取需要添加滚动条的组件,并应用addView()方法将其添加到滚动视图中。

(3)将滚动视图添加到整个布局管理器中,用于显示该滚动视图。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,并为默认添加的垂直线性布局管理器设置id属性,修改后的代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:id="@+id/ll"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

</LinearLayout>

(2)在MainActivity类的onCreate()方法中,首先获取布局文件中添加的线性布局管理器,然后创建一个滚动视图和一个用于显示公司简介的文本框对象,再将文本框对象添加到滚动视图中,并设置文本框中要显示的文本,最后将滚动视图添加到线性布局管理器中。具体代码如下:

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

LinearLayout ll= (LinearLayout) findViewById(R.id.ll);        //获取线性布局管理器

ScrollView scroller=newScrollView(MainActivity.this);       //创建一个滚动视图

TextView text=new TextView(MainActivity.this);          //创建一个文本框对象

text.setPadding(10,10,10,10);                 //设置内边距

text.setTextSize(25);                     //设置字体大小

scroller.addView(text);                    //将文本框对象添加到滚动视图中

text.setText("吉林省明日科技有限公司是一家以计算机软件技术为核心的高科技型企业,"+"公司创建于2000年12月,是专业的应用软件开发商和服务提供商。"+"多年来始终致力于行业管理软件开发、数字化出版物开发制作、计算机网络系统综合应用、"+"行业电子商务网站开发等,先后成功开发了涉及生产、管理、控制、仓储、物流、营销、"+"服务等领域的多种企业管理应用软件和应用平台。");//设置文本框中要显示的文本

//将滚动视图添加到线性布局管理器中ll.addView(scroller);

}

举一反三

根据本实例,读者可以实现以下功能。

为显示“备注”信息的文本框组件添加滚动条。

实例048 使用文本框控件记录历史查询记录

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\048

实例说明

本实例主要实现使用文本框控件记录历史查询记录的功能,运行本实例,将显示如图3.4所示的运行结果。

图3.4 使用文本框控件记录历史查询记录

技术要点

本实例实现时,主要用到了 SearchView 组件及其 setOnQueryTextListener 方法和onQueryTextSubmit方法,下面分别进行介绍。

SearchView是Android提供的一个搜索组件,其setOnQueryTextListener方法用来表示输入框文字的监听器,而onQueryTextSubmit方法则用来执行开始查询操作。

具体实现时,当使用SearchView组件查询时,使用文本框的getText方法获取查询内容,并且判断该内容是否为控件,如果不为空,则记录该查询内容,并且使用setText方法显示在文本框中。

实现过程

(1)新建一个Android项目,该项目的main布局文件中,为默认的TextView组件设置id属性和textSize属性,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/background"

android:orientation="vertical">

<TextView

android:id="@+id/history"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="20dp"/>

</LinearLayout>

(2)在res目录下创建一个menu文件夹,然后在其中创建一个actions.xml文件,用来存储查询动作视图项,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item

android:id="@+id/action_search"

android:actionViewClass="android.widget.SearchView"

android:icon="@android:drawable/ic_menu_search"

android:showAsAction="ifRoom"

android:title="@string/search">

</item>

<item

android:id="@+id/item1"

android:icon="@drawable/icon1"

android:showAsAction="ifRoom"

android:title="@string/item1">

</item>

<item

android:id="@+id/item2"

android:icon="@drawable/icon2"

android:showAsAction="ifRoom"

android:title="@string/item2">

</item>

<item

android:id="@+id/item3"

android:icon="@drawable/icon3"

android:showAsAction="ifRoom"

android:title="@string/item3">

</item>

</menu>

(3)Activity类中,首先重写onCreate()方法,该方法中获取布局文件中的TextView组件;然后重写 onCreateOptionsMenu方法,该方法中,获得 SearchView,然后处理提交查询事件,并显示在 TextView 组件中;最后重写 onOptionsItemSelected()方法,该方法中,弹出用户查询的数据。代码如下:

public class ActionViewActivity extends Activity {

private TextView history;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

history = (TextView) findViewById(R.id.history);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.actions, menu);

SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();

searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

@Override

public boolean onQueryTextSubmit(String query) {//处理提交查询事件

String result = history.getText().toString();

if (!query.isEmpty()) {

result+= query+"\n";

}

history.setText(result);

Toast.makeText(ActionViewActivity.this, "查询:"+query, Toast.LENGTH_LONG).show();

return true;

}

@Override

public boolean onQueryTextChange(String newText) {//处理查询文本修改事件

return true;

}

});

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

Toast.makeText(this, "选择:"+item.getTitle(), Toast.LENGTH_SHORT).show();

return true;

}

}

举一反三

根据本实例,读者可以实现以下功能。

在乐Phone系统中查看最近记录功能。

实例049 添加两个按钮并为其设置单击事件监听器

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\049

实例说明

本实例主要实现添加按钮和为其设置单击监听事件的功能。运行本实例,将显示图3.5 所示的运行结果,单击“按钮一”,将显示“按钮一的单击事件”提示信息,单击“按钮二”,将显示“按钮二的单击事件”提示信息。

图3.5 Button 按钮的单击事件

技术要点

在 Android 中,可以使用两种方法向屏幕中添加按钮,一种是通过在 XML 布局文件中使用<Button>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<Button>在XML布局文件中添加。在XML布局文件中添加普通按钮的基本格式如下:

<Button

android:text="显示文本"

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/>

在屏幕上添加按钮后,还需要为按钮添加单击事件监听,才能让按钮发挥其特有的用途。在Android中,提供了两种为按钮添加单击事件监听的方法,一种是在Java代码中完成,例如在Activity的onCreate()方法中完成,具体的代码如下:

import android.view.View.OnClickListener;

import android.widget.Button;

Button login=(Button)findViewById(R.id.login);//通过ID获取布局文件中添加的按钮

login.setOnClickListener(new OnClickListener() {//为按钮添加单击事件监听

@Override

public void onClick(View v) {

//编写要执行的动作代码

}

});

另一种是在Activity中编写一个包含一个View类型参数的方法,并且将要触发的动作代码放在该方法中,然后在布局文件中,通过android:onClick属性指定对应的方法名实现。例如,在Activity中编写了一个myClick()的方法,关键代码如下:

public void myClick(View view){

//编写要执行的动作代码

}

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,在其中添加两个Butotn组件btn1和btn2,并分别设置它们的文本为“按钮一”和“按钮二”,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

<Button

android:id="@+id/btn1"

android:text="按钮一"

android:layout_width="84dp"

android:layout_height="wrap_content"

/>

<Button

android:id="@+id/btn2"

android:layout_height="wrap_content"

android:text="按钮二"

android:layout_width="84dp"

/>

</LinearLayout>

(2)打开MainActivity.java文件,在OnCreate方法中,获取布局文件中的Button按钮,并分别为它们设置单击监听事件,代码如下:

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Button button1=(Button) findViewById(R.id.btn1);//获取布局文件中的btn1按钮

Button button2=(Button) findViewById(R.id.btn2);//获取布局文件中的btn2按钮

button1.setOnClickListener(listener);      //为btn1按钮添加监听事件

button2.setOnClickListener(listener);      //为btn2按钮添加监听事件

}

(3)上面的代码中用到了 listener 对象,该对象为 OnClickListener 类型,因此在 Activity中创建该对象,并重写其OnClick方法,在该方法中,根据单击的Button组件ID,弹出相应的信息提示框,代码如下:

private OnClickListener listener=new OnClickListener() {//创建监听事件

public void onClick(View v) {

Button btnButton=(Button) v;        //将View对象强制转换为Button对象

switch (btnButton.getId()) {        //获取Button对象的ID

caseR.id.btn1:             //如果是btn1按钮

Toast.makeText(MainActivity.this, "按钮一的单击事件", Toast.LENGTH_LONG).show();

break;

caseR.id.btn2:             //如果是btn2按钮

Toast.makeText(MainActivity.this, "按钮二的单击事件", Toast.LENGTH_SHORT).show();

break;

}

}

};

举一反三

根据本实例,读者可以开发以下程序。

随机添加多个按钮。

通过触发按钮的单击事件实现登录功能。

实例050 使用ImageButton组件实现图片按钮

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\050

实例说明

本实例主要使用 ImageButton 组件实现添加图片按钮的功能。运行本实例,将显示图3.6所示的运行结果。

图3.6 图片按钮的使用

技术要点

图片按钮与普通按钮的使用方法基本相同,只不过图片按钮使用ImageButton关键字定义,并且还可以为其指定android:src属性,该属性用于设置要显示的图片。在布局文件中,添加图片按钮的基本格式如下:

<ImageButton

android:id="@+id/imageButton1"

android:src="@drawable/图片文件名"

android:background="#000"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

</ImageButton>

实现过程

修改新建项目的res/layout目录下的布局文件main.xml,在其中添加一个ImageButton组件,并为其设置背景图片,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

<ImageButton

android:id="@+id/login"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/login"

android:background="#000"

/>

</LinearLayout>

举一反三

根据本实例,读者可以开发以下程序。

制作显示图片的“登录”按钮。

制作显示图片的“详细信息”按钮。

实例051 获取ToggleButton按钮上的当前文本

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\051

实例说明

本实例主要实现在Android程序中添加ToggleButton组件并获取其当前文本的功能。运行本实例,当用户单击ToggleButton按钮时,在弹出的对话框中显示当前ToggleButton按钮上的文本,如图3.7所示。

图3.7 获取ToggleButton 按钮上的当前文本

技术要点

ToggleButton组件是Android中提供的一种特殊的按钮控件,在Android中,可以使用两种方法向屏幕中添加ToggleButton组件,一种是通过在XML布局文件中使用<ToggleButton>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<ToggleButton>在XML布局文件中添加。在XML布局文件中添加编辑框的基本语法格式如下:

< ToggleButton

属性列表

/>

ToggleButton组件继承自Button,所以它支持Button组件提供的属性,同时,该组件还支持表3.2所示的XML属性。

表3.2 ToggleButton支持的XML属性

说明:在 Java 源文件中;开发人员可以使用 ToggleButton 对象的 getTextOn 方法获取ToggleButton组件选中时显示的文本;使用ToggleButton对象的getTextOff方法获取ToggleButton组件未选中时显示的文本;同理;可以使用ToggleButton对象的getText方法获取ToggleButton组件当前显示的文本。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,在其中添加一个ToggleButton组件,并分别设置其textOn属性和textOff属性为“开始”和“停止”,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

<ToggleButton

android:id="@+id/toggleButton1"

android:layout_width="178dp"

android:layout_height="wrap_content"

android:textOn="开始"

android:textOff="停止"

/>

</LinearLayout>

(2)打开MainActivity.java文件,首先根据id获取布局文件中的ToggleButton组件;然后为该组件设置单击监听事件,在监听事件中,实现在对话框中显示当前ToggleButton组件中文本的功能,代码如下:

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

//获取布局文件中的ToggleButton组件

ToggleButton tButton=(ToggleButton) findViewById(R.id.toggleButton1);

tButton.setOnClickListener(new OnClickListener() {    //设置监听事件

@Override

public void onClick(View v) {

//TODO Auto-generated method stub

ToggleButton tButton1=(ToggleButton) v;    //创建ToggleButton组件

//弹出当前ToggleButton组件的文本

Toast.makeText(MainActivity.this, tButton1.getText(), Toast.LENGTH_SHORT).show();

}

});

}

举一反三

根据本实例,读者可以开发以下程序。

在Android程序中实现“开始”/“停止”按钮。

实例052 使用AutoCompleteTextView组件实现自动提示功能

这是一个可以启发思维的实例

实例位置:光盘\mingrisoft\03\052

实例说明

本实例主要使用AutoCompleteTextView组件实现自动提示的功能。运行本实例,当在文本框中输入内容时,程序会自动在数据源中寻找是否有与输入相匹配的内容,如果有,则以列表形式显示出来,如图3.8所示。

图3.8 使用AutoCompleteTextView 组件实现自动提示功能

技术要点

AutoCompleteTextView组件是Android中提供的一个自动提示组件,类似于在“百度”中搜索内容时,当用户在搜索文本框中输入内容时,“百度”会自动提示很多与用户的输入接近的内容供选择。

在Android中,可以使用两种方法向屏幕中添加AutoCompleteTextView组件,一种是通过在XML布局文件中使用<AutoCompleteTextView>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<AutoCompleteTextView>在 XML 布局文件中添加。在XML布局文件中添加AutoCompleteTextView组件的基本语法格式如下:

<AutoCompleteTextView

属性列表

/>

AutoCompleteTextView组件继承自EditText,所以它支持EditText组件提供的属性,同时,该组件还支持表3.3所示的XML属性。

表3.3 AutoCompleteTextView支持的XML属性

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的垂直线性布局管理器<LinearLayout>修改为<RelativeLayout>布局管理器,然后在其中添加一个TextView组件,用来显示文本信息;添加一个AutoCompleteTextView组件,用来输入文本,并显示自动提示列表;添加一个Button组件,用来作为“搜索”按钮,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="10dp"

>

<TextView

android:id="@+id/tv"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入查询关键字"

android:textSize="24sp"

/>

<AutoCompleteTextView

android:id="@+id/actxt"

android:layout_below="@id/tv"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

<Button

android:layout_width="80dp"

android:layout_height="wrap_content"

android:layout_below="@id/actxt"

android:layout_alignParentRight="true"

android:text="搜索"

/>

</RelativeLayout>

(2)打开 MainActivity.java 文件,首先定义一个静态字符串数组,用来存储数据源;然后在OnCreate方法中,通过setAdapter方法为AutoCompleteTextView组件设置ArrayAdapter数据源,代码如下:

public class MainActivity extends Activity {

private static final String[] autoInfo=new String[]

{"明日科技","C#编程词典","C#从入门到精通","Android手机","Android操作系统","Android实例","Android项目"};                        //定义字符串数组

/** Called when the activity is first created.*/

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_dropdown_item_1line,autoInfo);//创建ArrayAdapter对象,并以下拉列表形式进行显示

//找到布局文件中的AutoCompleteTextView组件

AutoCompleteTextView actxTextView=(AutoCompleteTextView) findViewById(R.id.actxt);

actxTextView.setAdapter(adapter);       //设置数据源

}

}

举一反三

根据本实例,读者可以开发以下程序。

制作搜索引擎程序中的搜索框。

用户名记忆输入框。

实例053 添加选择性别的单选按钮

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\053

实例说明

本实例主要实现在屏幕上添加选择性别的单选按钮组的功能。运行本实例,将显示图3.9所示的运行结果。

图3.9 添加选择性别的单选按钮

技术要点

在默认的情况下,单选按钮显示一个圆形图标,并且在该图标旁边放置一些说明性文字,而在程序中,一般将多个单选按钮放置在按钮组中,使这些单选按钮表现出某种功能,当用户选中某个单选按钮后,按钮组中的其他单选按钮将被自动取消选取状态。在Android中,单选按钮使用RadioButton表示,而RadioButton类又是Button的子类,所以单选按钮可以直接使用Button支持的各种属性。

在 Android 中,可以使用两种方法向屏幕中添加单选按钮,一种是通过在 XML 布局文件中使用<RadioButton>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<RadioButton>在XML布局文件中添加。在XML布局文件中添加单选按钮的基本格式如下:

<RadioButton

android:text="显示文本"

android:id="@+id/ID号"

android:checked="true|false"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/>

RadioButton组件的android:checked属性用于指定选中状态,属性值为true时,表示选中,属性值为false时,表示不选中,默认为false。

通常情况下,RadioButton组件需要与RadioGroup组件一起使用,组成一个单选按钮组。在XML布局文件中,添加RadioGroup组件的基本格式如下:

<RadioGroup

android:id="@+id/radioGroup1"

android:orientation="horizontal"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<!--添加多个RadioButton组件-->

</RadioGroup>

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的垂直线性布局管理器设置为水平布局管理器,在该布局管理器中添加一个TextView、一个包含两个单选按钮的单选按钮组和一个“提交”按钮,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="性别:"

android:height="50px"/>

<RadioGroup

android:id="@+id/radioGroup1"

android:orientation="horizontal"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<RadioButton

android:layout_height="wrap_content"

android:id="@+id/radio0"

android:text="男"

android:layout_width="wrap_content"

android:checked="true"/>

<RadioButton

android:layout_height="wrap_content"

android:id="@+id/radio1"

android:text="女"

android:layout_width="wrap_content"/>

</RadioGroup>

<Button

android:text="提交"

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/>

</LinearLayout>

(2)在Activity的onCreate方法中,获取布局文件中的单选按钮组,然后为“提交”按钮添加监听事件,监听事件中获取选中的单选按钮的文本,具体代码如下:

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

final RadioGroup sex = (RadioGroup) findViewById(R.id.radioGroup1);//获取单选按钮组

//为单选按钮组添加事件监听

sex.setOnCheckedChangeListener(new OnCheckedChangeListener() {

@Override

public void onCheckedChanged(RadioGroup group, int checkedId) {

RadioButton r= (RadioButton) findViewById(checkedId);     //获取被选择的单选按钮

Log.i("单选按钮", "您的选择是:"+r.getText());

}

});

Button button= (Button) findViewById(R.id.button1);           //获取提交按钮

//为提交按钮添加单击事件监听

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

//通过for循环遍历单选按钮组

for (int i = 0; i < sex.getChildCount(); i++) {

RadioButton r = (RadioButton) sex.getChildAt(i);

if (r.isChecked()) {                 //判断单选按钮是否被选中

Log.i("单选按钮", "性别:"+r.getText());

break;                   //跳出for循环

}

}

}

});

}

举一反三

根据本实例,读者可以实现以下功能。

考试系统中的单选题答案按钮。

软件安装协议条款中的“我同意”单选按钮。

实例054 选择爱好的复选按钮组

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\054

实例说明

本实例实现在屏幕上添加选择爱好的复选按钮,并获取选择的值。运行本实例,将显示 3个用于选取爱好的复选按钮,当用户将其中的某几个复选框选中时,单击“提交”按钮,将在弹出的提示框中显示用户选中的信息,如图3.10所示。

图3.10 使用复选按钮实现用户爱好的选择

技术要点

在默认的情况下,复选按钮显示一个方块图标,并且在该图标旁边放置一些说明性文字。与单选按钮唯一不同的是复选按钮可以进行多选设置,每一个复选按钮都提供“选中”和“不选中”两种状态。在 Android 中,复选按钮使用 CheckBox 表示,而 CheckBox 类又是 Button的子类,所以复选按钮可以直接使用Button支持的各种属性。

在 Android 中,可以使用两种方法向屏幕中添加复选按钮,一种是通过在 XML 布局文件中使用<CheckBox>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<CheckBox>在XML布局文件中添加。在XML布局文件中添加复选按钮的基本格式如下:

<CheckBox android:text="显示文本"

android:id="@+id/ID号"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/>

由于复选框可以选中多项,所以为了确定用户是否选择了某一项,还需要为每一个选项添加setOnCheckedChangeListener事件监听。例如,要为id为like1的复选按钮添加状态改变事件监听,可以使用下面的代码:

final CheckBox like1=(CheckBox)findViewById(R.id.like1);   //根据id属性获取复选按钮

like1.setOnCheckedChangeListener(new OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if(like1.isChecked()){             //判断该复选按钮是否被选中

like1.getText();             //获取选中项的值

}

}

});

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,在默认的线性布局管理器中添加一个TextView、3个复选按钮和一个“提交”按钮,关键代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="爱好:"

android:width="50px"

android:gravity="right"

android:height="30px"/>

<CheckBox android:text="体育"

android:id="@+id/like1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<CheckBox android:text="音乐"

android:id="@+id/like2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<CheckBox android:text="美术"

android:id="@+id/like3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<Button

android:text="提交"

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

(2)在主活动中创建并创建一个 OnCheckedChangeListener 对象,在创建该对象时,重写onCheckedChanged()方法,当复选按钮被选中时,输出一条日志信息,显示被选中的复选按钮,具体代码如下:

//创建一个状态改变监听对象

private OnCheckedChangeListener checkBox_listener=new OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if(isChecked){                //判断复选按钮是否被选中

Log.i("复选按钮","选中了["+buttonView.getText().toString()+"]");

}

}

};

(3)在主活动的 onCreate()方法中获取添加的 3 个复选按钮,并为每个复选按钮添加状态改变事件监听,关键代码如下:

final CheckBox like1=(CheckBox)findViewById(R.id.like1);   //获取第1个复选按钮

final CheckBox like2=(CheckBox)findViewById(R.id.like2);   //获取第2个复选按钮

final CheckBox like3=(CheckBox)findViewById(R.id.like3);   //获取第3个复选按钮

like1.setOnCheckedChangeListener(checkBox_listener);     //为like1添加状态改变监听

like2.setOnCheckedChangeListener(checkBox_listener);     //为like2添加状态改变监听

like3.setOnCheckedChangeListener(checkBox_listener);     //为like3添加状态改变监听

(4)获取“提交”按钮,并为提交按钮添加单击事件监听,在该事件监听的onClick()方法中通过if语句获取被选中的复选按钮的值,并通过一个提示信息框显示,具体代码如下:

Button button=(Button) findViewById(R.id.button1);      //获取提交按钮

//为提交按钮添加单击事件监听

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

String like="";                //保存选中的值

if(like1.isChecked())             //当第一个复选按钮被选中

like+=like1.getText().toString()+"";

if(like2.isChecked())             //当第二个复选按钮被选中

like+=like2.getText().toString()+"";

if(like3.isChecked())             //当第三个复选按钮被选中

like+=like3.getText().toString()+"";

//显示被选中的复选按钮

Toast.makeText(MainActivity.this, like, Toast.LENGTH_SHORT).show();

}

});

举一反三

根据本实例,读者可以实现以下功能。

考试系统中的多选题答案按钮。

实例055 通过数组资源为ListView设置列表项

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\055

实例说明

本实例主要实现通过数组资源为ListView设置列表项的功能。运行本实例,将显示图3.11所示的列表视图。

图3.11 在布局文件中添加的列表视图

技术要点

列表视图是Android中最常用的一种视图组件,它以垂直列表的形式列出需要显示的列表项。例如,显示系统设置项或功能内容列表等。

直接使用ListView组件创建列表视图,可以有两种方式,一种是通过在XML布局文件中使用<ListView>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<ListView>在XML布局文件中添加。在XML布局文件中添加ListView的基本格式如下:

<ListView

属性列表

/>

ListView支持的常用XML属性如表3.4所示。

表3.4 ListView支持的XML属性

续表

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,并添加一个ListView组件,通过数组资源为其设置列表项,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ListView android:id="@+id/listView1"

android:entries="@array/ctype"

android:layout_height="wrap_content"

android:layout_width="match_parent"/>

</LinearLayout>

(2)在上面的代码中,使用了名称为 ctype 的数组资源,因此,需要在 res/value 目录的strings.xml资源文件中添加名称为ctype的字符串数组,关键代码如下:

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="hello">Hello World, Activity!</string>

<string name="app_name">Example</string>

<string-array name="ctype">

<item>C#编程词典</item>

<item>JAVA编程词典</item>

<item>VB编程词典</item>

<item>VC编程词典</item>

<item>ASP编程词典</item>

<item>Delphi编程词典</item>

<item>ASP.NET编程词典</item>

</string-array>

</resources>

举一反三

根据本实例,读者可以开发以下程序。

改变不可用时列表的颜色。

实现在ListView控件中的多选。

实例056 使用适配器为ListView设置列表项

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\056

实例说明

本实例主要实现在屏幕中添加列表视图,并通过适配器为列表设置列表项的功能。运行本实例,将显示图3.12所示的运行结果。

图3.12 使用适配器为ListView 设置列表项

技术要点

在使用列表视图时,重要的是如何设置选项内容。ListView如果在布局文件中没有为其指定要显示的列表项,可以通过为其设置 Adapter 来指定需要显示的列表项。通过 Adapter 来为ListView指定要显示的列表项,可以分为以下两个步骤。

(1)创建Adapter对象。对于纯文字的列表项,通常使用ArrayAdapter对象。创建ArrayAdapter对象通常可以有两种情况,一种是通过数组资源文件创建,另一种是通过在Java文件中使用字符串数组创建,它们的创建方式分别如下:

通过数组资源文件创建

通过数组资源文件创建适配器,需要使用ArrayAdapter类的createFromResource()方法,具体代码如下:

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource( this, R.array.ctype,android.R.layout.simple_list_item_checked);//创建一个适配器

通过在Java文件中使用字符串数组创建

通过在Java文件中使用字符串数组创建适配器,首先需要创建一个一维的字符串数组,用于保存要显示的列表项,然后使用ArrayAdapter 类的构造方法ArrayAdapter(Context context, int textViewResourceId, T[] objects)创建一个ArrayAdapter 类的对象,具体代码如下:

String[] ctype=new String[]{"身份证","学生证","军人证"};

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_checked,ctype);

这里需要注意的是,在创建ArrayAdapter对象时,需要指定列表项的外观形式。为ListView指定的外观形式通常有以下5种:

simple_list_item_1:每个列表项都是一个普通的文本。

simple_list_item_2:每个列表项都是一个普通的文本(字体略大)。

simple_list_item_checked:每个列表项都有一个已勾选的列表项。

simple_list_item_multiple_choice:每个列表项都是带多选框的文本。

simple_list_item_single_choice:每个列表项都是带单选按钮的文本。

(2)将创建的适配器对象与ListView相关联,可以通过ListView对象的setAdapter()方法实现,具体的代码如下:

listView.setAdapter(adapter);                      //将适配器与ListView关联

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,并添加一个ListView组件,添加ListView组件的布局代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ListView

android:id="@+id/listView1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:divider="@drawable/icon"

android:dividerHeight="3px"

/>

</LinearLayout>

(2)在主活动的 onCreate()方法中为 ListView组件创建并关联适配器。首先获取布局文件中添加的ListView,然后创建适配器,并将其与ListView相关联。关键代码如下:

ListView listView=(ListView) findViewById(R.id.listView1);//获取listView1组件

/****************创建用于为ListView指定列表项的适配器********************/

String[] ctype=new String[]{"C#编程词典","JAVA编程词典","VB编程词典","VC编程词典","ASP.NET编程词典"};

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_checked,ctype);

/***************************************************************************/

listView.setAdapter(adapter);               //将适配器与ListView关联

(3)为了在单击 ListView 的各列表项时,获取选择项的值,需要为 ListView 添加OnItemClickListener事件监听,具体代码如下:

listView.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View arg1, int pos, long id) {

String result = parent.getItemAtPosition(pos).toString();//获取选择项的值

Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();

}

});

举一反三

根据本实例,读者可以开发以下程序。

将数据库中的数据绑定到ListView列表中。

将XML文件中的数据绑定到ListView列表中。

实例057 应用ListView显示带头、脚视图的列表

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\057

实例说明

在实例 056 的基础上,开发一个显示带头、脚视图的 ListView 列表,运行效果如图3.13所示。

图3.13 应用ListView 显示带头、脚视图的列表

技术要点

本实例在为列表创建头、脚视图时,主要用到了 ListView 组件的 addHeaderView 方法和addFooterView方法,下面分别进行介绍。

addHeaderView方法用来在列表的头部添加一个固定的视图,语法如下:

public void addHeaderView (View v)

v:View对象,表示要添加的视图。

addFooterView方法用来在列表的尾部添加一个固定的视图,语法如下:

public void addFooterView (View v)

v:View对象,表示要添加的视图。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,并添加一个ListView组件,添加ListView组件的布局代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ListView android:id="@+id/listView1"

android:divider="@drawable/greendivider"

android:dividerHeight="3px"

android:footerDividersEnabled="false"

android:headerDividersEnabled="false"

android:layout_height="wrap_content"

android:layout_width="match_parent"/>

</LinearLayout>

(2)定义一个返回值类型为View的line方法,该方法主要用来为ImageView组件设置图片资源,并返回该ImageView组件,代码如下:

private View line() {

ImageView image=new ImageView(this);             //创建一个图像视图

image.setImageResource(R.drawable.line1);            //设置要显示的图片

return image;

}

(3)在主活动的 onCreate()方法中为 ListView组件创建并关联适配器。首先获取布局文件中添加的ListView,并使用ListView组件的addHeaderView方法和addFooterView方法为列表添加头、脚视图;然后创建适配器,并将其与ListView相关联。代码如下:

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

final ListView listView=(ListView)findViewById(R.id.listView1);

listView.addHeaderView(line());                //设置header view

/****************创建用于为ListView指定列表项的适配器********************/

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.ctype,android.R.layout.simple_list_item_checked);//创建一个适配器

/***************************************************************************/

listView.setAdapter(adapter);          //将适配器与ListView关联

listView.addFooterView(line());                 //设置footer view

listView.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View arg1, int pos, long id) {

String result=parent.getItemAtPosition(pos).toString();    //获取选择项的值

Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();

}

});

}

举一反三

根据本实例,读者可以开发以下程序。

将ListView列表的头部设置为固定的20dp宽度、颜色为黄色。

实例058 通过继承ListActivity实现列表

这是一个可以启发思维的实例

实例位置:光盘\mingrisoft\03\058

实例说明

本实例主要通过在Activity中继承ListActivity实现在Android应用中创建列表的功能,实例运行结果如图3.14所示。

图3.14 通过继承ListActivity 实现列表

技术要点

如果程序的窗口仅仅需要显示一个列表,则可以直接让Activity继承ListActivity来实现。继承了 ListActivity 的类中无须调用 setContentView()方法来显示页面,而是可以直接为其设置适配器,从而显示一个列表。

实现过程

(1)将新建项目中的主活动MainActivity修改为继承ListActivity的类,并将默认的设置用户布局的代码删除,然后在 onCreate()方法中,创建作为列表项的 Adapter,并且使用setListAdapter()方法将其添加到列表中,关键代码如下:

public class MainActivity extends ListActivity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

/****************创建用于为ListView指定列表项的适配器********************/

String[] ctype=new String[]{"C#编程词典","JAVA编程词典","VB编程词典","VC编程词典","ASP.NET编程词典"};

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_single_choice,ctype);

/**********************************************************************************/

setListAdapter(adapter);                 //设置该窗口中显示的列表

}

}

(2)为了在单击 ListView 的各列表项时,获取选择项的值,需要重写父类中的onListItemClick()方法,具体代码如下:

@Override

protected void onListItemClick(ListView l, View v, int position, long id) {

super.onListItemClick(l, v, position, id);

String result= l.getItemAtPosition(position).toString();      //获取选择项的值

Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();

}

}

举一反三

根据本实例,读者可以开发以下程序。

制作显示每月收益的列表。

制作显示学历的列表。

实例059 显示列表选择框并获取其选择项

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\059

实例说明

本实例主要实现在屏幕中添加列表选择框,并获取列表选择框的选择项的功能。运行本实例,将显示图3.15所示的运行结果。

图3.15 显示列表选择框并获取其选择项

技术要点

Android中提供的Spinner列表选择框相当于在网页中常见的下拉列表框,通常用于提供一系列可选择的列表项,供用户进行选择,从而方便用户。

在 Android 中,可以使用两种方法向屏幕中添加列表选择框,一种是通过在 XML 布局文件中使用<Spinner>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法,也就是通过<Spinner>在XML布局文件中添加。在XML布局文件中添加列表选择框的基本格式如下:

<Spinner

android:prompt="@string/info"

android:entries="@array/数组名称"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:id="@+id/ID号"

/>

其中,android:entries为可选属性,用于指定列表项,如果在布局文件中不指定该属性,可以在Java代码中通过为其指定适配器的方式指定;android:prompt属性也是可选属性,用于指定列表选择框的标题。

说明:在Android 4.3中;采用默认的主题(Theme.Holo)时;android:prompt属性看不到实际的效果;但是如果采用Theme.Black时;就可以看到在弹出的下拉框上将显示该标题。

通常情况下,如果列表选择框中要显示的列表项是可知的,那么会将其保存在数组资源文件中,然后通过数组资源来为列表选择框指定列表项,这样,就可以在不编写Java代码的情况下实现一个列表选择框。

实现过程

(1)在布局文件中添加一个<Spinner>组件,并为其指定android:entries属性为字符串数组,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<Spinner

android:entries="@array/ctype"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:id="@+id/spinner1"/>

</LinearLayout>

(2)在上面的代码中,使用了名称为 ctype 的数组资源,因此,需要在 res/value 目录的strings.xml资源文件中添加名称为ctype的字符串数组,关键代码如下:

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="hello">Hello World, Activity!</string>

<string name="app_name">Example</string>

<string-array name="ctype">

<item>身份证</item>

<item>学生证</item>

<item>军人证</item>

<item>工作证</item>

<item>其他</item>

</string-array>

</resources>

(3)这样,就可以在屏幕中添加一个列表选择框,在屏幕上添加列表选择框后,可以使用列表选择框的getSelectedItem()方法获取列表选择框的选中值,例如,要获取列表选择框的选中项的值,可以使用下面的代码:

Spinner spinner= (Spinner) findViewById(R.id.spinner1);       //获取spinner1组件

spinner.getSelectedItem();

(4)添加列表选择框后,如果需要在用户选择不同的列表项后,执行相应的处理,则可以为该列表选择框添加OnItemSelectedListener事件监听。例如,为Spinner添加选择列表项事件监听,并在onItemSelected()方法中获取选择项的值输出到日志中,可以使用下面的代码:

//为选择列表框添加OnItemSelectedListener事件监听

spinner.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView<?> parent, View arg1,

int pos, long id) {

String result=parent.getItemAtPosition(pos).toString();   //获取选择项的值

Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();

}

@Override

public void onNothingSelected(AdapterView<?> arg0) {

}

});

举一反三

根据本实例,读者可以开发以下程序。

制作选择字体的列表框。

制作选择查询条件的列表框。

实例060 使用ImageView显示图像

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\060

实例说明

本实例主要实现使用ImageView组件显示图像的功能,运行本实例,将显示图3.16所示的运行结果。

图3.16 使用ImageView 组件显示图像

技术要点

ImageView也就是图像视图,用于在屏幕中显示任何的Drawable对象,通常用来显示图片。在 Android 中,可以使用两种方法向屏幕中添加图像视图,一种是通过在 XML 布局文件中使用<ImageView>标记添加,另一种是在Java文件中,通过new关键字创建出来。推荐采用第一种方法。

在使用ImageView组件显示图像时,通常可以将要显示的图片放置在res/drawable目录中,然后应用下面的代码将其显示在布局管理器中。

<ImageView

属性列表

/>

ImageView支持的常用XML属性如表3.5所示。

表3.5 ImageView支持的XML属性

实现过程

修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,然后在该线性布局管理器中添加一个ImageView组件,设置该组件的最大高度和宽度,并且保持纵横比缩放图片,最后为该图像着色,这里设置的是半透明的红色,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ImageView

android:src="@drawable/image"

android:id="@+id/imageView2"

android:maxWidth="300px"

android:maxHeight="200px"

android:adjustViewBounds="true"

android:tint="#77ff0000"

android:scaleType="fitEnd"

android:layout_margin="5px"

android:layout_height="wrap_content"

android:layout_width="wrap_content"/>

</LinearLayout>

举一反三

根据本实例,读者可以开发以下程序。

使用ImageView显示用户头像。

使用ImageView显示商品图片信息。

实例061 使用Gallery组件显示图片列表

这是一个可以提高基础技能的实例

实例位置:光盘\mingrisoft\03\061

实例说明

本实例主要用来在屏幕中添加画廊视图,实现浏览图片的功能。运行本实例,将显示图3.17所示的运行结果。

图3.17 使用Gallery 组件显示图片列表

技术要点

画廊视图使用Gallery表示,能够按水平方向显示内容,并且可用手指直接拖动图片移动,一般用来浏览图片,被选中的选项位于中间,并且可以响应事件显示信息。在使用画廊视图时,首先需要在屏幕上添加Gallery组件,通常使用<Gallery>标记在XML布局文件中添加。在XML布局文件中添加画廊视图的基本语法如下:

< Gallery

属性列表

/>

Gallery组件支持的XML属性如表3.6所示。

表3.6 Gallery支持的XML属性

使用画廊视图,需要使用Adapter提供要显示的数据,通常使用BaseAdapter类为Gallery组件提供数据。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,然后添加一个id属性为gallery1的Gallery组件,并设置其列表项之间的间距为5像素,以及未选中项的透明度。修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<Gallery

android:id="@+id/gallery1"

android:spacing="5px"

android:unselectedAlpha="0.6"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

(2)在主活动MainActivity中,定义一个用于保存要显示图片ID的数组(需要将要显示的图片复制到res/drawable文件夹中),关键代码如下:

private int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03, R.drawable.img04, R.drawable.img05 };

(3)在主活动的onCreate()方法中,获取在布局文件中添加的画廊视图,关键代码如下:

Gallery gallery= (Gallery) findViewById(R.id.gallery1);       //获取Gallery组件

(4)在res/values目录的strings.xml文件中,定义一个styleable对象,用于组合多个属性。这里只指定了一个系统自带的android:galleryItemBackground属性,用于设置各选项的背景,关键代码如下:

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="hello">Hello World, Activity!</string>

<string name="app_name">Example</string>

<declare-styleable name="Gallery">

<attr name="android:galleryItemBackground"/>

</declare-styleable>

</resources>

(5)创建BaseAdapter类的对象,并重写其中的getView()、getItemId()、getItem()和getCount()方法,其中最主要的是重写getView()方法来设置显示图片的格式,具体代码如下:

BaseAdapter adapter = new BaseAdapter() {

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageview;                 //声明ImageView的对象

if (convertView == null) {

imageview=new ImageView(MainActivity.this);      //创建ImageView的对象

imageview.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放方式

imageview.setLayoutParams(new Gallery.LayoutParams(180, 135));

TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);

imageview.setBackgroundResource(typedArray.getResourceId(R.styleable.Gallery_android_galleryItemBackground,0));

imageview.setPadding(5,0,5,0);            //设置ImageView的内边距

} else {

imageview = (ImageView) convertView;

}

imageview.setImageResource(imageId[position]);        //为ImageView设置要显示的图片

return imageview;                   //返回ImageView

}

/*

*功能:获得当前选项的ID

*/

@Override

public long getItemId(int position) {

return position;

}

/*

*功能:获得当前选项

*/

@Override

public Object getItem(int position) {

return position;

}

/*

*获得数量

*/

@Override

public int getCount() {

return imageId.length;

}

};

(6)将步骤(5)中创建的适配器与Gallery关联,并且让中间的图片选中,为了在用户单击某张图片时显示对应的位置,还需要为Gallery添加单击事件监听,具体代码如下:

gallery.setAdapter(adapter);               //将适配器与Gallery关联

gallery.setSelection(imageId.length/2);           //让中间的图片选中

gallery.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view,int position, long id) {

Toast.makeText(MainActivity.this,"您选择了第"+String.valueOf(position)+"张图片", Toast.LENGTH_SHORT).show();

}

});

举一反三

根据本实例,读者可以开发以下程序。

购物网站中显示商品图片列表。

实例062 使用ImageSwitcher组件实现简单图片查看器

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\062

实例说明

本实例主要使用ImageSwitcher组件实现类似Windows照片查看器的简单图片查看器。运行本实例,将显示图3.18所示的运行结果。

图3.18 使用ImageSwitcher 组件实现简单的图片查看器

技术要点

图像切换器使用ImageSwitcher表示,用于实现类似于Windows操作系统下的“Windows照片查看器”中的上一张、下一张切换图片的功能。在使用 ImageSwitcher 时,必须实现ViewSwitcher.ViewFactory接口,并通过 makeView()方法来创建用于显示图片的 ImageView 对象。makeView()方法将返回一个显示图片的ImageView。在使用ImageSwitcher组件时,还有一个方法非常重要,那就是setImageResource()方法,该方法用于指定要在ImageSwitcher中显示的图片资源。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认的TextView组件删除,然后添加两个按钮和一个图像切换器 ImageSwitcher,并设置图像切换器的布局方式为居中显示。关键代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical"

android:gravity="center">

<Button

android:text="上一张"

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<ImageSwitcher

android:id="@+id/imageSwitcher1"

android:layout_gravity="center"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<Button

android:text="下一张"

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

(2)在主活动MainActivity窗口中,首先声明并初始化一个保存要显示图像ID的数组,然后声明一个保存当前显示图像索引的变量,最后再声明一个图像切换器的对象,具体代码如下:

private int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03,R.drawable.img04,R.drawable.img05 };      //声明并初始化一个保存要显示图像ID的数组

private int index=0;             //当前显示图像的索引

//声明一个图像切换器对象private ImageSwitcher imageSwitcher;

(3)在主活动窗口的 onCreate()方法中,首先获取布局文件中添加的图像切换器,并为其设置淡入淡出的动画效果;然后为其设置一个ImageSwitcher.ViewFactory,并重写makeView()方法,在该方法中,设置图像的显示方式、大小等信息;最后为图像切换器设置默认显示的图像,关键代码如下:

imageSwitcher= (ImageSwitcher) findViewById(R.id.imageSwitcher1);         //获取图像切换器

//设置动画效果

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));//设置淡入动画

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));//设置淡出动画

imageSwitcher.setFactory(new ViewFactory() {

@Override

public View makeView() {

ImageView imageView = new ImageView(MainActivity.this);//创建ImageView类的对象

imageView.setAdjustViewBounds(true);      //将AdjustViewBounds属性设置为true

//设置保持纵横比居中缩放图像

imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

//设置图像的宽度和高度

imageView.setLayoutParams(new ImageSwitcher.LayoutParams(240, 180));

return imageView;              //返回imageView对象

}

});

imageSwitcher.setImageResource(imageId[index]);       //显示默认的图片

说明:在上面的代码中;使用ImageSwitcher类的父类ViewAnimator的setInAnimation()方法和 setOutAnimation()方法用于为图像切换器设置动画效果;调用其父类 ViewSwitcher 的setFactory()方法用于指定视图切换工厂;其参数为ViewSwitcher.ViewFactory类型的对象。

(4)获取用于控制显示图片的“上一张”和“下一张”按钮,并分别为其添加单击事件监听,在重写的onClick()方法中改变图像切换器中显示的图片,关键代码如下:

Button up= (Button) findViewById(R.id.button1);       //获取“上一张”按钮

Button down= (Button) findViewById(R.id.button2);      //获取“下一张”按钮

up.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

if (index > 0) {

index--;                //index的值-1

} else {

index = imageId.length-1;

}

imageSwitcher.setImageResource(imageId[index]);  //显示当前图片

}

});

down.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

if (index < imageId.length-1) {

index++;                //index的值+1

} else {

index = 0;

}

imageSwitcher.setImageResource(imageId[index]);  //显示当前图片

}

});

举一反三

根据本实例,读者可以实现以下功能。

以分组的形式浏览图片。

实例063 改进后的图片查看器

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\063

实例说明

将实例062中的“上一张”按钮和“下一张”按钮换成漂亮的图片,让整个图片查看器看起来更美观,运行效果如图3.19所示。

图3.19 改进后的图片查看器

技术要点

本实例实现时主要用到了 ImageSwitcher 组件,关于使用该组件实现查看图片的步骤,请参见实例062的技术要点。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认的TextView组件删除,然后添加ImageButton组件和一个图像切换器ImageSwitcher,并设置图像切换器的布局方式为居中显示。关键代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/llayout"

android:gravity="center"

>

<ImageButton

android:id="@+id/ibutton1"

android:src="@drawable/left"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<ImageSwitcher

android:id="@+id/imageSwitcher1"

android:layout_gravity="center"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<ImageButton

android:src="@drawable/right"

android:id="@+id/ibutton2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

(2)在主活动MainActivity窗口中,首先声明并初始化一个保存要显示图像ID的数组,然后声明一个保存当前显示图像索引的变量,最后再声明一个图像切换器的对象,具体代码如下:

private int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03, R.drawable.img04, R.drawable.img05,R.drawable.img06, R.drawable.img07, R.drawable.img08,R.drawable.img09 };//声明并初始化一个保存要显示图像ID的数组

private int index = 0;//当前显示图像的索引

private ImageSwitcher imageSwitcher;//声明一个图像切换器对象

(3)在主活动窗口的 onCreate()方法中,首先获取布局文件中添加的图像切换器,并为其设置淡入淡出的动画效果;然后为其设置一个ImageSwitcher.ViewFactory,并重写makeView()方法,在该方法中,设置图像的显示方式、大小等信息;最后为图像切换器设置默认显示的图像,关键代码如下:

imageSwitcher= (ImageSwitcher) findViewById(R.id.imageSwitcher1);    //获取图像切换器

//设置动画效果

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));                 //设置淡入动画

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));                //设置淡出动画

imageSwitcher.setFactory(new ViewFactory() {

@Override

public View makeView() {

ImageView imageView=new ImageView(MainActivity.this);    //实例化一个ImageView类的对象

imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);   //设置保持纵横比居中缩放图像

imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

return imageView;                   //返回imageView对象

}

});

imageSwitcher.setImageResource(imageId[index]);            //显示默认的图片

(4)获取用于控制显示图片的 ImageButton 组件,并分别为它们添加单击监听事件,在重写的onClick()方法中改变图像切换器中显示的图片,关键代码如下:

ImageButton up= (ImageButton) findViewById(R.id.ibutton1);       //获取“上一张”按钮

ImageButton down= (ImageButton) findViewById(R.id.ibutton2);      //获取“下一张”按钮

up.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

if (index > 0) {

index--;

} else {

index = imageId.length-1;

}

imageSwitcher.setImageResource(imageId[index]);       //显示当前图片

}

});

down.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

if (index < imageId.length-1) {

index++;

} else {

index = 0;

}

imageSwitcher.setImageResource(imageId[index]);       //显示当前图片

}

});

举一反三

根据本实例,读者可以实现以下功能。

以幻灯片形式浏览图片。

实例064 通过GridView显示照片列表

这是一个可以启发思维的实例

实例位置:光盘\mingrisoft\03\064

实例说明

本实例主要实现在Android程序中使用GridView显示照片列表的功能,运行本实例,将显示图3.20所示的运行结果。

图3.20 通过GridView 显示的照片列表

技术要点

GridView网格视图是按照行、列分布的方式来显示多个组件的,通常用于显示图片或图标等。在使用网格视图时,首先需要在屏幕上添加 GridView 组件,通常使用<GridView>标记在XML布局文件中添加。在XML布局文件中添加网格视图的基本语法如下:

<GridView

属性列表

>

</GridView>

GridView组件支持的XML属性如表3.7所示。

表3.7 GridView支持的XML属性

GridView 与 ListView 类似,都需要通过 Adapter 来提供要显示的数据。在使用 GridView组件时,通常使用SimpleAdapter或者BaseAdapter类为GridView组件提供数据。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,然后添加一个id属性为gridView1的GridView组件,并设置其列数为4,也就是每行显示4张图片。修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/llayout"

>

<GridView android:id="@+id/gridView1"

android:layout_height="wrap_content"

android:layout_width="match_parent"

android:stretchMode="columnWidth"

android:numColumns="4"></GridView>

</LinearLayout>

(2)编写用于布局网格内容的XML布局文件items.xml。在该文件中,采用垂直线性布局,并在该布局管理器中添加一个ImageView组件和一个TextView组件,分别用于显示网格视图中的图片和说明文字,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/image"

android:paddingLeft="10px"

android:scaleType="fitCenter"

android:layout_height="wrap_content"

android:layout_width="wrap_content"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5px"

android:layout_gravity="center"

android:id="@+id/title"

/>

</LinearLayout>

(3)在主活动的 onCreate()方法中,首先获取布局文件中添加的 ListView组件,然后创建两个用于保存图片ID和说明文字的数组,并将这些图片ID和说明文字添加到List集合中,再创建一个SimpleAdapter简单适配器,最后将该适配器与GridView相关联,具体代码如下:

GridView gridview = (GridView) findViewById(R.id.gridView1);//获取GridView组件

int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03, R.drawable.img04, R.drawable.img05,R.drawable.img06, R.drawable.img07, R.drawable.img08,R.drawable.img09, R.drawable.img10, R.drawable.img11,R.drawable.img12, };//定义并初始化保存图片Id的数组

String[] title = new String[] {"花开富贵", "海天一色", "日出", "天路", "一枝独秀","云", "独占鳌头","蒲公英花","花团锦簇","争奇斗艳", "和谐", "林间小路"};//定义并初始化保存说明文字的数组

List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>();//创建一个list集合

//通过for循环将图片id和列表项文字放到Map中,并添加到list集合中

for (int i = 0; i < imageId.length; i++) {

Map<String, Object> map = new HashMap<String, Object>();

map.put("image", imageId[i]);

map.put("title", title[i]);

listItems.add(map);                   //将map对象添加到List集合中

}

SimpleAdapter adapter = new SimpleAdapter(this,listItems,R.layout.items,new String[] {"title", "image"},new int[] {R.id.title, R.id.image }

);                           //创建SimpleAdapter

//将适配器与GridView关联gridview.setAdapter(adapter);

举一反三

根据本实例,读者可以开发以下程序。

查看指定文件夹中所有图片的缩略图。

实例065 仿Windows 7图片预览窗格效果

这是一个可以启发思维的实例

实例位置:光盘\mingrisoft\03\065

实例说明

在Windows 7 操作系统的文件夹窗口中,提供了预览窗格效果。这时,当用户单击左侧列表中的指定文件(图片)时,在右侧的预览窗格中将显示该文件(图片)的预览效果。本实例将实现一个类似于Windows 7 提供的图片预览窗格效果,即在左侧显示图片的缩略图列表,在右侧显示图片的预览效果。单击缩略图中的任意一张图片,在右侧都将显示该图片的预览效果。运行本实例,将显示类似于Windows 7 提供的图片预览窗格效果,单击任意一张图片,可以在右侧显示该图片的预览效果,如图3.21所示。

图3.21 仿Windows 7 图片预览窗格效果

技术要点

本实例实现时,主要用到了GridView组件和ImageSwitcher组件,其中,关于GridView组件的详细讲解,请参见实例 064 的技术要点;关于 ImageSwitcher 组件的详细讲解,请参见实例062的技术要点。

实现过程

(1)在Eclipse中创建Android项目。

(2)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加垂直线性布局管理器修改为水平布局管理器,并将 TextView 组件删除,然后添加一个 GridView 组件和一个ImageSwitcher组件,并设置GridView组件的宽度和显示列数等。修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/llayout"

>

<GridView android:id="@+id/gridView1"

android:layout_height="match_parent"

android:layout_width="280px"

android:layout_marginTop="3px"

android:horizontalSpacing="3px"

android:verticalSpacing="3px"

android:numColumns="3"

/>

<!--添加一个图像切换器-->

<ImageSwitcher

android:id="@+id/imageSwitcher1"

android:padding="5px"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</LinearLayout>

(3)在主活动MainActivity中,定义一个用于保存要显示图片ID的数组(需要将要显示的图片复制到res/drawable文件夹中)和一个图像切换器对象,关键代码如下:

private int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03, R.drawable.img04, R.drawable.img05,R.drawable.img06, R.drawable.img07, R.drawable.img08,R.drawable.img09, R.drawable.img10, R.drawable.img11,R.drawable.img12, };//定义并初始化保存图片Id的数组

private ImageSwitcher imageSwitcher;              //声明一个图像切换器对象

(4)在主活动MainActivity的onCreate()方法中,首先获取布局文件中添加的图像切换器,并为其设置淡入淡出的动画效果,然后为其设置一个 ImageSwitcher.ViewFactory,并重写makeView()方法,最后为图像切换器设置默认显示的图像,关键代码如下:

imageSwitcher= (ImageSwitcher) findViewById(R.id.imageSwitcher1);  //获取图像切换器

//设置动画效果

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));              //设置淡入动画

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));              //设置淡出动画

imageSwitcher.setFactory(new ViewFactory() {

@Override

public View makeView() {

ImageView imageView = new ImageView(MainActivity.this);//实例化一个ImageView类的对象

imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);//设置保持纵横比居中缩放图像

imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

return imageView;                 //返回imageView对象

}

});

//设置默认显示的图像imageSwitcher.setImageResource(imageId[6]);

(5)获取布局文件中添加的GridView组件,具体代码如下:

GridView gridview= (GridView) findViewById(R.id.gridView1);    //获取GridView组件

(6)创建BaseAdapter类的对象,并重写其中的getView()、getItemId()、getItem()和getCount()方法,其中最主要的是重写getView()方法来设置显示图片的格式,具体代码如下:

BaseAdapter adapter=new BaseAdapter() {

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageview;               //声明ImageView的对象

if(convertView==null){

imageview=new ImageView(MainActivity.this);    //实例化ImageView的对象

/*************设置图像的宽度和高度******************/

imageview.setAdjustViewBounds(true);

imageview.setMaxWidth(110);

imageview.setMaxHeight(83);

/**************************************************/

imageview.setPadding(5,5,5,5);         //设置ImageView的内边距

}else{

imageview=(ImageView)convertView;

}

imageview.setImageResource(imageId[position]);      //为ImageView设置要显示的图片

return imageview;                 //返回ImageView

}

/*

*功能:获得当前选项的ID

*/

@Override

public long getItemId(int position) {

return position;

}

/*

*功能:获得当前选项

*/

@Override

public Object getItem(int position) {

return position;

}

/*

*获得数量

*/

@Override

public int getCount() {

return imageId.length;

}

};

(7)将步骤(6)中创建的适配器与GridView关联,并且为了在用户单击某张图片时,显示对应的位置,还需要为GridView添加单击事件监听器,具体代码如下:

gridview.setAdapter(adapter);                 //将适配器与GridView关联

gridview.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position,long id) {

imageSwitcher.setImageResource(imageId[position]);    //显示选中的图片

}

});

举一反三

根据本实例,读者可以实现以下功能。

随机浏览图片。

显示图片列表。

实例066 幻灯片式图片浏览器

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\066

实例说明

本实例主要应用画廊视图和图像切换器实现幻灯片式的图片浏览器。运行本实例,将显示图3.22所示的运行结果,单击某张图片,可以选中该图片,并且让其居中显示,也可以用手指拖动图片来移动图片,并且让选中的图片在上方显示。

图3.22 幻灯片式图片浏览器

技术要点

本实例实现时,主要用到了Gallery组件和ImageSwitcher组件,其中,关于Gallery组件的详细讲解,请参见实例 061 的技术要点;关于 ImageSwitcher 组件的详细讲解,请参见实例062的技术要点。

实现过程

(1)修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,并且为默认的线性布局管理器设置水平居中显示,然后添加一个图像切换器ImageSwitcher组件,并设置其顶部边距和底边距,最后再添加一个画廊视图Gallery组件,并设置其各选项的间距和未选中项的透明度。修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center_horizontal"

android:id="@+id/llayout"

>

<ImageSwitcher

android:id="@+id/imageSwitcher1"

android:layout_weight="2"

android:paddingTop="10dp"

android:paddingBottom="5dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

</ImageSwitcher>

<Gallery

android:id="@+id/gallery1"

android:spacing="5dp"

android:layout_weight="1"

android:unselectedAlpha="0.6"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

(2)在主活动MainActivity中,定义一个用于保存要显示图片ID的数组(需要将要显示的图片复制到res/drawable文件夹中)和一个用于显示原始尺寸的图像切换器,关键代码如下:

private int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03, R.drawable.img04, R.drawable.img05,R.drawable.img06, R.drawable.img07, R.drawable.img08,R.drawable.img09, R.drawable.img10, R.drawable.img11,R.drawable.img12, };         //定义并初始化保存图片Id的数组

private ImageSwitcher imageSwitcher;         //声明一个图像切换器对象

(3)在主活动的 onCreate()方法中,获取在布局文件中添加的画廊视图和图像切换器,关键代码如下:

Gallery gallery= (Gallery) findViewById(R.id.gallery1);          //获取Gallery组件

imageSwitcher= (ImageSwitcher) findViewById(R.id.imageSwitcher1);    //获取图像切换器

(4)为图像切换器设置淡入淡出的动画效果,然后为其设置一个 ImageSwitcher.ViewFactory,并重写makeView()方法,最后为图像切换器设置默认显示的图像,关键代码如下:

//设置动画效果

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));        //设置淡入动画

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));        //设置淡出动画

imageSwitcher.setFactory(new ViewFactory() {

@Override

public View makeView() {

ImageView imageView=new ImageView(MainActivity.this);    //实例化一个ImageView类的对象

imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);   //设置保持纵横比居中缩放图像

imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

return imageView;                   //返回imageView对象

}

});

(5)创建BaseAdapter类的对象,并重写其中的getView()、getItemId()、getItem()和getCount()方法,其中最主要的是重写getView()方法来设置显示图片的格式,具体代码如下:

BaseAdapter adapter = new BaseAdapter() {

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageview;                 //声明ImageView的对象

if (convertView == null) {

imageview=new ImageView(MainActivity.this);      //实例化ImageView的对象

imageview.setScaleType(ImageView.ScaleType.FIT_XY);   //设置缩放方式

imageview.setLayoutParams(newGallery.LayoutParams(180,135));

TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);

imageview.setBackgroundResource(typedArray.getResourceId(R.styleable.Gallery_android_galleryItemBackground,0));

imageview.setPadding(5,0,5,0);            //设置ImageView的内边距

} else {

imageview = (ImageView) convertView;

}

imageview.setImageResource(imageId[position]);        //为ImageView设置要显示的图片

return imageview;                   //返回ImageView

}

/*

*功能:获得当前选项的ID

*/

@Override

public long getItemId(int position) {

return position;

}

/*

*功能:获得当前选项

*/

@Override

public Object getItem(int position) {

return position;

}

/*

*获得数量

*/

@Override

public int getCount() {

return imageId.length;

}

};

(6)将步骤(5)中创建的适配器与Gallery关联,并且让中间的图片选中,为了将用户选择的图片显到上面的图像切换器中,还需要为Gallery添加OnItemSelectedListener事件监听器,在重写的onItemSelected()方法中,将选中的图片显示到图像切换器中,具体代码如下:

gallery.setAdapter(adapter);               //将适配器与Gallery关联

gallery.setSelection(imageId.length/2);           //让中间的图片选中

gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView<?> parent, View view,int position, long id) {

imageSwitcher.setImageResource(imageId[position]);//显示选中的图片

}

@Override

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

});

举一反三

根据本实例,读者可以实现以下功能。

以幻灯片形式浏览指定文件夹中的所有照片。

实例067 实现带图标的ListView列表

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\067

实例说明

在智能手机中,经常会应用到带图标的列表来显示允许操作的功能,本实例将应用ListView组件和SimpleAdapter适配器实现一个带图标的ListView列表,用于显示手机的常用功能。程序运行效果如图3.23所示。

图3.23 带图标的ListView 列表

技术要点

本实例实现的关键是:如何使用SimpleAdapter适配器为ListView组件设置列表项,关于该知识点的详细讲解,请参见实例056的技术要点。另外,还需要通过水平线性布局管理器设置列表项的图标和文字的位置,这里只需要将LinearLayout布局管理器的android:orientation属性设置为horizontal即可。

实现过程

(1)在Eclipse中创建Android项目,修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,然后添加一个id属性为listView1的ListView组件。修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ListView

android:id="@+id/listView1"

android:layout_height="wrap_content"

android:layout_width="match_parent"/>

</LinearLayout>

(2)编写用于布局列表项内容的XML布局文件items.xml,在该文件中,采用水平线性布局,并在该布局管理器中添加一个ImageView组件和一个TextView组件,分别用于显示列表项中的图标和文字,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/image"

android:paddingRight="10px"

android:paddingTop="20px"

android:paddingBottom="20px"

android:adjustViewBounds="true"

android:maxWidth="72px"

android:maxHeight="72px"

android:layout_height="wrap_content"

android:layout_width="wrap_content"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="10px"

android:layout_gravity="center"

android:id="@+id/title"

/>

</LinearLayout>

(3)在主活动的onCreate()方法中,首先获取布局文件中添加的ListView,然后创建两个用于保存列表项图片ID和文字的数组,并将这些图片ID和文字添加到List集合中,再创建一个SimpleAdapter简单适配器,最后将该适配器与ListView相关联,具体代码如下:

public class MainActivity extends Activity {

/** Called when the activity is first created.*/

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

ListView listview = (ListView) findViewById(R.id.listView1);//获取列表视图

int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03, R.drawable.img04, R.drawable.img05,R.drawable.img06, R.drawable.img07, R.drawable.img08 };//定义并初始化保存图片Id的数组

String[] title = new String[] {"保密设置", "安全", "系统设置", "上网", "我的文档","GPS导航", "我的音乐", "E-mail" };        //定义并初始化保存列表项文字的数组

List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>();//创建一个list集合

//通过for循环将图片id和列表项文字放到Map中,并添加到list集合中

for (int i = 0; i < imageId.length; i++) {

Map<String, Object> map = new HashMap<String, Object>();//实例化Map对象

map.put("image", imageId[i]);

map.put("title", title[i]);

//将map对象添加到List集合中listItems.add(map);

}

SimpleAdapter adapter = new SimpleAdapter(this, listItems,R.layout.items, new String[] {"title", "image"}, new int[] {R.id.title, R.id.image });//创建SimpleAdapter

listview.setAdapter(adapter);                //将适配器与ListView关联

}

}

说明:SimpleAdapter 类的构造方法 SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)中;第一个参数context用于指定关联SimpleAdapter运行的视图上下文;第二个参数data用于指定一个基于Map的列表;在该列表中的每个条目对应列表中的一行;第3个参数resource用于指定一个用于定义列表项目的视图布局文件的唯一标识;第4个参数from用于指定一个将被添加到Map上关联每一个项目的列名称的数组;第5个参数to用于指定一个与参数from显示列对应的视图id的数组。

举一反三

根据本实例,读者可以开发以下程序。

制作类似微信聊天界面的列表。

以列表形式显示商品信息。

实例068 实现图标在上、文字在下的ListView

这是一个可以提高分析能力的实例

实例位置:光盘\mingrisoft\03\068

实例说明

本实例主要实现一个图标在上、文字在下的 ListView 列表,运行本实例,将显示图3.24所示的运行结果。

图3.24 图标在上、文字在下的ListView

技术要点

本实例实现的关键是:如何使用SimpleAdapter适配器为ListView组件设置列表项,关于该知识点的详细讲解,请参见实例056的技术要点。另外,还需要通过垂直线性布局管理器设置列表项的图标和文字的位置,这里只需要将LinearLayout布局管理器的android:orientation属性设置为vertical即可。

实现过程

(1)在Eclipse中创建Android项目,修改新建项目的res/layout目录下的布局文件main.xml,将默认添加的TextView组件删除,然后添加一个id属性为listView1的ListView组件。修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ListView

android:id="@+id/listView1"

android:layout_height="wrap_content"

android:layout_width="match_parent"/>

</LinearLayout>

(2)编写用于布局列表项内容的XML布局文件items.xml,在该文件中,采用垂直线性布局,并在该布局管理器中添加一个ImageView组件和一个TextView组件,分别用于显示列表项中的图标和文字,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/image"

android:paddingRight="10px"

android:paddingTop="10px"

android:adjustViewBounds="true"

android:maxWidth="48px"

android:maxHeight="48px"

android:layout_height="wrap_content"

android:layout_width="wrap_content"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="3px"

android:id="@+id/title"

/>

</LinearLayout>

(3)在主活动的onCreate()方法中,首先获取布局文件中添加的ListView,然后创建两个用于保存列表项图片ID和文字的数组,并将这些图片ID和文字添加到List集合中,再创建一个SimpleAdapter简单适配器,最后将该适配器与ListView相关联,具体代码如下:

public class MainActivity extends Activity {

/** Called when the activity is first created.*/

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

ListView listview = (ListView) findViewById(R.id.listView1);//获取列表视图

int[] imageId = new int[] { R.drawable.img01, R.drawable.img02,R.drawable.img03, R.drawable.img04, R.drawable.img05,R.drawable.img06, R.drawable.img07, R.drawable.img08 };//定义并初始化保存图片Id的数组

String[] title = new String[] {"保密设置", "安全", "系统设置", "上网", "我的文档","GPS导航", "我的音乐", "E-mail"};//定义并初始化保存列表项文字的数组

List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>();//创建一个List集合

//通过for循环将图片id和列表项文字放到Map中,并添加到list集合中

for (int i = 0; i < imageId.length; i++) {

Map<String, Object> map = new HashMap<String, Object>();//实例化Map对象

map.put("image", imageId[i]);

map.put("title", title[i]);

listItems.add(map);//将map对象添加到List集合中

}

SimpleAdapter adapter = new SimpleAdapter(this, listItems,R.layout.items, new String[] {"title", "image"}, new int[] {R.id.title,R.id.image });         //创建SimpleAdapter

listview.setAdapter(adapter);                //将适配器与ListView关联

}

}

举一反三

根据本实例,读者可以开发以下程序。

以图标在上、文字在下的列表显示所有用户简要信息。

以图标在上、文字在下的列表显示商品简要信息。