Glide-transformations 써보기(blur, colorFilter 효과등등)

Glide-transformations 써보기

(blur, colorFilter 효과등등)

ㆍ 이번에는 Glide-transformations라는 라이브러리를

    추가해서 써보겠습니다.

ㆍ Glide를 쓰면서 이미지효과(변형)를 주는데 도움을

    주는 라이브러리입니다.

ㆍ 좀 많이 쓰이는 Blur효과나 이미지 원형으로 자르기

    등등의 작업을 아주 쉽게 구현가능하도록 도와줍니다

ㆍ 원래 계획은 RecyclerView에다가 이미지를 넣는것을

    해보려고 했는데 쉽고 간단한것부터 천천히 해보려고

    마음을 바꿨습니다.. 

Glide-transformations를

사용해보기 위해서

https://github.com/wasabeef/glide-transformations

위 링크에 들어가셔서

저번글에서 했던것처럼

똑같이 build.gradle에다가

추가해주시면 됩니다

이 부분을 똑같이 넣어주시면 되겠죠?

이런식으로 밑에 2개를 

추가해주시면

준비는 끝났습니다

사용방법 : 저번과 똑같이 한줄이면 끝납니다

레이아웃은 지난글과

똑같이 그냥 ImageView 하나만

놓겠습니다.

첫번째로 가장 많이 쓰이는

Blur를 사용해보겠습니다.

Blur가 뭔지 결과를 먼저

보면

이런식으로 이미지를

흐릿하게 바꿔주는

효과입니다.

가장 중요한 코드를 보겠습니다

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = (ImageView) findViewById(R.id.iv);
        Glide.with(this).load(R.drawable.img).bitmapTransform(new BlurTransformation(this)).into(iv);
    }
}

딱 봐도 간단해보입니다

맨 밑에 줄만 보시면 됩니다

Glide.with(context),load(이미지파일).bitmapTransform(new BlurTransformation(context)).into(ImageView);

다른 부분은 이전글에서 봤던것과 똑같고

보라색글씨가 이번에 추가한

라이브러리 부분입니다.

참 쉽죠~

이제 사용방법은 다 배웠습니다.

지금부터는 저 라이브러리에 있는

효과들을 제가 적용시킨 결과를

보여드리겠습니다

(일단 오늘은 위에 형태와 같이

간단하게 context만 넣어서 

보여드리겠습니다)

여러분은 이중에서 괜찮은것만 골라 쓰시면 될 것 같습니다.

(종류가 많으니 뭐가뭔지 직접 넣어보기 번거롭잖아요)

CropCircleTransformation

Glide.with(this).load(R.drawable.img).bitmapTransform(new CropCircleTransformation(this)).into(iv);

GrayscaleTransformation

Glide.with(this).load(R.drawable.img).bitmapTransform(new GrayscaleTransformation(this)).into(iv);

다음 효과부터는 코드는 생략하고 결과만 보여드리겠습니다

new 뒷부분만 변경해주시면 됩니다.

ToonFilterTransformation

SepiaFilterTransformation

InvertFilterTransformation

PixelationFilterTransformation

SketchFilterTransformation

이게 전부는 아니고

제가 봤을때 context만 넣는

코드에서 위에 효과들이

그나마 가장 골라서 쓸만한것

같아서 넣어봤습니다

나중에 좀 더 자세하게

써보긴 할텐데 그전에

빠진것들도 보고 싶은 분들은

https://github.com/wasabeef/glide-transformations/blob/master/example/src/main/java/jp/wasabeef/example/glide/MainAdapter.java

여기에 종류가 있으니 적용해보시면

될 것 같습니다.

위 효과 적용한 코드들은 혹시 모르니

적어놓겠습니다

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = (ImageView) findViewById(R.id.iv);
        //Glide.with(this).load(R.drawable.img).bitmapTransform(new BlurTransformation(this)).into(iv);
        //Glide.with(this).load(R.drawable.img).bitmapTransform(new CropCircleTransformation(this)).into(iv);
        //Glide.with(this).load(R.drawable.img).bitmapTransform(new GrayscaleTransformation(this)).into(iv);
        //Glide.with(this).load(R.drawable.img).bitmapTransform(new ToonFilterTransformation(this)).into(iv);
        //Glide.with(this).load(R.drawable.img).bitmapTransform(new SepiaFilterTransformation(this)).into(iv);
        //Glide.with(this).load(R.drawable.img).bitmapTransform(new InvertFilterTransformation(this)).into(iv);
        //Glide.with(this).load(R.drawable.img).bitmapTransform(new PixelationFilterTransformation(this)).into(iv);
        Glide.with(this).load(R.drawable.img).bitmapTransform(new SketchFilterTransformation(this)).into(iv);
    }
}

다음번에는 맨~~위에

링크를 보면 나와있는데

