`
yidongkaifa
  • 浏览: 4038915 次
文章分类
社区版块
存档分类
最新评论

Android之UI学习篇六:ImageView实现图片旋转和缩放

 
阅读更多

这一篇,给大家介绍一下ImageView控件的使用,ImageView主要是用来显示图片,可以对图片进行放大、缩小、旋转的功能。

android:sacleType属性指定ImageVIew控件显示图片的方式,例如:center表示图像以不缩放的方式显示在ImageView控件的中心,如果设置为fitCenter,表示图像按照比例缩放至合适的位置,并在ImageView控件的中心。

首先我们开发一个简单的案例,实现图片的放大缩小和旋转:

先看看实现的效果,

缩放截图1:


缩放截图2:



旋转截图1:



旋转截图2:




在实现图片的缩放和旋转时,我们都需要用到android.graphics.Matrix这个类,对于Matrix在API中的介绍如下:

Class Overview


The Matrix class holds a 3x3 matrix for transforming coordinates. Matrix does not have a constructor, so it must be explicitly initialized using either reset() - to construct an identity matrix, or one of the set..() functions (e.g. setTranslate, setRotate, etc.).


本实例中使用到android.graphics.Matrix的 setRotate方法来设置旋转角度,以下是API中的该方法介绍:

<nobr style="margin-bottom:0px">void</nobr> <nobr><span class="sympad" style="margin-right:2px; margin-bottom:0px"><a href="http://developer.android.com/reference/android/graphics/Matrix.html#setRotate(float,%20float,%20float)" style="color:rgb(37,138,175); text-decoration:initial; margin-bottom:0px">setRotate</a></span>(float degrees, float px, float py)</nobr>
Set the matrix to rotate by the specified number of degrees, with a pivot point at (px, py).

源代码:

MainActivity.java

package com.imageview.activity;

import com.imageview.activity.R;
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;

public class MainActivity extends Activity implements OnSeekBarChangeListener {
	private int minWidth = 80;
	private ImageView imageView;
	private SeekBar seekBar1;
	private SeekBar seekBar2;
	private Matrix matrix = new Matrix();

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		imageView = (ImageView) findViewById(R.id.imageview1);
		seekBar1 = (SeekBar) findViewById(R.id.seekbar1);
		seekBar2 = (SeekBar) findViewById(R.id.seekbar2);
		seekBar1.setOnSeekBarChangeListener(this);
		seekBar2.setOnSeekBarChangeListener(this);
		// 定义一个DisplayMetrics对象,用来显示旋转的图像
		DisplayMetrics dm = new DisplayMetrics();
		// 根据手机屏幕大小来缩放
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		seekBar1.setMax(dm.widthPixels - minWidth);
	}

	@Override
	public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {
		switch (seekBar.getId()) {
		case R.id.seekbar1:
			int newWidth = progress + minWidth;
			int newHeight = (int) (newWidth * 3 / 4);
			imageView.setLayoutParams(new LinearLayout.LayoutParams(newWidth,newHeight));
			break;
		case R.id.seekbar2:
			Bitmap bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.pic)).getBitmap();
			// 设置旋转角度
			matrix.setRotate(progress);
			// 重新绘制Bitmap
			bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),bitmap.getHeight(), matrix, true);
			imageView.setImageBitmap(bitmap);
			break;
		}
	}

	@Override
	public void onStartTrackingTouch(SeekBar seekBar) {

	}

	@Override
	public void onStopTrackingTouch(SeekBar seekBar) {

	}
}

布局文件main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
	<ImageView 
        android:layout_width="200dp"
        android:layout_height="150dp"
        android:scaleType="fitCenter"
        android:background="#FFFFFF"
        android:src="@drawable/pic"
        android:id="@+id/imageview1"/>
    <SeekBar 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:id="@+id/seekbar1"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="拖动来缩放图片" />
	<SeekBar 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:id="@+id/seekbar2"/>
	<TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="拖动来旋转图片" />
</LinearLayout>

最后说明一点,要在ImageView中显示的图片进行旋转,请选择一张符合Matrix的3*3矩阵的图片,否则在旋转过程中超过屏幕宽度会引起报错,本例中选取的是一张正方形的图片,如果是长方形的建议做一下代码逻辑判断处理。

关于Matrix的更多效果实现,将会在后面写一篇再进行讲解,谢谢!


android.graphics.Matrix
分享到:
评论

相关推荐

    Android UI之ImageView实现图片旋转和缩放

    这一篇,给大家介绍一下ImageView控件的使用,ImageView主要是用来显示图片,可以对图片进行放大、缩小、旋转的功能。 android:sacleType属性指定...在实现图片的缩放和旋转时,我们都需要用到android.graphics.

    老罗android视频开发源码和ppt经典

    6.16 ImageView实现图片旋转和缩放 6.17 ImageView从网络上获取图像 6.18 DatePicker输入日期控件的使用 6.19 时间对话框的使用 6.20 ProgressBar进度条的使用 6.21 RatingBar评分控件的使用 6.22 ScrollView垂直...

    Android代码-一个安卓常用UI框架

    bigappleui ...(2)ZoomImageView,继承ImageView,在加载图片显示后,可对图片缩放,旋转查看。 (3)RoundedImageView,该也继承ImageView,用来显示圆角图片。 (4)SlipButton,模拟滑块按钮。

    《Android应用开发揭秘》源码

     15.6 AndroidUI优化  15.7 其他优化  15.7.1 zipalign  15.7.2 图片优化  15.8 小结  第五部分 扩展篇  第16章 Android NDK开发  16.1 AndroidNDK简介  16.2 安装和配置NDK开发环境  16.2.1 系统和软件...

    《Android应用开发揭秘》附带光盘代码.

     15.6 AndroidUI优化  15.7 其他优化  15.7.1 zipalign  15.7.2 图片优化  15.8 小结  第五部分 扩展篇  第16章 Android NDK开发  16.1 AndroidNDK简介  16.2 安装和配置NDK开发环境  16.2.1 系统和软件...

    Android应用开发揭秘pdf高清版

    15.6 AndroidUI优化 15.7 其他优化 15.7.1 zipalign 15.7.2 图片优化 15.8 小结 第五部分 扩展篇 第16章 Android NDK开发 16.1 AndroidNDK简介 16.2 安装和配置NDK开发环境 16.2.1 系统和软件需求 16.2.2 NDK开发...

    KJFrameForAndroid快速开发框架

    一行代码实现网络图片加载,任何View(ImageView设置src,普通View设置bg)加载图片的时候都无需考虑图片加载过程中出现的oom和android容器快速滑动时候出现的图片错位等现象,同时无需考虑图片加载过程中出现的OOM。...

Global site tag (gtag.js) - Google Analytics