기본 위젯들

① 텍스트뷰

 

1) text

- 텍스트뷰에 보이는 문자열을 설정

- 텍스트뷰는 표시될 문자열이 없으면 텍스트뷰가 차지하는 영역도 알 수 없게 되므로 문자열은 반드시 지정해야 함.

- 프로젝트를 처음 만들었을 때 문자열이 /res/values/strings.xml 파일 안에 정의된 것을 볼 수 있음.

- /res/values/strings.xml에 정의된 문자열은 '@string/...' 포맷으로 참조.

 

*안드로이드에서 다국어를 지원하는 방식

- 안드로이드에서 다국어를 지원할 때는 리소스에 공통으로 적용되는 병렬 리소스 로딩(Parallel Resource Loading) 방식을 사용함.

- [res/values-ko] 폴더 (한국어), [res/values-en] 폴더 (영문)

 

2) textColor

- 텍스트뷰에서 표시하는 문자열의 색상을 설정

- 색상 설정은 '#AARRGGBB' 포맷을 일반적으로 사용

Alpha 값

'FF'(불투명)

'00'(투명)

'88'(반투명)

 

3) textSize

- 텍스트뷰에서 표시하는 문자열의 크기를 설정

- 혼트 크기라고 생각할 수 있으며 크기의 단위인 'dp'나 'sp' 또는 'px' 등의 단위 값을 사용할 수 있음.

- 폰트 크기대로 표시할 때는 'sp' 단위를 일반적으로 사용

- 글자 크기로는 'sp' 단위를 쓰는 것을 권장하지만 'dp'를 사용하는 것이 더 쉬울 수 있음

 

4) textStyle

- 텍스트뷰에서 표시하는 문자열의 스타일 속성을 설정

- '|' 기호를 사용하는 경우에는 여러 개의 속성값을 함께 지정할 수 있음. (앞뒤에 공백이 없어야 함)

- normal, bold, italic, bold|italic

 

5) typeFace

- 텍스트뷰에서 표시하는 문자열의 폰트를 설정

- 일반적으로 normal, sans, serif, monospace

 

6) singleLine

- 텍스트뷰에서 표시하는 문자열이 한 줄로만 표시되도록 설정.

- 멀티라인의 반대되는 속성

- 한 줄의 영역을 넘어가면 '...' 표시가 뒤에 붙게 됨.

- 디폴트값은 'false'이므로 이 속성을 'true'로 설정하지 않으면 여러 줄로 표시하게 됨.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <TextView
        android:id="@+id/TextView01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ff000055"
        android:padding="4dp"
        android:text="여기에 사용자 이름을 입력하세요."
        android:textSize="22dp"
        android:textStyle="bold"
        android:textColor="#88ff8888"
        android:singleLine="true"
        android:gravity="center" />
 
</LinearLayout>

 

② 버튼

 

- 체크 박스와 라디오 버튼의 경우에는 단순히 클릭 이벤트만 처리하는 것이 아니라 상태값을 저장하고 선택/해제 상태를 표시함.

- 이를 위해 CompoundButton 클래스가 정의되어 있는데 이 클래스는 다음과 같은 메소드를 포함하고 있음.

 

[Reference]

public boolean isChecked() : 체크 박스나 라디오 버튼이 선택되어 있는지를 확인하는 메소드

public void setChecked (boolean checked) : 코드 상에서 상태값을 지정할 경우

public void toggle()

 

- 체크 박스나 라디오 버튼의 상태가 바뀔 경우 void onCheckedChanged(CompoundButton buttonView, boolean isChecked) 메소드를 사용함.

