《Android开发基础教程》——6.1节ImageView界面组件——显示图像

本节书摘来自异步社区《Android开发基础教程》一书中的第6章，第6.1节ImageView界面组件——显示图像，作者邓文渊，更多章节内容可以访问云栖社区“异步社区”公众号查看

6.1 ImageView界面组件——显示图像Android开发基础教程ImageView界面组件主要用以显示图像，让显示画面更加美观和生动。

6.1.1 ImageView的语法与常用属性1．ImageView的语法在Andrioid程序中使用图像图片有以下几个注意事项。

（1）图像图片必须根据使用的分辨率，分别放置在、或中。但如果没有那么讲究，可以直接放置在的目录中。

（2）程序的图像文件格式可以使用png、jpg或gif，要注意的是文件命名时无论文件名或扩展名都必须使用小写字母，否则执行时会产生应用程序的错误。

ImageView界面组件的标准语法如下：

…其他属性/>例如：创建ImageView组件，名称为“imgPhoto”，图像的图片为“R.drawable.img01”，图片按原来的尺寸居中显示。

<ImageView android:id="@+id/imgPhoto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/img01" android:scaleType="fitCenter"/>

在程序中设置ImageView组件显示指定的图片，可以使用setImageResource()方法设置ImageView显示的图像。例如我们要指定名称为“imgPhoto”，图像的图片为“R.drawable.img01”，方式如下：

imgPhoto.setImageResource(R.drawable.img01);2．ImageView的常用属性属性名称

对应的xml程序代码

说 明

Src android:src

设置图片来源。图片放置在指定的文件夹后，系统会自动在资源类文件中注册，一般来源文件会由其中的R.darwable获取id

Scaletype android:scaleType

设置显示图片的缩放方式。以下是常用类型。 center 按尺寸居中显示 centerCrop 按比例扩大图片的尺寸居中显示，超过部分裁剪 centerInside 将图片的内容完整居中显示 fitCenter 按比例居中完整显示图片 fitEnd 按比例靠右或下完整显示图片 fitStart 按比例靠左或上完整显示图片 fixXY 不按比例按组件大小显示图片 matrix 根据matrix矩阵显示图片

3．在Eclipse项目中加入图片文件刚才曾说过Android图片的位置为目录，但是新的项目下默认并没有这个文件夹，所以我们必须先新增文件夹后再将图片放进去，具体步骤如下。

（1）在Eclipse中打开Package Explorer窗口，打开编辑的项目后，在文件夹右键单击，点击New/Folder，在对话框的Foldername中输入“drawable”后点击Finish按钮完成。

（2）在Windows资源管理器中选择要加入的图片文件后按Ctrl+C组合键复制，然后在Eclipse中刚新增的目录上右键单击Paste按钮，即可将选择的图片加入到drawable目录中。

如果用户是在Windows资源管理器下新增或删除图像文件，则必须在Eclipse中，再选择该项目并在主功能中使用File/Refresh更新资源类文件。

6.1.2 示例：图像浏览器利用ImageView显示图像，并可以点击上一张、下一张按钮显示其他的图像，如图6-1所示。

1．新建项目并完成布局配置新建项目，在中增加两个Button界面组件、一个ImageView界面组件，并设置相关属性如下：

<PhotoPlayer/res/layout/main.xml> <?xmlversion="1.0"encoding="utf-8"?> <LinearLayout <a>xmlns:android="http://schemas.android.com/apk/res/android"</a> android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btnPrev" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="上一张"/> <Button android:id="@+id/btnNext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="下一张"/> <ImageView android:id="@+id/imgPhoto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/img01" android:layout_gravity="center_horizontal" android:scaleType="fitCenter"/> </LinearLayout>

三个组件名称分别是btnPrev、btnNext、imgPhoto，imgPhoto默认的图像文件是“R.drawable. img01”，宽和高根据图片原来大小居中显示。

2．加入图片在项目目录下创建文件夹，并加入附书程序中所提供的原始图形文件～共6张，注意文件名必须使用小写字母。

3．加入执行的程序代码打开。程序中import包程序省略，程序中也加入了一些注释，帮助读者了解程序。

<PhotoPlayer/src/PhotoPlayer.com/PhotoPlayerActivity.java> …略 9public class PhotoPlayerActivity extends Activity{ 10//将所有的图片储存到数组中 11int[] imgId={R.drawable.img01,R.drawable.img02, R.drawable.img03,R.drawable.img04,R.drawable.img05, R.drawable.img06}; 12private Button btnPrev,btnNext; 13private ImageViewi mgPhoto; 14int p=0;//图片的索引(第几张图片) 15int count=imgId.length;//共有多少张图片 16/**Called when the activity is first created.*/ 17@Override 18public void onCreate(BundlesavedInstanceState){ 19super.onCreate(savedInstanceState); 20setContentView(R.layout.main); 21 22//获取资源文件中的界面组件 23btnPrev=(Button)findViewById(R.id.btnPrev); 24btnNext=(Button)findViewById(R.id.btnNext); 25imgPhoto=(ImageView)findViewById(R.id.imgPhoto); 26 27//设置button组件Click事件的listener 28btnPrev.setOnClickListener(btnPrevListener); 29btnNext.setOnClickListener(btnNextListener); 30} 32 33//定义btnPrev按钮的onClick()方法 34private Button.OnClickListenerbtnPrevListener= new Button.OnClickListener(){ 35public void onClick(View v){ 36p--; 37if(p<0) 38p=imgId.length-1; 39imgPhoto.setImageResource(imgId[p]); 40setTitle("第"+(p+1)+"/"+count); 41} 42}; 43//定义btnNext按钮的onClick()方法 44private Button.OnClickListenerbtnNextListener= new Button.OnClickListener(){ 45public void onClick(View v){ 46p++; 47if(p==count) 48p=0; 49imgPhoto.setImageResource(imgId[p]); 50setTitle("第"+(p+1)+"/"+count); 51} 52}; 53}

①声明全局变量：因为btnPrev、btnPrev和imgPhoto对象变量必须在不同的方法中存取，必须声明为全局变量。

第11行，将图像文件保存在imgId数组中，再通过数组来存取。

第14行，设置图片的索引p（第几张图片），初始值是0。

第15行，利用count记录共有多少张图片，imgId.length可获取数组的长度，本例是6。

②接着在onCreate方法中利用findViewById()获取的btnPrev、btnPrev和imgPhoto界面组件并保存到刚才声明的3个变量中。

③为按钮btnPrev单击事件设置监听器及触发时执行btnPrevListener自定义方法，btnNext单击事件设置监听器及触发时执行btnNextListener自定义方法。

④自定义btnPrevListener方法用来处理btnPrev的单击事件。单击“上一张”按钮，将p减1，并判断是否p<0，也就是目前显示的照片数如果是第一张，则将p的索引设为imgId.length-1跳到最后一张。第38行，因为是p图片的索引值，必须再减1作修正。第39行，imgPhoto.setImageResource (imgId[p])设置显示的图片。第40行，使用setTitle()在标题栏上显示目前图片是第几张，共几张的信息。

⑤自定义btnNextListener方法用来处理btnNext的单击事件。单击“下一张”按钮，将p加1，并判断是否p==count，也就是目前显示的照片数，如果是最后一张，则将p的索引设为0返回第一张。

保存项目后按Ctrl+F11组合键执行项目，单击上方的按钮来切换图片，在标题处会显示图片共几张，目前在第几张的消息，如图6-2所示。

相关资源：《Android应用开发揭秘》源码