기본위젯과 레이아웃 둘째 마당 - Chapter 01 Do It! 안드로이드 앱 프로그래밍 Jun. 2013

Presentation on theme: "기본위젯과 레이아웃 둘째 마당 - Chapter 01 Do It! 안드로이드 앱 프로그래밍 Jun. 2013"— Presentation transcript:

1 기본위젯과 레이아웃 둘째 마당 - Chapter 01 Do It! 안드로이드 앱 프로그래밍 Jun. 2013
○ 본 강의 자료는 이지스퍼블리싱(주)에서 제공하는 강의 교안입니다. ○ 본 강의 교안은 아래 출판 서적의 내용을 기준으로 구성되었습니다. 또한 다수의 기타 서적이나 사이트를 참조하였습니다. 레퍼런스를 참조하십시오. 2013, 정재곤, “Do it! 안드로이드 앱 프로그래밍(개정판)”, 이지스퍼블리싱(주) - 강의 교안에 사용된 화면 캡쳐나 실습 자료의 경우에는 문서 업데이트에 따라 변경될 수 있습니다. 이지스퍼블리싱(주) 제공 강의 교안 저자 : 정재곤

2

3 이번 장에서는 무엇을 다룰까요? 뷰란 무엇일까요? 레이아웃을 이용해 뷰를 화면에 배치해 볼까요?
화면을 먼저 만들어보고 싶어요. 뷰란 무엇일까요? 레이아웃을 이용해 뷰를 화면에 배치해 볼까요? 텍스트뷰나 버튼과 같은 기본 위젯을 추가해 볼까요?

4 이번 장에서는 무엇을 다룰까요? 텍스트 버튼 검색하기 텍스트 입력상자 레이아웃을 이용해 뷰를 화면에 배치해 볼까요?
뷰란 무엇일까요? 기본 위젯 사용하기 검색어 텍스트 안드로이드 버튼 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“검색어" /> 검색하기 텍스트 입력상자

5 강의 주제 및 목차 기본 위젯과 레이아웃에 대해 이해하기 강의 주제 뷰와 뷰그룹 테이블 레이아웃 목 차 레이아웃 스크롤뷰
1 뷰와 뷰그룹 6 테이블 레이아웃 목 차 2 레이아웃 7 스크롤뷰 3 리니어 레이아웃 8 프레임 레이아웃 4 상대 레이아웃 9 기본 위젯들 5 절대 레이아웃

6 둘째 마당 – CH1. 기본 위젯과 레이아웃 1. 뷰와 뷰그룹

7 뷰와 뷰그룹의 정의 뷰(View) 뷰 그룹(View Group) 위젯(Widget) 레이아웃(Layout)
- 화면에 보이는 각각의 것들 (버튼, 텍스트 등등) - 흔히 콘트롤(Control)이나 위젯(Widget)이라 불리는 UI 구성 요소 뷰 그룹(View Group) - 뷰들을 여러 개 포함하고 있는 것 - 뷰 그룹도 뷰에서 상속하여 뷰가 됨. 즉, 위의 뷰는 버튼, 텍스트 뿐만 아니라 이것들을 포함하는 눈에 보이지 않는 영역을 포함함 위젯(Widget) - 뷰 중에서 일반적인 컨트롤의 역할을 하고 있는 것 - 버튼, 텍스트 등등 레이아웃(Layout) - 뷰 그룹 중에서 내부에 뷰들을 포함하고 있으면서 그것들을 배치하는 역할을 하는 것 [ 뷰와 뷰 그룹의 관계 ] [버튼과 리니어 레이아웃의 계층도] 1. 뷰와 뷰그룹

8 (HelloWorldActivity) public class HelloWorldActivity extends Activity
상속에 대해 잘 몰라요! 상속 - 객체지향의 가장 기본적인 개념 중 하나 - 부모의 특성을 그대로 물려받는 것으로 변수나 메소드 재사용 가능 액티비티의 상속 - 처음 만들어 본 액티비티에서 extends 키워드 사용 부모 클래스의 메소드를 재정의 - onCreate() 메소드는 이미 부모 클래스에 정의되어 있음 - 기능을 추가하고 싶을 때 재정의(Override) this와 super - 나 자신은 this, 부모는 super 를 사용하여 변수나 메소드 참조 super.onCreate( … ); 액티비티 (Activity) onCreate( ) onDestroy( ) 상속 내가 만든 액티비티 (HelloWorldActivity) public class HelloWorldActivity extends Activity 1. 뷰와 뷰그룹

