Android #3 - 새 버전 설치, imageView (국비29일차)

 

 

목차

1. 새 버전 설치

2. ImageView

 

 

 

 

오늘 수업에 들어가기에 앞서

기존에 설치한 버전이

매우 느리게 작동하고 버그가 약간 있어서

Canary build인 Giraffe 버전을 다운해서 사용할 것이다.

방법은 아래와 같다.

 

우선 android developer에 들어가서 다운로드에 페이지에 간다.

거기서 preview를 누르면

아래와 같은 페이지가 나타난다.

 

 

 

다운을 받으면 알겠지만

설치파일이 아닌 zip파일이다.

즉 설치가 필요 없는 것이다.

 

d드라이브에 giraffe 버전 폴더를 만들고

 

다운로드한 zip을 압축해제해서

넣어주자.(android-studio)

그리고 Projects라는 폴더를 만들어주자.

 

그럼 안드로이드 스튜디오 exe파일은 어디에 있을까?

압축을 해제할 때 나왔던 android-studio 폴더를 들어가서

bin 폴더에 들어가면 위의 사진처럼

studio64.exe라는 파일이 나온다.

바로 이것이다.

 

필요하다면 바로가기를 만들어서 바탕화면에 놓자.

 

 

우리가 안드로이드 1일차에 개발 환경 구축을 할 때 봤던 것이 뜨게 된다.

ok로 넘어가고 나머지는 개발 환경 구축때 했던 방법과 같다.

 

2023.02.08 - [Android journey/Android] - Android #1 - 개발 환경 구축 (국비 27일 차)

Android #1 - 개발 환경 구축 (국비27일차)

 

설치 과정 중에 이런 화면이 나타나는데

JDK 위치를 보면

giraffe 폴더에 잘 위치해져 있다.

 

 

세팅이 완료되면

위 사진과 같은 화면이 나타난다.

좌상단을 보면 Giraffe라고 뜬다.

 

 

new project를 누르면

액티비티가 줄어들었다.

 

여기서 Empty Activity를 보면 

가운데에 어떤 표시가 있는데 

바로 저건 compose라고 한다.
(새로운 개발 방법론 - 아직 테스트 단계)

 

우린 view를 이용한 

액티비티를 사용할 것이다.

 

 

시험 삼어 Hello라는 

프로젝트를 만들었다.

 

이때 패키지 네임 바꾸는 것

그리고 저장 경로를 아까 만든

androidGiraffe 폴더 안에 projects 폴더 안에

hello라는 폴더로 지정을 해줘야 한다는 것

잊지 말자.

 

 

2. ImageView

이제부터 다시 오늘 공부로 돌아가자.

오늘은 imageView를 알아볼 예정이다.

이미지뷰 프로젝트를 만들어주자.

 

우선 여러 국기 사진을 준비해서

복사 후 스튜디오에 넣을 것이다.
(대문자가 없어야 한다!)

한 번에 여러 개를 넣을 땐

다른 안내 메시지가 나오지 않는다.

그래서 대문자나 띄어쓰기가 이미지명에 없어야 한다.

 

 

그리고 액티비티 메인에

레이아웃을 LinearLayout으로 바꿔주고

중간에 있는 TextView를 없애준다.

 

그리고 orientation을 버티컬로

padding을 조금 주겠다.

 

ImageView

이미지 뷰는

여타의 뷰와 같이 위의 사진처럼 만들면 된다.

 

그럼 아직 사진을 넣지 않았기에

높이는 없지만

이미지 뷰 공간이 있는 것을 알 수 있다.

이때 왼쪽 오른쪽에 약간

여백이 있는데

이는 LinearLayout에서 패딩 값을 주었기 때문이다.(16dp 씩)

 

 

textview에선 이미지를 넣으려면

background를 썼지만

ImageView에선 src를 통해

이미지를 가져오게 된다.

 

그럼 이렇게 결과물이 나온다.

 

근데 만약 높이를 100dp로 설정한다면?

TextView에선 이미지가 늘어지게 된다.

하지만 ImageView에선 비율이 항상 유지가 된다.

위의 사진처럼

사진의 비율은 유지되면서

사이즈가 줄어든다.

즉 자신이 설정한 가로 세로 중

길이가 짧은 쪽에 맞춰서 설정이 되는 것이다.

 

여기서 scaleType에 대해서 잠깐 알고 가자.

centerCrop은 이미지 정 가운데를 기준으로

확대해서 나머지 부분을 자른 것이다.

scaleType centerCrop

이렇게 표현이 된다.

scaletype에 center값 지정

center 값을 지정하면 그 이미지에 딱 맞게(뷰 사이즈)

설정이 된다.

scaletype에 fitxy값 지정

fitxy는

인위적으로 xy값을 딱 맞게 지정하게 해서

늘리는 방식이다.

기본값이자 centerinside 값

그리고 centerinside는

기본값이다.

 

다른 뷰들과 같이 

이미지 뷰 역시 백그라운드를 설정할 수 있다.

 

백그라운드에 국기를 넣으니

이런 모양이 나온다.
(백그라운드는 fitxy처럼..)

 

우선 기본적으로 포함되어 있는

ic_launcher_background를 넣어주자.

 

 

 

그리고 우리는 버튼을 누르면

다른 국기로 바꾸는 앱을 만들 예정이니

id를 부여해서

이미지를 고칠 수 있게 하자.

 

버튼도 만들어주고

id도 각각 부여해 주자.

그럼 화면이 이렇게 나올 것이다.

 

 

 

그 후 자바로 돌아와서

뷰들의 참조변수는 가급적 멤버변수에 선언하고

onCreat에서 findViewById를 사용해

id를 받아오게 하자.

 

그리고

리스너를 여러 개를 만들지 말고

하나만 만들어서

리스너 객체를 익명클래스로 만들 때

if 문을 이용해서 버튼마다 다르게 설정을 부여하는 방식을 사용하면 더 쉽게 

코드를 짤 수 있다.

 

 

 

 

여기서 하나 알고 가야 할 것이 있다.

wrap_content에 대한 것이다.

이미지뷰를 사용할 때 뷰크기에 wrap_content는

원본이미지의 크기가 기준이 된다.

즉 위의 사진과 같이

사이지가 비율대로 줄어도

원본 이미지의 크기만큼

자리를 차지하고 있다.

 

이런 문제를 해결하기 위해

조절해 주는 속성이 있다.

adjustViewBounds이다.

이 속성을 true값으로 설정해 주면

위의 화면과 같이

이미지가 가로 세로 사이즈에 맞춰서

조정이 된다.