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

原创 2011年01月07日 16:52:00

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

超简单的数码相框制作

项目名称:数码相框(简单) 项目分类:嵌入式应用开发 PC机系统环境:ubuntu10.04 PC机Qt版本:QMake version 2.01a                 Using Qt ...
  • sen6123
  • sen6123
  • 2014年02月15日 16:44
  • 1311

linux设备驱动归纳总结(十二):简单的数码相框

http://blog.chinaunix.net/uid-25014876-id-116926.html 其实代码很简单,实现lcd驱动,使lcd能够显示图片,当按下按键后切换图片。 ...
  • haiyangwuxian
  • haiyangwuxian
  • 2017年02月10日 15:57
  • 226

linux应用项目(一)数码相框(2)数码相框之freetype实现矢量字体的显示

上一节我们通过点阵数组实现了字母的显示:http://blog.csdn.net/fengyuwuzu0519/article/details/72877318 现在我们通过freetype这个框架在...
  • fengyuwuzu0519
  • fengyuwuzu0519
  • 2017年06月07日 14:46
  • 657

linux应用项目(一)数码相框(1)数码相框之系统框架

项目说明: 数码相框项目:看着简单 涉及到的内容是很多的。 项目流程: 弄清需求设计框架编写代码测试 发展方向: 专家(某个问题专研深刻) 系统(设计框架功能) 弄清需求: (1)    上电...
  • fengyuwuzu0519
  • fengyuwuzu0519
  • 2017年06月06日 13:38
  • 500

微信相框plus详细体验

上一篇文章记忆的标签大概介绍了一下微信相框plus的功能,这里写一下详细的体验记录。购买方法微信相框plus现在是可以直接购买的(之前还需要先预约),你只需要关注一下“微信相框”的微信公众号,点击“立...
  • wangbaomi
  • wangbaomi
  • 2017年01月16日 11:36
  • 1403

堆栈的作用,应用和用途

堆栈本身有两重含义: 一、内存区域 一个由C/C++编译的程序占用的内存分为以下几个部分   1、栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等。其操作方式...
  • e421083458
  • e421083458
  • 2013年01月23日 16:25
  • 7482

专业词汇及解释(持续更新,自用)

1.元祖 元祖(Tuple)由不同元素组成,每个元素可以储存不同类型的数据,如字符串、数字或元祖本身。 元祖由不同元素组成,所有元素被包含在一个圆括号中。 元祖的创建 创建元祖时,可以...
  • wolf96
  • wolf96
  • 2014年11月11日 20:02
  • 2578

lucene4.7学习总结

花了一段时间学习lucene今天有时间把所学的写下来,网上有很多文章但大部分都是2.X和3.X版本的(不前最新版本4.9),希望这篇文章对自己和初学者有所帮助。    学习目录 (1)什么是lucen...
  • mdcmy
  • mdcmy
  • 2014年08月03日 16:12
  • 3757

linux应用项目(一)数码相框(2)数码相框之字符编码与字符的点阵显示

一、字符编码 为更好的存储和展示,于是出现了字符编码。下面来看一下字符编码的发展过程。分为三个阶段: 阶段1:ASCII码 欧美人发明,用一个字节来标志。也就是常说的ASCII码,由于英语中只有26个...
  • fengyuwuzu0519
  • fengyuwuzu0519
  • 2017年06月06日 14:09
  • 767

理解堆栈及其利用方法

下午详细膜拜了一浪大牛的《无符号和栈破坏情况下coredump的分析方法》, 此刻惊魂未定,激动不已, 既然谈到了堆栈, 就跟大家分享下我认识和理解的堆栈, 希望对大家有所帮助。     ...
  • a15874647
  • a15874647
  • 2014年12月04日 15:28
  • 1597
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:4.7 专业相框设计ImageView的堆栈应用
举报原因:
原因补充:

(最多只允许输入30个字)