9 (HelloWorldActivity)
재정의한 메소드를 시스템에서 호출하는 방법 안드로이드 OS 액티비티 (Activity) onCreate( ) onDestroy( ) 상속 onCreate( ) 호출 내가 만든 액티비티 (HelloWorldActivity) 액티비티 관리자 (Activity Manager) onCreate( ) 재정의 public void onCreate( … ) { super.onCreate(); … } 액티비티가 만들어질 때 onCreate() 호출 - 내가 만든 액티비티의 onCreate() 메소드를 호출 - super.onCreate() 를 호출하여 Activity 클래스에 정의된 onCreate() 메소드의 기능을 사용 - 그 아래에 추가적으로 필요한 기능을 코드로 추가 1. 뷰와 뷰그룹

10 상위 클래스의 메소드를 쉽게 재정의하는 방법 1. 뷰와 뷰그룹

11 [match_parent와 wrap_content 값을 폭과 넓이에 적용한 예]
뷰의 대표적인 속성 layout_width, layout_height - 가장 기본적인 속성으로 뷰의 폭과 높이를 설정함 (1) match_parent 무조건 남아 있는 여유 공간을 채움 (2) wrap_content 뷰에 들어 있는 내용물의 크기에 따라 뷰의 크기가 결정됨 (3) 크기 값 지정 크기를 고정된 값으로 직접 지정하고 싶을 때 사용함 ex) “100px”, “200dp” id - 뷰의 ID를 지정함 - XML 레이아웃에 정의한 뷰를 자바 소스에서 참조하는 데 사용 - XML 레이아웃 안에서 다른 뷰를 참조하는 데 사용 background - 뷰의 배경을 설정함 (배경색, 배경 이미지 등) [match_parent와 wrap_content 값을 폭과 넓이에 적용한 예] 1. 뷰와 뷰그룹

12 [match_parent와 wrap_content 값을 폭과 넓이에 적용한 예]
XML 레이아웃으로 구성하기 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Layout" /> android:layout_width=“match_parent" android:text="Layout“ android:layout_height=“match_parent" 1 2 1 2 3 3 4 4 [match_parent와 wrap_content 값을 폭과 넓이에 적용한 예] - match_parent는 예전 버전에서는 fill_parent 도 사용 가능 1. 뷰와 뷰그룹

13 뷰의 크기 지정에 사용되는 단위 단위 단위 표현 설 명 px 픽셀 화면 픽셀 dp 또는 dip 밀도 독립적 픽셀
(density independent pixel) 160dpi 화면을 기준으로 한 픽셀 예) 1인치 당 160개의 점이 있는 디스플레이 화면에서 1dp는 1px와 같음. 1인치 당 320개의 점이 있는 디스플레이 화면에서 1dp는 2px와 같음. sp 또는 sip 축척 독립적 픽셀 (scale independent pixel) 가변 글꼴을 기준으로 한 픽셀로 dp와 유사하나 글꼴의 설정에 따라 달라짐 in 인치 1인치로 된 물리적 길이 mm 밀리미터 1밀리미터로 된 물리적 길이 em 텍스트 크기 글꼴과 상관없이 동일한 텍스트 크기 표시 1. 뷰와 뷰그룹

14 뷰의 ID 속성 인플레이션(Inflation)
<Button android:layout_width=“match_parent" android:layout_height=“match_parent" android:text="Layout" /> 인플레이션(Inflation) - XML 레이아웃에 정의된 정보를 메모리 상에서 객체로 만드는 객체화 과정 - 애플리케이션이 시작될 때 이 과정을 거쳐 메모리 상에 만들어진 객체들을 참조하기 위해 ID를 지정함 id 속성은 자바 코드 상에서 R.id.[ID]와 같은 형태로 [버튼의 id 추가] public class SampleLayoutActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button button = (Button) findViewById(R.id.button ); } [버튼의 id 참조] 1. 뷰와 뷰그룹

