'Android/ImageView'에 해당되는 글 2건

  1. 2013.08.08 이미지에 grayscale효과 주기
  2. 2013.08.08 Android) ImageView android:scaleType
2013. 8. 8. 17:47

안드로이드 앱을 개발하다 보면 활성화 / 비활성화 표시로 이미지를 grayscale로 만들어 표시할 경우가 있다. 물론 원본 이미지와 grayscale 이미지가 있으면 간단하게 할 수 있지만 원본 이미지만 있어도 코드로 
이미지를 grayscale로 만들 수 있다.

1. RGB 이미지를 GrayScale로 변경하기
GrayScale로 변경하기 위해서는 ColorMatrix 클래스를 사용하게 된다. ColorMatrix는 5x4 matrix로 1차원 float 배열 (float[20])을 사용한다. 기본 matrix 값은 아래와 같다. 자세한 내용은 영상처리와 함께 공부하면 도움이 된다.
*http://developer.android.com/reference/android/graphics/ColorMatrix.html

1 0 0 0 0  - red
0 1 0 0 0  - green
0 0 1 0 0  - blue
0 0 0 1 0  - alpha

기본적으로 밝기 조절은 5번째 행의 값을 올려주면 그 만큼 밝아지게 된다. contrast 조절은 기본 matrix의 1로 된 부분의 값을 변경해 주면 된다.

grayscale로 변경할 때는 직접 matrix 값을 수정할 필요하가 없다. 수학에 약한 사람이라면 참 다행인 일이다. 나에게도 다행이다. ^^;;

색의 3요소는 색상, 명도, 채도 이다.(인터넷에 나와있다. 필자는 미술에 약하다ㅠ.ㅠ) grayscale로 만들기 위해서는 채도를 수정해야 한다. 채도값이 없으면 흰색, 검은색 등 무채색이 된다. 즉 grayscale은 채도값을 0으로 만들어 주면 된다.

ColorMatrix.setSaturation(float sat); 메소드를 사용하면 RGB 이미지를 grayscale로 만들 수 있다.
RGB 이미지를 grayscale로 바꾸는 ColorMatrix를 생성했는데 어떻게 적용할까?

방법은 2가지가 있다. 이미지 뷰에 적용하는 방법, 그리고 drawable에 적용하는 방법.

2. 이미지뷰에 적용하기
ImageView.setColorFilter(ColorFliter filter); 메소드가 있다. 이 메소드를 이용하여 적용하면 된다. 하지만 파라미터의 데이터 형은 ColorFilter이다. ColorMatrix를 적용할 수 없다. 이를 가능하게 해주는 다리 역할을 ColorMatrixColorFilter 클래스가 한다. 이제 적용해 보자.

//이미지뷰를 gray scale로 변경
public void setGrayScale(ImageView v){
    ColorMatrix matrix = new ColorMatrix();
    matrix.setSaturation(0);                        //0이면 grayscale
    ColorMatrixColorFilter cf = new ColorMatrixColorFilter(matrix);
    v.setColorFilter(cf);
}

3. Drawable에 적용하기
Drawable.setColorFilter(ColorFliter filter); 메소드가 있다. 이미지뷰의 마찬가지로 ColorMatrixColorFilter를 사용하면 된다.

//drawable만 grayscale로 변경
public Drawable convertGrayScale(Drawable d){
    ColorMatrix matrix = new ColorMatrix();
    matrix.setSaturation(0);                    //0이면 grayscale
    ColorMatrixColorFilter cf = new ColorMatrixColorFilter(matrix);
    d.setColorFilter(cf);

    return d;
}


   


4. 적용한 ColorMatrix 되돌리기
ImageView와 Drawable 모두 clearColorFilter(); 메소드가 있다. 이 메소드를 이용하여 적용된 ColorMatrix를 다시 되될릴 수 있다.

m2ndImageView.clearColorFilter();                        //이미지뷰의 컬러필터 삭제
m3rdImageView.getDrawable().clearColorFilter();        //drawable의 컬러필터 삭제

Drawable의 ColorFilter를 되돌렸으면 해당 drawable을 사용하는 뷰를 invalidate() 해준다.


m3rdImageView.invalidate();                                //3번째 이미지뷰 새로 고침

5. Drawable에 적용할 경우 주의 사항
Drawalbe을 얻어올 때 앱 내의 res폴더에 있는 이미지를 얻어올 경우( ImageView.getDrawable(), Resources.getDrawable(int id) ) 얻어온 drawable에 바로 ColorMatrix를 적용하면 안된다. 이 경우 해당 리소스가 변경되는 것이므로 그 리소스를 쓰는 다른 뷰의 이미지도 같이 변경된다. 이런 경우를 막기 위해 가져온 Drawable 객체의 mutate() 메소드를 써서 다시 drawable을 가져오는 것이다.

