4.7 专业相框设计ImageView的堆栈应用

4.7 专业相框设计ImageView的堆栈应用

范例说明

在设计此范例之前，必须先准备三张图片（两张外框图、一张内框图），将这三张图片放在res/drawable下面，在此使用的图片为PNG图形文件，而图案大小最好是已经调整成符合手机屏幕大小，或者依据手机的分辨率，动态调整ImageView的大小。稍后的范例将介绍如何调整ImageView的大小，这里就不赘述了。

准备好之后，开始做这个酷炫的专业相框应用程序，在Layout当中创建了两个ImageView，且以绝对坐标的方式"堆栈"在一起，在其下方放上两个按钮（Button），按钮的目的是为了要用来切换图片，创建完成后，要在Button事件里处理置换图片的动作。

程序目的为单击Button1、ImageView1会出现right的图片，单击Button2、ImageView1会出现left的图片，而ImageView2皆为固定不动（文件名叫oa），这个范例并不难，先来看看范例运行结果。

运行结果（见图4-7）

范例程序

src/irdc.ex04_07/EX04_07.java

此程序的关键所在就是getResources()方法，这个方法负责访问Resource ID，无论是访问资源里的图片文件、文字都要用到getResources()；在此使用getResources().getDrawable()来载入res/drawable里的图片文件，并将图片放置在ImageView当中。

package com.example.ex04_07;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class ex04_07 extends Activity {
private ImageView mImageView01;
private ImageView mImageView02;
private Button mButton01;
private Button mButton02;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

/*取得 Button、ImageView对象*/
mImageView01=(ImageView)findViewById(R.id.ImageView01);
mImageView02=(ImageView)findViewById(R.id.ImageView02);
mButton01=(Button)findViewById(R.id.Button01);
mButton02=(Button)findViewById(R.id.Button02);

/*设置ImageView背景图*/
mImageView01.setImageDrawable(getResources().
getDrawable(R.drawable.right));

mImageView02.setImageDrawable(getResources().
getDrawable(R.drawable.water));


/*用OnClickListener事件来启动*/
mButton01.setOnClickListener(new Button.OnClickListener()
{

public void onClick(View v) {
// TODO Auto-generated method stub

/*当启动后，ImageView立刻换背景图*/
mImageView01.setImageDrawable(getResources().
getDrawable(R.drawable.left));
}

});
mButton02.setOnClickListener(new Button.OnClickListener()
{

public void onClick(View v) {
// TODO Auto-generated method stub
mImageView01.setImageDrawable(getResources().
getDrawable(R.drawable.right));
}

});
}
}

res/layout/main.xml

创建两个ImageView，一个为外框、另一个为内框，需注意的是，图片需要做一个排序堆栈顺序，将前景图放在上方（以AbsoluteLayout），将背景图放在前景图的下方，这是最简单的堆栈顺序方法。

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

<AbsoluteLayout
android:id="@+id/AbsoluteLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<!--创建第一个ImageView (第二层图片)-->
<ImageView
android:id="@+id/ImageView01"
android:layout_x="0px"
android:layout_y="36px"
android:layout_width="240px"
android:layout_height="207px"
/>

<!--创建第二个ImageView (第一层图片)-->
<ImageView
android:id="@+id/ImageView02"
android:layout_x="74px"
android:layout_y="88px"
android:layout_width="92px"
android:layout_height="138px"
/>

<!--创建第一个Button -->
<Button
android:id="@+id/Button01"
android:layout_x="0px"
android:layout_y="250px"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="pic1"
/>

<!--创建第二个Button -->
<Button
android:id="@+id/Button02"
android:layout_x="200px"
android:layout_y="250px"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="pic2"
/>
</AbsoluteLayout>

扩展学习

学会ImageView之后，在扩展学习里，便可尝试着将两个ImageButton Widget堆栈在一起，如此一来，不但同时具有背景图，还有按钮事件。

<ImageButton
android:id="@+id/myImageButton1"
android:state_focused="true"
android:layout_width="320px"
android:layout_height="280px"
android:layout_x="0px"
android:layout_y="36px"
/>

接着，你不妨自由发挥。ImageButton的使用方法已经介绍过，而堆栈的技巧可参考这个范例程序，两者的差别在于只要单击图片，即可直接做换图的动作，不需要再单击面的Button做更换，需要注意的是图片大小要作调整，不然可能会与ImageButton不相符！