위젯과 레이아웃.

Presentation on theme: "위젯과 레이아웃."— Presentation transcript:

1 위젯과 레이아웃

2 뷰

3 뷰와 뷰 그룹 뷰 뷰 그룹 사용자 인터페이스 컴포넌트를 위한 기본 빌딩블록
화면에서 사각형 영역을 차지하며 그리기, 포커스 변화, 스크롤, 이벤트 처리 등을 담당 뷰 그룹 다수의 자식 뷰를 담을 수 있는 뷰 클래스의 확장 다른 뷰들을 모아 관리하기 위하여 사용되는 특별한 뷰 다른 뷰나 뷰 그룹을 하부에 포함할 수도 있고 독자적으로도 존재 가능 ViewGroup에서 파생된 클래스들은 크게 두 가지 범주인 레이아웃과 어댑터 뷰로 구별

4 뷰와 뷰 그룹 뷰 계층구조

5 뷰 속성과 메소드 식별자 ID 자신을 식별하기 위하여 정수 ID를 정의
ID는 일반적으로 레이아웃 XML 파일에서 배정되며 뷰 트리 내에서 자신을 찾기 위하여 사용 ID는 트리 전체에 걸쳐 유일할 필요는 없지만 찾고자 하는 뷰 내에서는 유일 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" Button myButton = (Button) findViewById(R.id.my_button);

6 뷰 속성과 메소드 크기와 위치 뷰의 기하학적 모습은 폭과 높이로 표시되는 2차원의 직사각형으로 좌측 상단을 기준으로 위치를 픽셀 단위로 표시 layout_width와 layout_height라는 XML 레이아웃 속성을 사용하거나 ViewGroup.LayoutParams() 메소드를 사용 wrap_content fill_parent 혹은 match_parent 여백 padding paddingTop, paddingBottom, paddingLeft, 그리고 paddingRight

