안드로이드 리니어 레이아웃(linear layout)

초보자를 위한 무료 안드로이드 프로그래밍 강좌 [리니어 레이아웃](linear layout) 동영상을 보실 분은 여기를 참조하십시오.https://www.youtube.com/watch?v=TldcONZya6w

레이아웃이란 안드로이드에 컴포넌트를 배치하는 인터페이스입니다.버튼, 텍스트 뷰, 레오 단추 등이 있습니다. 뭐, 전문적으로는 이렇게 멋지게 얘기해요.저는 단지 레이아웃이라는 도화지에 비교합니다.. 그 안에 단추나 텍스트뷰나 예쁘게 배치할 거예요.. 아시다시피 레이아웃도 몇 개 있는데 그 중에 linear layout을 보도록 하겠습니다.새 안드로이드 프로젝트를 만듭니다.

편한 이름으로 설정하고 Language만 Java로 설정해 주세요.

프로젝트 생성 후 메인 화면입니다.Android 프로젝트를 만들면 기본적으로 Constraint Layout이 생성되기 때문에 이것을 먼저 수정해 드립니다..activity_main.xml를 더블클릭하여 디자인 모드로 들어갑니다. (design을 클릭하시면 다시 디자인 모드로 갈 수 있습니다)

Hello World를 클릭하고 del키를 눌러 삭제하고 우측 상단의 code를 누르면 xml 파일을 직접 편집할 수 있습니다. androidx.constraintlayout.widget.ConstraintLayout부분을 삭제하고 그 위치에 LinearLayout을 입력합니다. 자동모드를 사용하시는 분은 두 번째 것을 선택해 주세요.나는 무심코 첫 번째 것을 잘 골라서 고생했어요.(잘난 놈)