15 [배경색에 알파값을 적용하여 투명도를 조절하는 경우]
뷰의 background 속성 [Format] #RGB #ARGB #RRGGBB #AARRGGBB [배경색에 알파값을 적용하여 투명도를 조절하는 경우] XML 레이아웃에서 색상을 지정할 때는 ‘#’ 기호를 앞에 붙인 후, ARGB(A : Alpha, R : Red, G : Green, B : Blue)의 순서대로 색상의 값을 기록함 16진수 값을 지정할 때는 여러 가지 포맷을 사용할 수 있음 1. 뷰와 뷰그룹

16 둘째 마당 – CH1. 기본 위젯과 레이아웃 2. 레이아웃

17 대표적인 레이아웃 레이아웃 이름 설 명 리니어 레이아웃 상대 레이아웃 프레임 레이아웃 테이블 레이아웃 스크롤 뷰 2. 레이아웃
- 박스(Box) 모델 - 사각형 영역들을 이용해 화면을 구성하는 방법 - 표준 자바의 BoxLayout과 유사 상대 레이아웃 - 규칙(Rule) 기반 모델 - 부모 컨테이너나 다른 뷰와의 상대적 위치를 이용해 화면을 구성하는 방법 프레임 레이아웃 - 기본 단위 모델 - 하나의 뷰만 보여주는 방법 - 가장 단순하지만 여러 개의 뷰를 추가하는 경우 중첩시킬 수 있으므로 뷰를 중첩한 후 각 뷰를 전환하여 보여주는 방식으로 사용할 때 유용함 테이블 레이아웃 - 격자(Grid) 모델 - 격자 모양의 배열을 이용하여 화면을 구성하는 방법 - HTML에서 많이 사용하는 정렬 방식과 유사하여 실용적임 스크롤 뷰 - 스크롤이 가능한 컨테이너 - 뷰 또는 뷰그룹이 들어갈 수 있으며 화면 영역을 넘어갈 때 스크롤 기능 제공 2. 레이아웃

18 레이아웃에 따라 뷰를 추가하는 방식 2. 레이아웃 리니어 레이아웃 상대 레이아웃 프레임 레이아웃 테이블 레이아웃 버튼 #1
2 행 (Columns) 2 열 (Rows) 일렬 추가 버튼 #1 버튼 #1 버튼 #1 버튼 #1 버튼 #2 위쪽 (Top) 버튼 #2 버튼 #3 버튼 #4 버튼 #3 아래쪽 (Bottom) 버튼 #3 리니어 레이아웃 상대 레이아웃 프레임 레이아웃 테이블 레이아웃 2. 레이아웃

19 리니어 레이아웃의 기본 속성 공간가중치 : weight 모든 레이아웃의 공통 속성 채우기 : fill model
- 뷰를 부모 뷰의 여유 공간에 어떻게 채울 것인지를 설정 방향 : orientation - 뷰를 추가하는 방향을 설정 정렬 : layout_gravity, gravity - 뷰의 정렬을 어떻게 할 것인지 설정 여유 공간 : layout_margin, padding - 뷰의 여유 공간을 어떻게 할 것인지 설정 공간가중치 : weight - 뷰가 차지하는 공간의 가중치 값을 설정 모든 레이아웃의 공통 속성 2. 레이아웃

20 둘째 마당 – CH1. 기본 위젯과 레이아웃 3. 리니어 레이아웃

21 리니어 레이아웃 – 방향 설정하기 <LinearLayout
xmlns:android=" android:orientation= "vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <Button android:layout_height="wrap_content" android:text="Button01" /> android:text="Button02" 프로젝트를 처음 만들었을 때 만들어지는 리니어 레이아웃은 세로 방향으로 되어 있음 순서대로 세 개의 버튼을 추가할 경우에 XML과 자바 코드 상에서 설정하는 방법은 다음의 코드와 같음 1 리니어 레이아웃 방향 설정 <Button android:id= android:layout_width=“match_parent" android:layout_height="wrap_content" android:text="Button03" /> </LinearLayout> 4 세 번째 버튼 설정 2 첫 번째 버튼 설정 3 두 번째 버튼 설정 3. 리니어 레이아웃

