ImageView及其子类(一)

时间:2023-12-16 21:51:50

ImageView及其子类(一)

ImageView继承自View组件,它的主要功能是用于显示图片——实际上这个书法不太严谨因为他能显示的不仅是图片,任何Drawable对象都可以使用ImageView来显示。除此之外,ImageView还派生了ImageButton、ZoomButton等组件。

实例:图片浏览器

本例的图片浏览器可以改变所有查看图片的透明度,可以通过调用ImageView的setAlpha方法来实现。不仅如此,本图片浏览器还可以通过一个小区域来查看图片的原始大小,因此本例会定义两个ImageView,一个用于查看图片整体,一个用于查看图片局部的细节。

下面是本例的界面布局文件。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<!-- 三个按钮的定义 -->
<Button
android:id="@+id/plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="最大透明图" />
<Button
android:id="@+id/minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="最低透明图" />
<Button
android:id="@+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="下一张" />
</LinearLayout>
<!-- 定义显示图片整体的ImageView -->
<ImageView android:id="@+id/image1"
android:layout_width="fill_parent"
android:layout_height="240dp"
android:src="@drawable/shuangta"
android:scaleType="fitCenter"
/>
<!-- 定义显示图片局部细节的ImageView -->
<ImageView android:id="@+id/image2"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#00f"
android:layout_marginTop="10dp"
/>
</LinearLayout>

上面的布局文件中定义了两个ImageView,其中第一个ImageView指定了android:scaleType="fitCenter",这表明ImageView显示图片时会进行显示纵横比的缩放,并将缩放后的图片放在该ImageView的*。
     为了能动态改变图片的透明度,接下来需要为按钮编写事件监听器,当用户单击按钮时动态改变图片的Alpha值。为了能动态显示图片的局部细节,程序为第一个ImageView添加OnTouchListener监听器,用户在第一个ImageView上发生碰撞事件时,程序充原始图片中读取相应部分的图片,并将器显示在第二个ImageView中。下面是主程序的代码。

package org.crazyit.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.*;
import android.widget.*; public class ImageViewTest extends Activity {
//定义一个访问图片的数组
int[] images=new int[]{
R.drawable.lijiang,
R.drawable.qiao,
R.drawable.shuangta,
R.drawable.shui,
R.drawable.xiangbi};
//定义默认显示的图片
int currentImg=2;
//定义图片初始的透明度
int alpha=255;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.image_view_test);
final Button plus=(Button)findViewById(R.id.plus);
final Button minus=(Button)findViewById(R.id.minus);
final ImageView image1=(ImageView)findViewById(R.id.image1);
final ImageView image2=(ImageView)findViewById(R.id.image2);
final Button next=(Button)findViewById(R.id.next);
//定义查看下一张图片的监听器
next.setOnClickListener(new OnClickListener(){ @Override
public void onClick(View v) {
// TODO Auto-generated method stub
image1.setImageResource(images[++currentImg%images.length]);
} });
//定义改变图片透明度的方法
OnClickListener listener=new OnClickListener(){ @SuppressWarnings("deprecation")
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(v==plus)
{
alpha+=20;
}
else if(v==minus)
{
alpha-=20;
}
if(alpha>=255)
{
alpha=255;
}
if(alpha<=0)
{
alpha=0;
}
//改变图片的透明度
image1.setAlpha(alpha);
}
};
//为两个按钮添加监听器
plus.setOnClickListener(listener);
minus.setOnClickListener(listener);
image1.setOnTouchListener(new OnTouchListener(){ @SuppressWarnings("deprecation")
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub BitmapDrawable bitmapDrawable=(BitmapDrawable)image1.getDrawable();
//获取第一个图片显示框中的位图
Bitmap bitmap=bitmapDrawable.getBitmap();
//bitmap图片实际大小与第一个ImageView的缩放比例
double scale=bitmap.getWidth()/320.0;
//获取需要显示的图片开始点
int x=(int)(event.getX()*scale);
int y=(int)(event.getY()*scale);
if(x+120>bitmap.getWidth())
{
x=bitmap.getWidth()-120;
}
if(y+120>bitmap.getHeight())
{
y=bitmap.getHeight()-120;
}
//显示指定图片的指定区域
image2.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));
image2.setAlpha(alpha);
return false;
} });
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.image_view_test, menu);
return true;
} }

运行效果图如下:

ImageView及其子类(一)