이 글은 기존 운영했던 WordPress 블로그인 PyxisPub: Development Life (pyxispub.uzuki.live) 에서 가져온 글 입니다. 모든 글을 가져오지는 않으며, 작성 시점과 현재 시점에는 차이가 많이 존재합니다.
작성 시점: 2018-03-20
도입
안드로이드에서 웹으로부터 이미지를 불러오는 데에 사용되는 대표적 라이브러리엔 Glide, Fresco, Picasso 등이 있는데, 이 세 개의 라이브러리는 Transformation 라고 하는 기능을 제공한다.
쉽게 설명하자면, 다운받은 이미지를 이미지 뷰에 띄우기 전, 다운받은 이미지를 조작할 수 있게 해주는 기능으로, Glide v4 기준 총 2개의 메서드로 구성된다.
- protected Bitmap transform(BItmapPool, Bitmap, int, int): Bitmap를 파라미터로 받아 조작 후 Bitmap를 반환하는 메서드이다. 여기서 주로 변형 작업을 시행한다.
- public void updateDiskCacheKey(MessageDigest): 디스크 캐시 키를 업데이트 할 필요가 있을 때 사용되는 메서드이다.
이 기능을 사용해서 다운받은 이미지에 투명도 20%의 검은색 배경화면을 올려 블라인드 처리를 해보려 한다.
구현
먼저, BitmapTransformation 을 상속하는 새 클래스를 만들고, 두 개의 메서드를 구현한다. BitmapTransformation 자체가 abstract이기 때문에 바로 구현이 될 것이다.
public class OverlayTransformation extends BitmapTransformation {
@Override
protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
return null;
}
@Override
public void updateDiskCacheKey(MessageDigest messageDigest) {
}
}먼저 updateDiskCacheKey는 지금 작성하는 데엔 중요하지 않으므로, 데이터를 대충 채워넣는다.
@Override
public void updateDiskCacheKey(MessageDigest messageDigest) {
messageDigest.update("overlaytransformation".getBytes());
}그 다음, OverlayTransformation 의 필드에 Paint를 추가하고, 생성자에서 initialize 해준다.
private Paint mBlindPaint;
public OverlayTransformation() {
mBlindPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBlindPaint.setAntiAlias(true);
mBlindPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mBlindPaint.setStyle(Paint.Style.FILL);
mBlindPaint.setColor(Color.argb(35, 0, 0, 0));
}마지막으로 transform 메서드에서 원본 비트맵 위에 Paint를 올려준다.
@Override
protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
Bitmap result = Bitmap.createBitmap(toTransform.getWidth(), toTransform.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(result);
canvas.drawBitmap(toTransform, new Matrix(), null);
canvas.drawRect(0, 0, toTransform.getWidth(), toTransform.getHeight(), mBlindPaint);
return result;
}사용할땐 다음과 같이 사용하면 된다.
Glide.with(imageView.getContext()).load(url).apply(new RequestOptions().transform(new BlindTransformation())).into(imageView);마무리
생각보다 잘 쓰면 꽤나 강력한 기능이기도 하다.
위에서 쓴 오버레이 말고도, 예를 들어 이미지에 'Approved' 같은 딱지를 붙인다거나, RenderScript를 이용해 Blur 처리를 한다던가, Mask를 적용할 수 있다.
이미 wasabeef/glide-transformation 라이브러리에서 대부분 해주니 필요한 기능이 있으면 직접 구현해보는 거도 나쁘진 않을 것 같다.