22 [버튼의 layout_width 속성을 wrap_content로 바꾼 경우]
리니어 레이아웃 – 방향 설정하기 (계속) [세로 방향으로 설정한 경우] [가로 방향으로 설정을 바꾼 경우] [버튼의 layout_width 속성을 wrap_content로 바꾼 경우] 3. 리니어 레이아웃

23 리니어 레이아웃 – 자바 코드에서 구성하기 자바 코드에서 직접 레이아웃 객체를 만들고 파라미터 설정
LinearLayout mainLayout = new LinearLayout(this); mainLayout.setOrientation(LinearLayout.VERTICAL); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); Button button01 = new Button(this); button01.setText("Button 01"); button01.setLayoutParams(params); mainLayout.addView(button03); setContentView(mainLayout); 1 레이아웃 객체 생성 2 파라미터 설정 3 버튼 객체 생성하여 추가 4 화면 설정 3. 리니어 레이아웃

24 리니어 레이아웃 – 정렬 설정하기 [두 가지 정렬 속성] 정렬 속성 설 명 layout_gravity
- 부모 컨테이너의 여유 공간에 뷰가 모두 채워지지 않아 여유 공간 안에서 뷰를 정렬할 때 gravity - 뷰에서 화면에 표시하는 내용물을 정렬할 때 (텍스트뷰의 경우, 내용물은 글자가 되고 이미지뷰의 경우 내용물은 이미지가 됨) layout_gravity - 뷰의 layout_width나 layout_height 속성을 wrap_content로 할 경우에 같이 사용할 수 있음 3. 리니어 레이아웃

25 리니어 레이아웃 – 정렬 설정하기 (계속) <LinearLayout xmlns:android=" android:orientation= "vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity= "left" android:text="left" /> 1 리니어 레이아웃 방향 설정 2 첫 번째 버튼 정렬 Continued.. 3. 리니어 레이아웃

26 리니어 레이아웃 – 정렬 방향 설정하기 (계속)
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity= "center" android:text="center" /> android:layout_gravity= "right" android:text="right" </LinearLayout> 3 두 번째 버튼 정렬 4 세 번째 버튼 정렬 3. 리니어 레이아웃

27 리니어 레이아웃 – 정렬을 위해 사용할 수 있는 값
[정렬을 위해 gravity 속성에 지정할 수 있도록 정의된 값] 정렬 속성값 설 명 top - 대상 객체를 위쪽 끝에 배치하기 bottom - 대상 객체를 아래쪽 끝에 배치하기 left - 대상 객체를 왼쪽 끝에 배치하기 right - 대상 객체를 오른쪽 끝에 배치하기 center_vertical - 대상 객체를 수직 방향의 중앙에 배치하기 center_horizontal - 대상 객체를 수평 방향의 중앙에 배치하기 fill_vertical - 대상 객체를 수직 방향으로 여유 공간만큼 확대하여 채우기 fill_horizontal - 대상 객체를 수평 방향으로 여유 공간만큼 확대하여 채우기 center - 대상 객체를 수직 방향과 수평 방향의 중앙에 배치하기 fill - 대상 객체를 수직 방향과 수평 방향으로 여유 공간만큼 확대하여 채우기 clip_vertical - 대상 객체의 상하 길이가 여유 공간보다 클 경우에 남는 부분을 잘라내기 - top|clip_vertical 로 설정한 경우 아래쪽에 남는 부분 잘라내기 - bottom|clip_vertical 로 설정한 경우 위쪽에 남는 부분 잘라내기 - center_vertical|clip_vertical 로 설정한 경우 위쪽과 아래쪽에 남는 부분 잘라내기 clip_horizontal - 대상 객체의 좌우 길이가 여유 공간보다 클 경우에 남는 부분을 잘라내기 - right|clip_horizontal 로 설정한 경우 왼쪽에 남는 부분 잘라내기 - left|clip_horizontal 로 설정한 경우 오른쪽에 남는 부분 잘라내기 - center_horizontal|clip_horizontal 로 설정한 경우 왼쪽과 오른쪽에 남는 부분 잘라내기 3. 리니어 레이아웃

