2014-2-7ImageView及其子类

1.    ImageViews组件

ImageView继承自View组件，主要功能用于显示图片，另外任何Drawable对象都可用ImageView来显示。

此外，ImageView还派生了ImageButton和ZoomButton等组件。

实例：图片浏览器

Xml代码清单

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_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="match_parent"
        android:layout_height="240px"
        android:src="@drawable/a005"
        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>

Java代码清单

public class ImageViewT extends Activity {
   
    //定义一个访问图片的数组
    int[] images = new int[]{
            R.drawable.photo,   R.drawable.a002,   
            R.drawable.a004,    R.drawable.a005,
            R.drawable.a006,    R.drawable.a007,
            R.drawable.a008,
    };
    //定义默认显示的图片
    int currentImg = 0;
    //定义图片的初始透明度
    private int alpha = 255;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.image_view_t);
        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)
        {
             //控制ImageView显示下一张图片
             image1.setImageResource(
                     images[++currentImg % images.length]);
        }
        });
        //定义改变图片透明度的方法
        OnClickListener Listener = new OnClickListener()
        {
            @Override
            public void onClick(View v) {
                // TODO自动生成的方法存根
                if (v == plus)
                {
                    alpha += 20;
                }
                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()
        {
 
            @Override
            public boolean onTouch(View view, MotionEvent event) {
                // TODO自动生成的方法存根
                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;
            }
        });
    }  
}

Ps:程序通过动态设置ImageView的Alpha值，来改变图片的透明度。在程序中用到了Bitmap类，它是一个代表位图的类，调用它的createBitmap（）静态方法即可截取位图指定部分。

效果图：（改变透明度）

（下一张）

2. ImageButton子类

ImageButton图片按钮，不能显示任何文字。可以指定android：src属性，该属性即可使用静态图片，也可使用自定义的Drawable对象，从而开发出随用户动作改变的图片。

ImageButton派生了一个ZoomButton，它可以代表“放大”、“缩小”两个按钮。只要为ZoomButton的android：src属性分别指定btn_minus、btn_plus，即可实现“放大”、“缩小”按钮。

实际上，android还提供了一个ZoomControls组件，该组件相当于同时结合了“放大”、“缩小”两个按钮，并允许分别为两个按钮绑定不同的事件监听器。

实例：图片按钮

Xml代码清单

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 普通图片按钮 -->
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        />          
    <!-- 按下时显示不同图片的按钮 -->
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/button_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_minus和btn_plus图片 -->
        <ZoomButton
            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/minus"
        android:src="@android:drawable/btn_minus"/>
        <ZoomButton
            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/plus"
        android:src="@android:drawable/btn_plus"/>
    </LinearLayout>
    <!-- 定义ZoomControls组件 -->
    <ZoomControls android:id="@+id/zoomControls1"
        android:layout_width="wrap_content"
         android:layout_height="wrap_content"   
         android:layout_gravity="center_horizontal"/>
</LinearLayout>

Ps:第二个ImageButton的android：src指定为@drawable/button_selector，该Drawable结合了两张图片，用户点击时切换图片。布局效果如下：

点击按钮时切换图片：

3. QuickContaceBadge子类

QuickContaceBadge继承ImageView，本质也是图片，可通过android：src属性指定显示图片。其额外增加的功能是：该图片可以关联到手机中指定联系人，单击可以打开联系人联系方式界面。

实例：

Xml代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <QuickContactBadge
        android:id="@+id/badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"/>
</LinearLayout>

Java代码

public class QuickContactBadgeT extends Activity {
 
    QuickContactBadge badge;
    @Override
    protected voidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.quick_contact_badge_t);
        //获取QuickContactBadge组件
        badge = (QuickContactBadge) findViewById(R.id.badge);
        //将QuickContactBadge组件与特定电话对应的联系人建立关系
        badge.assignContactFromPhone("1886****199",false);
    }
}

效果：

点击后跳转界面：