《Android开发基础教程》——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所示。

时间： 2024-02-29 07:35:00

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

《Android开发基础教程》——扩展练习

扩展练习Android开发基础教程1．利用ImageView显示书籍图片,点击下一张按钮依次显示下一张的书籍图片并在TextView组件上显示书籍的说明,如果图片已到最后一张,则循环到第一张. 2．使用Gallery组件显示书籍图片行,Gallery也可以循环显示,当在Gallery组件中选中指定的书籍图片,同时会在下方的ImageView组件显示完整的图片,并在TextView组件上显示书籍的说明.

《Android开发基础教程》——6.2节Gallery界面组件——画廊展示

6.2 Gallery界面组件--画廊展示 Android开发基础教程 Gallery组件的展示方式是将图片从左到右的方式排列,如同画廊放置作品一样.但是较为特殊的是Gallery组件支持手指左右拖曳滑动的效果,并且可以选择指定的图片,从界面布局来看是相当灵活而有用的组件. 6.2.1 Gallery语法示例与常用的属性 例如:我们要创建一个Gallery组件,名称为"Gallery01",Gallery组件和边界的距离是5dp,图片间的间隔是2dp,宽度填满整个屏幕,高度根据图片高度

《Android开发基础教程》——6.3节GridView界面组件——表格展示

6.3 GridView界面组件--表格展示 Android开发基础教程 GridView界面组件是在表格中放置图片进行展示,在设置时的重点是规定每一行的字段数,图片展示时会根据列自动折行显示. 6.3.1 GridView语法示例与常用的属性 例如:我们要创建一个名称为"GridView01"的GridView组件,每行有3张图片,Gallery组件和边界的距离是20dp,图片的水平和垂直间隔是6dp,宽度填满整个屏幕,高度根据图片高度调整. <GridView android

《Android开发基础教程》——导读

目 录 第6章 图片相关界面组件 第1章 敲开Android的开发大门第2章 Android,我来了第3章 认识基本的界面组件第4章 消息显示相关组件第5章 单选.复选和下拉列表第6章 图片相关界面组件6.1 ImageView界面组件--显示图像 6.2 Gallery界面组件--画廊展示 6.3 GridView界面组件--表格展示 扩展练习第7章 ListView界面组件第8章 菜单组件第9章 Intent的使用第10章 Activity的生命周期第11章 程序调试及代码段第12章 数据的

android开发基础教程—打电话发短信_Android

打电话发短信demo 复制代码 代码如下: public class MainActivity extends Activity { EditText mPhoneNum,mMessage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mPhoneNum=(Edit

android开发基础教程—打电话发短信

打电话发短信demo 复制代码 代码如下: public class MainActivity extends Activity { EditText mPhoneNum,mMessage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mPhoneNum=(Edit

android开发基础教程—文件存储功能实现_Android

文件存储: 复制代码 代码如下: public class MainActivity extends Activity { EditText mname, mage; TextView mtv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mname = (Edit

android开发基础教程—SharedPreferences读写_Android

复制代码 代码如下: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void onClick(View v) { switch (v.getId()) { ca

android开发基础教程—三种方式实现xml文件解析_Android

1.sax方式 复制代码 代码如下: /** * 使用sax解析 */ public class SaxParse{ /** * sax解析器 */ private SAXParser parser; public SaxParse(){ try { SAXParserFactory f = SAXParserFactory.newInstance(); parser = f.newSAXParser(); } catch (ParserConfigurationException e) { e