Android App - Layout

 

안녕하세요 :)

이번 포스팅에서 다루어볼 주제는 Layout입니다.

지난 포스팅에서 간단한 사진출력 어플리케이션을 만을어 봄으로서 안드로이드 앱개발의 맛을 한번 봤었죠?

 

이번 포스팅에서는 화면요소를 구성하는 가장 기본적인 틀이 되는 Layout에 대하여 다루어 볼것입니다. 제가 어플리케이션을 개발하며 가장 많이 사용하던 레이아웃 두가지는 linear 과 table 입니다.

 

 

가장 첫번째로 Linear Layout에 대하여 다루어 보겠습니다.

Linear layout의 경우 별다른 약식없이 선형성을 갖고 xml 태그들을 쭉나열하는 layout입니다. 하지만 태그의 속성값을 조정하여 위아래 양옆의 위치를 지정해줄수있고 레이아웃속에 레이아웃을 선언하는등의 방법으로 사용자가 임의의 양식을 만들어 주는것은 가능합니다. Linear Lay으로 코딩을 진행한 결과를 먼저 보여드리겠습니다.

 

 

 

간단한 명함 어플리케이션입니다. 물론 실제로 사용할일은 별로 없겠지만, LinearLayout 을 연습하기에는 좋은 주제일것 같습니다.

 

먼저 어플리케이션의 기능을 담당하는 Java code 부터 살펴 보겠습니다.

 

 

MainActivity는 현재 편집중인 어플리케이션의 가장 기본이 되는 자바 클래스입니다. AppCompatActivity라는 클래스를 상속받아 사용하고 있으며 그 클래스내의 메소드를 오버라이딩하는 방식으로 코딩을 진행하였습니다. onCreate라는 무언가를 생성하는 메소드를 오버라이딩하여 setContentView 메소드를 활용하여 지금부터 코딩을 진행할 xml 코드의 내용을 contentview로 설정하게 해주었죠, contentview란 앱실행시 표출되는 UI(user interface)를 말합니다.

 

 

xml코드는 아래와 같습니다.

 

 

 

가장 상위에 LinearLayout 이라는 태그를 사용하여 전체를 묶어주었습니다, 그안에 이미지뷰와 자식LinearLayout(텍스트와 버튼으로 이루어진)를 선언해 주었습니다. 

 

이미지의 경우 지난 포스팅에서 이미지를 엮어준 방식과 동일합니다. 그리고 나머지 코드에 대한 내용은 아래와 같습니다.

 

android : layoutout_width "wrap_content" - 태그의 가로사이즈를 컨텐츠(이미지,텍스트등)에 딱맞게 설정

android : layoutout_width "wrap_content" - 태그의 세로사이즈를 컨텐츠에 딱맞게 설정

android : layoutout_gravity ="right" - 태그의 위치를 오른쪽으로 쏠리게 함

android : text - 컨텐츠에 텍스트를 설정

android : textsize - 텍스트의 사이즈를 설정

 

 

두번째로 다루어볼 Layout은 Table Layout입니다.

테이블 레이아웃의 경우 행과 열을 설정할수 있는 시트형 레이아웃입니다. 저의경우 컨텐츠의 배치가 코드를 실행하기전의 화면에 대한 구상이 Linearlayout에 비해 간편했습니다. 정확한 위치 까지는아니어도 행과 열을 통한 위치를 구상할수 있었기 때문입니다. 테이블 레이아웃을 통해 만들어볼 UI는 아래와 같습니다. (계산기 어플의 인터페이스를 구상한 것인데 당연히 java코드를 동작관련하여 짜지 않았기 때문에 계산기의 기능은 없는 껍데기입니다)

 

 

 

 

 

자바 코드의 경우 이전에 다룬 LinearLayout과 다를것이 없기때문에 따로 다루지 않고 바로 xml코드를 리뷰하겠습니다. 아래에 첨부된 사진과 같습니다.

 

 

 

 

저 간단한 계산기 UI를 하나 구성하는데에도 100라인에 달하는 코드가 나오네요...ㅎㅎ 길어보이는 코드이지만 구성과 원리만 알고 있다면 반복되는 부분이 많기 때문에 금방 눈에 들어오게 될것입니다.

 

일단 가장 크게 TableLayout 태그가 모두를 감싸고 있는것을 확인할수 있습니다. 그렇다면 그 하위에 포함된 태그들은 모두 테이블 레이아웃의 구성요소가 될것입니다. 앞서 말씀드린것처럼 테이블 레이아웃은 행과 열로 구성되어있습니다.

 

열의 경우 따로 태그로 엮어주지는 않지만 행의 경우 데이터 요소들을 tablerow라는 태그를 사용하여 엮어주어야 합니다. html의 <p> 태그 또는 <tr> 태그처럼 행을 구분해주는 태그로 사용됩니다.

 

위의 코드에서는 10,39,68 라인에서 총 세개의 행이 선언된것을 확인할수 있습니다. 

 

행의 선언이 되었다면 그 내용으로 들어갈 아이템들 또한 태그로 선언되어야 할것입니다. 저의 경우 계산기의 UI를 모방하여 만든것 이기 때문에 기능이 없더라도 버튼태그를 이용하여 선언해 주었습니다.

 

버튼 태그에 사용된 속성들이 이전에 다룬 LinearLayout과 크게 다를 것이 없지만 한가지 추가된 속성이라하면 marginTop이 있습니다. 이 속성은 위에서부터의 여유공간 또는 여백을 설정해주는 속성으로 10 dp처럼 dp의 단위를 사용합니다. dp는 안드로이드 시스템에서 사용하는 화면 해상도 단위이며 pc에서 px(픽셀)단위를 사용하는것을 모바일 기기에 맞게 변환해준것입니다. 정확한 내용은 구글에 "안드로이드 해상도 dp" 와 같은 검색어를 통해 검색하면 될것 같습니다.