Android API之ImageView.ScaleType代碼演示

為了全面演示ImageView.ScaleType的八種類型即CENTER，CENTER_CROP，CENTER_INSIDE，FIT_CENTER，FIT_START，FIT_END，FIT_XY，MATRIX，我在這裡通過一個GridView進行顯示，可通過點擊每一種類型的ImageButton進行詳細查看、比較。

背景圖片為一個像素寬度（443px）×高度（500px），大於默認的Android模擬器320×480，這樣可以清晰的看出ImageView是否做了比例縮放，及所處位置的差異。

 

（1）       AndroidManifest.xml 添加各種ScaleType的Activity

<activity android:name=".ImageViewScaleTypeDemo1" />

      <activity android:name=".ImageViewScaleTypeDemo2" />

      <activity android:name=".ImageViewScaleTypeDemo3" />

      <activity android:name=".ImageViewScaleTypeDemo4" />

      <activity android:name=".ImageViewScaleTypeDemo5" />

      <activity android:name=".ImageViewScaleTypeDemo6" />

      <activity android:name=".ImageViewScaleTypeDemo7" />

      <activity android:name=".ImageViewScaleTypeDemo8" />

（2）      res/layout/main.xml GridView主視圖布局

  <GridView

    android:id="@+id/gridView"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:numColumns="auto_fit"

    android:verticalSpacing="10dp"

    android:horizontalSpacing="10dp"

    android:columnWidth="90dp"

    android:stretchMode="columnWidth"

    android:gravity="center"

    />

（3）      res/layout/image.xml  ScaleType視圖布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

   

    <ImageView

     android:id="@+id/imageView1"

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

    />

</LinearLayout>

（4）      ImageAdapter.java 繼承BaseAdapter，並載入GridView的圖片資源

public class ImageAdapter extends BaseAdapter

{

    // 定義Context

    private Context      mContext;

    // 定義整型數組 即圖片資源

    private Integer[] mImageIds  =

    {

           R.drawable.center,

           R.drawable.centercrop,

           R.drawable.centerinside,

           R.drawable.fitcenter,

           R.drawable.fitstart,

           R.drawable.fitend,

           R.drawable.fitxy,

           R.drawable.matrix,

    };

 

    public ImageAdapter(Context c)

    {

       mContext = c;

    }

 

    // 獲取圖片的個數

    public int getCount()

    {

       return mImageIds.length;

    }

 

    // 獲取圖片在庫中的位置

    public Object getItem(int position)

    {

       return position;

    }

 

 

    // 獲取圖片ID

    public long getItemId(int position)

    {

       return position;

    }

 

 

    public View getView(int position, View convertView, ViewGroup parent)

    {

       ImageView imageView;

       if(convertView == null)

       {

           // 給ImageView設置資源

           imageView = new ImageView(mContext);

           // 設置布局 圖片顯示

           imageView.setLayoutParams(new GridView.LayoutParams(85, 85));

           // 設置顯示比例類型

           imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

       }

       else

       {

           imageView = (ImageView) convertView;

       }

 

       imageView.setImageResource(mImageIds[position]);

       return imageView;

    }

 

}

（5）      MainActivity.java  GridView主視圖類

public class MainActivity extends Activity {

    private GridView gridView;

   

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

       

      gridView=(GridView)findViewById(R.id.gridView);

      gridView.setAdapter(newImageAdapter(this));

      gridView.setBackgroundResource(R.drawable.image);

     

      gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

 

       @Override

       public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,

              long arg3) {

           // TODO Auto-generated method stub

           Intent intent=new Intent();

           switch(arg2){

 //GridView第一個ID，對應CENTER

           case 0:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo1.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

   

//GridView第二個ID，對應CENTER_CROP 

           case 1:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo2.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

             

           case 2:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo3.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

             

           case 3:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo4.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

             

           case 4:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo5.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

             

           case 5:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo6.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

             

           case 6:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo7.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

             

           case 7:

              intent.setClass(MainActivity.this, ImageViewScaleTypeDemo8.class);

              startActivity(intent);

              MainActivity.this.finish();

              break;

             

           }

       }

    });

    }

}    

（6）      ImageViewScaleTypeDemo1.java 顯示imageView1顯示類型為CENTER，其它ImageViewScaleTypeDemo2-8分別為CENTER_CROP，CENTER_INSIDE，FIT_CENTER，FIT_START，FIT_END，FIT_XY，MATRIX，此處略去代碼

 

public class ImageViewScaleTypeDemo1 extends Activity {

    private ImageView imageView1;

   

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.image);

       

        //顯示imageView1

        imageView1=(ImageView)findViewById(R.id.imageView1);

       

        //設置imageView1背景資源

        imageView1.setImageResource(R.drawable.image);

       

        //設置imageView1顯示類型為CENTER

        imageView1.setScaleType(ImageView.ScaleType.CENTER);

          

    }

   

    @Override

    public boolean onKeyDown(int keyCode, KeyEvent event) {

       // TODO Auto-generated method stub

      

       //響應返回按鍵，退出到主界面

       if(keyCode==KeyEvent.KEYCODE_BACK){

           Intent intent=new Intent();

           intent.setClass(ImageViewScaleTypeDemo1.this, MainActivity.class);

           startActivity(intent);

           ImageViewScaleTypeDemo1.this.finish();

       }

       return super.onKeyDown(keyCode, event);

    }

}

(7) 效果截圖：

   主界面：

 

 CENTER效果：

 

 

CENTER_CROP效果：

 

 

CENTER_INSIDE效果：

 

 

FIT_CENTER效果：

 

 
FIT_START效果：

 

 
FIT_END效果：

 

FIT_XY效果：

 

 

 

MATRIX效果：

 

 

 

(8) 結果分析：

我選取的原始圖片明顯標志如下：左上角有蝴蝶、花朵，右下角為一個蝗蟲，且圖片像素大於 320×480，各種類型的差異通過查看圖片的明顯標志即可窺見一斑。比如FIT_START，填充於屏幕上方，並等比例縮放；相反，FIT_END置於屏幕下方，而FIT_CENTER則在中間。CENTER_CROP裁剪了圖片的中間部分填充屏幕。其它類型可自行查看分析。