안드로이드 레이아웃 꿀팁

https://developer.android.com/reference/android/support/constraint/ConstraintLayout

blog.voidmainvoid.net/110 컨스트레인트 레이아웃 상세정리 

 

출처 :www.boostcourse.org/mo316/lecture/257362

투명도 컬러  https://c10106.tistory.com/4472

 

ConstraintLayout (제약) 콘스트레인트 레이아웃

 

장점 : 뷰와 뷰사이에 체인을 걸어서 같이 움직임. 조건을 서로 걸어서 같이 움직임

멀티디바이스에 대응이 편하다. 성능이 좋다.

중첩된 구조가 필요없고,1depth이다. (다른 레이아웃은 1depth이상들어감)

단순한계층  구조

기준과 대상이 필요하다. 위치 옵션이 더 많다.

chain관계의 애니메이션을 손쉽게 구현가능

match_parent가 아닌 match_constraint / 0dp크기 : constraint에 꽉 차게 크기를 맞춤

 

 

우측 정렬, 구분선 사용하기

 

LinearLayout 선형 레이아웃 수평, 수직
순서대로 화면에 보여줌

리니어레이아웃 같은 비율로 정렬 

android:layout_width="0dp"

android:layout_weight="1"

 

리니어 레이아웃(LinearLayout)의 방향 속성과 정렬 속성

리니어 레이아웃에서 가장 중요한 속성은 방향을 결정하는 orientation 속성입니다.

 

뷰를 정렬할 때는 layout_gravity와 gravity 속성이 사용됩니다.

Gravity는 지구의 ‘중력’처럼 끌어당기는 힘을 의미한다고 생각하면 이해하기 쉽습니다.

 

가로 방향으로 보았을 때 layout_gravity 속성의 값이 left이면 뷰를 왼쪽으로 끌어당겨 정렬하라는 의미거든요.

정렬은 가로 방향으로 왼쪽, 가운데, 오른쪽이 있을 수 있고 세로 방향으로 위쪽, 가운데, 아래쪽이 있을 수 있습니다.

이 외에도 여러 가지 속성이 있죠.

 

주의할 점은 layout_gravity는 뷰를 정렬하는 데 사용되고 gravity는 뷰 안에 들어있는 내용물을 정렬할 때 사용된다는 점입니다.

버튼을 예로 들면 버튼 안에 들어있는 글자가 내용물이 되니 gravity 속성을 주면 그 글자를 정렬하겠다는 의미가 됩니다.

또 한가지 주의할 점은 여유 공간이 있어야 정렬할 수 있다는 점입니다.

 

예를 들어 버튼의 가로 크기 속성인 layout_width의 값을 wrap_content로 해놓으면 gravity 속성의 값으로 가로 방향 왼쪽이나 오른쪽으로 정렬하라는 값을 주더라도 정렬은 아무 의미가 없습니다.

움직일 공간이 없기 때문이죠.

 

뷰의 마진, 패딩 그리고 공간분할

리니어 레이아웃 안에 들어가 있는 뷰가 차지하는 공간은 기본적으로 가로/세로 크기를 지정하는 layout_width와 layout_height 속성에 의해 결정됩니다.

그리고 추가적으로 마진을 설정할 수 있습니다.

 

마진(Margin)은 뷰의 테두리선 바깥쪽 공간을 얼마나 띄울 것인지를 지정하는 속성입니다.

예를 들어, layout_margin 속성의 값을 10dp 로 주면 위, 아래, 좌, 우 공간을 10dp 만큼 띄워줍니다.

원한다면 한쪽만 마진을 줄 수도 있습니다.

 

패딩(Padding)은 뷰 안에 들어있는 내용물을 테두리 선과 얼마나 띄울 것인지를 지정하는 속성입니다.

버튼 안에 들어있는 글자가 테두리선과 너무 붙어있다는 느낌이 든다면 이 속성을 사용해 공간을 띄워줄 수 있습니다.

예를 들어, padding 속성의 값을 10dp 로 주면 위, 아래, 좌, 우 공간을 10dp 만큼 띄워줍니다.

원한다면 한쪽만 패딩을 줄 수도 있습니다.

뷰의 영역 구분

처음 안드로이드 화면을 만들어볼 때 가장 많이 혼동하는 속성이 layout_weight 입니다.

이 속성은 공간분할에 많이 사용됩니다.

예를 들어, 두 개의 버튼을 가로 방향으로 똑같은 크기만큼 반반씩 공간을 차지하도록 만들고 싶을 때 사용합니다.

그런데 이 속성은 남아있는 여유 공간만 분할합니다.

이 때문에 두 개의 버튼을 가로 방향으로 추가했다면 layout_width 속성의 값은 0dp 로 주는 것이 필요합니다.