리니어(linear)의 사전적인 의미는 직선적이고 비례적인 의미입니다.이 레이어의 특징은, 지정된 방향(상하, 또는 좌우)에 따라서, 차례차례 쌓아 올리거나 죽 늘어놓거나 합니다.적층을 해 보기 위해서 레이어의 방향(orientation을 vertical을 선택합니다.

linear layout은 쌓느냐 세워놓느냐에 따라 orientation 값을 vertical 또는 horizontal 중 하나를 선택해야 합니다.자, 2개의 텍스트 뷰와 버튼을 삽입합니다.design 탭을 클릭하여 디자인 모드로 들어갑니다. (xml 코드 파일은 압축파일에 별도 xmlexam 1.xml로 첨부) xmlexam 1.xml 파일의 내용을 activity_mail.xml에 붙여주세요.텍스트 뷰 2개와 버튼이 쌓여있는게 보이죠?방금 수정한 vertical 부분을 horizontal로 수정하고, layout_width를 wrap_content로 수정하고, design 버튼을 눌러 디자인 모드로 돌아갑니다.화면으로 보다 줄에 죽 늘어선 방법?한 줄에 순서대로 다 들어가 있어요.오른쪽 자리가 좀 남죠?오른쪽 자리가 남는 것은 layout의 폭을 wrap_contnet으로 하여… 딱 필요한 만큼만 사용하기 때문입니다.이번에는 layout_width를 match_parent(전체를 다 쓰는 거죠?)로 수정하고 버튼과 텍스트뷰의 layout_width 속성을 wrap_content(필요한 만큼만 쓰는 것)로 수정합니다.design 버튼을 눌러 디자인 모드로 돌아갑니다.버튼 오른쪽 자리가 비어 있습니다.버튼의 layout_weight 속성에 3을 붙입니다. 결과를 볼까요?layout_weight 속성을 준다는 것은 그 컴포넌트에 우선권을 준다는 의미입니다. 그래서 남은 공간을 버튼이 모두 차지하게 됩니다.. 참고로 layout_weight 속성을 가진 compant가 버튼 하나이기 때문에 3값을 주든 1값을 주든 버튼이 남은 모든 공간을 차지합니다.이 상태에서 이전 텍스트 뷰에 layout_weight 속성 2를 줍니다.텍스트 뷰와 버튼이 남는 공간을 2:3의 비율로 차지했습니다···layout_weight속성을 얻지 못한 중간 텍스트 뷰는 나머지 공간에 대해서는 아무것도 차지할 수 없습니다.layout_weight속성을 좀 더 찾아보겠습니다.. 첨부한 xmlexam1.xml파일에 돌아옵니다.기본 LinearLayout안에 새 horizontalLinearLayout을 만들고 새로 만든 레이아웃에 아까 만든 2개의 텍스트 뷰와 버튼을 넣습니다.새로 만든 레이아웃에 android:weightSum=”99″속성을 부여 학습지 버튼에는 android:layout_weight=”33″속성을 부여합니다.단추와 텍스트의 android:layout_width=”0dp”속성을 부여합니다.단추와 텍스트의 폭을 weight에 결정한다는 뜻입니다.레이아웃의 전체 크기는 99에서(weight Sum), 텍스트와 버튼의 크기는 가각 33(layout_weight)라는 의미입니다.3개가 같은 크기로 나온 거 맞죠?(xml코드 파일은 압축 파일로 별도 xmlexam2.xml로 첨부)바로 이것입니다.. 버튼과 텍스트 뷰 두 개가 같은 크기인 것이 보이십니까?이 상태에서 버튼의 weight는 55를 텍스트뷰 2개의 weight는 22를 줍니다.또 디자인을 보면마지막으로 버튼의 weight를 33개의 텍스트 뷰, 2개의 weight는 22를 줍니다.2번째 텍스트 뷰의 뒤에 빈 공간이 보이죠?단추와 텍스트 뷰의 weight나는 99를 다 채우지 않기 때문··· 빈 공간으로 남습니다..그동안 길이의 비율로 구성되어 왔습니다.component와 layout에 직접 수치를 낼 수 있습니다.android:layout_width=”200dp”android:layout_height=”50dp”수치 대신 다음과 같이 표시됩니다만, match_parent는 부모 창의 크기까지 최대 확장 wrap_content는 뒤풀이 텐트 내용에 의해서 크기 변경,라는 의미입니다. android:layout_width=”match_parent”android:layout_height=”wrap_content”의 수치와 layout_weight속성을 함께 사용하면 복잡해지고 적응이 어렵습니다. 그래서 저는 어떤 의미에서 동시에 쓰지 않아요..layout_margin&padding 쉽게 마진 다운이라고 합니다. 마진과는 컴포넌트의 외관과 다른 컴포넌트의 외관(레이어와 컴포넌트)사이의 간격을 의미합니다.패딩은 예를 들면 버튼의 테두리와 문자 사이의 간격을 의미합니다.패딩과 마진이나 톱, 버튼, 시작, 최종 값이 있습니다.left, right치도 있는데 사용하지 말라고 경고가 나옵니다..그대로 쓴다는 것에서^^LinearLayout안에 텍스트만 틀렸다 같은 속성의 버튼을 2개 만들어 넣었습니다.(xml코드 파일은 압축 파일에 따로 xmlexam3.xml로 첨부)빨간색 테두리는 Linear Layout 테두리입니다.버튼의 layout_width는 wrap_content를 주었고 height는 40dp를 주었습니다.40dp는 스마트폰에서 사용하는 길이의 기준인데.. 해상도에 관계없이 비슷한 길이를 나타내는 길이 정도라고 일단 이해해 주시기 바랍니다 마진버튼에 layout_margin Start: 10dplayout_margin Top: 30dplayout_margin End: 10dp 했습니다.layout과 상단 30dp, 좌측 10dp 간격이 생겼고, 우측 버튼과 10dp 간격이 생긴 게 보이죠?즉, 마진은 버튼 밖의 간격을 의미합니다.. 그러면 다운재킷은 내부의 간격을 의미하는 것을 유추할 수 있겠죠?사이즈가 커지기 때문에 기존 마진은 지우고 두 번째 버튼도 지우고 마진 버튼에 다운을 줍니다.버튼의 layout_height는 wrap_content에서 수정(버튼이 커져서 40dp에서는 글자가 보이지 않음) padding Start 100dppadding Top 50dp 합니다. 결과를 볼까요?버튼의 글자에서 버튼의 바깥 공간이 커진 것을 볼 수 있지요?즉, 패딩은 컴포넌트 내부와 컴포넌트의 문자 간의 간격을 조정합니다.마지막으로 알아볼게요.gravity라고 하는 것입니다만… gravity는 버튼 안의 텍스트 위의 위치를 조정합니다.수치와 상관없이 정해진 공간에서 텍스트가 위로 갈지, 아래로 갈지, 중앙으로 갈지 등을 결정합니다.gravity를 테스트하기 위한 공간이 필요합니다.버튼 크기를 width 200dp, height를 300dp로 설정합니다.초기상태입니다.. 파란색 바탕 위의 ‘마진’이라는 글자의 위치를 확인하세요.gravity=”bottom” 상태입니다.gravity=”center_horizontal” 상태입니다. (좌우의 중간에 위치한다는 뜻입니까?)이런 방법으로 center:좌우 상하 방향의 중심 bottom:아래쪽, start:왼쪽 end:오른쪽의 이 같은 것을 의미합니다.각각 따로 사용 가능하며, 중복 사용도 가능합니다.프로젝트를 만들 때 많이 연습하면서 몸에 익히는 것만 남아 있었습니다.하고 보면 더 오래 된 것 같습니다···리니어 레이아웃을 정리하면 linelayout의 orientation특성 이해 weight특성을 이용한 공간 분배의 이해 마진과 다운 재킷, 그리고 gravity정도로 정리할 수 있습니다..

error: Content is protected !!