28 리니어 레이아웃 – 글자 아랫줄 정렬 <LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:baselineAligned= "true" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="right|bottom" android:text="큰 글씨" android:textColor="#ffff0000" android:textSize= "32dp" /> 1 글자의 아랫줄 맞추기 2 글자 크기를 크게 하기 Continued.. 3. 리니어 레이아웃

29 리니어 레이아웃 – 글자 아랫줄 정렬 <TextView android:id="@+id/button02"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="중간 글씨" android:textColor="#ff00ff00" android:textSize="22dp" /> <Button android:text="작은 글씨" android:textColor="#ff0000ff" android:textSize="12dp" </LinearLayout> 3 글자 크기를 작게 하기 4 글자 크기를 좀 더 작게 하기 3. 리니어 레이아웃

30 [padding을 이용한 뷰 내부의 여백 주기] [layout_margin을 이용한 부모 여유공간과의 여백 주기]
리니어 레이아웃 – 여유공간 설정하기 [padding을 이용한 뷰 내부의 여백 주기] [layout_margin을 이용한 부모 여유공간과의 여백 주기] padding 속성 - 뷰 안의 내용물인 텍스트나 이미지와 뷰 안의 영역 사이의 여백을 줄 수 있는 방법 layout_margin 속성 - 부모 컨테이너의 여유 공간과 뷰 사이의 여백을 줄 수 있는 방법 위젯 셀 - 위젯이나 뷰들은 부모 컨테이너로부터 할당된 공간을 차지하게 되며 이를 ‘위젯 셀(cell)’이라고 부름 . 3. 리니어 레이아웃

31 리니어 레이아웃 – 여유공간 설정하기 (계속)
<LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background= "#ffffffff" > <TextView android:background="#ffffff00" android:text="텍스트" android:textColor="#ffff0000" android:textSize="24dp" android:padding= "20dp" /> 1 배경색 설정 2 위젯 내부 여백 설정 Continued.. 3. 리니어 레이아웃

32 리니어 레이아웃 – 여유공간 설정하기 (계속)
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff00ffff" android:text="텍스트" android:textColor="#ffff0000" android:textSize="24dp" android:layout_margin= "10dp" /> <Button android:background="#ffff00ff" android:padding= "20dp" </LinearLayout> 3 위젯과 여유공간 사이의 여백 설정 4 위젯 내부 여백 설정 3. 리니어 레이아웃

33 리니어 레이아웃 – 공간가중치 설정하기 공간가중치는 같은 부모 뷰에 포함되어 있는 뷰들이 여유공간을 얼마나 차지할 수 있는지를 비율로 지정한 것 android:weight 속성 사용 . 3. 리니어 레이아웃

34 리니어 레이아웃 – 공간가중치 설정하기 1 레이아웃 방향 설정 2 레이아웃 방향 설정 3 공간 가중치 설정
<LinearLayout xmlns:android=" android:orientation= "vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <LinearLayout android:orientation= "horizontal" android:layout_height="wrap_content" android:background="#ffffffff" <TextView android:layout_width="wrap_content" android:background="#ffffff00" android:text="텍스트" android:textColor="#ffff0000" android:textSize="16dp" android:layout_weight= "1" /> 1 레이아웃 방향 설정 2 레이아웃 방향 설정 3 공간 가중치 설정 Continued.. 3. 리니어 레이아웃

35 리니어 레이아웃 – 공간가중치 설정하기 (계속)
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff00ffff" android:text="텍스트" android:textColor="#ffff0000" android:textSize="16dp" android:layout_weight= "1" /> <Button android:background="#ffff00ff" </LinearLayout> 4 공간 가중치 설정 5 공간 가중치 설정 Continued.. 3. 리니어 레이아웃

36 리니어 레이아웃 – 공간가중치 설정하기 (계속)
<LinearLayout android:orientation= "horizontal" android:layout_width=“match_parent" android:layout_height="wrap_content" android:background="#ffffffff" > <Button android:layout_width="wrap_content" android:background="#ff00ffff" android:text="텍스트" android:textColor="#ffff0000" android:textSize="24dp" android:layout_weight= "2" /> 6 레이아웃 방향 설정 7 공간 가중치 설정 Continued.. 3. 리니어 레이아웃

