Android基础控件——ImageView的自定义，巧用Matrix实现图片不变形的炫酷PK条

前言

在开发中常常会遇到PK条制作，如果在PK条中是纯色的情况下，比较好办，如下：

我们通常会设置其权重进行更新两个PK条的进度，实现起来也简单

//更新PkBar宽度比例
private void updateLayoutParams(float ratio) {LinearLayout.LayoutParams paramsLeft = (LinearLayout.LayoutParams) mLeftBar.getLayoutParams();LinearLayout.LayoutParams paramsRight = (LinearLayout.LayoutParams) mRightBar.getLayoutParams();paramsLeft.weight = ratio;paramsRight.weight = 1 - ratio;mLeftBar.setLayoutParams(paramsLeft);mRightBar.setLayoutParams(paramsRight);
}

如果是在纯色的基础上，采用酷炫的图片进行遮盖，这样的话，可能会导致素材的压缩情况，如下：

通过素材的对比，明显看到是有压缩的

我们可以通过自定义ImageView和ScaleType，通过裁剪达到我们的效果

实现

1、搭建ImageView

通过上面看到，我们会用两边都是ImageView去填充，通过设置不用的权重进行PK进度的更新，为了兼容我们提供四种方向的缩放裁剪模式，而且继承AppCompatImageView

public class CropImageView extends AppCompatImageView {private CropType mCropType;private Bitmap mBitmap;//提供四种方向的缩放裁剪模式public enum CropType {LEFT_CROP,RIGHT_CROP,TOP_CROP,BOTTOM_CROP}public CropImageView(Context context) {this(context, null);}public CropImageView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public CropImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initTypeArray(context, attrs);initView();}
}

2、获取在xml的属性

在styleable中声明我们需要的裁剪模式

<!--CropImageView 裁剪缩放模式-->
<declare-styleable name="CropImageView"><attr name="cropType"><enum name="leftCrop" value="0" /><enum name="rightCrop" value="1" /><enum name="topCrop" value="2" /><enum name="bottomCrop" value="3" /></attr>
</declare-styleable>

接着代码就是常规的获取自定义属性

private void initTypeArray(Context context, AttributeSet attrs) {final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CropImageView);int cropType = typedArray.getInt(R.styleable.CropImageView_cropType, -1);if (cropType == 0) {mCropType = CropType.LEFT_CROP;} else if (cropType == 1) {mCropType = CropType.RIGHT_CROP;} else if (cropType == 2) {mCropType = CropType.TOP_CROP;} else if (cropType == 3) {mCropType = CropType.BOTTOM_CROP;}typedArray.recycle();
}

3、裁剪ImageView

这里是最重要的一步，通过阅读ImageView的源码，模仿ScaleType对Matrix进行操作达到我们想要的效果

private void initView() {if (mCropType != null) {updateCropMatrix();}
}private void updateCropMatrix() {//如果没有炫酷PK条就默认设置个缩放模式if (mBitmap == null) {if (getScaleType() == ScaleType.MATRIX) {setScaleType(ScaleType.CENTER_CROP);}return;}//真正处理炫酷PK条setScaleType(ScaleType.MATRIX);Matrix mMatrix = new Matrix();float scale = 1; //缩放图片大小比例float dx = 0, dy = 0;final int vHeight = getHeight() - getPaddingLeft() - getPaddingRight();//获取真实高度final int vWidth = getWidth() - getPaddingTop() - getPaddingBottom();//获取真实宽度final int dWidth = mBitmap.getWidth();final int dHeight = mBitmap.getHeight();if (mCropType == CropType.LEFT_CROP) {scale = (float) vHeight / (float) dHeight;dx = 0;} else if (mCropType == CropType.RIGHT_CROP) {scale = (float) vHeight / (float) dHeight;dx = vWidth - dWidth * scale; //x方向平移，显示图片右边区域内容} else if (mCropType == CropType.TOP_CROP) {scale = (float) vWidth / (float) dWidth;dy = 0;} else if (mCropType == CropType.BOTTOM_CROP) {scale = (float) vWidth / (float) dWidth;dy = vHeight - dHeight * scale; //y方向平移，显示图片底边区域内容}mMatrix.setScale(scale, scale); //先将图片宽（或高）缩放到View的同等大小mMatrix.postTranslate(Math.round(dx), Math.round(dy));setImageMatrix(mMatrix);
}

在真正的操作上，你可以理解为CropImageView就是一个View去承载一张Bitmap，由于我们的CropImageView大小是固定不变的，而承载的Bitmap是可以通过缩放等功能进行处理的，通过移动和缩放Bitmap的大小，如果Bitmap的大小大于原先的CropImageView的大小，这样不知不觉之中就形成了Bitmap的裁剪功能

Bitmap：包含照片的所有像素信息、宽高等其他信息
Matrix：Matrix的本质是矩阵，通过矩阵的计算可以进行图片的旋转、缩放等功能

通过计算炫酷PK条的宽高是否要适配原先ImageView的大小，进行缩放动作，由于缩放的动作是在CropImageView本身的左上角实现的，我们需要对CropImageView和Bitmap左上角或者右上角的对齐，这样Bitmap才刚好完整的盖在CropImageView上

LEFT_CROP：左上角需要对其，本身就是在左上角进行缩放的，所以不需要平移
RIGHT_CROP：右上角需要对其，所以通过计算CropImageView和Bitmap的宽度差，进行平移
TOP_CROP：左上角需要对其，本身就是在左上角进行缩放的，所以不需要平移
BOTTOM_CROP：左下角需要对其，所以通过计算CropImageView和Bitmap的高度差，进行平移