- clearCheck() 메소드를 사용해도 라디오 버튼들의 선택 상태를 모두 해제할 수 있음.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <Button
        android:id="@+id/selectButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="선택 "
        android:textSize="24dp"
        android:textStyle="bold"
    />
    
    <RadioGroup 
        android:id="@+id/radioGroup01" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:orientation="horizontal" 
        android:layout_margin="10dp"
        >
        <RadioButton 
            android:id="@+id/radio01" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:text="남성" 
            android:textColor="#ffaaff10"
            android:textStyle="bold" 
            android:textSize="24dp" 
            />
        <RadioButton 
            android:id="@+id/radio02" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:layout_marginLeft="10dp"
            android:text="여성" 
            android:textColor="#ffaaff10"
            android:textStyle="bold" 
            android:textSize="24dp" 
            />
    </RadioGroup>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical|center_horizontal"
        android:paddingTop="10dp"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="하루종일"
            android:textSize="24dp"
            android:paddingRight="10dp"
            android:textColor="#ffaaff10"
            />
        <CheckBox 
            android:id="@+id/allDay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    
</LinearLayout>
 

 

③ 입력상자

 

- 입력상자의 역할을 하는 에디트텍스트(EditText)는 사용자의 입력을 받고자 할 때 일반적으로 사용됨.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <EditText
        android:id="@+id/usernameInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18dp"
        android:inputType="textCapWords" // 입력되는 글자의 유형 정의
        android:hint="이름을 입력하세요."  // 기본 안내문 표시
        >
    </EditText>
    
</LinearLayout>
 

 

- 글자 편집을 위한 기본 기능은 프로그래머가 손댈 수 있는 기능이 아님.

- SDK 2.3 버전(진저브레드)부터는 이전 버전의 SDK에 비해 자동완성을 위한 단어 표시나 자주 사용하는 단어의 등록이 가능한 기능 등을 추가로 제공하고 있음.

 

④ 이미지뷰

 

- 이미지를 화면에 표시하기 위해 제공되는 가장 간단한 위젯 중의 하나.

- 이미지를 로딩하여 설정하기 위한 방법

1. [/res/drawable] 폴더 밑에 이미지 파일을 복사하여 넣은 후 리소스에서 가져오는 방법을 사용.

2. 이 파일을 직접 로딩하여 비트맵으로 만든 후 설정.

 

1) src

- 원본 이미지를 설정

- 이 속성을 설정하지 않으면 영역을 확인할 수 없으므로 반드시 설정해야 함.

 

2) maxWidth, maxHeight

- 이미지가 표현되는 최대 크기를 설정

 

3) tint

- 이미지뷰에 보이는 이미지 위에 색상을 적용하고 싶을 때 설정.

- 일반적인 색상 설정의 경우와 마찬가지로 '#AARRGGBB' 포맷으로 적용

- 반투명의 색상값을 적용할 경우 원본 이미지의 느낌을 다르게 줄 수 있음

 

4) scaleType

- 이미지가 원본 이미지의 크기와 다르게 화면에 보이는 경우 확대/축소를 어떤 방식으로 적용할 것인지 설정.

- fitXY, centerCrop, centerInside 등 여러 가지 값이 미리 정의되어 있음.

- 이미지뷰에 추가될 이미지는 보통 JPG나 PNG 확장자를 가진 이미지가 사용됨.

- 안드로이드는 오픈소스를 지향하므로 이 중에서도 PNG 포멧을 권장.

- [/res/drawable-hdpi]에 넣은 이미지는 고해상도 화면에서, [/res/drawable-mdpi]에 넣은 이미지는 중간 해상도 화면에서 자동으로 적용. (이외에 [/res/drawable-xhdpi], [/res/drawable-ldpi]가 있음)

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <ImageButton
        android:id="@+id/ImageButton01"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="40dp"
        android:background="@drawable/ok_btn"
        android:contentDescription="ok button"
        >
    </ImageButton>
    
    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginTop="160dp"
        android:layout_marginLeft="160dp"
        android:background="@drawable/person"
        android:contentDescription="person button"
        >
    </ImageView>
    
</LinearLayout>
 

 

⑤ 텍스트뷰와 입력상자의 다른 기능들

 

1) 커서

- selectAllOnFocus 속성을 설정하면 포커스를 받을 때 문자열 전체가 선택됨.

- 커서를 보이지 않도록 하고 싶다면 cursorVisible 속성을 'false' 값으로 설정.

