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

Java, android 스터티7

  • 1.
  • 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(확대/축소 비율)
  • 32.
  • 33.