适配

通过提供接口的形式让外部调用，在每次设置变化的时候都会去进行重新计算，在onSizeChanged的时候也需要重新计算，这是考虑到父View的大小可能会被外部改变

public void setCropType(CropType cropType) {mCropType = cropType;updateCropMatrix();
}@Override
public void setImageBitmap(Bitmap bm) {super.setImageBitmap(bm);mBitmap = bm;updateCropMatrix();
}@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);updateCropMatrix();
}

使用

1、xml

在xml上配置好最原始的图片背景色

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:cropImg="http://schemas.android.com/apk/res-auto"android:id="@+id/ll_pk_bar_bg"android:layout_width="match_parent"android:layout_height="30dp"android:layout_margin="16dp"android:layout_centerVertical="true"android:orientation="horizontal"><com.example.customimage.CropImageViewandroid:id="@+id/img_left_bar"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="#0caafc"cropImg:cropType="leftCrop" /><com.example.customimage.CropImageViewandroid:id="@+id/img_right_bar"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="#f2a603"cropImg:cropType="rightCrop" />
</LinearLayout>

2、代码

代码上去设置我们的炫酷PK条，通过权重去更新进度

public class MainActivity extends AppCompatActivity {private CropImageView mLeftBar;private CropImageView mRightBar;private float ratio = 0.0f;private Handler mHandler = new Handler() {@Overridepublic void handleMessage(Message msg) {ratio += 0.1f;updateLayoutParams(ratio);if (ratio <= 1.0f) {mHandler.sendEmptyMessageDelayed(0, 1000);}}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);BitmapDrawable leftDrawable = (BitmapDrawable) getResources().getDrawable(R.drawable.left_bar);Bitmap leftBitmap = leftDrawable.getBitmap();BitmapDrawable rightDrawable = (BitmapDrawable) getResources().getDrawable(R.drawable.right_bar);Bitmap rightBitmap = rightDrawable.getBitmap();mLeftBar = findViewById(R.id.img_left_bar);mRightBar = findViewById(R.id.img_right_bar);mLeftBar.setImageBitmap(leftBitmap);mRightBar.setImageBitmap(rightBitmap);mHandler.sendEmptyMessageDelayed(0, 1000);}//更新PkBar宽度比例private void updateLayoutParams(float ratio) {LinearLayout.LayoutParams paramsLeft = (LinearLayout.LayoutParams) mLeftBar.getLayoutParams();LinearLayout.LayoutParams paramsRight = (LinearLayout.LayoutParams) mRightBar.getLayoutParams();paramsLeft.weight = ratio;paramsRight.weight = 1 - ratio;mLeftBar.setLayoutParams(paramsLeft);mRightBar.setLayoutParams(paramsRight);}
}

源码下载

Android基础控件——ImageView的自定义，巧用Matrix实现图片不变形的炫酷PK条相关推荐

Android基础控件——SeekBar的自定义，超短代码模仿抖音带有数字拖拽进度条
前言在开发中,经常会遇到SeekBar组件的开发,一个高效的自定义SeekBar显得尤为重要,笔者刚好也在项目中大量使用带有数字的拖拽进度条,在深思熟虑后,打算从继承源码形式上,把数字绘制在拖拽进度 ...
Android:基础控件按键文本框输入框制作登录页面
基础控件之Button,TextView,EditText,ImageView Button:按键 TextView:文本框 EditText:输入框 ImageView:图片那我们新建一个工程研究 ...
Android基础控件（一）
前言本文博客主要作为笔记使用,主要说明常用方法,常用手段,偏向于实战. 本文使用的开发工具为Android studio 3.5X版本 Android项目的结构在Android中在Android ...
Android基础控件——ViewFlipper的使用，仿淘宝头条垂直滚动广告条
ViewFlipper的使用,仿淘宝头条垂直滚动广告条学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们的本 ...
Android基础控件——TabLayout的使用、仿爱奇艺导航条
TabLayout的使用.仿爱奇艺导航条学习,学习,学以致用,让基础控件贴近实战效果 TabLayout是Google新推出的Material Design的控件之一,TabLayout的使用必须结 ...
Android基础控件ProgressBar进度条的使用
1.简介 ProgressBar继承与View类,直接子类有AbsSeekBar和ContentLoadingProgressBar, 其中AbsSeekBar的子类有SeekBar和RatingBa ...
Android基础控件之Button的基本使用
Button基础用户界面部分学起来还真是无处下手哇,总不能一个控件发一篇文吧,略有点费时间啊...这个难道不是边用边学才给力吗..所以我打算从最实用的Button开始下手. 先贴几个链接,好东西: ...
Android基础控件—SearchView
1.SearchView是什么? SearchView是Android原生的搜索框控件,可以很方便的添加到用户界面中,用于用户的搜索查询功能.但是SearchView的UI是固定的,自定义起来会比较麻 ...
java自定义日历控件_【无私分享】修订版干货！！！一个炫酷的自定义日历控件，摆脱日历时间选择烦恼，纯福利~...
可能不少的小伙伴都有看楼主昨天发的自定义日历控件,虽然实现功能不多,但也还算将就吧. 但是看了的小伙伴就很心急了,说楼主上传到gitHub的东西有问题,楼主下载来看了看,基本都没问题吧,没弄好的小伙伴 ...

Android基础控件——ImageView的自定义，巧用Matrix实现图片不变形的炫酷PK条

前言

实现

适配

使用

源码下载

Android基础控件——ImageView的自定义，巧用Matrix实现图片不变形的炫酷PK条相关推荐

最新文章

热门文章