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);
    }
}

效果：

點擊後跳轉界面：