37 리니어 레이아웃 – 공간가중치 설정하기 (계속)
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffff00ff" android:text="텍스트" android:textColor="#ffff0000" android:textSize="24dp" android:layout_weight= "1" /> </LinearLayout> 8 공간 가중치 설정 3. 리니어 레이아웃

38 둘째 마당 – CH1. 기본 위젯과 레이아웃 4. 상대 레이아웃

39 상대 레이아웃 상대 레이아웃은 다른 뷰나 부모 뷰와의 상대적인 위치를 이용해 뷰를 배치하는 방법
[상대 레이아웃을 이용한 뷰의 배치 방법] 4. 상대 레이아웃

40 상대 레이아웃의 속성 사용 <RelativeLayout xmlns:android=" android:layout_width=“match_parent" android:layout_height=“match_parent" > <Button android:text="전체버튼" android:textColor="#ff000000" android:textSize="24sp" android:background="#ff00ffff" android:layout_centerInParent= "true" /> 1 한 가운데 배치 Continued.. 4. 상대 레이아웃

41 상대 레이아웃의 속성 사용 (계속) <Button android:text="하단버튼"
android:textColor="#ff000000" android:textSize="24sp" android:layout_width=“match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom= "true" /> </RelativeLayout> 2 아래쪽 배치 4. 상대 레이아웃

42 [상대 레이아웃에서 부모 컨테이너와의 상대적 위치를 이용하는 속성]
상대 레이아웃에서 사용할 수 있는 속성들 [상대 레이아웃에서 부모 컨테이너와의 상대적 위치를 이용하는 속성] 속성 설 명 layout_alignParentTop - 부모 컨테이너의 위쪽과 뷰의 위쪽을 맞춤 layout_alignParentBottom - 부모 컨테이너의 아래쪽과 뷰의 아래쪽을 맞춤 layout_alignParentLeft - 부모 컨테이너의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤 layout_alignParentRight - 부모 컨테이너의 오른쪽 끝과 뷰의 오른쪽 끝을 맞춤 layout_centerHorizontal - 부모 컨테이너의 수평 방향 중앙에 배치함 layout_centerVertical - 부모 컨테이너의 수직 방향 중앙에 배치함 layout_centerInParent - 부모 컨테이너의 수평과 수직 방향 중앙에 배치함 4. 상대 레이아웃

43 [상대 레이아웃에서 다른 뷰와의 상대적 위치를 이용하는 속성]
상대 레이아웃에서 사용할 수 있는 속성들 [상대 레이아웃에서 다른 뷰와의 상대적 위치를 이용하는 속성] 속성 설 명 layout_above - 지정한 뷰의 위쪽에 배치함 layout_below - 지정한 뷰의 아래쪽에 배치함 layout_toLeftOf - 지정한 뷰의 왼쪽에 배치함 layout_toRightOf - 지정한 뷰의 오른쪽에 배치함 layout_alignTop - 지정한 뷰의 위쪽과 맞춤 layout_alignBottom - 지정한 뷰의 아래쪽과 맞춤 layout_alignLeft - 지정한 뷰의 왼쪽과 맞춤 layout_alignRight - 지정한 뷰의 오른쪽과 맞춤 layout_alignBaseline - 지정한 뷰와 내용물의 아래쪽 기준선(baseline)을 맞춤 4. 상대 레이아웃

44 둘째 마당 – CH1. 기본 위젯과 레이아웃 5. 테이블 레이아웃

45 테이블 레이아웃 <TableLayout xmlns:android=" android:layout_width=“match_parent" android:layout_height="wrap_content" android:stretchColumns= "1" > <TableRow> <TextView android:text="Name : " android:textSize="24dp" android:padding="10dp" /> android:text="박찬기" android:gravity="left" </TableRow> 1 폭에 맞추어 열을 자동 확장 2 테이블의 첫 번째 행 Continued.. 5. 테이블 레이아웃

46 테이블 레이아웃 (계속) <TableRow> <TextView android:text="Age : "
android:textSize="24dp" android:padding="10dp" /> android:text="26" android:gravity="left" </TableRow> </TableLayout> 3 테이블의 두 번째 행 5. 테이블 레이아웃

47 둘째 마당 – CH1. 기본 위젯과 레이아웃 6. 스크롤뷰

