전광판 만들기 unit 04 로봇 sw 콘텐츠 교육원 조용수. 학습 목표 layout xml 이란...
TRANSCRIPT
전광판 만들기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>