Android开发9：UI组件ImageView
版本：Android4.3 API18 学习整理：liuxinming
java代码
调试效果：
概述
ImageView继承自View组件，主要用于显示图片
任何Drawable对象都可使用ImageView来显示
例如图标。ImageView类可以加载各种来源的图片（如资源或图片库），需要计算图像的尺寸，比便它可以在其他布局中使用，并提供例如缩放和着色（渲染）各种显示选项。
从上面类图关系可以看出，ImageView派生了ImageButton、QuickContactBadge等组件
1、ImageButton：图片按钮
ImageButton派生了ZoomButton,代表放大，缩小两个按钮
android默认提供了：
btn_minus
btn_plus
两个Drawable资源，只要为ZommButton的android:src属性指定以上两个属性，即可实现 放大、缩小按钮。
2、QuickContactBadge：显示关联到特定联系人的图片
更多公共方法请参阅官方API
http://developer.android.com/reference/android/widget/ImageView.html
http://developer.android.com/reference/android/widget/ImageView.html
XML属性
| XML属性 | 相关方法 | 说明 | |||||||||||||||||||||||||||
| android:adjustViewBounds | setAdjustViewBounds(boolean) | 设置ImageView是否调整自己的边界来保持所显示图片的长宽比 | |||||||||||||||||||||||||||
| android:baseline | setBaseline(int) | 视图内基线的偏移量 | |||||||||||||||||||||||||||
| android:baselineAlignBottom | setBaselineAlignBottom(boolen) | ture=图像的视图将基线对齐于其底部边缘 | |||||||||||||||||||||||||||
| android:cropToPadding | setCropToPadding(boolean) | 如果将该属性设为true,该组件将会被裁剪到保留该ImageView的padding | |||||||||||||||||||||||||||
| adnroid:maxheight | setMaxHeight(int) | 设置ImageView的最大高度 为视图提供最大高度的可选参数。（译者注：单独使用无效，需要与setAdjustViewBounds一起使用。如果想设置图片固定大小，又想保持图片宽高比，需要如下设置： |
|||||||||||||||||||||||||||
| android:maxWidth | setMaxWidth(int) | 设置ImageView的最大宽度 | |||||||||||||||||||||||||||
| android:scaleType | setScaleType(ImageView.ScaleType) | 设置所显示的图片如何缩放或移动以适应ImageView的大小 控制为了使图片适合 ImageView 的大小，应该如何变更图片大小或移动图片。一定是下列常量之一：
|
|||||||||||||||||||||||||||
| android:src | setImageResource(int) | 设置ImageView所显示的Drawable对象的ID | |||||||||||||||||||||||||||
| android:tint | setColorFilter(int,PorterDuff.Mode) | 设置图像的着色颜色 |
奉上实例图片浏览
xml布局代码<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/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button01"
android:textSize="16sp"
/>
<Button android:id="@+id/button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button02"
android:textSize="16sp"
/>
<Button android:id="@+id/button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button03"
android:textSize="16sp"
/>
</LinearLayout>
<!-- 定义显示图片整体的ImageView -->
<ImageView android:id="@+id/image1"
android:layout_width="fill_parent"
android:layout_height="240px"
android:src="@drawable/one"
android:scaleType="fitCenter"
/>
<!-- 定义显示图片局部细节的 ImageView -->
<ImageView android:id="@+id/image2"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#00f"
android:layout_marginTop="100dp"
/>
</LinearLayout>
java代码
package com.example.android_imageview;
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.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
//定义一个访问图片的数组
int[] images = new int[]
{
R.drawable.one,
R.drawable.car,
R.drawable.weixin
};
//定义默认显示的图片
int currentImg = 0;
//定义图片的初始透明度
private int alpha = 255;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取增大透明度按钮对象
final Button plus = (Button) findViewById(R.id.button01);
//获取降低透明度按钮对象
final Button minus = (Button) findViewById(R.id.button02);
//获取下一张按钮对象
final Button next = (Button) findViewById(R.id.button03);
final ImageView image1 = (ImageView) findViewById(R.id.image1);
final ImageView image2 = (ImageView) findViewById(R.id.image2);
//定义查看下一张图片的监听器
next.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
//控制ImageView显示下一张
image1.setImageResource(images[++currentImg % images.length]);
}
});
//定义改变图片透明度的方法
OnClickListener listener = new OnClickListener()
{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(v == plus){
alpha +=20;
}
if(v == minus){
alpha -=20;
}
alpha = alpha>255 ? 255 :alpha;
alpha = alpha<=0 ? 0 : alpha;
//改变图片的透明度
image1.setAlpha(alpha);
}
};
//为增加透明度按钮添加监听事件
plus.setOnClickListener(listener);
//为降低透明度按钮添加监听事件
minus.setOnClickListener(listener);
/**
* Android的手势识别
* 为image1设置触摸监听器
*/
image1.setOnTouchListener(new OnTouchListener()
{
@Override
public boolean onTouch(View view, MotionEvent event) {
// TODO Auto-generated method stub
/**
* 使用BitmapDrawable解析图片
*/
BitmapDrawable bitmapDrawable = (BitmapDrawable) image1.getDrawable();
//获取第一个图片显示框中的位置(得到Bitmap)
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;
}
//显示图片的指定区域
//setImageBitmap()方法其实是调用了setImageDrawable()方法进行重绘。
image2.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));
image2.setAlpha(alpha);
//return false说明你还没消费onTouch事件，在执行完你onTouch里面的代码之后，onTouch事件并没有结束
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.main, menu);
return true;
}
}
调试效果：
实现功能：点击增大，降低来调整图片的透明度，点击“下一张”按钮 显示下一张图片
触摸到图片时，缩放显示(或者说放大)图片的这个范围区域
知识点：
setOnTouchListener(Android的手势识别,触摸监听器)
return false说明你还没消费onTouch事件，在执行完你onTouch里面的代码之后，onTouch事件并没有结束。就是会自动地执行Gallery这个view里onTouch代码（这个为默认).所以这就是为什么没增加你的处理的时候就只自动地调用Gallery的onTouch，若你在onTouch里面增加你的代码并且return false就会执行你的处理和默认的处理。
return true说明你已经消费完了onTouch事件，在执行完你的onTouch里面的代码之后，这个onTouch事件就结束了。也就是说不会再调用默认的onTouch事件了。在onTouch里面有很多种的处理比如move,down,up....，若你在move里面return false，那么接着的fling，up等后面的事件也不会处理的。
ImageView的setImageResoure()方法动态修改该ImageView所显示的图片
setAlpha()设置图片透明度
Bitmap部分代码
用于从源位图的触碰点 截取 源位图，并将截取部分显示在第二个ImageView中。此时Bitmap类，它是一个代表位图的类，调用它的CreateBitmap()静态方法即可截取位图的指定部分。
用于从源位图的触碰点 截取 源位图，并将截取部分显示在第二个ImageView中。此时Bitmap类，它是一个代表位图的类，调用它的CreateBitmap()静态方法即可截取位图的指定部分。
该方法返回截取区域生成的新位图