48 스크롤뷰 사용하기 스크롤뷰 예제 XML 레이아웃 메인 액티비티 코드 주어진 영역보다 큰 이미지에 스크롤이 생기도록 만들기
레이아웃 코드 작성 메인 액티비티 코드 작성 6. 스크롤뷰

49 스크롤뷰의 XML 레이아웃 <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Change Image" /> <HorizontalScrollView 1 버튼 2 스크롤뷰 Continued.. 6. 스크롤뷰

50 스크롤뷰의 XML 레이아웃 (계속) <ScrollView android:id="@+id/scrollView01"
android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView /> </ScrollView> </HorizontalScrollView> </LinearLayout> 3 스크롤뷰 4 이미지뷰 6. 스크롤뷰

51 스크롤뷰의 메인 액티비티 코드 … scrollView01 = (ScrollView) findViewById(R.id.scrollView01); imageView01 = (ImageView) findViewById(R.id.imageView01); Button button01 = (Button) findViewById(R.id.button01); scrollView01.setHorizontalScrollBarEnabled(true); Resources res = getResources(); BitmapDrawable bitmap = (BitmapDrawable) res.getDrawable(R.drawable.system_architecture); int bitmapWidth = bitmap.getIntrinsicWidth(); int bitmapHeight = bitmap.getIntrinsicHeight(); imageView01.setImageDrawable(bitmap); imageView01.getLayoutParams().width = bitmapWidth; imageView01.getLayoutParams().height = bitmapHeight; 1 객체 참조 2 기능 설정 3 이미지 참조 4 크기 설정 Continued.. 6. 스크롤뷰

