관리 메뉴

IT창고

안드로이드(Android) 레이아웃 설정 본문

프로그래밍/Android

안드로이드(Android) 레이아웃 설정

방구석여포 2017. 10. 23. 18:12

안드로이드 스튜디오를 사용하여 어플을 만드는데 XML을 사용해서 어플화면을 구성해야 합니다.

화면 구성에 사용되는 레이아웃을 알아보는데 Liner, Relative Layout에 대해 알아보겠습니다.


처음 안드로이드 스튜디오를 실행하면 아래와 같은 화면이 나옵니다. 일반적인 뷰들은 레이아웃 뷰의 자식으로 들어가는데 먼저 리니어 레이아웃에 대해 알아보겠습니다.

LinearLayout은 뷰들을 수평 혹은 수직으로 나열할때 사용하는 레이아웃입니다. 

레이아웃은 레이아웃안에 또 레이아웃을 만들수가있습니다.

<LinearLayout xmlns:android="http://....."


android:layout_width="match_parent"

android:layout_height="match_parent">


<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

</LinearLayout>

</LinearLayout>


레이아웃을 설정했다면 레이아웃의 크기를 줄수있습니다 크기는 레이아웃 뿐 아니라 다른 뷰에도 줄수있습니다. 크기는 

width, height, gravity, layout_gravity, layout_width, layout_height 로 크기와 장소를 지정하고 textColor나 background로 색깔을 지정할수있습니다 색깔은 "#ffffff"로 16진수를 사용하고 ff0000은 빨강 00ff00은 녹색 0000ff 는 파랑으로 3개의 색깔을 조합해서 색상을 나타낼수있습니다. 


ex)로 LinearLayout에서 사용한 덱스트 뷰입니다.

<TextView

            android:textSize="25sp"

            android:width="100dp"

            android:height="100dp"

            android:background="#ffff00"

            android:textColor="#000000"

            android:gravity="center"

            android:layout_gravity="left"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:paddingLeft="50dp"

            android:text="E"/>

리니어 레이아웃에서 가장 중요한 것은 부모가 리니어 레이아웃일때 weight옵션을 사용할수있는 것입니다. weight는 화면이 크기가 늘어나거나 좌우로 변하면 같이 크기가 늘어나는 옵션입니다.


이번에는 RelativeLaylut에 대해 알아보겠습니다.

릴레이티브 레이아웃은 부모 혹은 다른 뷰들을 기준으로 정렬을 할수있는 레이아웃이고 가장 많이 사용되는 레이아웃입니다. 리니어레이아웃처럼 레이아웃안에 리니어레이아웃을 넣어 사용할수 있습니다.


릴레이티브 레이아웃 주요 디자인소스는 아래와 같습니다.

android:layout_above="@+id/Tv" 위쪽

android:layout_below="@+id/Tv" 아래쪽

android:layout_toLeftOf="@+id/Tv" 왼쪽

android:layout_toRightOf="@+id/Tv" 오른쪽

android:layout_alignTop="@+id/Tv" 윗선정렬

외에도 많은 기능이 있습니다.


ex)

android:layout_centerVertical="true"

android:layout_marginRight="5dp"

android:layout_alignParentRight="true"

android:paddingRight=""


ex) RelativeLayout에서 사용한 텍스트 뷰입니다.

<TextView

        android:id="@+id/cetth"

        android:textSize="35sp"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:gravity="center"

        android:textColor="#ffffff"

        android:background="#00ff00"

        android:text="H"

        android:layout_alignParentBottom="true"

        android:layout_toLeftOf="@+id/cettg" />

<TextView

        android:id="@+id/cettd"

        android:textSize="35sp"

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:layout_toRightOf="@+id/cetTv"

        android:layout_below="@+id/cetTv"

        android:gravity="center"

        android:background="#ff0000"

        android:text="D"

        />

Linear와 Relative 뿐 아니라 Frame, Scroll 레이아웃들도 있습니다. 자신이 만들 어플에 맞는 레이아웃을 사용하면 됩니다.


ex) 스크롤 뷰 사용법

<ScrollView

android:layout_width="match_parent"

android:scrollbars="none"

android:layout_height="match_parent"

android:fadingEdgeLength="10dp">

여기안에 뷰들을 넣습니다.


<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"/>

<Linear ....

</ScrollView>


레이아웃안에는 버튼이나 텍스트뷰 같은 특화된 뷰들이 있는데 이런 뷰들의 옵션이 있습니다 주로 텍스트뷰에서 사용하는 옵션으로는 text , textSize, id, textColor 등이 있습니다. 


------추가------

프로그래스바 ex)

<ProgressBar

android:layout_height="10dp"

android:layout_width="200dp"

android:layout_centerVertical="true"

android:layout_centerHorizontal="true"

android:progress="20"

android:max="100"

style="?android:attr/progressBarStyleHorizontal"

android:id="@+id/progressBar"/>


Comments