3장 - 기본 위젯

박세진·2023년 4월 24일

스마트폰응용프로그래밍

목록 보기

2/2

1. 사용자 인터페이스의 개요

사용자 인터페이스 (UI : User Interface)

뷰그룹 (= layout(위젯))

다른 뷰들을 담는 컨테이너 기능
ViewGroup 클래스에서 상속받아서 작성됨

뷰 (= Control(컨트롤), Widget(위젯))

기초적인 빌딩 블록
버튼, 텍스트 필드, 체크 박스 등
View 클래스를 상속받아서 작성됨

UI를 작성하는 절차

뷰그룹(레이아웃)을 생성
필요한 뷰들을 추가
SetContentView() 호출을 통해 UI를 액티비티 화면으로 설정

UI를 작성하는 다양한 방법

XML로 사용자 인터페이스 기술
코드로 사용자 인터페이스 작성
비주얼 도구로 사용자 인터페이스 작성

LinearLayout : 선형 레이아웃
레이아웃 안에 다른 레이아웃을 넣을 수 있음

XML로 화면을 기술하는 방법의 장점

코드와 화면 디자인이 완벽하게 분리
코드 - 프로그래머가 담당 / 화면 - 디자이너가 담당
사용자 인터페이스가 애플리케이션 코드의 외부에서 정의
소스 코드를 변경 or 재컴파일할 필요없이 사용자 인터페이스 변경 가능
사용자 인터페이스를 항시 교체 가능 -> 빠른 현지화 가능
ex. 스마트폰/ 태블릿 버전을 개발하기 쉬움
비주얼 도구를 통해 빠르게 작성 가능

2. 위젯의 속성

위젯의 종류

button
EditText : 편집 가능한 텍스트 필드
TextView : 편집 불가능한 텍스트 필드
CheckBox : 사용자가 체크할 수 있는 ON/OFF 스위치 / 네모박스
RadioButton : 그룹에서 하나의 옵션만 선택 가능 / 동그라미 / ex. 남,여
ToggleButton : 라이트 인디케이터가 있는 ON/OFF 버튼
Switch : ON/OFF 스위치 / 왼,오

View 클래스

모든 위젯들의 부모 클래스
TextView -> 아이디 필요 x
android:id="@+id/원하는아이디이름"
위젯에 식별자를 부여하는 이유
: 자바 코드에서 findViewById() 메소드로 위젯을 찾아서 작업하기 위해

Button button1;
button (Button) findViewByID(R.id.my_button);

위젯의 위치와 크기

match_parent (=fill_parent) : 부모의 크기를 꽉 채움
wrap_content : 뷰가 나타내는 내용물의 크기에 맞춤

안드로이드에서 사용할 수 있는 단위

px(픽셀), dp(밀도-화면밀도에 영향 x), sp(밀도-화면밀도에 영향 o),
in(인치), mm(밀리미터), pt(1/72 인치)
장치의 종류에 관계없이 항상 동일한 크기로 표시 -> dp,pt,mm,in
화면에서 1인치를 표시하려면 160dp로 지정하면 됨

색상

##RRGGBB : RR 빨간색 / GG 녹색 / BB:청색
#AARRGGBB : AA 투명도 / 나머지 동일
배경색 바꾸려면
android/background="#000000" //검은색으로 변경
android/background="#FF0000" //빨간색으로 변경

위젯의 표시 여부

[상수 - 값 - 설명]
visible - 0 - 화면에 보임 (디폴트 값)
invisible - 1 - 표시 되지 않음 but 배치에서 공간을 차지함
gone - 2 - 완전히 숨김

마진과 패딩

패딩이란?
위젯의 경계선과 콘텐트와의 관계
paddingLeft, paddingTop, paddingRight, paddingBottom

마진이란?
레이아웃과 위젯 간의 관격
layout_marginLeft,layout_marginRight, layout_marginTop, layout_marginBottom

enable, rotation

enable = 버튼의 동작 여부 설정 false, True
rotation = 회전

3.텍스트 뷰

text
setText(CharSequence)
textColor
setTextColor(ColorStateList)
textSize
setTextSize(float)
textStyle : 텍스트 스타일 (bold, italic, bolditalic)
setTextStyle(TextStyle)
typeface : 텍스트폰드 (normal, sans, serif, monospace)
setTypeFace(Typeface)
width : 픽셀 단위로 길이 설정
setWidth(int)
height : 픽셀 단위로 높이 설정
setHeight(int)
lines : 높이 설정
setLines(int)

4.버튼

버튼의 색상은 backgroundTint 속성을 변경하여 사용

5.버튼의 이벤트 처리-1

XML 파일에 이벤트 처리 메소드를 등록하는 방법 - 2장

 android:onClick="함수 이름"        //xml 파일에서
public void 함수이름(View view) {    //java 파일에서

}

android:onClick="onClick"        //xml 파일에서
public void onClick(View view) {    //java 파일에서
//토스트 메시지
 Toast.makeText(getApplicationContext(), "버튼 눌려졌음", Toast.LENGTH_SHORT).show();
}

onClick

onClick 속성에서 선언하는 메소드는
첫째, publick 이어야 하고
둘째, void 반환형을 가지고
셋째, View를 메소드의 인수로 가진다. 클릭된 View 객체가 전달된다.

토스트(Toast)란?

뷰의 일종으로 화면에 잠깐 나타나는 메시지를 표시할 때 사용
다른 애플리케이션 위에 떠있는 뷰로 포커스를 차지하지 않음
사용자에게 방해 되지 않으면서 어떤 정보를 표시할 목적으로 작성
makeText(Context context, CharSequence text, int duration)
makeText(현재 애플리케이션의 콘텍스트, 표시하고싶은 텍스트, 지속 시간)
ex. Toast.makeText(getApplicationContext(), "버튼 눌려졌음", Toast.LENGTH_SHORT).show();

