본문 바로가기
개발/안드로이드 개발

[안드로이드] 웹툰 바로가기 어플 Final - ImageView

by 똘똘이박사 2015. 10. 14.

· 최초작성 : 2015. 10. 14.

· 최종수정 : 2015. 10. 16.

· 작성/수정내용 :

  - ImageButton 대신 ImageView 사용하여 버튼 만들기





시작하기에 앞서...


ㅎㅎㅎㅎ 이제 마지막이네요.

벌써 다음에 뭘 만들면서 포스팅해야 할지 걱정하고 있습니다.ㅋㅋ

어떤 내용을 공부해 볼까요??




# 안드로이드 웹툰 바로가기 어플 - 마지막 - ImageView







네~ 이제 드디어 마지막 입니다.

이 포스팅을 보셔도 되고 안보셔도 됩니다.

어차피 결과 화면은 똑같으니까요 ㅎㅎㅎㅎ

(위 그림도 새로 캡쳐 안했습니다!!! 결과가 똑같아서 ImageButton 때거 우려 먹었어요!!)

게다가 ImageView 의 속성도 몇 가지 빼놓고는 다른 view와 비슷합니다.

그래서 이번 장에서는 특이한 몇 가지 사항을 정리해 보고 넘어 마무리 하려고 합니다.




1. ImageView


ImageView는 안드로이드에서 이미지를 보여줄 수 있는 몇 안되는 view 일거 같습니다.

(일단 제가 아는건 ImageButton 이 하나 더 있네요 ㅋ)


'웹툰 바로가기' 어플에서는 소스를 특별히 수정할 필요도 없습니다.

단순히 ImageButton을 ImageView 로 바꿔만 줘도 잘 실행 됩니다.


다만 몇 가지 추가적인 기능을 넣고 싶을때 ImageView만의 추가적인 기능이 있습니다.


우선 수정된 소스를 보고 그 외의 속성들도 살펴 볼께요


activity_main.xml

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_daum_webtoon"
android:onClick="onClick"
android:src="@drawable/daum_icon"
android:background="#FFFFFF"
android:padding="10dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_naver_webtoon"
android:onClick="onClick"
android:src="@drawable/naver_icon"
android:background="#FFFFFF"
android:padding="10dp"
android:layout_toRightOf="@id/btn_daum_webtoon"
/>




별거 없죠?

ImageButton 을 단순히 ImageView로 수정만 해주었습니다.


너무 별거 없는거 같아서 ImageView의 몇 가지 속성들도 조금 적어 보았습니다.






ImageView 역시 View를 상속받았네요


ImageView의 속성들은 아래와 같습니다.


속성

내용 

 adjustViewBounds

 true로 설정될 경우 이미지뷰의 크기를 원본 이미지의 크기와 동일하게 됨

 baseline

 원본 이미지의 baseline을 수치로 셋팅함

 baselineAlignBottom

 원본 이미지의 baseline을 이미지의 하단으로 셋팅

 MaxHeight

 원본 이미지의 최대 높이를 셋팅

 maxWidth

 원본 이미지의 최대 너비를 셋팅

 scaleType

 원본 이미지의 사이즈가 변경될 때 어떻게 셋팅 될지를 설정

 src 

 원본 이미지의 주소

 tint

 원본 이미지위에 투명도를 설정

 tintMode

 투명도 모드를 설정 (API Lv 21 추가)


여기서 가장 중요한 속성은 뭐니뭐니 해도 이미지가 경로를 설정하는 속성이겠죠

다른 View의 속성과 비슷합니다.


그리고 아마 가장 많이 쓰이는 속성이 scaleType 일 건데요

scaleType 에는 아래와 같이 많은 값들이 있습니다.


속성값 

 설명 

 matrix

 이미지를 이미지뷰 왼쪽 상단에 배치하며 이미지 크기가 이미지 뷰보다 크면 영역 이외의 부분은 짤림

 fitXY

 이미지크기를 이미지 뷰에 맞춘다. 유일하게 종횡비가 깨짐

 fitStart

 이미지를 이미지뷰 왼쪽에 정렬

 이미지 크기를 이미지뷰 크기에 맞춤

 fitCenter

 이미지를 이미지뷰 중앙에 정렬

 이미지 크기를 이미지뷰 크기에 맞춤, 기본 설정값

 fitEnd

 이미지를 이미지뷰 오른쪽에 정렬

 이미지 크기를 이미지뷰 크기에 맞춤 

 Center

 이미지를 정중앙에 배치

 단, 이미지 크기가 이미지뷰 크기보다 클때 이미지뷰 밖의 이미지는 짤림 

 CenterCrop

 이미지를 정중앙에 배치

 단, 짧은쪽 길이를 기준으로 이미지뷰 영역에 맞추며, 나마지는 짤림 

 centerInside

 이미지를 정중앙에 배치

 단, 이미지 크기가 이미지뷰 보다 크면 축소됨



그리고 마지막으로 tintMode는 API LV 21부터 추가된 속성입니다.

블랜딩을 어떤 식으로 씌울지 설정하는 값입니다.

음... 예를 들면 파워포인트 에니매이션 기능을 생각하시면 좋을거 같습니다.


속성값은 아래와 같은데 전 적용 잘 안되네요;;;;;;

구글링 해봐도 잘 모르겠네요...

(무슨 말인지도 잘 못알아 먹겠구요... ㅜㅜ)

나중에 한 번 해보고 결과 업르도 해볼께요~!.


속성값 

 내용 

 src_over

 The tint is drawn on top of the drawable. [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc]

 src_in

 The tint is masked by the alpha channel of the drawable. The drawable’s color channels are thrown out. [Sa * Da, Sc * Da]

 src_atop

 The tint is drawn above the drawable, but with the drawable’s alpha channel masking the result. [Da, Sc * Da + (1 - Sa) * Dc]

 multiply

 Multiplies the color and alpha channels of the drawable with those of the tint. [Sa * Da, Sc * Dc]

 screen

 [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]

 add

 Combines the tint and drawable color and alpha channels, clamping the result to valid color values. Saturate(S + D)




여기까지 '웹툰 바로가기' 어플 이었습니다.

만들고 싶은 어플이 있어서 공부하면서 적다보니 포스팅의 수준이 그렇게 깊지는 안았던거 같네요.

(죄송합니다... ㅜㅜ)




다음 포스팅에서는

지금까지 사용했던 View에 대해 간단히 보고 넘어왔던 내용들을

조금 더 자세히 정리해 볼까 합니다.


속성은 어떤게 있고 어떻게 작용하는지 보려구요.

나중에 필요 할 수 있자나요 ㅋ





반응형