安卓控件使用系列16：ImageView實作圖檔縮放和旋轉

在安卓中使用ImageView控件對圖檔進行旋轉和縮放操作是經常遇到的開發背景，下面我們來分享一下它的實作方法。

這個例子實作的是通過滑動滑杆來控制圖檔的縮放和旋轉，并顯示縮放的大小和旋轉的角度。

整體思路：首先在布局檔案中定義一個ImageView控件，用于設定圖檔，放置兩個SeekBar控件用于表示縮放和旋轉的狀态，放置兩個TextView控件用于顯示縮放的大小和旋轉的角度；在活動中實作OnSeekBarChangeListener，在onProgressChanged這個方法中如果滑動的是第一個SeekBar控件，按比例設定圖檔的寬度和高度，并在TextView控件上顯示圖檔的寬度和高度；如果滑動的是第二個SeekBar控件，把資源中的圖檔轉換為位圖，設定旋轉角度，建立設定旋轉了這個角度的位圖，将這個位圖綁定到這個ImageView控件上，并在TextView控件上顯示旋轉的角度。

activity_main.xml檔案：

<LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
    <ImageView
        android:id="@+id/imageview"
        android:layout_width="200dp"
        android:layout_height="150dp"
        android:src="@drawable/dog"
        android:scaleType="fitCenter"
        />
    <TextView 
        android:id="@+id/textview1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="寬度240，高度160"
        android:layout_marginTop="10dp"
        />
    <SeekBar 
        android:id="@+id/seekbar1"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:max="240"
        android:progress="120"
        android:layout_marginTop="10dp"
        />
    
    <TextView 
        android:id="@+id/textview2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="0度"
        android:layout_marginTop="10dp"
        />
    <SeekBar 
        android:id="@+id/seekbar2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:max="360"
        />
</LinearLayout>
           

MainActivity.java檔案：

public class MainActivity extends Activity implements OnSeekBarChangeListener{
    private int minWidth=80;
    private ImageView imageview;
    private TextView textview1,textview2;
    private SeekBar seekbar1,seekbar2;
    private Matrix matrix=new Matrix();//定義一個旋轉的類，用來設定旋轉的角度

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		imageview=(ImageView)findViewById(R.id.imageview);
		textview1=(TextView)findViewById(R.id.textview1);
		textview2=(TextView)findViewById(R.id.textview2);
		seekbar1=(SeekBar)findViewById(R.id.seekbar1);
		seekbar2=(SeekBar)findViewById(R.id.seekbar2);
		seekbar1.setOnSeekBarChangeListener(this);
		seekbar2.setOnSeekBarChangeListener(this);
	
//		這三個其實對本功能沒有影響，可以去掉。
		DisplayMetrics dm=new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		seekbar1.setMax(dm.widthPixels-minWidth);
	}

	@Override
	public void onProgressChanged(SeekBar seekBar, int progress,
			boolean fromUser) {
		// TODO Auto-generated method stub
		if(seekBar.getId()==R.id.seekbar1){
			int newWidth=progress+minWidth;
			int newHeight=(int)(newWidth*3/4);//按原圖檔比例進行縮放
			imageview.setLayoutParams(new LinearLayout.LayoutParams(newWidth,newHeight));
			textview1.setText("圖像寬度"+newWidth+"圖像寬度"+newHeight);
		}else if(seekBar.getId()==R.id.seekbar2){
			Bitmap bitmap=((BitmapDrawable)(getResources().getDrawable(R.drawable.dog))).getBitmap();
			matrix.setRotate(progress);//設定翻轉的角度
			bitmap=Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true);
			imageview.setImageBitmap(bitmap);
			textview2.setText(progress+"度");
		}
	}

	@Override
	public void onStartTrackingTouch(SeekBar seekBar) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onStopTrackingTouch(SeekBar seekBar) {
		// TODO Auto-generated method stub
		
	}

}