ImageView及其子类
ImageView及其子类
（1）ImageView继承自View组件，任何Drawable对象都可以用ImageView来显示，ImageView派生出来了ImageButton、ZoomButton等组件。
（2）ImageView支持的xml属性
android:adjustViewBounds ------->设置ImageView是否调整自己的边界来保持所显示图片的长宽比
android:cropToPadding -------->如果该属性设为true，该组件将会被裁剪到保留该ImageView的padding
android:maxHeight -------->设置ImageView的最大高度
android:maxWidth -------->设置ImageView的最大宽度
android:scaleType -------->设置所显示的图片是如何缩放或移动以适应ImageView的大小
android:src -------->设置ImageView所显示的Drawable对象的ID
---------------------》android:scaleType属性的设定值有：
matriX：使用matriX方式进行缩放
fitXY：对图片横向、纵向独立缩放，使得该图片完全适应该ImageView，图片的纵横比可能会改变
fitStart：保持纵横比缩放图片，直到图片能完全显示在ImageView中（图片较长的边长与ImageView相应的边长想等），缩放后将图片放在ImageView的左上角
fitCenter：保持纵横比缩放图片，直到图片能完全显示在ImageView中（图片较长的边长与ImageView相应的边长想等），缩放后将图片放在ImageView的中央
fitEnd：保持纵横比缩放图片，直到图片能完全显示在ImageView中（图片较长的边长与ImageView相应的边长想等），缩放后将图片放在ImageView的右下角
center：将图片放在ImageView的中间，不进行任何的缩放
centerCrop：保持纵横比来缩放图片，使得图片能完全覆盖ImageView，只要图片最短的边能显示出来即可
centerInside：保持纵横比来缩放图片，使得图片能完全显示在ImageView中
------实例一：图片浏览器
（1）main.xml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/test" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center"> <!-- 增大透明度 --> <Button android:id="@+id/high" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="增大透明度"/> <!-- 降低透明度 --> <Button android:id="@+id/low" 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 --> <!-- android:scaleType="fitCenter" 图片保持纵横比缩放，直到图片能完全显示imageview中，最后将图片放在imageview的中间 --> <ImageView android:id="@+id/image1" android:layout_width="fill_parent" android:layout_height="240dp" android:src="@drawable/dw1" 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>
（2）MainActivity.java文件
package com.yby.imageview; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; 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; /** * ImageView及其子类 * @author yby * */ public class MainActivity extends Activity{ /** * 实例：图片浏览器 * （1）可以通过增大透明度和降低透明度来查看图片的透明度 * （2）通过点击大图片上面的一个点，将点击触发点周围的图片截取出来显示在一个小区域中，可以查看图片的局部细节 */ //定义一个图片数组 private int[] images = new int[]{ R.drawable.dw1, R.drawable.dw2, R.drawable.dw3, R.drawable.dw4, R.drawable.dw5, R.drawable.dw6 }; //定义默认显示的图片 int currentImg = 2; //定义图片的初始透明度 private int alpha = 255; private Button high,low,next; private ImageView image1,image2; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.main); high = (Button) findViewById(R.id.high); low = (Button) findViewById(R.id.low); next = (Button) findViewById(R.id.next); image1 = (ImageView) findViewById(R.id.image1); image2 = (ImageView) findViewById(R.id.image2); //为点击next添加监听事件 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 == high){ alpha +=20; } if(v == low){ alpha -=20; } if(alpha >= 255){ alpha = 255; } if(alpha <= 0){ alpha = 0; } //改变图片的透明度 image1.setAlpha(alpha); } }; //为两个按钮添加监听器 high.setOnClickListener(listener); low.setOnClickListener(listener); //从第一张图片的触碰点开始截取，并将截取后的图片显示在第二个imageview中 image1.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub BitmapDrawable bd = (BitmapDrawable) image1.getDrawable(); //获取第一个图片显示框的位图 Bitmap bitmap = bd.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; } }); } }
（3）效果图
ImageButton按钮和QuickContactBadge关联联系人
（1）ImageView派生出了两个子类：ImageButton图片按钮，QuickContactBadge关联联系人
（2）Button和ImageButton的区别：Button生成的按钮上显示的是文字，而ImageButton上显示的是图片，所以为ImageButton指定text属性没有作用，不会显示出来文字
（3）ImageButton派生出来了一个ZoomButton，ZoomButton可以代表放大、缩小两个按钮，android默认提供了btn_minus/btn_plus两个Drawable资源，只要为ZoomButton的src属性分别指定btn_minus/btn_plus，即可实现放大和缩小按钮。（实际上android还提供了ZoomControls组件，该组件相当于同时组合了放大和缩小的按钮，并允许分别为两个按钮绑定不同的监听器事件）
（4）QuickContactBadge可以通过android：src来指定显示的图片，该图片可以关联到手机中的联系人，当用户点击该图片时，系统会打开相应的联系人信息页面，如果没有该联系人，则会先提示是否要创建一个该联系人
---------实例二：ImageButton按钮和QuickContactBadge关联联系人
（1）zoombutton.xml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- 普通图片按钮 --> <ImageButton android:layout_width="120dp" android:layout_height="120dp" android:scaleType="fitCenter" android:src="@drawable/switcher" /> <!-- 按下时显示不同的图片 --> <ImageButton android:layout_width="120dp" android:layout_height="120dp" android:scaleType="fitCenter" android:src="@drawable/btn_selector" /> <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10sp" android:layout_gravity="center_horizontal"> <!-- 定义两个ZoomButton，分别为btn_plus和btn_minus --> <ZoomButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_plus"/> <ZoomButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:src="@drawable/btn_minus"/> </LinearLayout> <!-- 定义一个ZoomControls组件 --> <ZoomControls android:id="@+id/zoomcontrols" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"/> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <!-- QuickContactBadge可以关联联系人 --> <QuickContactBadge android:id="@+id/badge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/tv" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="我的偶像" android:layout_gravity="center_vertical" android:textSize="16sp" /> </LinearLayout> </LinearLayout>
（2）ZoomButtonActivity.java文件
package com.yby.imageview; import android.app.Activity; import android.os.Bundle; import android.widget.QuickContactBadge; /** * * @author yinbenyang * */ public class ZoomButtonActivity extends Activity{ private QuickContactBadge qcb; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.zoombutton); //获取QuickContactBadge组件 qcb = (QuickContactBadge) findViewById(R.id.badge); //将QuickContactBadge组件与特定的电话号码对应的联系人建立关联 qcb.assignContactFromPhone("15901507777", false); //将QuickContactBadge组件与指定email地址的联系人建立关联 // qcb.assignContactFromEmail("", false); //将QuickContactBadge组件与特定Uri地址的联系人建立关联 // qcb.assignContactUri(Uri.parse("XXXXXXXX")); } }
（3）btn_selector.xml文件【图片按下与松开时分别显示不同的图片】
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 指定按钮按下时的图片 --> <item android:drawable="@drawable/switcher" android:state_pressed="true"></item> <!-- 指定按钮松开时的图片 --> <item android:drawable="@drawable/wifi" android:state_pressed="false"></item> </selector>
（4）效果图：