- 에디트텍스트를 길게 누르면 사용자가 문자열을 선택하거나 복사, 잘라내기 등의 작업을 할 수 있는데 이러한 기능을 코드에서 동작하게 하려면 다음과 같은 메소드를 사용해야 함.

 

[Reference]

 

public int getSelectionStart() : 선택된 영역이 있을 때 그 시작 위치를 알려줌

public int getSelectionEnd() : 끝 위치를 알려줌. 두 개의 메소드 모두 선택 영역이 없으면 커서가 있는 현재 위치를 알려줌.

public void setSelection(int start, int stop) : 선택 영역을 지정하는데 사용

public void setSelection(int index)

pulbic void selectAll() : 전체 문자열이 선택됨.

public void extendSelection(int index) : 선택 영역을 확장하는데 사용

 

2) 자동 링크

- 문자열에 들어 있는 링크 정보를 자동으로 찾아 링크 색상으로 표시하고 누르면 필요한 기능을 수행할 수 있도록 함.

 

3) 줄 간격 조정

- lineSpacingMultiplier는 줄 간격을 배수로 설정할 때 사용

- lineSpacingExtra는 여유 값으로 설정할 때 사용

- 실제 애플리케이션을 구성할 때는 lineSpacingExtra 속성만으로도 충분한 경우가 많음

 

4) 대소문자 표시

- capitalize 속성은 단어나 문장의 가장 앞에 있는 알파벳을 대문자로 바꾸어 표시하는 기능을 제공함.

- 이 속성 값은 'characters', 'words', 'sentences' 등이 될 수 있음. (글자, 단어, 문장 단위로 맨 앞글자를 대문자로 표시해 줌)

 

5) 줄임 표시

- ellipsize 속성을 이용하면 문자열의 어디를 잘라서 표시할 것인지 설정할 수 있음.

- 디폴트 값인 'none'은 뒷부분을 자르고 'start', 'middle', 'end' 값들은 각각 앞부분, 중간부분, 뒷부분을 잘라서 보여줌.

- 텍스트뷰를 한 줄로 표시할 때는 singleLine 속성을 사용.

 

6) 힌트 표시

- 에디트텍스트에 어떤 내용을 입력하라고 안내문으로 알려주고 싶을 때 hint 속성을 사용.

- 힌트로 표시한 글자의 색상을 바꾸고 싶다면 textColorHint 속성을 이용해 색상을 지정

 

7) 편집 가능

- 에디트텍스트에 입력되어 있는 문자열을 편집하지 못하게 하고 싶다면 editable 속성의 값을 'false'로 설정하면 됨.

- 디폴트 값은 'true'이어서 문자열을 편집할 수 있음.

 

8) 문자열 변경 처리

- 에디트텍스트에 입력된 문자를 확인하거나 입력된 문자가 필요한 포맷과 맞는지 확인하기 위해서는 getText() 메소드를 사용함.

- 이 메소드가 리턴하는 것은 Editable 객체인데 이 객체의 toString() 메소드를 이용하면 일반 String 타입의 문자열을 확인할 수 있음.

- 문자열이 사용자의 입력에 의해 바뀔 때마다 확인하는 기능을 넣고 싶다면 TextChangedListener를 사용.

 

[Reference]

 

public void addTextChangedListener(TextWatcher watcher)

 

- addTextChangeListenrer() 메소드를 이용하면 TextWatcher 객체를 설정할 수 있는데 이 객체는 텍스트가 변경될 때마다 발생하는 이벤트를 처리할 수 있음.

- TextWatcher 인터페이스에는 다음과 같은 메소드가 정의되어 있음.

 

[Reference]

 

public void beforeTextChanged (CharSequence s, int start, int count, int after)

public void afterTextChanged (Editable s)

public void onTextChanged (CharSequence s, int start, int before, int count)

 

- 입력된 문자열의 길이 값을 확인할 때는 setFilters() 메소드를 이용해 InputFilter 객체를 파라미터로 전달하고 이 객체의 LengthFilter() 메소드를 호출하면 입력될 문자열의 길이 값을 설정할 수 있음.

 

출처 : Do It! 안드로이드 앱 프로그래밍 (정재곤 지음, 이지스퍼블리싱)