관리 메뉴

java,javascript,android,php,sql,공부용,메모용

Android Studio / 안드로이드 앱만들기 공부7 / 상대 레이아웃, 테이블 레이아웃 본문

모바일/안드로이드앱

Android Studio / 안드로이드 앱만들기 공부7 / 상대 레이아웃, 테이블 레이아웃

yy_dd2 2020. 9. 18. 20:37
반응형

상대 레이아웃으로 만들 수 있는 화면 레이아웃은 대부분 제약 레이아웃으로 만들 수 있다.

상대 레이아웃의 사용은 권장하지 않는다.

다만 이전에 만든 레이아웃이 상대 레이아웃을 사용한 경우가 많기 때문에 상대 레이아웃에 대한 이해가 필요해

이부분을 공부하고 넘어가야 할 거 같다.

 

부모 컨테이너나 다른 뷰와의 상대적 위치를 이용해서 뷰의 위치를 결정할 수 있도록 해야함

ex) 버튼 아래 다른 버튼을 추가 할 때 이미 추가된 버튼의 아래 쪽에 붙여달라는 속성을 XML 레이아웃에서 설정 할 수 있습니다. 이미 추가된 버튼의 id 속성 값을 사용합니다.

 

 

새 안드로이드 스튜디오 프로젝트를 만듭니다. 프로젝트 유형은 Empty Activity 그대로 하고

activity_main.xml 파일을 열고 [Design]눌러서 기본으로 써있는 Hello World를 삭제

Component Tree 창의 Con-stranintLayout을 눌러 RelativeLayout으로 변경

Design 탭에서 왼쪽위에 Button을 클릭해서 2개의 버튼을 추가하고 아래의 화면처럼 만들것

 

 

위의 버튼 2개는 처음 버튼은 상좌우에 match_parent를 이용해서 넣은것 이건

첫 번째 레이아웃을 부모레이아웃의 좌측 상단에 붙이고

layout_width / layout_height을 match_parent / match_parent 으로 설정 해서 화면을 가득 채우도록 만듬

이러면 처음에는 파란색 저 버튼이 아래추가된 2번째 버튼이랑 겹쳐진 상태가 됨

(버튼을 끌어다 놓는 과정에서 Layout_Margin 값이 자동으로 설정되는 경우가 있는데 자동으로 설정되면 delete를 눌러서 삭제하고 Layout_alignParentBottom의 값이 true로 되어있는지 확인하기)

 

첫번째 버튼은 layout_width / layout_height을

match_parent / match_parent 이렇게 하고

두번째 버튼은 layout_width / layout_height을

match_parent / wrap_content 이렇게 설정

그리고 첫번째 버튼에

android:layout_above="@+id/button2" 버튼2의 아이디를 주면

왼쪽과 같은 모양이됨

 

 

 

 

 

그리고 버튼을 하나 추가함 맨위에도 하나를 추가할거임

버튼을 하나 추가하고 세번째 버튼은  layout_width / layout_height을 match_parent / match_parent 로 설정

그리고 첫 번째 버튼 파란색박스를 눌르고 거기에 android:layout_below="@+id/button3"을 추가하면

아래처럼 3개가 연달아서 정렬됨

코드

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/button2"
        android:layout_below="@id/button3"
        android:background="#2196F3"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />


</RelativeLayout>

 

반응형
Comments