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中的该方法介绍:

void setRotate(float degrees, float px, float py)
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
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现这个要求,你可以自定义一个继承自 ImageView 的类,并在其中重写 onMeasure 方法来控制 ImageView 的最大长度和高度。同时,在加载图片时,你可以根据图片的宽高比例来计算缩放比例,然后使用 Matrix 对图片进行缩放操作。 下面是一个示例代码: ```java public class CustomImageView extends ImageView { private int mMaxWidth; // 最大宽度 private int mMaxHeight; // 最大高度 public CustomImageView(Context context) { super(context); init(); } public CustomImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CustomImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 设置默认的最大宽度和高度 mMaxWidth = Integer.MAX_VALUE; mMaxHeight = Integer.MAX_VALUE; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 获取 ImageView 的测量模式和尺寸 int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); // 计算根据最大宽度和高度得到的宽度和高度 int maxWidth = Math.min(widthSize, mMaxWidth); int maxHeight = Math.min(heightSize, mMaxHeight); int scaledWidth = widthSize; int scaledHeight = heightSize; // 根据图片的宽高比例计算缩放比例 Drawable drawable = getDrawable(); if (drawable != null) { int imageWidth = drawable.getIntrinsicWidth(); int imageHeight = drawable.getIntrinsicHeight(); float scale = Math.min((float) maxWidth / imageWidth, (float) maxHeight / imageHeight); scaledWidth = (int) (imageWidth * scale); scaledHeight = (int) (imageHeight * scale); } // 根据测量模式设置最终的宽度和高度 int finalWidth = (widthMode == MeasureSpec.EXACTLY) ? widthSize : scaledWidth; int finalHeight = (heightMode == MeasureSpec.EXACTLY) ? heightSize : scaledHeight; // 设置最终的宽度和高度 setMeasuredDimension(finalWidth, finalHeight); } public void setMaxSize(int maxWidth, int maxHeight) { mMaxWidth = maxWidth; mMaxHeight = maxHeight; } } ``` 你可以在布局文件中使用这个自定义的 ImageView,然后通过调用 `setMaxSize()` 方法来设置最大宽度和高度。当加载图片时,ImageView 会按照比例缩放图片来适应最大的宽度和高度限制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值