一、概述
图片多的页面，经常会听见UI说，你写的UI变形了。图片拉伸、变形也是开发有时会遇到的问题。
二、先看一下缩放的效果图
效果图.jpg
测试图片的宽高尺寸：840 * 420，也就是 2：1，宽是高的2倍。
三、缩放的需求分析
1. 按宽或者高来缩放
2. 缩放的倍数或者说比例
四、自定义属性
<declare-styleable name="ScaleImageView">
<!--缩放的类型：按宽还是高-->
<attr name="viewScaleType" format="enum">
<enum name="width" value="1" />
<enum name="height" value="2" />
</attr>
<!--缩放的倍数-->
<!--比如：宽120 高60 (按宽来缩放：比例就是 2; 按高度来缩放，比例：0.5f)-->
<attr name="viewScaleRadio" format="float" />
</declare-styleable>
五、控件的宽高是在onMeasure指定的，先分析一下有多少种情况
1. 明确的指定了宽高
2. 按宽度来缩放
3. 按高度缩放
/**
* 测量控件的代码
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 不设置任何属性
if (mScaleType == 0 || mScaleRadio == 0) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
return;
}
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// 如果子类设置了精确的宽高
if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY
&& (widthSize != 0 && heightSize != 0)) {
setMeasuredDimension(widthSize, heightSize);
return;
}
// 如果是按宽度来缩放
if (mScaleType == WIDTH && widthMode == MeasureSpec.EXACTLY && widthSize != 0) {
heightSize = (int) (widthSize / mScaleRadio);
setMeasuredDimension(widthSize, heightSize);
return;
}
// 如果是按高度来缩放
if (mScaleType == HEIGHT && heightMode == MeasureSpec.EXACTLY && heightSize != 0) {
widthSize = (int) (heightSize / mScaleRadio);
setMeasuredDimension(widthSize, heightSize);
return;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
代码没什么难度，看注释就好
六、自定义缩放ImageView完整的代码
/**
* 缩放的ImageView
*/
public class ScaleImageView extends android.support.v7.widget.AppCompatImageView {
/**
* 类型宽
*/
private static final int WIDTH = 1;
/**
* 类型高
*/
private static final int HEIGHT = 2;
/**
* 缩放的类型
*/
private int mScaleType = 0;
/**
* 缩放的倍数
*/
private float mScaleRadio;
public enum ImageScaleType {
WIDTH, HEIGHT
}
public ScaleImageView(Context context) {
this(context, null);
}
public ScaleImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ScaleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ScaleImageView);
mScaleRadio = array.getFloat(R.styleable.ScaleImageView_viewScaleRadio, 0);
mScaleType = array.getInt(R.styleable.ScaleImageView_viewScaleType, 0);
array.recycle();
}
/**
* 测量控件的代码
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 不设置任何属性
if (mScaleType == 0 || mScaleRadio == 0) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
return;
}
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// 如果子类设置了精确的宽高
if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY
&& (widthSize != 0 && heightSize != 0)) {
setMeasuredDimension(widthSize, heightSize);
return;
}
// 如果是按宽度来缩放
if (mScaleType == WIDTH && widthMode == MeasureSpec.EXACTLY && widthSize != 0) {
heightSize = (int) (widthSize / mScaleRadio);
setMeasuredDimension(widthSize, heightSize);
return;
}
// 如果是按高度来缩放
if (mScaleType == HEIGHT && heightMode == MeasureSpec.EXACTLY && heightSize != 0) {
widthSize = (int) (heightSize / mScaleRadio);
setMeasuredDimension(widthSize, heightSize);
return;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 设置缩放类型
*/
public void setScaleType(ImageScaleType scaleType) {
switch (scaleType) {
case WIDTH:
mScaleType = WIDTH;
break;
case HEIGHT:
mScaleType = HEIGHT;
break;
}
invalidate();
}
/**
* 设置缩放倍数
*/
public void setScaleRadio(float radio) {
this.mScaleRadio = radio;
invalidate();
}
}
七、测试布局代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.wen.routerdemo.view.ScaleImageView
android:layout_width="120dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_scale_image"
app:viewScaleRadio="2"
app:viewScaleType="width" />
<com.wen.routerdemo.view.ScaleImageView
android:layout_width="240dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_scale_image"
app:viewScaleRadio="2"
app:viewScaleType="width" />
<com.wen.routerdemo.view.ScaleImageView
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_scale_image"
app:viewScaleRadio="2"
app:viewScaleType="width" />
<com.wen.routerdemo.view.ScaleImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_scale_image"
app:viewScaleRadio="2"
app:viewScaleType="width" />
</LinearLayout>
八、测试效果，就是开始就给出的
效果图.jpg
网友评论