关闭

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

标签: androidlayoutbuttonencoding扩展import
1282人阅读 评论(4) 收藏 举报
分类:

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

范例说明

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

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

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

运行结果(见图4-7)

范例程序

  1. 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堆栈在一起,如此一来,不但同时具有背景图,还有按钮事件。

 

  1. <ImageButton 
  2.   android:id="@+id/myImageButton1" 
  3.   android:state_focused="true" 
  4.   android:layout_width="320px" 
  5.   android:layout_height="280px" 
  6.   android:layout_x="0px" 
  7.   android:layout_y="36px" 
  8. /> 

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:68792次
    • 积分:1096
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:12篇
    • 译文:0篇
    • 评论:19条
    文章分类
    最新评论