'Android'에 해당되는 글 5건

FrameLayout

 

1) 개요

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

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

 

2) FrameLayout의 계층 만들기

먼저 추가한 View위에 나중에 추가한 View가 쌓이는 형태가 된다 (소스코드는 아래 참조)

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

'Android > Layout' 카테고리의 다른 글

Layout - 02.RelativeLayout  (0) 2019.04.03
Layout - 01. LinearLayout  (0) 2019.04.03
블로그 이미지

모데스티

,

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>

'Android > Layout' 카테고리의 다른 글

Layout - 03.FrameLayout  (0) 2019.04.09
Layout - 01. LinearLayout  (0) 2019.04.03
블로그 이미지

모데스티

,

1. LinearLayout 

 

  1) 개요

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

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

 

  2) layout_orientation

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

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

 

orientation 속성을 생략하거나 horizontal로 설정한 경우 (소스코드는 아래 참조)

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

 

orientation 속성을 vertical로 설정한 경우 (소스코드는 아래 참조)

<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에 설정한 값이 우선 적용된다.

 

orientation 속성을 horizontal로 설정하고 TextView에 가중치를 준 결과 (소스코드는 아래 참조)

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

 

orientation 속성을 vertical로 설정하고 TextView에 가중치를 준 결과 (소스코드는 아래 참조)

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

'Android > Layout' 카테고리의 다른 글

Layout - 03.FrameLayout  (0) 2019.04.09
Layout - 02.RelativeLayout  (0) 2019.04.03
블로그 이미지

모데스티

,

View - 02.TextView

Android/View 2019. 3. 27. 20:27

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

 

1. Common의 하위 리스트의 TextView를 Drag & Drop 방식으로 추가
2. Drag & Drop 으로 추가 후 Attribute 설정을 할 수 있다

 

 

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

 

1. Design탭에서 추가한 TextView가 추가된 것을 확인할 수 있다.
2. XML로 TextView를 추가
3. TextView가 추가된 것을 확인 할 수 있다.

 

'Android > View' 카테고리의 다른 글

View - 01.개요  (0) 2019.03.26
블로그 이미지

모데스티

,

View - 01.개요

Android/View 2019. 3. 26. 23:39

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 : 화면대비 동일한 비율의 크기로 보여준다.

'Android > View' 카테고리의 다른 글

View - 02.TextView  (0) 2019.03.27
블로그 이미지

모데스티

,