전광판 만들기 UNIT 04 로봇 SW 콘텐츠 교육원 조용수

학습 목표 Layout XML 이란 ? 기본 XML 속성 Text View 2

Layout XML 이란 ? UI 구성요소를 정의 View or ViewGroup 으로 구성 다양한 Device 상황에 맞춰서 xml 작성 가능 3

액티비티와 뷰 클래스 계층 구조 4 뷰 뷰 뷰 Object View ViewGroup … TextView … LinearLayout

Layout XML 구조 5 <LinearLayout xmlns:android=" xmlns: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" />

background –#RGB –#ARGB –#RRGGBB –#AARRGGBB 배경색을 바꾼다 6 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffff0000" />

실습 1: Layout XML Layout XML 확인 TextView 의 Text 변경 및 확인 7

LinearLayout 기본 XML 속성 Orientation –Vertical : 포함된 View 를 가로로 배열 –Horizontal : 포함된 View 를 세로로 배열 layout_width and layout_height –match_parent : 화면 전체 설정 –Wrap_content : 포함된 View 의 사이즈 로 설정 Gravity – 내부 View 의 정렬을 설정 –android:gravity="center" 8

layout_width, layout_height –match_parent –wrap_content – 상수 몸집 크기를 바꾼다 9 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffff0000" />

layout_width, layout_height –match_parent –wrap_content – 상수 몸집 크기를 바꾼다 10 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffff0000" />

layout_width, layout_height –match_parent –wrap_content – 상수 몸집 크기를 바꾼다 11 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:background="#ffff0000" />

padding –paddingLeft –paddingRight –paddingTop –paddingBottom –padding 내 몸에 빈 공간을 만든다 12 자기자신 자식

padding –paddingLeft –paddingRight –paddingTop –paddingBottom –padding 내 몸에 빈 공간을 만든다 13 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffff0000" android:paddingLeft="30dp" />

padding –paddingLeft –paddingRight –paddingTop –paddingBottom –padding 내 몸에 빈 공간을 만든다 14 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffff0000" android:padding="30dp" />

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=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffff0000" android:gravity="right|bottom" />

실습 2: 기본 속성 설정 Linearlayout 의 기본 설정을 변경 17

TextView 18 Object View

Text View Text Attribute –TextSize : Text 의 사이즈 변경 –TextColor : Color 설정 ARGB 형식으로 설정 : android:textColor ="#9933ff22“ 미리 설정된 값 지정 : android:textColor= ＂ –TextStyle Bold Italic normal 19

Text View Attribute 변경 20 <LinearLayout xmlns:android=" xmlns: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" />

글자 내용을 지정한다 text 21 <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffff0000" />

글자 크기를 바꾼다 textSize 22 <LinearLayout xmlns: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:background="#ffff0000" />

글자 색깔을 바꾼다 textColor –#RGB –#ARGB –#RRGGBB –#AARRGGBB 23 <LinearLayout xmlns: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:background="#ffff0000" />

textStyle –normal –bold –italic 글자 모양을 바꾼다 24 <LinearLayout xmlns: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:background="#ffff0000" />

한 줄만 쓴다 singleLine –true –false 25 <LinearLayout xmlns: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:background="#ffff0000" />

실습 3: 기본 설정 변경 TextView 의 기본 설정을 변경 26

실습 4: 전광판 만들기 27

Text View Attribute 변경 28 <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" 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" />