위 효과들을 멀티로 줄 수도 있습니다

링크에서 내려보시면

이런식으로

정말 친절하게 알려줍니다

그대로 한번 따라서 써보겠습니다

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //ImageView iv = (ImageView) findViewById(R.id.iv);
        Glide.with(this).load(R.drawable.img).bitmapTransform(new BlurTransformation(this, 25),
                new CropCircleTransformation(this)).into((ImageView) findViewById(R.id.iv));
    }
}

사용방법 그대로 따라서

into에 findViewById까지 다 적어주셔도 되고

위에 한것 처럼 살린다음에 iv만 적어주셔도 똑같습니다

결과를 보면

Blur효과와 CropCircle효과가

동시에 적용된 것을 확인할 수 있습니다

여기까지가 이번글에서 알아본 것인데

다음번에 Glide-transformations 관련해서

글을 한번 더 쓰게 될 것인데 맛빼기만 보자면

마지막 코드에서 

Blur에 context 말고 옆에 25가 붙은 것을

확인 할 수 있습니다

이게 무엇인지 궁금할 수 있는데

그렇다면 new BlurTrans 부분에 컨트롤을 누르고

마우스 왼쪽을 누르게 되면

해당 클래스로 이동이 가능합니다

클래스를 자세히~ 보시면

context 옆 숫자의 의미를 파악할 수 있습니다

지금 blur에서 25는 MAX_RADIUS값입니다

그리고 아래를 BlurTran~(context)를 보면

MAX_RADIUS가 들어가 있는 것을 볼 수도 있습니다

이 말의 의미는 옆에 숫자를 안넣으면 디폴트로 25가

적용된다는 뜻입니다.

그럼 위의 멀티효과 준부분에서 25를

1과 8정도로

낮춘후에 결과를 보면

다음과 같이 Blur 효과가 약해지는 것을

확인 할 수 있습니다.

그 다음에

ColorFiltertansformation이라는

것이 있는데 이것도

Context 뒤에 argb를 넣어야되서

위에 내용에서 같이 포함시키지

않았지만

제 생각엔 간단하지만

엄청 효율적인 효과이므로

이것까지 설명드리겠습니다

ColorFilterTransformation

이 효과는 무엇인가 하면

이미지 위에 Filter를 씌우는 것입니다

예전 어렸을적에 셀로판지? 였나요?

셀로판지를 겉에 붙인 효과입니다

이해를 위해

결과를 먼저 보는게 빠르겠죠

가장 효과가 좋은 빨,초,파로 해보죠

역시 결과를 보는게

가장 효과적입니다

어떤효과인지

이해가 가셨을거라 생각합니다

코드를 보면 ColorFilter는

Context옆에 argb를 적어주시면 됩니다

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = (ImageView) findViewById(R.id.iv);
        //빨강
        Glide.with(this).load(R.drawable.img).bitmapTransform(new ColorFilterTransformation(this, Color.argb(100, 255, 0, 0))).into(iv);
        //초록
        Glide.with(this).load(R.drawable.img).bitmapTransform(new ColorFilterTransformation(this, Color.argb(100, 29, 219, 22))).into(iv);
        //파랑
        Glide.with(this).load(R.drawable.img).bitmapTransform(new ColorFilterTransformation(this, Color.argb(100, 1, 0, 255))).into(iv);
    }
}

코드에 나온 그대로

숫자 4가지는 순서대로

a r g b 입니다

r g b는 색상코드표에 나온그대로

찾아서 적어주시면 되고

a는 알파값으로 투명도입니다

0~255까지중에 선택해주시면 됩니다

255로 갈수록 불투명해지게 됩니다

투명도 10%라고 하면 25~26정도로 넣으시면

되겠죠?

한번 마지막 파란색의 알파값을

100 -> 200

변경해서 결과를 보면

훨씬 불투명해진 것을

확인 하실 수 있습니다.

이것으로 글을 마치도록 하겠습니다.

Glide는 정말 너무 유용해서 책으로 나와도

정말 두껍게 나올수 있을 정도로

활용할 수 있는 범위가 엄청 넓고 많습니다

(책이 혹시 있는지는 확인 안해봤습니다..)

Glide를 사용해보신 분들중에

이전글과 이번글을 보시면서 혹시

너무 내용이 부족하다고 생각하시는분들도

분명 계실겁니다.

이미지를 리소스로만 가져왔을뿐

uri, url, bitmap으로 가져오는 코드도 아직 안봤고

diskCacheStrategy, asBitmap, placeholder,override,

thumbnail, error 등등 중요한것들을 아직

이전과 이번글에서 한번도 안썼기 때문입니다.

Glide는 너무 내용이 많기 때문에 천천히

하나하나 차근차근 써보면서 글을 쓰려고 합니다.

속도가 느린점 이해해주시면 감사하겠습니다 ~