52 스크롤뷰의 메인 액티비티 코드 button01.setOnClickListener(new OnClickListener() {
public void onClick(View v) { changeImage(); } }); private void changeImage() { Resources res = getResources(); BitmapDrawable bitmap = (BitmapDrawable) res.getDrawable(R.drawable.activity_lifecycle); int bitmapWidth = bitmap.getIntrinsicWidth(); int bitmapHeight = bitmap.getIntrinsicHeight(); imageView01.setImageDrawable(bitmap); imageView01.getLayoutParams().width = bitmapWidth; imageView01.getLayoutParams().height = bitmapHeight; 5 리소스 변경 6. 스크롤뷰

53 둘째 마당 – CH1. 기본 위젯과 레이아웃 7. 프레임 레이아웃

54 프레임 레이아웃과 뷰의 전환 뷰 전환 예제 XML 레이아웃 메인 액티비티 코드 프레임 레이아웃을 이용해 뷰를 중첩하여 만들기
버튼을 누르면 다른 이미지로 전환하기 XML 레이아웃 메인 액티비티 코드 레이아웃 코드 작성 메인 액티비티 코드 작성 7. 프레임 레이아웃

55 프레임 레이아웃과 뷰의 전환 – XML 레이아웃
<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Change Image" /> <FrameLayout 1 전환 버튼 2 화면 채우기 Continued.. 7. 프레임 레이아웃

56 프레임 레이아웃과 뷰의 전환 – XML 레이아웃
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility= "invisible" /> android:visibility= "visible" </FrameLayout> </LinearLayout> 3 이미지 뷰 설정 4 이미지 뷰 설정 7. 프레임 레이아웃

57 프레임 레이아웃과 뷰의 전환 – 메인 액티비티 코드
package org.androidtown.ui; ... public class SampleFrameLayoutActivity extends Activity { Button button01; ImageView imageView01; ImageView imageView02; int imageIndex = 0; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button01 = (Button) findViewById(R.id.button01); imageView01 = (ImageView) findViewById(R.id.imageView01); imageView02 = (ImageView) findViewById(R.id.imageView02); button01.setOnClickListener(new OnClickListener() { public void onClick(View v) { changeImage(); } }); 1 객체 참조 Continued.. 7. 프레임 레이아웃

58 프레임 레이아웃과 뷰의 전환 – 메인 액티비티 코드
private void changeImage() { if (imageIndex == 0) { imageView01.setVisibility(View.VISIBLE); imageView02.setVisibility(View.INVISIBLE); imageIndex = 1; } else if (imageIndex == 1) { imageView01.setVisibility(View.INVISIBLE); imageView02.setVisibility(View.VISIBLE); imageIndex = 0; } 2 이미지 뷰 설정 3 이미지 뷰 설정 7. 프레임 레이아웃

59 둘째 마당 – CH1. 기본 위젯과 레이아웃 8. 기본 위젯들

60 기본 위젯 – 텍스트뷰의 속성 텍스트 뷰 - text : 텍스트 뷰에 보이는 문자열을 설정할 수 있음
- textColor : 텍스트뷰에서 표시하는 문자열의 색상을 설정함 : 색상 설정은 "#AARRGGBB" 포맷을 일반적으로 사용(Alpha, Red, Green, Blue) : 투명도를 나타내는 Alpha(색상만 표현할 때 - "FF", 투명 - “00“, 반투명 - "88”) - textSize : 텍스트뷰에서 표시하는 문자열의 크기를 설정함 ("dp"나 “sp" 또는 "px" 등의 단위 값을 사용함) - textStyle : 텍스트뷰에서 표시하는 문자열의 스타일 속성을 설정함 ("normal", "bold", "italic" 등의 값을 지정할 수 있음) - typeFace : 텍스트뷰에서 표시하는 문자열의 폰트를 설정함 ("normal", "sans", "serif", "monospace") - singleLine : 텍스트뷰에서 표시하는 문자열이 한 줄로만 표시되도록 설정함 8. 기본 위젯들

61 기본 위젯 – 텍스트뷰의 속성 사용 1 배경색 설정 2 크기 설정 3 스타일 설정 4 색상 설정 5 한 줄 설정
<LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background= "#ff000055" android:padding="3px" android:text="여기에 사용자 이름을 입력하세요." android:textSize= "22sp" android:textStyle= "bold" android:textColor= "#88ff8888" android:singleLine= "true" android:gravity="center" /> </LinearLayout> 1 배경색 설정 2 크기 설정 3 스타일 설정 4 색상 설정 5 한 줄 설정 8. 기본 위젯들

62 기본 위젯 – 버튼의 속성 사용 <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 선택 " android:textSize="24dp" android:textStyle="bold" android:gravity="center" /> 1 기본 버튼 Continued.. 8. 기본 위젯들

63 기본 위젯 – 버튼의 속성 사용 (계속) <RadioGroup android:id="@+id/radioGroup01"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingLeft="5dp" android:paddingRight="5dp" > <RadioButton android:layout_weight="1" android:text="남성" android:textColor="#ffaaff10" android:textStyle="bold" android:textSize="24dp" /> 2 라디오 그룹 3 첫 번째 버튼 Continued.. 8. 기본 위젯들

64 기본 위젯 – 버튼의 속성 사용 (계속) <RadioButton android:id="@+id/radio02"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="여성" android:textColor="#ffaaff10" android:textStyle="bold" android:textSize="24dp" /> </RadioGroup> <LinearLayout android:layout_width=“match_parent" android:gravity="center_vertical|center_horizontal" android:paddingTop="10dp" > 4 두 번째 버튼 Continued.. 8. 기본 위젯들

65 기본 위젯 – 버튼의 속성 사용 (계속) <TextView
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="하루종일" android:textSize="24dp" android:paddingRight="10dp" android:textColor="#ffaaff10" /> <CheckBox </LinearLayout> 5 체크 박스 8. 기본 위젯들

66 기본 위젯 – 입력상자의 속성 사용 <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <EditText android:layout_height="wrap_content" android:textSize="18sp" android:autoText= "true" android:capitalize= "words" android:hint= "이름을 입력하세요." </EditText> </LinearLayout> 1 설정 2 변경 3 표시 8. 기본 위젯들

67 기본 위젯 – 이미지뷰의 속성 사용 <ImageButton android:id="@+id/ImageButton01"
android:layout_width=“24dp" android:layout_height=“24dp" … /> <ImageView android:layout_width=“32dp" android:layout_height=“32dp" 1 이미지 버튼 2 이미지 뷰 8. 기본 위젯들

68 참고 문헌 [ References] References 기본 서적
2013, 정재곤, “Do it! 안드로이드 앱 프로그래밍(개정판)”, 이지스퍼블리싱(주) Android Website Google Developer’s Conference Android SDK Documentation References