[Android] 레이아웃과 기본 위젯 사용하기(layout 속성알아보기)

• 대표적인 레이아웃

1. 제약 레이아웃(ConstraintLayout)

- 제약 조건 기반 모델

2. 리니어 레이아웃(LinearLayout)

- 박스(Box) 모델(창고에다가 박스를 쌓는다)

- 방향을 지정 해야 한다.(아래쪽으로 쌓을까 오른쪽으로 쌓을까 등등)

3. 상대 레이아웃(RelativeLayout)

- 제약 레이아웃과 유사하다

- 규칙 기반 모델

4. 프레임 레이아웃(FrameLayout)

- 한번에 하나의 뷰만 보여주는 레이아웃

- 중요하게 사용된다.

- 싱글(Single) 모델

5. 테이블 레이아웃(TableLayout)

- 격자 레이아웃(Grid) 모델

- 상대적으로 많이 쓰이지 않는다.

• 레이아웃 특징

• LinearLayout 리니어 레이아웃

- Vertical 세로 방향으로 쌓기

- Horizontal 가로 방향으로 쌓기

- 로그인 화면도 이 두개를 겹쳐서 쓰면 쉽게 만들 수 있다.

• RelativeLayout 상대 레이아웃

- Top, Right

- 부모 컨테이너와의 관계 이용

- 다른 뷰와의 관계 이용

• FrameLayout 프레임 레이아웃

- 다른 것들을 숨기거나 중첩하여 쌓을 수 있다.

- 숨겨분 뷰를 가장 상위로 올리기

• TableLayout 

- 달력같은데 보이는 격자 형식

• 뷰의 영역

1. Margin(마진)이란?

border와 다른것들과의 거리 

2. Padding(패딩)이란?

글자가 있으면 내용물과 테두리 간의 거리 Padding

3. Border(테투리) 이란?

테투리 부분

• 뷰의 배경색

1. 보통 16진수로 표현 한다. #ff00000 이런식으로

2. 앞에 두자리를 더 붙일경우 투명도를 나타낸다 $88ff00000

• 화면을 바꾸고 싶을때?

1. activity_main.xml 파일을 수정 한다. -> 사용자가 볼 화면을 바꾸어 준다.

2. LinearLayout 으로 바꾸어준다 -> Text 탭 소스

• LinearLayout 필수 속성

1. layout_width

2. layout_height

3. orientation(vertical 세로 ,horizontal 가로)

• LinearLayout 실습 하기

1. Button 3개를 View 에 붙인다.

(시작1,시작2,시작3)

시작 1만 layout_width 를 match_parents를 바꾸게 되면 시작 2, 3이 모두다 밀려나가게 되어서 안보이게 된다. 사실 없어지는것은 아니고 화면상에서 밑에 남아져 있다고 생각을 하면 된다.

2. 세로로 바꾼뒤에 시작 1의 property -> layout_gravity -> center_horizo 를 클릭하면 시작1의 버튼이 가운데로 오는것을 확인 할 수 있다.

3. LinearLayout은 하나의 버튼의 영역을 이루고 있으므로 여유 공간을 가지고 있다고 생각을 하면 된다.

그래서 가지고 있는 모든 영역은 하나의 위젯의 공간을 차지하게 된다고 생각을 한다.(여유공간)

4. gravity 

property -> gravity -> left , center-vertical 선택시 -> 텍스트 탭에서 gravity가 추가 된것을 알 수 있다.

center-vertical 서로 두개를 한꺼번에 적용할 때 사용한다.

* gravity 와 layout_gravity 와 구별 해야한다.

5. 테두리 사이의 여백 

property -> Layout_Margin -> Margin 값을 우리가 직접 설정할 수 있다. 

테두리의 바깥쪽은 뷰와 레이아웃의 마진의 값을 지정 할 수 있음.

margin 전체 bottom,end,left,right,start,top 등등의 속성을 지정 할 수 있다.

6.글자 사이즈

 property -> textSize -> 30 dp 설정 

7. 글자 컬러 

property -> textColor -> ::: 버튼 -> color 가보면 Android API 에 있는 컬러들이 많이 보인다. -> 자신이 직접 설정 할 수 있다.

8. 패딩(Padding)과 마진(Margin)의 차이점

패딩은 버튼의 크기를 늘려준다고 생각하면 편하고, 마진은 전체 View와의 거리를 나타낸다고 생각을 하면 편하다.

9. Background 속성 -> color -> 빨강색 - fff는투명도이거 나머지는 0000 완전빨강색 -> 이것을 그대로 복사한다음에 Background 속성에 값을 #을 누르고 나머지 fff0000을 넣어주면 -> 백그라운드를 지정해줄 수 있다.

• XML을 별도로 만들고 싶을때는?

app->res->layout의 폴더에 layout 선택후 -> new -> layout ResourceFile 선택 -> FileName(weight.xml) 파일이 생성되는데 이때 java 파일도 같이 생성해주어야 하는데 추후에 다시 설명하겠음.

- 파일삭제시 -> Delete하면 삭제 된다.

- 이름 바꾸고 싶으면 Refactor->rename 하면 생성 된다.

• weight.xml 레이아웃 파일 생성하기 (실습)

파일을 생성하면 기본 레이아웃이 LinearLayout으로 생성 된다.

전체 뷰 -> horizontal 로 해서 -> button하나를 추가하면 wrap_content인데 버튼이 꽉차서 보이는것을 알 수 있다. 이때, xml Text탭에 가서 android:layout_weight="1"을 삭제해주면 원래대로 wrap_content의 형태 처럼 보이게 된다.

그럼 layout_weight는 무엇일까?

나머지 남아 있는 공간을 할당시켜주는 역할을 하게 된다. 따라서, 버튼하나를 더 붙여버리면 또 그 버튼2가 나머지 공간을 차지하게 된다.

공간을 분할하게하는 역할을 하는데 버튼1와 버튼2에 android:layout_weight="1" 로 줘버리면 둘다 공평하게 공간을 차지하게 된다.

위의 사진에서는 현재 버튼1 이 weight값이 2이고 버튼2의 weight 값이 1 인데 결국 총 3의 비율에서 버튼1은 2의 크기 만큼 가진다고 생각을 하면된다. 분자,분모와의 관계 비율을 생각하면 쉽다.

-Margin과 Padding은 View의 속성이라고 생각한다.

-이것을 자바 소스코드를 건드리면 충분히 제어 가능하다.