'전체보기'에 해당되는 글 49건

FrameLayout

1) 개요

  - 각각의 뷰를 모두 왼쪽 상단 기준으로 쌓아 올리는 방식으로 배치하는 레이아웃

  - 먼저 추가된 View위로 나중에 추가된 View가 겹겹이 쌓이게 된다.

2) FrameLayout의 계층 만들기

<FrameLayout 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">

    <!-- FrameLayout의 계층 만들기 먼저 만든 순서대로 아래에 위치-->
    <!-- 1번 Layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">
    </LinearLayout>

    <!-- 2번 Layout -->
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@color/colorPrimaryDark">
    </LinearLayout>

    <!-- 3번 Layout -->
    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@color/colorPrimary">
    </LinearLayout>

</FrameLayout>

LinearLayout 

  1) 개요

    - 부모 컨테이너와의 상대적 위치 또는 다른 뷰와의 상대적 위치로 배치하는 레이아웃

  2) 부모 컨테이너와의 상대적 위치를 이용

    - layout_alignParent(Top, Bottom, Left, Right) : 부모 컨테이너의 위, 아래, 왼쪽, 오른쪽에 맞춰 배치

    - layout_center(Horizontal, Vertical, Parent) : 부모 컨테이너의 수평 중앙, 수직 중앙, 정중앙에 배치

<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">

    <!-- 1번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:text="1"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 2번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:text="2"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 3번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:text="3"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 4번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerVertical="true"
        android:text="4"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 5번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="5"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 6번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="6"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 7번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:text="7"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 8번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:text="8"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 9번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="9"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

</RelativeLayout>

  3) 다른 뷰와의 상대적 위치를 이용

     - layout_to(Right, Left)of : 기준이 되는 뷰의 오른쪽, 왼쪽에 배치

       (단, 상하의 위치를 지정하지 않으면 기본값인 Top으로 배치)

     - layout_(above, below) : 기준이 되는 뷰의 위, 아래에 배치

       (단, 좌우의 위치를 지정하지 않으면 기본값인 Left로 배치)

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 1번 TextView -->
    <TextView
        android:id="@+id/textview01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="1"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 2번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/textview01"
        android:layout_toLeftOf="@id/textview01"
        android:text="2"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 3번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_toRightOf="@+id/textview01"
        android:layout_above="@id/textview01"
        android:text="3"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 4번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/textview01"
        android:layout_toLeftOf="@id/textview01"
        android:text="4"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

    <!-- 5번 TextView -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/textview01"
        android:layout_toRightOf="@id/textview01"
        android:text="5"
        android:textSize="70sp"
        android:textAlignment="center"
        android:background="@color/colorPrimaryDark" />

</RelativeLayout>

1. LinearLayout 

  1) 개요

    - 세로(vertical) 또는 가로(horizontal)의 단일 방향으로 모든 하위 항목을 정렬하는 뷰 

    - Layout의 orientation의 속성으로 방향을 지정할 수 있다.

  2) layout_orientation

    - Layout을 세로로 배치할 것인지, 가로로 배치할 것인지 설정할 수 있다.

    - layout_orientation값을 주지 않을 경우 가로로 배치하는 것이 기본

<LinearLayout 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"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimaryDark"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorAccent"/>

</LinearLayout>

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimaryDark"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/colorAccent"/>

</LinearLayout>

  2) layout_weight

   - LinearLayout의 하위 뷰의 크기를 지정한 만큼의 가중치를 매겨 영역을 할당할 수 있다.

   - LinearLayout의 orientation에 따라 가중치가 적용되는 크기의 방향이 다름

   - orientation을 vertical로 설정하고 자식뷰의 height를 0이 아닌 다른 값으로 설정하거나, horizontal로 설정하고

     자식뷰의 width를 0이 아닌 다른 값으로 설정한 경우 가중치가 아닌 width나 height에 설정한 값이 우선 적용된다.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="100dp"
        android:background="@color/colorAccent"/>

    <TextView
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1"
        android:background="@color/colorPrimaryDark"/>

</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="100dp"
        android:layout_weight="3"
        android:layout_height="0dp"
        android:background="@color/colorAccent"/>

    <TextView
        android:layout_width="100dp"
        android:layout_weight="2"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorPrimaryDark"/>

</LinearLayout>

1. Component의 크기

  1) layout_width : Component의 너비, 폭

  2) layout_height : Component의 높이

2. ViewComponent의 크기를 지정하는 방식

  1) 수치로 지정

     - px : 디바이스의 스크린에 들어가는 실제 픽셀 (이미지의 파랑 점 1개).

     - dp : 안드로이드 폰의 다양한 해상도를 지원하기 위해 만든 단위입

  2) WrapContent : View 내용의 크기에 맞게 지정

  3) MatchParent : View의 크기를 부모의 크기와 동일하게 지정

3. ViewComponent의 여백을 설정하는 방식

  1) layout_margin : View와 View사이의 간격

    - layout_margin(Left, Top, Bottom, Right, Start, End, Vertical, Horizontal)

  2) Padding : View와 View의 내용 사이의 간격

   - padding(Left, Top, Bottom, Right, Start, End, Vertical, Horizontal)

TextView를 추가하는 방식 01. Design 탭을 이용하는 방법

TextView를 추가하는 방식 01. Text 탭에서 XML 수정으로 추가하는 방법

1. 화면의 구성

  1) XML

- VIEW를 그리는데 사용되는 언어

- DSL ( Domain Specific Language ) : 도메인 특화 언어

  2) ViewComponent

- 안드로이드 화면을 구성하는 요소

- TextView, ImageView, Button 등이 있다.

2. ViewComponent의 종류

  1) Parent ViewComponent

- LinearLayout

- RelativeLayout

- FrameLayout

- ScrollView

  2) Child ViewComponent

- TextView

- ImageView

3. Attribute

  1) 공통속성

- Width

- Height

- Background

  2) 각각의 ViewComponent가 지닌 속성

4. 화면 크기 단위

  1) Px : 화면의 크기와 상관 없이 지정한 크기 그대로 보여준다.

  2) Dp : 화면대비 동일한 비율의 크기로 보여준다.

※ Eclipse에 Servlet Source Code추가하기