ݺߣ

ݺߣShare a Scribd company logo
JAVA, Android 스터디
2015.06.09
김희준
1
1. 뷰(View)
- 컨트롤이나 위젯으로 불리는 UI구성요소
- 여러 개의 뷰를 포함하고 있는 것은 뷰그룹
- 뷰가 뷰그룹을 상속가능
->뷰안에 뷰그룹이 존재, UI의 자연스러움
2. 레이아웃(Layout)
- 뷰 그룹에서 자주사용하는 뷰의 배치방식
- 채우기, 방향, 정렬방향등 다양한 속성
- 리니어, 상대, 프레임, 테이블 레이아웃 존재
- 훨씬 적은 XML 코드로 화면 구성 가능
참조 교재 : Do it! 안드로이드 프로그래밍
2
0. 지난주 복습
참조 프로젝트 : SampleLayout
다운로드 : easyspub.com
1. Match(fill)_parent
- 뷰의 높이/너비를 화면의 높이/너비에 맞춤
- android:layout_width="match_parent"
- android:layout_height="match_parent "
2. wrap_content
- 뷰의 높이/너비를 텍스트 크기에 맞춤
- android:layout_width=“wrap_content"
- android:layout_height=" wrap_content “
* 레이아웃 XML파일에서 작성 가능
3
0. 지난주 복습
참조 프로젝트 : SampleLayout
다운로드 : easyspub.com
android:layout_width=“wrap_contents"
android:layout_height=" wrap_contents "
android:layout_width="match_parent"
android:layout_height="match_parent "
android:layout_width="match_parent"
android:layout_height="wrap_contents"
android:layout_width="wrap_contents"
android:layout_height="match_parent "
4
0. 지난주 복습
참조 프로젝트 : SampleLayout
다운로드 : easyspub.com
ㅇ 아이디로 뷰 찾기
findViewByID(r.id.(뷰이름))
해당뷰를 찾아서 메소드에 추가
토스트 메시지 출력
5
0. 지난주 복습
1. 채우기 : fill model
- 뷰를 부모 뷰의 여유공간에 어떻게 채울지 설정
2. 방향 : orientation
- 뷰를 추가하는 방향을 설정
3. 정렬 방향 : gravity
- 뷰의 정렬 방향을 설정
4. 여유 공간 : padding
- 뷰의 여유공간을 설정
5. 공간 가중치 : weight
- 뷰가 차지하는 가중치 값을 설정
참조 교재 : Do it! 안드로이드 프로그래밍
6
0. 지난주 복습
7
참조 프로젝트 : SampleLinearLayout
다운로드 : easyspub.com
ㅇ 방향 설정
Orientation으로 방향설정
0. 지난주 복습
8
Orientation으로 방향설정
horizontal은 옆으로
ㅇ 방향 설정1
참조 프로젝트 : SampleLinearLayout
다운로드 : easyspub.com0. 지난주 복습
9
참조 프로젝트 : SampleLinearLayout
다운로드 : easyspub.com
ㅇ 방향 설정2
0. 지난주 복습
10
ㅇ 여유공간 설정
참조 프로젝트 : SampleLinearLayout
다운로드 : easyspub.com
24dp만큼의 간격
* dp란?
- density independent pixel,
밀도 독립적 픽셀이라고 불리며
160dip 화면을 기준으로 한 픽셀
(1인치에 160개의 점이 있을시
1dp = 1px) 기기마다 화면의
크기가 다르므로 dp를 이용해
위치를 정하면 유연성이 생김
0. 지난주 복습
11
ㅇ 가중치 설정
참조 프로젝트 : SampleLinearLayout
다운로드 : easyspub.com
왼쪽 아래가 가중치 2인 뷰.
* 가중치 : 레이아웃의 화면을
가로/세로 기준으로 가중치를
두며 뷰들의 크기와 위치는
(뷰의 가중치 / 가중치의 총합)과
설정된 방향으로 정해진다.
0. 지난주 복습
12
1. 상대/프레임/테이블 레이아웃
2. 레이아웃에서의 화면전환
3. 스크롤뷰
13
1. 상대(Relative) 레이아웃
참조 프로젝트 : SampleRelativeLayout
다운로드 : easyspub.com
실행화면
①
③
②
④
⑤
⑥
14
1. 상대(Relative) 레이아웃
참조 프로젝트 : SampleRelativeLayout
다운로드 : easyspub.com
Activity_main.xml에서 버튼 3개 생성(리니어 레이아웃)
①
15
1. 상대(Relative) 레이아웃
참조 프로젝트 : SampleRelativeLayout
다운로드 : easyspub.com
MainActivity.java에서 버튼클릭 메소드 부분
버튼 클릭시 normal레이아웃으로 화면 전환
②
16
1. 상대(Relative) 레이아웃
참조 프로젝트 : SampleRelativeLayout
다운로드 : easyspub.com
Nomal.xml 소스
레이아웃의 배경화면 설정
③
17
1. 상대(Relative) 레이아웃
참조 프로젝트 : SampleRelativeLayout
다운로드 : easyspub.com
Nomal.xml 소스
새로운 텍스트뷰 1개 생성
Layout_alignparentTop
설정으로 텍스트뷰가
상단에 위치하게 됨
Layout_marginTop 설정
으로 20dp떨어진 상단에
텍스트뷰 생성
④
18
1. 상대(Relative) 레이아웃
참조 프로젝트 : SampleRelativeLayout
다운로드 : easyspub.com
Nomal.xml 소스
새로운 텍스트뷰 2개 생성/속성 설정
(아이디와 비밀번호)
EditText설정을 함으로
해당 텍스트뷰에서
타이핑이 가능해짐
⑤centerInParent설정을
함으로써 해당 레이
아웃이 정중앙에 위치
⑤
19
1. 상대(Relative) 레이아웃
참조 프로젝트 : SampleRelativeLayout
다운로드 : easyspub.com
하단부에 체크/엑스 버튼을 배경으로한 버튼 생성
체크버튼을 위한
상대레이아웃설정
(alignParentLeft)
엑스버튼을 위한
상대레이아웃설정
(alignParentRight)
20
2. 테이블(Table) 레이아웃
참조 프로젝트 : SampleLayout
다운로드 : easyspub.com
실행화면
①
②
③
21
2. 테이블(Table) 레이아웃
참조 프로젝트 : SampleLayout
다운로드 : easyspub.com
테이블 레이아웃에선
TableRow태그를 이용
열을 추가
하나의 열에 여러가지
뷰가 들어갈 수 있음
이름과 나이를 보여
주는 텍스트 뷰를 생성
Table_layout.xml 소스
2개의 텍스트뷰를 추가하는 부분
①
②
22
2. 테이블(Table) 레이아웃
stretchColumns를
이용해서 테이블 레이
아웃의 남는 칸을
채워 넣을 수 있다.
③
③
참조 프로젝트 : SampleScrollView
다운로드 : easyspub.com
Table_layout.xml 소스
23
3. 스크롤 뷰
참조 프로젝트 : SampleScrollView
다운로드 : easyspub.com
실행화면
24
3. 스크롤 뷰
참조 프로젝트 : SampleLayout
다운로드 : easyspub.com
HorizontalScrollView는
수평 스크롤을 위한 뷰
그 안에 있는 Scrollview는
수직 스크롤을 위한 뷰
수평 스크롤 뷰 안에
이미지 뷰가 생성 되
이미지가 화면보다
클 경우 스크롤이
가능해짐
Activity_main.xml 소스
스크롤바 생성/설정을 위한 부분
25
3. 스크롤 뷰
참조 프로젝트 : SampleScrollView
다운로드 : easyspub.com
스크롤/이미지 뷰를 위한 객체와
이미지를 보여주기 위한 객체 선언
스크롤/이미지 뷰 이름은 XML과 동일
MainActivity 소스
findViewById를 이용해 각각의 객체를 참조
26
3. 스크롤 뷰
참조 프로젝트 : SampleScrollView
다운로드 : easyspub.com
수평 스크롤바 사용 설정
Drawble폴더에 가서 해당
이미지 리소스를 읽음
이미지 리소스와 크키 설정
MainActivity 소스
스크롤바 설정과 이미지 리소스 부분
27
4. 프레임(Frame)레이아웃
참조 프로젝트 : SampleFrameLayout
다운로드 : easyspub.com
28
4. 프레임(Frame)레이아웃
참조 프로젝트 : SampleFrameLayout
다운로드 : easyspub.com
프레임 레이아웃 내에
이미지 뷰를 2개 생성
실제로 보이는 것은 1개의
뷰이고 이는 visibility를
통해 설정 가능
29
4. 프레임(Frame)레이아웃
참조 프로젝트 : SampleFrameLayout
다운로드 : easyspub.com
imageIndex와 setvisivility를 이용해서
두 개의 이미지를 번갈아 보여줌
30
5. 기본 위젯 참조 교재 : Do it! 안드로이드 앱 프로그래밍
1. 텍스트 뷰(TextView)
- 화면을 구성할 때 가장 많이 사용
- 주요 속성 : text, textColor, textSize,
textSyle, typeface(기본문자 표시),
singleLine(한줄 표시)
2. 버튼(Button)
- 위젯에서 발생하는 이벤트 처리에 유용
- 체크박스, 라디오 버튼도 버튼의 속성을 가짐
- ImageButton태그로 버튼에 이미지 추가 가능
- 관련 메소드 : public boolean isChecked()
public void setChecked(boolean checked)
public void toggle() 등
31
5. 기본 위젯 참조 교재 : Do it! 안드로이드 앱 프로그래밍
3. 에디트텍스트
- 사용자의 입력을 받기에 용이, 복/붙 등 기본기능 지원
- 포커스가 설정되면 키패드가 화면에 나타남
- hint속성을 이용하면 안내글이 출력됨
4. 이미지뷰
- 이미지를 화면에 보여주기에 유용
- 주요 속성 : src(이미지 설정), maxWidTh/Height(최대크기설정)
- tint(반투명 색상 적용), scaleType(확대/축소 비율)
Q & A
32
Thank you!!
33

