안드로이드 스튜디오 독학하기 24일째

안녕하세요?

이번 포스팅에서는 리니어 레이아웃에서 어떻게 밑줄을 맞추는가 여부와 Padding과 layout_margin의 차이에 대해서 공부한 내용을 포스팅하고자 합니다.

먼저 baseline을 알아보기 위해서 새 레이아웃을 만드는 화면입니다. 여기서는 baseline.xml이라는 이름을 지정을 하고서 linearlayout으로 기본적으로 설정이 되어 있는 대로 새 레이아웃을 만들었습니다.

기본적으로 리니어 레이아웃은 수직(vertical)로 orientation이 설정되어 있는데, 이렇게 설정이 되어 있으면 수직으로 새로 추가한 텍스트뷰 2개와 버튼이 추가가 됩니다. 각각의 컴포넌트에 설정되어 있는 width를 match_parent에서 wrap_content로 바꾸어도 이렇게 수직으로 쌓여있는 구조는 변하지를 않습니다.

결국 하는 수 없이 레이아웃 배경에서 properties란에 가서, orientation을 vertical에서 horizontal로 바꾸도록 합니다. 이렇게 변경을 하고서야 의도한 대로 수평으로 텍스트뷰2개와 버튼을 정렬할 수 있었습니다.

첫번째 텍스트뷰에서는 글자크기를 40dp로 지정을 하고, [큰글씨]라고 타이핑해서 집어넣습니다. 그리고 나서 글자의 색을 붉은색으로 지정을 합니다.

두번째 텍스트뷰에서는 글자크기를 20dp로 지정을 하고, [중간글씨]라고 타이핑을 해서 집어넣도록 합니다. 그리고 글자의 색을 초록색으로 지정을 합니다.

세번째 텍스트부에서는 글자크기를 14dp로 지정을 하고, [작은글씨]라고 타이핑을 해서 집어넣도록 합니다. 그리고 글자의 색을 보라색으로 지정을 하도록 합니다.

문제는 제가 의도하지도 않았는데, 모두 밑줄이 맞추어 져서 나왔다는 것입니다. 교재와는 다르게 나오기는 했지만, 일단 baseline에 관계된 속성을 알아보기 위해서 properties윈도우에서 show all properties를 클릭했습니다.

위 스크린샷에서 밑줄을 친 속성이 바로 baselineAligned라는 속성으로, 여기에 아무런 표시가 없으면 위 스크린샷과 같이 모든 글자의 맞춤이 밑줄이 아니라 윗줄로 가면서 맨 윗쪽으로 모두 붙어 버리는 것을 볼 수 있었습니다.

결국 baselineAligned항목에 -표시나 체크 표시가 되어 있어야 제대로 글자들이 밑줄을 맞추면서 정렬이 되는 것을 볼 수 있었습니다.

이번에는 padding과 layout_margin이라는 속성의 차이를 알아보기 위한 실습에 들어가 보고자 합니다.

이번에도 새로운 layout을 생성하면서, 이번에는 이름을 padding.xml로 지정을 하도록 합니다. 그리고 이번에도 역시 텍스트뷰2개와 버튼 한개를 추가하도록 합니다.

첫번째로 추가된 텍스트뷰에다가 글자 크기는 24dp로 지정을 하고, 배경색은 노랑에 글자의 색은 빨강으로 지정을 하도록 합니다. 그리고 나서 properties윈도우에서 모든 속성을 보여주라고 해서 나왔는 padding에서 10dp를 지정하도록 합니다. 

두번째로 추가된 텍스트뷰에다가 글자크기는 24dp, 배경색은 청록색에 padding은 10dp로 지정을 하도록 합니다. 그리고 마지막으로 추가된 버튼에서는 글자크기를 24dp로 하고 padding을 20dp로 두도록 합니다. 이와같은 지정을 다 하고서 난 결과는 다음과 같습니다.

다만 이런 결과를 얻는 과정에서 다소간에 헤프닝이 하나 있었는데, 두번째 텍스트뷰에서 청록색을 지정하자, 첫번째 텍스트뷰까지 청록색으로 지정이 되는 사태가 벌어진 것입니다. 이게 왜 이러는 것인지 처음에는 몰랐는데, 계속해서 보니까 알 수 있는 것이........

위 스크린샷은 색상을 지정하면 뜨는 윈도우인데, 여기서 project안에 있는 색상은 마음대로 변경이 가능한데, 문제는 여기를 변경하면, 다른 텍스트뷰같은 것도 색상이 변한다는 것입니다. 결국 하는 수 없이 아래에 있는 android항목에 있는 색상을 지정해야 하는데, 또 다른 문제는 여기서는 미리 지정된 색상만을 사용할 수 있다는 것입니다.

이 문제는 이 문제대로 따로 해결책을 알아봐야 하는데, 아무튼 지금 당장은 급한게 아니니 넘어가도록 하겠습니다.

다시 본론으로 돌아와서, 이번에는 두번째 텍스트뷰에서 properties항목을 다 보여주기를 눌러서 나오는 layout_margin을 설정하도록 해 보겠습니다.

여기서 지정을 하자, 두번째 텍스트뷰만이 다른 텍스트뷰와 떨어져서 독립적으로 여유공간이 생긴 것을 볼 수 있습니다. 이처럼 padding과 layout_margin을 정리하면 다음과 같습니다.

설명을 돕기 위한 위 그림처럼, padding은 버튼이나 텍스트뷰안에 들어가 있는 글자나 그림등이 어느정도 간격을 두고서 텍스트뷰나 버튼안에 위치할 것이냐를 결정합니다. 즉, 이를 크게 하면, 텍스트뷰나 버튼안에 여유공간이 많이 있게 되고, 그 안에 글자나 그림등이 들어가 있게 되는 것입니다.

그럼 layout_margin은 무슨 차이가 있느냐 하면, 전체적인 화면에서 버튼이나 텍스트뷰가 주변에 어느정도 여유공간이 있는지를 결정한다고 보시면 됩니다. 즉, 이 layout_margin을 설정하면 버튼이나 텍스트뷰가 주변부에 딱 붙어있지 않고, 여백공간이 생기는 식으로 결정이 된다고 보시면 됩니다.

말로 이렇게 설명을 했지만, 직접 안드로이드 스튜디오에서 실험을 해 보시는 편이 이해에 도움이 되리라 생각됩니다.