전광판 만들기 unit 04 로봇 sw 콘텐츠 교육원 조용수. 학습 목표 layout xml 이란...

전광판 만들기UNIT

04

로봇 SW 콘텐츠 교육원조용수

2학습 목표

• Layout XML 이란 ?• 기본 XML 속성 • Text View

3Layout XML 이란 ?

• UI 구성요소를 정의 • View or ViewGroup 으로 구성 • 다양한 Device 상황에 맞춰서 xml 작성 가능

4액티비티와 뷰

• 클래스 계층 구조

뷰

뷰

뷰

Object

View

ViewGroup

…

TextView

…

LinearLayout

5Layout XML 구조

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

<TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" />

</LinearLayout>

• background– #RGB– #ARGB– #RRGGBB– #AARRGGBB

배경색을 바꾼다6

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

7실습 1: Layout XML

• Layout XML 확인 • TextView 의 Text 변경 및 확인

8LinearLayout 기본 XML 속성

• Orientation – Vertical : 포함된 View 를 가로로 배열– Horizontal : 포함된 View 를 세로로 배열

• layout_width and layout_height– match_parent : 화면 전체 설정– Wrap_content : 포함된 View 의 사이즈 로 설정

• Gravity– 내부 View 의 정렬을 설정– android:gravity="center"

• layout_width, layout_height– match_parent– wrap_content– 상수

몸집 크기를 바꾼다9

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

<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

• layout_width, layout_height– match_parent– wrap_content– 상수

몸집 크기를 바꾼다10

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

<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

• layout_width, layout_height– match_parent– wrap_content– 상수

몸집 크기를 바꾼다11

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

<TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

• padding– paddingLeft– paddingRight– paddingTop– paddingBottom– padding

내 몸에 빈 공간을 만든다12

자기자신

자식

• padding– paddingLeft– paddingRight– paddingTop– paddingBottom– padding

내 몸에 빈 공간을 만든다13

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:background="#ffff0000" android:paddingLeft="30dp" />

</LinearLayout>

• padding– paddingLeft– paddingRight– paddingTop– paddingBottom– padding

내 몸에 빈 공간을 만든다14

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:background="#ffff0000" android:padding="30dp" />

</LinearLayout>

• gravity– left, right, top, bottom, center– center_horizontal, center_vertical

자식을 어디에 둘까 ?15

자기자신

자식

• gravity– left, right, top, bottom, center– center_horizontal, center_vertical

자식을 어디에 둘까 ?16

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

<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/hello_world" android:background="#ffff0000" android:gravity="right|bottom" />

</LinearLayout>

17실습 2: 기본 속성 설정

• Linearlayout 의 기본 설정을 변경

TextView

Text View 18

Object

View

19Text View

• Text Attribute– TextSize : Text 의 사이즈 변경 – TextColor : Color 설정

• ARGB 형식으로 설정 : android:textColor="#9933ff22“• 미리 설정된 값 지정 : android:textColor= ＂@android:color/holo_green_dark ＂

– TextStyle• Bold• Italic• normal

20Text View Attribute 변경

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Robot Class" android:textSize = "55dp" android:textStyle="bold" android:textColor="@android:color/holo_green_dark" /></LinearLayout>

21글자 내용을 지정한다

• text

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

22글자 크기를 바꾼다

• textSize

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize=“80sp" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

23글자 색깔을 바꾼다

• textColor– #RGB– #ARGB– #RRGGBB– #AARRGGBB

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize=“80sp" android:textColor="#ff0000ff" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

24

• textStyle– normal– bold– italic

글자 모양을 바꾼다

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize=“80sp" android:textColor="#ff0000ff" android:textStyle="italic|bold" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

25한 줄만 쓴다

• singleLine– true– false

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="80sp" android:textColor="#ff0000ff" android:textStyle="italic|bold" android:singleLine="true" android:text="@string/hello_world" android:background="#ffff0000" />

</LinearLayout>

26실습 3: 기본 설정 변경

• TextView 의 기본 설정을 변경

27실습 4: 전광판 만들기

28Text View Attribute 변경

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

<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Robot Class" android:textSize = "55dp" android:textStyle="bold" android:gravity="center" android:textColor="@android:color/black" />

</LinearLayout>