More Related Content

Java, android 스터티7

  • 2. 1. 뷰(View) - 컨트롤이나 위젯으로 불리는 UI구성요소 - 여러 개의 뷰를 포함하고 있는 것은 뷰그룹 - 뷰가 뷰그룹을 상속가능 ->뷰안에 뷰그룹이 존재, UI의 자연스러움 2. 레이아웃(Layout) - 뷰 그룹에서 자주사용하는 뷰의 배치방식 - 채우기, 방향, 정렬방향등 다양한 속성 - 리니어, 상대, 프레임, 테이블 레이아웃 존재 - 훨씬 적은 XML 코드로 화면 구성 가능 참조 교재 : Do it! 안드로이드 프로그래밍 2 0. 지난주 복습
  • 3. 참조 프로젝트 : SampleLayout 다운로드 : easyspub.com 1. Match(fill)_parent - 뷰의 높이/너비를 화면의 높이/너비에 맞춤 - android:layout_width="match_parent" - android:layout_height="match_parent " 2. wrap_content - 뷰의 높이/너비를 텍스트 크기에 맞춤 - android:layout_width=“wrap_content" - android:layout_height=" wrap_content “ * 레이아웃 XML파일에서 작성 가능 3 0. 지난주 복습
  • 4. 참조 프로젝트 : SampleLayout 다운로드 : easyspub.com android:layout_width=“wrap_contents" android:layout_height=" wrap_contents " android:layout_width="match_parent" android:layout_height="match_parent " android:layout_width="match_parent" android:layout_height="wrap_contents" android:layout_width="wrap_contents" android:layout_height="match_parent " 4 0. 지난주 복습
  • 5. 참조 프로젝트 : SampleLayout 다운로드 : easyspub.com ㅇ 아이디로 뷰 찾기 findViewByID(r.id.(뷰이름)) 해당뷰를 찾아서 메소드에 추가 토스트 메시지 출력 5 0. 지난주 복습
  • 6. 1. 채우기 : fill model - 뷰를 부모 뷰의 여유공간에 어떻게 채울지 설정 2. 방향 : orientation - 뷰를 추가하는 방향을 설정 3. 정렬 방향 : gravity - 뷰의 정렬 방향을 설정 4. 여유 공간 : padding - 뷰의 여유공간을 설정 5. 공간 가중치 : weight - 뷰가 차지하는 가중치 값을 설정 참조 교재 : Do it! 안드로이드 프로그래밍 6 0. 지난주 복습
  • 7. 7 참조 프로젝트 : SampleLinearLayout 다운로드 : easyspub.com ㅇ 방향 설정 Orientation으로 방향설정 0. 지난주 복습
  • 8. 8 Orientation으로 방향설정 horizontal은 옆으로 ㅇ 방향 설정1 참조 프로젝트 : SampleLinearLayout 다운로드 : easyspub.com0. 지난주 복습
  • 9. 9 참조 프로젝트 : SampleLinearLayout 다운로드 : easyspub.com ㅇ 방향 설정2 0. 지난주 복습
  • 10. 10 ㅇ 여유공간 설정 참조 프로젝트 : SampleLinearLayout 다운로드 : easyspub.com 24dp만큼의 간격 * dp란? - density independent pixel, 밀도 독립적 픽셀이라고 불리며 160dip 화면을 기준으로 한 픽셀 (1인치에 160개의 점이 있을시 1dp = 1px) 기기마다 화면의 크기가 다르므로 dp를 이용해 위치를 정하면 유연성이 생김 0. 지난주 복습
  • 11. 11 ㅇ 가중치 설정 참조 프로젝트 : SampleLinearLayout 다운로드 : easyspub.com 왼쪽 아래가 가중치 2인 뷰. * 가중치 : 레이아웃의 화면을 가로/세로 기준으로 가중치를 두며 뷰들의 크기와 위치는 (뷰의 가중치 / 가중치의 총합)과 설정된 방향으로 정해진다. 0. 지난주 복습
  • 12. 12 1. 상대/프레임/테이블 레이아웃 2. 레이아웃에서의 화면전환 3. 스크롤뷰
  • 13. 13 1. 상대(Relative) 레이아웃 참조 프로젝트 : SampleRelativeLayout 다운로드 : easyspub.com 실행화면 ① ③ ② ④ ⑤ ⑥
  • 14. 14 1. 상대(Relative) 레이아웃 참조 프로젝트 : SampleRelativeLayout 다운로드 : easyspub.com Activity_main.xml에서 버튼 3개 생성(리니어 레이아웃) ①
  • 15. 15 1. 상대(Relative) 레이아웃 참조 프로젝트 : SampleRelativeLayout 다운로드 : easyspub.com MainActivity.java에서 버튼클릭 메소드 부분 버튼 클릭시 normal레이아웃으로 화면 전환 ②
  • 16. 16 1. 상대(Relative) 레이아웃 참조 프로젝트 : SampleRelativeLayout 다운로드 : easyspub.com Nomal.xml 소스 레이아웃의 배경화면 설정 ③
  • 17. 17 1. 상대(Relative) 레이아웃 참조 프로젝트 : SampleRelativeLayout 다운로드 : easyspub.com Nomal.xml 소스 새로운 텍스트뷰 1개 생성 Layout_alignparentTop 설정으로 텍스트뷰가 상단에 위치하게 됨 Layout_marginTop 설정 으로 20dp떨어진 상단에 텍스트뷰 생성 ④
  • 18. 18 1. 상대(Relative) 레이아웃 참조 프로젝트 : SampleRelativeLayout 다운로드 : easyspub.com Nomal.xml 소스 새로운 텍스트뷰 2개 생성/속성 설정 (아이디와 비밀번호) EditText설정을 함으로 해당 텍스트뷰에서 타이핑이 가능해짐 ⑤centerInParent설정을 함으로써 해당 레이 아웃이 정중앙에 위치 ⑤
  • 19. 19 1. 상대(Relative) 레이아웃 참조 프로젝트 : SampleRelativeLayout 다운로드 : easyspub.com 하단부에 체크/엑스 버튼을 배경으로한 버튼 생성 체크버튼을 위한 상대레이아웃설정 (alignParentLeft) 엑스버튼을 위한 상대레이아웃설정 (alignParentRight)
  • 20. 20 2. 테이블(Table) 레이아웃 참조 프로젝트 : SampleLayout 다운로드 : easyspub.com 실행화면 ① ② ③
  • 21. 21 2. 테이블(Table) 레이아웃 참조 프로젝트 : SampleLayout 다운로드 : easyspub.com 테이블 레이아웃에선 TableRow태그를 이용 열을 추가 하나의 열에 여러가지 뷰가 들어갈 수 있음 이름과 나이를 보여 주는 텍스트 뷰를 생성 Table_layout.xml 소스 2개의 텍스트뷰를 추가하는 부분 ① ②
  • 22. 22 2. 테이블(Table) 레이아웃 stretchColumns를 이용해서 테이블 레이 아웃의 남는 칸을 채워 넣을 수 있다. ③ ③ 참조 프로젝트 : SampleScrollView 다운로드 : easyspub.com Table_layout.xml 소스
  • 23. 23 3. 스크롤 뷰 참조 프로젝트 : SampleScrollView 다운로드 : easyspub.com 실행화면
  • 24. 24 3. 스크롤 뷰 참조 프로젝트 : SampleLayout 다운로드 : easyspub.com HorizontalScrollView는 수평 스크롤을 위한 뷰 그 안에 있는 Scrollview는 수직 스크롤을 위한 뷰 수평 스크롤 뷰 안에 이미지 뷰가 생성 되 이미지가 화면보다 클 경우 스크롤이 가능해짐 Activity_main.xml 소스 스크롤바 생성/설정을 위한 부분
  • 25. 25 3. 스크롤 뷰 참조 프로젝트 : SampleScrollView 다운로드 : easyspub.com 스크롤/이미지 뷰를 위한 객체와 이미지를 보여주기 위한 객체 선언 스크롤/이미지 뷰 이름은 XML과 동일 MainActivity 소스 findViewById를 이용해 각각의 객체를 참조
  • 26. 26 3. 스크롤 뷰 참조 프로젝트 : SampleScrollView 다운로드 : easyspub.com 수평 스크롤바 사용 설정 Drawble폴더에 가서 해당 이미지 리소스를 읽음 이미지 리소스와 크키 설정 MainActivity 소스 스크롤바 설정과 이미지 리소스 부분
  • 27. 27 4. 프레임(Frame)레이아웃 참조 프로젝트 : SampleFrameLayout 다운로드 : easyspub.com
  • 28. 28 4. 프레임(Frame)레이아웃 참조 프로젝트 : SampleFrameLayout 다운로드 : easyspub.com 프레임 레이아웃 내에 이미지 뷰를 2개 생성 실제로 보이는 것은 1개의 뷰이고 이는 visibility를 통해 설정 가능
  • 29. 29 4. 프레임(Frame)레이아웃 참조 프로젝트 : SampleFrameLayout 다운로드 : easyspub.com imageIndex와 setvisivility를 이용해서 두 개의 이미지를 번갈아 보여줌
  • 30. 30 5. 기본 위젯 참조 교재 : Do it! 안드로이드 앱 프로그래밍 1. 텍스트 뷰(TextView) - 화면을 구성할 때 가장 많이 사용 - 주요 속성 : text, textColor, textSize, textSyle, typeface(기본문자 표시), singleLine(한줄 표시) 2. 버튼(Button) - 위젯에서 발생하는 이벤트 처리에 유용 - 체크박스, 라디오 버튼도 버튼의 속성을 가짐 - ImageButton태그로 버튼에 이미지 추가 가능 - 관련 메소드 : public boolean isChecked() public void setChecked(boolean checked) public void toggle() 등
  • 31. 31 5. 기본 위젯 참조 교재 : Do it! 안드로이드 앱 프로그래밍 3. 에디트텍스트 - 사용자의 입력을 받기에 용이, 복/붙 등 기본기능 지원 - 포커스가 설정되면 키패드가 화면에 나타남 - hint속성을 이용하면 안내글이 출력됨 4. 이미지뷰 - 이미지를 화면에 보여주기에 유용 - 주요 속성 : src(이미지 설정), maxWidTh/Height(최대크기설정) - tint(반투명 색상 적용), scaleType(확대/축소 비율)