Android基礎控件——ImageView的自定義，巧用Matrix實現圖片不變形的炫酷PK條
阿新 • • 發佈：2019-05-15
imageview The nco version chang fst handler mpat sage 前言
在開發中常常會遇到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.CropImageView
android: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.CropImageView
android: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() {
@Override
public void handleMessage(Message msg) {
ratio += 0.1f;
updateLayoutParams(ratio);
if (ratio <= 1.0f) {
mHandler.sendEmptyMessageDelayed(0, 1000);
}
}
};
@Override
protected 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條