네번째 프로젝트 만들기_01_디자인

이번에는 간단한 이미지 앨범을 만들면서 버튼과 이미지뷰 사용법을 배워본다.

 

Photo Trip (사진 여행)

 

 

첫화면에는 버튼이 2개 있다.

버튼을 클릭하면 해당 액티비티 화면으로 이동한다.

 

 

이동한 액티비티 화면에는 버튼이 3개 있다.

각 버튼을 클릭하면 이미지가 나타난다.

 

 

다른 버튼은 투명도를 높이고 이미지에 해당하는 버튼만 투명도를 없앤다.

오른쪽 아래에는 FAB버튼을 추가하고 클릭하면 액티비티 화면을 종료하여 메인화면으로 돌아간다.

 

 

새 프로젝트 만들기

 

 

새 프로젝트를 만들고 아래와 같이 설정한다.

 

 

activity_main.xml 디자인

 

기존에 있던 textView를 삭제한다.

버튼2개를 넣을 Linear Layout(Vertical)을 ConstraintLayout안에 추가한다.

Linear Layout은 뷰를 일직선으로 나열하는 틀이다.

Horizontal(가로)모양과 Vertical(세로) 모양이 있다.

화면으로 끌어서 놓아도 되고 아래와 같이 Component Tree에 가져다 놓아도 된다.

버튼2개를 세로로 나열할 것이므로 vertical(세로)모양을 선택한다.

 

 

 

계속해서 버튼 2개를 같은 방법으로 LinearLayout아래에 추가한다.

 

 

완성하면 아래와 같다.

버튼 2개는 LinearLayout안에 포함되어 있는 상태다.

 

 

라이너 레이아웃을 선택한 후 속성창에서 넓이와 높이를 조정한다.

 

레이아웃 width(넓이)는 100dp , height(높이)는 wrap_content를 선택해서 버튼을 감싸도록 한다.

 

라이너 레이아웃을 선택한 상태에서 계속하여 '세로의 가운데'로 정렬한다.

 

 

왼쪽 제약을 만들고 약간의 여백을 준다.

 

버튼의 간격을 벌리고 싶으면 Layouts에 있는 Space(공간)를 추가한다.

 

 

Space를 선택한 후 layout_height를 50dp로 정하면 버튼 사이의 간격을 넓힐 수 있다.

 

버튼 2개의 id를 바꾸고 string 소스를 만든다.

 

 

새 액티비티 추가

 

왼쪽 탐색창에서 Java폴더에서 마우스 오른쪽 클릭 후 Empty Activity를 클릭한다.

 

AFRICA버튼을 클릭하면 이동할 액티비티이므로 아래와 같이 설정한다.

 

 

같은 방법으로 AsiaActivity도 하나 만든다.

완성하면 탐색창은 아래와 같다.

 

 

activity_africa.xml 디자인

 

버튼3개를 앞에서 했던 방법으로 좌측에 만든다.

 

 

Floating Action Button 을 화면 오른쪽 아래에 넣자.

 

 

검색창에서 rev를 입력 후 아이콘을 revert (되돌아감)로 선택한다.

 

 

오른쪽과 아래쪽에 제약을 만든다.

 

 

FAB버튼에 경고 아이콘이 나타나 있다.

 

focusable을 추가하라는 경고 메시지는 그냥 둬도 되지만 거슬리면 클릭해서 해결한다.

 

focusable은 키보드를 통해서 접근하려고 할 때 활성화(true)해야 한다.

Fix버튼을 클릭한다.

FloatingActionButton의 id를 FloatingActionButtonAfrica로 수정한다.

너무 길면 FabAfrica로 해도 된다.

 

 

 

마지막으로 사진이미지를 넣을 imageView(이미지뷰)를 추가해야 한다.

 

임시로 아무 이미지나 등록하자.

 

 

imageView가 화면 전체에 꽉 차도록 설정한다.

이때 주의할 점은 왼쪽(Start)의 제약은 왼쪽 스크린 끝으로 직접 끌어서 제약을 걸어야 한다.

 

 

위와 같이 한 후에는 임시로 넣었던 이미지를 삭제한다.

 

srcCompat의 내용을 삭제한다.

 

activity_asia.xml 디자인

 

activity_africa.xml과 같은 방법으로 디자인한다.

각 버튼의 text속성은 button_text의 String값(PHOTO)을 선택한다.

floatingActionButton의 id는 fabAsia로 바꾼다.

 

배경 이미지 추가하기

 

필요한 이미지는 다음과 같다.

 

activity_main의 배경 이미지 1개(img_main)

activity_africa의 배경 이미지 1개(img_africa), 버튼을 클릭하면 나타나는 이미지 3개(img_africa_0, ~1, ~2)

activity_asia의 배경 이미지 1개(img_asia), 버튼을 클릭하면 나타나는 이미지 3개(img_asia_0, ~1, ~2)

파일의 총 개수는 9개다.

 

이미지들을 무료 이미지 제공 사이트인 Pixabay에서 적당한 이미지를 다운로드 받는다.

받은 파일이름을 위 괄호 처럼 바꾼다.

 

모르는 사람을 위해 파일 하나만 받아 본다.

구글 검색창에 pixabay를 입력하여 픽사베이 사이트(pixabay.com)로 간다.

 

검색창에 map hands를 입력하고 엔터키를 치면 이미지가 나타난다.

참고로 빨간색 테두리의 이미지들은 픽사베이 무료이미지가 아니고 스폰서 회사의 유료 이미지다.

그 아래쪽 부터 픽사베이 이미지이다.

다운 받을 이미지를 클릭하고 적당한 크기를 선택하고 다운로드 한다.

 

다운로드가 완료되면 탐색기로 이동하여 파일 이름을 img_main 등으로 바꾼다.

총 9개의 이미지 이름을 모두 바꾼다.

 

탐색기에서 Shift를 사용해서 이미지를 모두 선택하고 복사한다. (Ctrl+C)

 

 

안드로이드 스튜디오로 가서 drawable폴더에 붙여넣기 한다.

 

이미지는 보통 drawable 폴더에 넣으면 된다.

drawable-v24 폴더는 최근에 만들어졌다.

최신 안드로이드 폰과 호환되는 이미지를 제공하기 위해 만들어졌다.

만약 이미지에 에러가 나는 경우에는 drawable폴더에 넣어서 사용하면 된다.

 

 

배경이미지 등록하기

 

activity_main의 background(배경)이미지를 넣어보자.

 

같은 방법으로 activity_africa , activity_asia의 배경 이미지도 넣는다.

 

여기까지 디자인은 대충 마무리 했다.

 

다음 글에서 코드를 작성한다.

 

끝.

Wraven...