Drawable d = m3rdImageView.getDrawable().mutate();        //drawable을 얻어옴.
m3rdImageView.setImageDrawable(convertGrayScale(d));        //grayscale로 변경 후 이미지 지정


전체 샘플 코드 첨부하였습니다.
*글과 자료는 출처만 밝히시면 얼마든지 가져다 쓰셔도 됩니다.


 GrayScaleTest.zip




출저 : http://blog.daum.net/mailss/22

'Android > ImageView' 카테고리의 다른 글

Android) ImageView android:scaleType  (0) 2013.08.08
Posted by hoonihoon
2013. 8. 8. 10:29


ScaleType속성은 matrix, fitXY, fitStart, fitCenter, fitEnd, center, centerCrop, centerInside  이렇게 8종류가 있다.

 

용그림은 구분이 잘되도록 빨간색 테두리를 입혀놓았다.

 

검은색 바탕 : Layout 

하얀색 바탕 : 실제로 ImageView가 차지하는 영역

 

matrix

 

 

Matrix는 원본파일의 사이즈 그대로 보여준다.

 

Java 코드는 setScaleType(ImageView.ScaleType.MATRIX);로 설정

 

center

 

 

matrix와 같이 원본 이미지 사이즈를 그대로 보여주며 가운데 정렬을 한다.

 

Java 코드는 setScaleType(ImageView.ScaleType.CENTER);로 설정

 

centerCrop


(ImageView 영역은 match_parent(fill_parent)이다)

ImageView 영역에 공백이 있을 경우 비율을 유지하며 이미지를 늘린다.

 

Java 코드는 setScaleType(ImageView.ScaleType.CENTER_CROP);로 설정

 

centerInside


 

centerCrop과는 반대로 ImageView 영역을 벗어나면 비율을 유지하며 줄어든다.

 

Java 코드는 setScaleType(ImageView.ScaleType.CENTER_INSIDE);로 설정

 

fitStart

 

 

fitStart centerInside와 같으며 정렬은 왼쪽 위라는 것이 다르다.

 

Java 코드는 setScaleType(ImageView.ScaleType.FIT_START);로 설정

 

fitCenter


 

fitCenter centerInside와 같은 기능을 한다.

 

Java 코드는 setScaleType(ImageView.ScaleType.FIT_CENTER);로 설정

 

fitEnd 



fitEnd centerInside와 같으며 정렬은 왼쪽 아래인 것이 다르다.

 

Java 코드는 setScaleType(ImageView.ScaleType.FIT_END);로 설정

 

fitXY



(height wrap_content이다)         (height match_parent(fill_parent)이다)

fitXY
는 비율에 상관없이 ImageView영역을 가득 채운다.

 

Java 코드는 setScaleType(ImageView.ScaleType.FIT_XY);로 설정

 

주의 할점은 이 속성은 android:src로 이미지를 불러왔을 때 적용되며

 

android:background로 불러오면 이 속성은 적용 되지 않는다.


 

속성값

java

설명

matrix

setScaleType(ImageView.ScaleType.MATRIX)

원본 크기 그대로 보여줌 (왼쪽상단 정렬)

Center

setScaleType(ImageView.ScaleType.CENTER)

원본 크기 그대로 보여줌 (가운데 정렬)

centerCrop

setScaleType(ImageView.ScaleType.CENTER_CROP)

View 영역에 공백이 있으면 채워서 보여줌(비율유지)

centerInside

setScaleType(ImageView.ScaleType.CENTER_INSIDE)

View 영역을 벗어나면 맞춰서 보여줌(비율유지)

fitStart

setScaleType(ImageView.ScaleType.FIT_START)

View 영역에 맞게 보여줌 (왼쪽상단 정렬비율유지)

fitCenter

setScaleType(ImageView.ScaleType.FIT_CENTER)

View 영역에 맞게 보여줌 (가운데 정렬비율유지)

fitEnd

setScaleType(ImageView.ScaleType.FIT_END)

View 영역에 맞게 보여줌 (왼쪽하단 정렬비율유지)

fitXY

setScaleType(ImageView.ScaleType.FIT_XY)

View 영역을 가득 채워서 보여줌(비율유지 안함)

Android) ImageView android:scaleType 

 [출처] Android) ImageView android:scaleType|작성자 영라이더


'Android > ImageView' 카테고리의 다른 글

이미지에 grayscale효과 주기  (0) 2013.08.08
Posted by hoonihoon