layout_width 속성의 값이 0dp 이고 layout_weight 속성이 각각 1이라면 이 두 개의 버튼은 공간을 반반씩 나누어 가집니다.

왼쪽 버튼이 2/3, 오른쪽 버튼이 1/3씩 공간을 차지하도록 하고 싶다면 layout_width 속성의 값이 0dp 이고 layout_weight 속성이 각각 2와 1이 되도록 만들면 됩니다.

 

 

리니어레이아웃으로 테이블 구현이 가능

 

match parent =  화면 전체를 감싼다.

wrap_content ->  텍스트뷰의 크기에 따라 크기가 자동으로 바뀜

 

비율에 따라 뷰를 나열할수 있도록  , weightSum과 layout_weight를 제공한다.

 

android :orientation =” vertical”,”horizental” / 방향설정

 

 버튼 전체 묶음 이동하고 싶을때! : gravity  전체 영역 가운데 정렬

 

크기 비율대로 조절할때 필요한것 : match - parent한 뒤 width를 0dp로 설정하고 배치한다.

정확한 스케일을 조정하려면  스케일 라이브러리를 사용해야함.

 

depth가 깊어짐 / 퍼포먼스가 느려짐.

 

Relative 관계 레이아웃

기준 뷰를 통해 상대적인 배치로 구성이 가능하다.

기준을 잡고 ,좌, 우, 아래 , 위에 위치 시킬수 있다.

부모를 기준으로 좌,우,상,하, 센터 정렬을 할 수 있다.

Frame 레이아웃

여러개의 뷰와 뷰 그룹을 겹쳐서 보여줄필요가 있는 경우에 사용된다.

프레임 레이아웃은 뷰들을 중첩하기 위한 목적으로 많이 사용됩니다. 

나중에 선언된 뷰와 뷰 그룹이 맨 앞에 보인다.

사진 위에 버튼, 텍스트등을 겹쳐서 보여줄수 있음.

 

프레임 레이아웃은 한 번에 하나의 뷰만 보여주는 레이아웃입니다.

가장 단순한 레이아웃이죠. 이 레이아웃에 뷰를 여러 개 추가했다면 그중 가장 나중에 추가한 뷰만 화면에 보이게 됩니다.

이런 특성 때문에 뷰들을 여러 개 담아놓고 중첩할 때 주로 사용됩니다.

아래쪽에 깔린 다른 뷰를 화면에 보여주고 싶다면 위쪽으로 뷰를 올려줄 수도 있고 보고자 하는 뷰 외의 다른 뷰들을

보이지 않게 할 수도 있습니다.

 

가시성 속성의 사용

프레임 레이아웃 안에 중첩된 뷰들 중에서 하나만 보여주고 싶다면 가시성(visibility) 속성을 사용할 수 있습니다.

가시성(visibility) 속성의 값으로는 visible, invisible, gone이 있습니다. 보여주고 싶은 뷰의 visibility 속성값은 visible로 하고 보여주고 싶지 않은 뷰들은 invisible이나 gone으로 설정하면 visible로 지정한 뷰만 화면에 보이게 됩니다.

 

버튼을 눌렀을 때 중첩된 뷰 바꾸기

프레임 레이아웃 안에 들어가 있는 두 개의 뷰 중에서 처음에는 두 번째 뷰가 보였지만 버튼을 눌렀을 때 첫 번째 뷰가 보이도록 만들 수도 있습니다.

물론 버튼을 누를 때마다 첫 번째 뷰와 두 번째 뷰가 번갈아 보이도록 만들 수도 있죠.

사용자가 버튼을 클릭했을 때 무언가가 동작하도록 만드는 과정이 아직 익숙하지 않을 수도 있습니다.

하지만 하나씩 진행해보면 그리 복잡하지 않습니다.

화면에 버튼을 하나 추가하고 onClick 속성의 값으로 자바 소스 코드에 들어갈 메소드의 이름을 지정합니다.

그리고 그 메소드를 소스 코드에 추가합니다.

만약 버튼 클릭 시 onButton1Clicked라는 메소드가 동작하도록 지정하고 onButton1Clicked 메소드에서 changeImage라는 메소드를 호출하도록 입력했다면 다음과 같이 코드를 입력할 수 있습니다.

 

이 소스 코드에서는 상태에 따라 두 개의 이미지가 보이거나 보이지 않도록 설정합니다. 소스 코드에서 imageView, imageView2, imageIndex 변수는 미리 선언되고 초기화되어 있어야 합니다.

 

이미지뷰잡아서 프레임레이아웃에 넣는다.

상단 이미지뷰 잡아서 프레임레이아웃에 넣기

버튼 클릭 속성으로 만들기