6. 버튼의 이벤트 처리-2

이벤트를 처리하는 객체를 생성하여 이벤트를 처리하는 방법 (익명 클래스, 람다식)

class Listener implements View.OnClickListener { //리스너 인터페이스를 구현한 클래스 정의
  public void onClick(View v) {
  
  }
}
Listener listen = new Listener(); //이벤트 리스너 객체 생성
button.setOnClick(listen); // 버튼에 이벤트 리스너 객체를 등록

리스너 인터페이스

리스너 - 콜백 메소드 - 설명
View.OnClickListener - onClick() - 항목 클릭하면 실행
View.OnLongClickListener - onLongClick() - 항목을 일정시간동안 누르고 있으면 실행
View.OnFocusChangeListener - onFocusChange() - 하나의 항목에서 다른 항목으로 포커스를 이동할 때 실행
View.OnKeyListener - onKey() - 포커스를 가지고 있는 항목 위에서 키를 눌렀다가 놓았을 때 실행
View.OnTouchListener - onTouch() - 터치 이벤트로 간주된 동작을 했을 때 시행

리스너 객체를 생성하는 방법 (익명클래스 !! 람다식 !!)

리스너 클래스를 내부 클래스로 정의
리스너 인터페이스를 액티비티 클래스에 구현
리스너 클래스를 익명 클래스로 정의 (가장 많이 사용)
익명 클래스 : 클래스 몸체는 정의되지만 이름이 없는 클래스
한 번만 사용 가능
코드의 양을 줄일 수 있음 but 표기법이 난해함

Button b = (Button) findViewById(R.id.button2);
b.setOnClick(new View.OnClickListener() {
  public void onClick(View v) {
  
  }
});

람다식을 이용
람다식 : 나중에 실행될 목적으로 다른 곳에 전달될 수 있는 코드 블록
이름이 없는 함수
간결하며 한 번만 사용되고 길이가 짧은 경우 유용

Button b = (Button) findViewById(R.id.button2);
b.setOnClickListener((e) -> {

});

버튼의 이벤트 처리-3

뷰 클래스의 이벤트 처리 메소드를 재정의 하는 방법 (커스텀 뷰 작성하는 경우에만) - 9장

7. 에디트 텍스트

android:autoText
자동으로 타이핑 오류 교정
android:drawableBottom
텍스트 아래에표시되는 이미지리소스
android:drawableRight
텍스트 오른쪽에표시되는 이미지리소스
android:editable
편집가능
android:text
android:singleLine
true이면 한 줄만 받음
android:inputType
입력의 종류
android:hint
입력 필드에 표시되는 힌트 메시지

사용자가 입력한 텍스트를 읽어 오려면 getText()
텍스트를 쓰려면 setText() 호출

p.109쪽 보기 ㅠㅠ (아직 이해 못함)

inputType 속성

none : 편집 불가능
text : 일반적인 문자열, 한 줄만 입력 가능
textMultiLine : 여러 줄로 입력 가능
textPostalAddress : 우편번호
textEmailAddress : 이메일 주소
textPassword : 패스워드 , 맂혀솽 애룔리 조리디 라오른
number : 숫자
numberSigned : 부호가 붙은 숫자
numberDecimal : 소수점이 있는 숫자
phone : 전화번호
datetime : 시간

< LAB 계산기 앱 #1 작성 >

TextView : 3개 (Number 1, Number 2, Result) - wrap_content
Button : 4개 (+ , - , *, /) - wrap_content
EditText : 3개 - match_parent

연산 버튼 클릭 시 -> result = number1 연산 number2 -> result / setText

8. 이미지 뷰

속성 - 설정 메소드 - 설명
android:adjustViewBounds - setAdjustViewBounds(boolean) - 가로, 세로 조정 (종횡비 유지를 위해)
android:cropToPadding - - true일 경우 패딩 안에 맞춰서 이미지를 자름
android:maxHeight - setMaxHeight(int) - 최대 높이
android:maxWidth - setMaxWidth(int) - 최대 너비
android:scaleType - setScaleType(ImageView.ScaleType) - 이미지 뷰 크기에 맞춰 어떻게 확대 or 축소
android:src - setImageResoruce(int) - 이미지 소스 (제일 중요)
ex)android:Src="@drawable/이미지 파일 이름(한국어는 안 됨)"
android:tint - setColorFilter(int, PorterDuff.Mode) - 이미지 배경 색상

9. 코드로 위젯의 속성 변경

txt1.setTextColor(Color.BLUE);
txt2.setTextSize(80);
txt3.setTextColor(Typeface.SERIF, Typeface.ITALIC);

예제) 코드로 이미지 변경하기 (P.122 보기!!)

< Coding Challenge 카운터 만들어 보기 >

ImageView : 1개
TextView : 1개
Button : 2개
버튼 클릭 시 -> setText를 이용하여 텍스트 뷰의 숫자를 증가 or 감소

< Coding Challenge 주사위 게임 작성하기 >

TextView : 1개
ImageView : 1개
Button : 1개
버튼 클릭 시 -> 랜덤으로 숫자 설정 후 값을 저장 -> 해당 숫자와 같은 이미지로 변경
번외) 종료 버튼을 만든 후 클릭시 -> 토스트 메시지로 각 숫자가 몇 번 나왔는지 화면에 잠깐 보여줌

박세진

이전 포스트