Android雁翎刀之ImageView之舞动乾坤

传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.youkuaiyun.com/leverage_1229

雁翎刀

        《白马啸西风》一强盗：虬髯大汉挥动手中雁翎刀，喝道：“李三，你当真是个硬汉！”呼的一刀向他头顶砍落。

        今天我们学习如何利用Android平台“雁翎刀”ImageView来实现图片旋转功能。像市面上的一些比较出名的图像编辑软件ACDSee、3DMAX、PhotoShop都提供了旋转图像的功能。下面给出该情景的案例：

1案例技术要点

(1)使用DisplayMetrics对象的widthPixels属性获取屏幕宽度。
(2)使用SeekBar来操作图像旋转，并监听滑竿值的变化。
(3)使用Matrix类的相关方法实现图片旋转。

2案例代码陈列

工程包目录

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android.imageview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".ImageViewMainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest> 

strings.xml

<resources>
    <string name="app_name">ImageView旋转图片</string>
</resources>

main.xml

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:scaleType="fitCenter"
         android:src="@drawable/background"/>
     <TextView
         android:id="@+id/textView1"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="10dp"
         android:text="240 * 160"/>
     <SeekBar 
         android:id="@+id/seekBar1"
         android:layout_width="200dp"
         android:layout_height="wrap_content"
         android:layout_marginTop="10dp"
         android:max="240"
         android:progress="120"/>
     <TextView
         android:id="@+id/textView2"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="10dp"
         android:text="0 degree"/>
     <SeekBar 
         android:id="@+id/seekBar2"
         android:layout_width="200dp"
         android:layout_height="wrap_content"
         android:max="360"/>

</LinearLayout>

ImageViewMainActivity.java

package com.android.imageview;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

/**
 * ImageView案例三：旋转图片
 * ImageView是用于显示图片的控件，支持对图片进行放大、缩小和旋转等
 * @author lynnli1229
 */
public class ImageViewMainActivity extends Activity implements OnSeekBarChangeListener {
    
    private int minWidth = 80;
    private ImageView imageView;
    private TextView textView1, textView2;
    private Matrix matrix = new Matrix();
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        imageView = (ImageView) findViewById(R.id.imageView);
        textView1 = (TextView) findViewById(R.id.textView1);
        textView2 = (TextView) findViewById(R.id.textView2);
        SeekBar seekBar1 = (SeekBar) findViewById(R.id.seekBar1);
        SeekBar seekBar2 = (SeekBar) findViewById(R.id.seekBar2);
        seekBar1.setOnSeekBarChangeListener(this);
        seekBar2.setOnSeekBarChangeListener(this);
        DisplayMetrics outMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        // 设置拖动条的最大值（屏幕的宽度-最小宽度）
        seekBar1.setMax(outMetrics.widthPixels - minWidth);
    }

    // 拖动滑竿时回调该方法
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        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.background)).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) {
        
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        
    }
}

3案例效果展示