loading... Loading...

Relative Layout 사용법

236

안녕하세요. 크래커나인 입니다.
오늘은 Relaitve Layout을 사용하여 코드를 생성해보도록 하겠습니다.

 

 

1. Relative Layout 소개

 

Relative는 부모 혹은 다른 자식 View와의 상대적 위치를 이용해 화면을 구성하는 방법입니다. 더 정확한 Relative Layout에 대한 설명은 이 곳을 참고해주세요.

 

기준이 되는 View A와 다른 View B가 있다면
Relative01

 

아래와 같은 경우는 ‘B가 A의 왼쪽에 배치한다’ 입니다. 코드는 android:layout_toLeftOf=A 를 작성합니다.
Relative02

 

다음은 ‘B가 A의 위에 배치한다’ 입니다. 코드는 android:layout_above=A를 작성합니다.
Relative03

 

아래와 같은 경우는 B를 A와 왼쪽 변을 맞추는 것입니다. 코드는 android:layout_alignLeft=A 를 작성합니다.
Relative04

 

만일 View A가 View B를 포함하는 부모이고, B를 부모와 왼쪽 변을 맞추면 코드는 android:layout_alignParentLeft=True 를 작성합니다.
Relative05

 

B를 부모의 수직,수평 중앙에 맞추면 코드는 android:layout_centerParent=True 를 작성합니다.
Relative06

 

Relative는 부모 Layout과 자식 view 혹은 자식 view들간의 관계가 필요합니다. Cracker9 툴은 이를 코드로 작성하지 않고 마우스로 연결하여 쉽게 관계를 맺을 수 있습니다.

 

 

2. Cracker9에서 관계맺기 방법

 

STEP 01 >

Relative로 코드를 구성할 View 선택 후 Design Panel로 옮겨줍니다.
Relative07

 

 

STEP 02 >

오른쪽 Setting Panel에서 Layout을 Relative로 설정합니다.
Relative08

 

 

STEP 03 >

부모 안에 포함된 자식 View을 선택하세요.관계를 맺을 수 있는 아이템을 선택하면 위와 같이 보여지며,
Relative09

 

연결 상태는 다음과 같습니다.
Relative10

 

 

STEP 04 >

View 선택 후 View의 왼쪽을 부모와 연결합니다.
Relative11

 

 

STEP 05 >

View 선택 후 View의 상단을 부모 상단과 연결합니다.
Relative12

 

 

STEP 06 >

두번째 View 선택 후 View의 왼쪽을 첫번째 View의 오른쪽과 연결합니다.
Relative13

 

 

STEP 07 >

두번째 View 선택 후 View의 상단을 부모의 상단과 연결합니다.
Relative14

 

 

STEP 08 >

세번째 아이템 선택 후 아이템의 왼쪽을 두번째 아이템의 왼쪽과 연결합니다.
Relative15

 

 

STEP 09 >

세번째 아이템 선택 후 아이템의 상단을 두번째 아이템의 하단과 연결합니다.
Relative16

 

 

STEP 10 >

더 정확한 이해를 돕기 위해 다시 한 번 영상을 보겠습니다.

 

 

STEP 11 >

View끼리 서로 연결된 결과는 각각 View를 선택해도 확인할 수 있지만, 더 자세한 사항은 오른쪽 Setting Panel > Relation에서도 확인 할 수 있습니다.
Relative17

 

 

STEP 12 >

Setting Panel 아래의 Generate Code 버튼을 선택해주세요.
Relative18

 

 

STEP 13 >

Code Result Panel이 나오면 코드가 제대로 나왔는지 확인해주세요.
Relative19

Relative Layout 사용 해 보기

그럼, 그 외에 문의사항은 hello@cracker9.io 로 메일주세요!
크래커나인는 디자이너와 개발자들이 Creative에 집중할 수 있도록 돕겠습니다.

 

Tags

Back to list
Login
Register
Send message