BTS 사진 어플 만들기

사진은 app>res>drawable 폴더에 넣어주자.

이 어플을 만들때는 레이아웃 중 LinearLayout을 사용할 것이다.

레이아웃에는 세 종류가 있는데 아직 몰라도 된다.

 

이미지를 보여주기 위해 ImageView를 넣어주자.

width와 height는 각각 100dp로 설정하자.

 

이제 ImageView에 보일 이미지를 android:src 로 지정하여 선택해주자.

Design창에 이미지가 잘 들어갔음을 확인할 수 있다.

이런 ImageView를 여러개 넣으면 여러 사진을 보여줄 수있다.

 

레이아웃에 대한 이해

잠시 아까 언급한 레이아웃에 대해 알아보고 가자.

 

Linear Layout

글을 쓰는것처럼 좌우 공간이 있다면 왼쪽에서 오른쪽으로, 좌우 공간이 다 차면 아래쪽으로 요소들을 배치하는 레이아웃이다.

 

Relative Layout

기존의 요소와 상관없이 기준 좌표를 기준으로 지정된 위치에 배치한다.

요소끼리 겹칠수 있다.

 

Constraint Layout

각각의 요소들을 얼마만큼 띄워 배치할지를 통해 요소의 위치를 결정하는 레이아웃이다.

 

 

 

 

그럼 계속 BTS 어플 제작을 해보자

단순히 ImageView를 복사 붙여넣기하면 좌우로만 요소가 추가되어 화면을 넘어가는 것을 볼 수 있다.

한 줄을 하나의 LinearLayout으로 묶고, 다음줄은 새로운 LinearLayout으로 묶는 방식으로 진행해야한다.

좌우너비는 부모요소와 동일하도록 match_parent 속성을 주었고, 높이는 콘텐츠를 딱 감싸도록 wrap_content 속성을 주었다.

 

이런 LinearLayout을 여러개 만들어주자

그런데 그래도 여전히 여러 줄로 사진이 표현되지 않는 것을 볼 수 있다.

이는 가장 바깥의 LinearLayout의 orientation을 설정해주지 않아서 기본값인 horizontal 방향으로 정렬되어서 그렇다.

android:orientation="vertical"

이렇게 적어주면 우리가 의도한 대로 사진이 보일 것이다.

 

.kt 파일로 요소 제어하기

이제 요소를 제어하는 방법을 배울 것이다.

내가 여기서 구현하고자 하는 기능은 이미지를 클릭하면 이미지가 크게 보이도록 하는 것이다.

우선 클릭된 이미지를 제어하기 위해 ImageView 요소에 id를 부여하자.

android:id = "@+id/아이디"

이렇게 적어주면 된다.

 

다음으로 .kt파일에 가서 요소를 제어해보자

 

 

 

우선 val로 변수를 선언하고 findViewById를 활용하여 요소를 변수에 저장하였다.

<>안에 들어가는 것이 어떤 종류의 요소를 선택할 것인지이며, ()안에 들어가는 것이 예제에서는 요소의 id이다.

이후 요소가 클릭되었을때 이벤트를 설정하기 위해 setOnClickListener를 설정해주었다.

우선 이벤트리스너가 잘 작동하는지 확인하기 위해 임시로 "1번 클릭 완료"라는 토스트 메세지를 출력하도록 하였다.

가상기기를 열고 1번 사진을 클릭하면 메세지가 뜨는 것을 확인할 수 있다.

 

이제 이미지가 화면에 꽉 차게 보이도록 할 것임.

우리가 구현할 방식은 이미지가 클릭되면 다음 화면으로 넘어가서, 그 화면에 이미지를 꽉 차게 배치하는 방식임.

우선 새로운 화면을 만들려면 액티비티가 하나 더 필요하므로 새로운 empty Activity를 만들어준다.

ImageView를 만들어주고 크기는 높이와 너비 모두 match-parent로 설정해주자.

android:src에 이미지 링크를 걸어주면 새로운 액티비티가 잘 준비되었다.

 

이제 이벤트 리스너에 새로운 화면으로 넘어가도록 코드를 적어주자.

Intent 함수를 사용하면 된다.