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不相符！