7 뷰 속성과 메소드 XML 속성 일부 메소드 일부 android:visibility – 위젯의 화면 표현 여부 결정.
android:background – 16진수 RGB(#FFFFFF 형식)로 위젯의 배경 색깔 지정. 메소드 일부 setEnable() – 위젯을 활성화/비활성화 시킴. isEnable() – 위젯의 활성화 여부 check. requestFocus() – method를 호출한 위젯으로 fucus를 이동. getParent() – 자신이 포함된 부모 위젯이나 컨테이너 획득. findViewById() – 컴파일된 Resource, R 객체를 이용해 xml layout 파일에 선언된 위젯 인스턴스 획득 getRootView() – 최상위 view를 획득

8 위젯

9 개요 의미 일반적으로 기계 혹은 장치 속성을 가지며 독특하고 신기한 소형 부품이나 도구를 통칭
프로그래밍에서는 툴바, 트리, 슬라이더와 같이 사용자와 시스템 사이의 상호작용을 위한 인터페이스, 상호작용 방식에 적합하게 구조화된 컨트롤 요소를 의미 View의 서브클래스로 존재하며 완전한 모습을 갖춘 텍스트 필드나 버튼 같은 객체를 의미 사용자에게 정보를 표시하거나 사용자의 입력을 받아들이는 컴포넌트 DatePicker, TimePicker, 및 ZoomControls은 뷰 그룹으로부터 파생되지만 위젯과 같이 사용

10 AutoCompleteTextView
개요 위젯의 종류 - 1 클래스 개요 TextView 텍스트를 표시함 EditText 편집 가능한 텍스트를 표시함 AutoCompleteTextView 사용자의 입력에 맞춰 텍스트를 완성함 ImageView 아이콘이나 사진 등 이미지를 표시함 VideoView 비디오를 재생함 Button 기본적인 누름 버튼 CompoundButton 체크와 해제 상태를 갖는 누름 버튼 CheckBox 체크와 해제 상태를 갖는 체크박스 RadioButton 체크와 해제 상태를 갖는 라디오버튼

11 개요 위젯의 종류 - 2 클래스 개요 RadioGroup 복수의 라디오버튼 중 하나를 선택하는 버튼 그룹 ImageButton
이미지를 표시할 수 있는 누름 버튼 AnalogClock 현재 시각을 표시하는 아날로그 시계 DigitalClock 현재 시각을 표시하는 디지털 시계 Chronometer 경과 시간을 표시함 ProgressBar 기다리는 시간이나 경과 시간을 표시함 DatePicker 연월일을 달력에서 설정함 TimePicker 시각을 설정함 ZoomControls 이미지나 지도의 줌 레벨을 설정함

12 대표적인 위젯 TextView Label 표시 문자열의 입력, 출력, 편집, 포맷에 관련된 대부분의 기능을 포함
android:typeface – 활자체(폰트) normal, sans, serif, monospace 중에서 지정. android:textstyle – bold, italic 지정. 복수 적용 시 | 사용. (ex. "bold|italic") android:textColor android:text – Label 내용

13 대표적인 위젯 EditText 사용자로부터 텍스트를 입력받을 때 사용.
TextView에서 파생된 것으로 EditText의 기능은 대부분 TextView에 구현되어 있으며, 편집과 관련된 속성들이 활성화 android:autoText – true일 경우 일반적인 스펠링 error를 잡아낸다. android:capitalize – none, characters, words, sentences값을 사용할 수 있으며 각각 사용자 결정, 모든 문자, 모든 단어의 시작 문자, 모든 문장의 시작 문자를 자동으로 대문자로 변환 android:digits – String 형식으로 지정된 토큰만 입력 가능 android:singleLine – false일 경우 복수 줄 허용

14 대표적인 위젯 버튼 사용자가 누르거나 클릭하여 명령을 내릴 수 있는 위젯 CheckBox
한 목록에서 여러 개를 선택할 때 흔히 사용 isChecked() – checkbox의 상태를 반환 setChecked(true/false) – checkbox를 check/unckeck 함. toggle() – checkbox를 toggle

15 대표적인 위젯 버튼 RadioButton 사용자가 여러 항목 중에서 하나만을 선택할 때 사용
CompoundButton을 상속. 사용 방법은 CheckBox와 거의 동일 RadioButton은 RadioGroup에 의해 여러 개가 한 묵음으로 사용 같은 RadioGroup 내부의 RadioButton은 한 번에 택일 가능. RadioButton은 CheckBox와 다르게 한번 check되면 사용자가 직접 unckeck 할 수 없음. RadioGroup 내부의 다른 RadioButton을 선택 하는 것으로 uncheck

16 대표적인 위젯 ImageView와 ImageButton 아이콘과 같은 임의의 이미지를 표시하기 위한 위젯
src maxWidth와 maxHeight tint

17 응용 예제 1 Widget1Demo

18 응용 예제 1 Widget1Demo

19 응용 예제 2 Widget2Demo 예제 3 Widget3Demo

20 응용 예제 4 Widget4Demo 예제 5 Widget5Demo

21 레이아웃

22 개요 의미 필요한 위젯을 효과적으로 사용하고 개성있는 화면을 만들려면 적절한 레이아웃을 사용
뷰 혹은 위젯을 담고 위치를 제어하는 역할을 담당 View의 자손인 ViewGroup 클래스를 통하여 구현 뷰의 서브 클래스로 계층 구조 내의 하부에서 뷰 혹은 컨트롤들의 위치를 제어하는 역할을 담당 자바 프로그램을 통해서 정의될 수도 있지만 대부분 XML 레이아웃 파일에 따로 정의

23 개요 레이아웃의 계층도

24 개요 레이아웃 속성 뷰의 자손이므로 뷰의 속성을 상속
위젯을 화면에 배치하는 대부분의 속성은 모든 레이아웃에서 공통적으로 사용된다. 레이아웃의 속성은 일반적으로 layout_로 시작. 자식 뷰가 사용하는 경우 자신의 속성을 지정하기 보다는 부모 뷰인 레이아웃에게 자신의 위치를 지정 대표적인 속성: layout_weight layout_gravity layout_margin 등

25 선형 및 테이블 레이아웃 LinearLayout 위젯이나 다른 하위 컨테이너를 하나의 행 혹은 열 방향으로 나열
단순하지만 가장 사용 빈도가 높음 선형 레이아웃으로 개발자가 원하는 작업을 하려면 orientation, weight, gravity, padding 등의 특성을 활용 특히 orientation 속성은 뷰의 배치 방향을 결정하며 vertical과 horizontal로 지정할 수 있으며 기본값은 horizontal

26 선형 및 테이블 레이아웃 TableLayout 속성 열과 횡의 테이블 모습을 이용하여 나열 LinearLayout의 서브클래스
<TableRow> 는 테이블의 한 행을 의미 <TextView> 는 문자열을 출력하는 역할 <view>는 가로 구분선을 표시

27 절대 레이아웃 AbsoulteLayout 자식 뷰의 위치를 관계나 순서에 상관없이 절대 좌표로 표시하는 레이아웃
자식 뷰의 위치를 layout_x와 layout_y 속성을 사용하여 명시 단말기의 해상도나 방향 설정에 대하여 유연하지 못함 화면 전체가 아니라 일부 영역에 대한 세밀한 표시가 요구되는 상황에 한정하여 사용 폐기중

28 상대 레이아웃 RelativeLayout 속성 예 특정 내부 요소를 다른 내부 요소에 관련되어 위치
android:orientation android:layout_width android:layout_height android:layout_above android:layout_below android:layout_alignBaseline android:layout_alignBottom android:layout_alignLeft android:layout_alignRight android:layout_alignTop android:layout_toLeftOf android:layout_toRightOf 예

29 기타 레이아웃 FrameLayout ScrollView
가장 간단한 레이아웃으로 내부에 있는 뷰나 콘트롤들이 좌측 상단에 겹쳐서 차곡차곡 저장. 주로 탭(Tab)을 이용할 때 자주 사용 ScrollView RelativeLayout 클래스의 서브클래스 뷰 가장자리에 스크롤바가 생성