ImageView 使用研究

ImageView是用来在UI中显示Image的一个控件.

基础知识：

0. ImageView控件大小和图片大小关系：

图片大小的不同，用象素个数表示，如长度：800个像素，宽度600个像素等等。

ImageView控件大小，则可以在Layout xml在定义ImageView时，使用其属性指定---- android:layout_height, android:layout_width.  单位通常推荐：dp（dip）.

那我们立刻就会想到，如果图片大小和控件大小不同，该如何将图片放入ImageView控件中呢？

ImageView空间中有个属性负责解决这个问题，它就是android:scaleType

它的取值范围如下：

matrix	0
fitXY	1
fitStart	2
fitCenter	3
fitEnd	4
center	5
centerCrop	6
centerInside	7

最常用的有：center, fitCenter等。

center: 把图片居中放置在ImageView控件中，但不缩放。 如果ImageView大于图片，则图片居中。如果ImageView小于图片，则图片只显示其中一部分(居中部分)。

fitCenter：图片居中，按比例缩放。(保持原始图片比例)，保证整个图片都能放入ImageView，X，Y中一个象限和ViewImage相同。(ImageView和图片长宽比不同时，另一个象限就填充背景色)。缩放后的图片和ImageView中心重合。

fitStart: 按比例缩放。(保持原始图片比例)，保证整个图片都能放入ImageView，X，Y中一个象限和ViewImage相同。(ImageView和图片长宽比不同时，另一个象限就填充背景色)。缩放后的图片与ImageView左上角重合。

fitEnd:按比例缩放。(保持原始图片比例)，保证整个图片都能放入ImageView，X，Y中一个象限和ViewImage相同。(ImageView和图片长宽比不同时，另一个象限就填充背景色)。缩放后的图片与ImageView右下角重合。

fitXY: X，Y按照各自比例缩放，所以缩放后的图片会充满ViewImage。

centerCrop: 等比例缩放。使结果图片X，Y至少一个等于ImageView的X，Y。 另一个大于。大于的部分裁减掉。

centerInside:等比例缩放，使结果图片X，Y至少一个等于ImageView的X，Y。 另一个小于。 (Sam测试下来，这个模式下，当ImageView大小大于图片大小时，它不会放大，如果不是这样，Sam看不出这个参数和fitCenter有什么区别，未来再研究)。

那是不是说：在dip=160时，1280x720的图片，center模式下就能塞满1280x720的屏幕呢？ 测试下来，并不是。这里很奇怪，理论上应该可以。估计和每家芯片商实现有关系吧。所以使用center模式要非常小心。

1. ImageView实例：

改变ViewImage长宽：

首先看ImageView所在的ViewGroup。Sam以Relative为例。

layout  xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#0099cc"
    >
    
    
    <TextView
        android:id="@+id/testview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="scaleType=Center. width=height=wrap_content"
        />
    <ImageView
        android:id="@+id/imageview1"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/testview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#F00"
        android:src="@drawable/big"
        android:scaleType="center"
        
        />
    
    <TextView
        android:id="@+id/textview2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/imageview1"
        android:text="scaleType=fitCenter"
         
        />
    
    <ImageView
        android:id="@+id/imageview2"
        android:layout_height="240dp"
        android:layout_width="320dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textview2"
        android:src="@drawable/background"
        android:scaleType="fitCenter"
        android:background="#FFF"
        />
    
    
    <Button
        android:id="@+id/change_button"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="ChangeImageView"        
        />
   
</RelativeLayout>

可以看到：分别建立两个ImageView。scaleType分别为：center, fitCenter.

Java:

public class SpinnerActivity extends Activity {

 
    protected ArrayAdapter<CharSequence> mAdapter;
    public static final int DEFAULT_POSITION = 2;
    
    private ImageView imageView;
    private Button change_ImageView_Button;
    private int index = 0;
    private TextView textView;
    
    
    
    
    
    
 


    @Override
    public void onCreate(Bundle savedInstanceState) {

        /**
         * derived classes that use onCreate() overrides must always call the super constructor
         */
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.relativetest);
        
        
        imageView               = (ImageView) findViewById(R.id.imageview1);
        change_ImageView_Button = (Button) findViewById(R.id.change_button);
        textView                = (TextView) findViewById(R.id.testview1);
        //imageView.setLayoutParams(new RelativeLayout.LayoutParams(200, 100));
        
        change_ImageView_Button.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                switch(index)
                {
                case 0:
                    imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                    imageView.setLayoutParams(new RelativeLayout.LayoutParams(200, 100));
                    textView.setText("scaleType=FIT_START. ImageView Size:200x100. Picture:800x600");
                    index = 1;  //change to 1
                    break;
                case 1:
                    //imageView.setScaleType(ImageView.ScaleType.FIT_START);
                    imageView.setLayoutParams(new RelativeLayout.LayoutParams(400, 100));
                    textView.setText("scaleType=FIT_START. ImageView Size:800x100. Picture:800x600");
                    index = 2;  //change to 2
                    break;
                case 2:
                    imageView.setLayoutParams(new RelativeLayout.LayoutParams(1280, 700));
                    textView.setText("scaleType=FIT_START. ImageView Size:800x600. Picture:800x600");
                    index = 0;  //change to 2
                    break;    
                }
                
            }
        });
        
        

    }

    

   

    /**
     * Restores the current state of the spinner (which item is selected, and the value
     * of that item).
     * Since onResume() is always called when an Activity is starting, even if it is re-displaying
     * after being hidden, it is the best place to restore state.
     *
     * Attempts to read the state from a preferences file. If this read fails,
     * assume it was just installed, so do an initialization. Regardless, change the
     * state of the spinner to be the previous position.
     *
     * @see android.app.Activity#onResume()
     */
    @Override
    public void onResume() {

        /*
         * an override to onResume() must call the super constructor first.
         */

        super.onResume();

        
        

    }

    /**
     * Store the current state of the spinner (which item is selected, and the value of that item).
     * Since onPause() is always called when an Activity is about to be hidden, even if it is about
     * to be destroyed, it is the best place to save state.
     *
     * Attempt to write the state to the preferences file. If this fails, notify the user.
     *
     * @see android.app.Activity#onPause()
     */
    @Override
    public void onPause() {

        /*
         * an override to onPause() must call the super constructor first.
         */

        super.onPause();

        
    }

 
}

知识点1：

动态修改scaleType:

 imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

知识点2：

动态修改ImageView大小：

 imageView.setLayoutParams(new RelativeLayout.LayoutParams(200, 100));

注意：因为layout xml中的ViewGroup为Relative，所以此处采用RelativeLayout