android中如何使用一张图片适配不同尺寸的APP引导页-阿里云开发者社区

android中如何使用一张图片适配不同尺寸的APP引导页

2015-09-15 1805

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在我们平常开发的过程中在做引导页适配的时候，有时候会犯难，怎么样作图可以将各种不同尺寸分辨率的手机都适配好也就是不变形不拉伸，官方给的说法也只是做多套图去适配不同的分辨率，遇到全屏展示引导这种问题的时候就有些力不从心了。

在我们平常开发的过程中在做引导页适配的时候，有时候会犯难，怎么样作图可以将各种不同尺寸分辨率的手机都适配好也就是不变形不拉伸，官方给的说法也只是做多套图去适配不同的分辨率，遇到全屏展示引导这种问题的时候就有些力不从心了。接下来我们就展示一下如何使用一张图来适配市面上的绝大部分手机：

这个办法是反编译微信得出的想法，微信的包里面只有一张1920*1080的图，我们观察了微信在不同尺寸手机上的展示效果，它肯定是没有变形的，根据这个思路，我们发现它在适配不同的手机对图片做了缩放裁剪等处理。

接下来我们就实现一下如何对图片进行适当的缩放及裁剪：

大伙也都看到了，我们选择了两台具有代表性的设备：一台分辨率是800*480，一台是1152*1920.这两台设备的高宽比是不一样的。

为了适配这两台代表性的设备，首先我们需要对图片进行等比缩放：

我们需要先行计算将要放大的图片的高度：

将要放大的图片的高度=原图的宽度*屏幕的高度/屏幕的宽度；

上面这个计算公式不用我说为什么吧，小学就学过的。至于原图放大会模糊的问题，一般屏幕的宽度最大也就是1080，只是魅族有些奇葩会是1152，如果担心这个问题的话，请美工给图的时候，直接按照1152的宽来就好了。

其次，我们为了良好的展示在节目上，面对于不同尺寸屏幕的手机，它们的高宽比是不一样的，所以我们的基本思想就是以宽度为基准，放大图片，然后以中心为准裁剪多余的部分（对于图片高度不足裁剪的手机，可能才疏学浅，还没见过）。

贴代码：

package com.sahadev.guide;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.Window;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		scaleImage(this, findViewById(R.id.rootView), R.drawable.guide);
	}

	public static void scaleImage(final Activity activity, final View view, int drawableResId) {

		// 获取屏幕的高宽
		Point outSize = new Point();
		activity.getWindow().getWindowManager().getDefaultDisplay().getSize(outSize);

		// 解析将要被处理的图片
		Bitmap resourceBitmap = BitmapFactory.decodeResource(activity.getResources(), drawableResId);

		if (resourceBitmap == null) {
			return;
		}

		// 开始对图片进行拉伸或者缩放

		// 使用图片的缩放比例计算将要放大的图片的高度
		int bitmapScaledHeight = Math.round(resourceBitmap.getHeight() * outSize.x * 1.0f / resourceBitmap.getWidth());

		// 以屏幕的宽度为基准，如果图片的宽度比屏幕宽，则等比缩小，如果窄，则放大
		final Bitmap scaledBitmap = Bitmap.createScaledBitmap(resourceBitmap, outSize.x, bitmapScaledHeight, false);
		
		view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                //这里防止图像的重复创建，避免申请不必要的内存空间
                if (scaledBitmap.isRecycled())
                    //必须返回true
                    return true;


                // 当UI绘制完毕，我们对图片进行处理
                int viewHeight = view.getMeasuredHeight();


                // 计算将要裁剪的图片的顶部以及底部的偏移量
                int offset = (scaledBitmap.getHeight() - viewHeight) / 2;


                // 对图片以中心进行裁剪，裁剪出的图片就是非常适合做引导页的图片了
                Bitmap finallyBitmap = Bitmap.createBitmap(scaledBitmap, 0, offset, scaledBitmap.getWidth(),
                        scaledBitmap.getHeight() - offset * 2);


                if (!finallyBitmap.equals(scaledBitmap)) {//如果返回的不是原图，则对原图进行回收
                    scaledBitmap.recycle();
                    System.gc();
                }


                // 设置图片显示
                view.setBackgroundDrawable(new BitmapDrawable(context.getResources(), finallyBitmap));
                return true;
            }
        });
	}
}

最后看实际运行效果：

1. 2. 3.