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: 把图片居中放置在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