[i티거님강좌] 006: TextView, Button, ImageView, EditText

1. TextView 사용

TextView는 Label 즉, 주변에 위치한 타 view을 설명하는 데 주로 사용된다.

다음 그림에서 '주소'가 label에 해당한다.

 

TextView는 다음과 같은 상속 관계를 가진다.

 

TextView 클래스의 속성 중 자주 쓰이는 속성은 다음과 같다.

• android:typeface – 활자체(폰트) normal, sans, serif, monospace 중에서 지정.
• android:textstyle – bold, italic 지정. 복수 적용 시 | 사용. (ex. "bold|italic")
• android:textColor – 글자 색깔을 16bit Hex값으로 지정. (ex. "#FF0000" -> Red)
• android:text – Label 내용.

 

TextView Test 예제 (main.xml)

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:typeface="serif"
    android:textStyle="bold|italic"
    android:textColor="#0000FF"
    android:text="Blue Serif font with bold and italic" />

실행 결과는 다음과 같다.

 

TextView의 모든 속성은 TextView API Reference 링크를 참고

TextView API Reference 링크

 

 

2. Button 사용

Button 클래스의 상속구조 이다.

참고로 Button class자기 고유의 속성은 없으며, 상위 class인 View, TextView의 속성을 상속한다.

Button과 같이 사용자와 상호작용(interact) 하는 view는 view에서 이벤트가 발생하면 이를 처리하는 객체(안드로이드에서는 Listener라고 하고 일반적으로 callback이라고도 한다)를 지정하고 해당 view에 등록 해 주어야 한다. view와 연결된 Listener는 해당 view에서 이벤트가 발생 시 이벤트를 처리한다. 

Button이 상속하는 View객체는 OnClickedListener클래스와 View:setOnClickListener(...)라는 listener 객체 등록 메소드를 제공한다. (Button은 View에서 상속함으로 당연히 사용 가능하다)

다음은 Button객체에 대한 event listener 객체를 생성하고 Button객체에 Listener를 연결하는 예이다.

MyActivity.Java

public class MyActivity extends Activity {
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);

        setContentView(R.layout.main.xml);

        final Button button = (Button) findViewById(R.id.button);
        
        // View:setOnClickListener메소르를 이용해 button 객체에
        // 클릭이벤트 리스너 객체 OnClickListener를 등록하고 있다. 
        // OnClickListener는 View의 interface이고 onClick(View)라는
        // abstract 메소드가 선언되어 있음으로 구현해 주고 있다.
        button.setOnClickListener(new View.OnClickListener() {
            
            // OnClickListner interface의 abstract method 구현
            public void onClick(View v) {
                // 버튼에 클릭이 발생했을때 처리될 로직 구현
            }
        });
    }
}

안드로이드에서 사용자와 상호작용하는 view들은 거의 모두 이런 구조로 이벤트 처리 함으로 잘 기억하자.

Button class에 대한 Reference는 다음 링크 이용. 

Button API Reference 링크

  

   

 

3. ImageView 사용

안드로이드에서 이미지를 화면에 표현할 때 사용하는 위젯은 ImageView와 ImageButton가 있다.

이름에서 나타나듯 각각 Image를 그릴 수 있는 View와 Button의 역할을 한다.

ImageView의 상속구조는 다음과 같다.

상속받는 View클래스의 속성 외에 ImageView와 ImageButton만의 속성은 다음과 같다.

• android:adjustViewBounds – true값일 때 표현할 이미지의 가로 세로 비율에 따라 위젯의 가로 세로 비율을 유지. ImageView의 가로, 세로 크기가 "warp_content"로 지정되고, 표현하고자 하는 원본 이미지의 크기가 screen보다 클 때 만 효과 발생.
• android:src – image 리소스의 위치를 지정. (ex. "@drawable/molecule") 확장자는 빼고 파일이름만 사용.

 

ImageView Test 예제 (main.xml)

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/x1"
    android:adjustViewBounds="true" />

위의 예제는 x1.jpg파일을 \res\drawable\x1.jpg로 복사하고

ImageView 위젯을 이용해 x1 이미지를 화면에 그린 것이다.

실행 하면 다음과 같은 화면이 나타난다.

adjustViewBoards속성을 true로 지정해서 ImageView의 크기가 원본이미지의 가로,세로 비율과 일치 한다.

(위의 예제로는 확인 하기가 힘듭니다. adjustViewBoards에 관한 별도의 포스트 작성할 예정입니다.)

 

 

ImageButton의 경우 View와 ImageView에서 상속 됨으로

View와 ImageView의 속성을 모두 적용 할 수 있다.

 

ImageButton Test 예제 (main.xml)

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icon"  />

위 예제의 실행 경과는 다음과 같이 이미지가 그려진 버튼이다.

Button과 마찬가지로 View클래스가 제공하는 클릭 이벤트 Listener를 구현해 이벤트를 처리한다.

ImageView와 ImageButton의 API Reference는 다음 링크에서 확인

ImageView API Reference 링크

ImageButton API Reference 링크

 

 

 

4. EditText 사용

EditText는 TextView를 상속하여 편집 가능한 TextView 구현한다.

View, TextView에서 상속함으로 View, TextView의 모든 속성을 상속 받는다. (EditText 고유의 XML 속성은 없음)

EditText 객체와 자주 사용되는 XML 속성은 다음과 같다.

• android:autoText – true일 경우 일반적인 스펠링 error를 잡아낸다.
• android:capitalize – none, characters, words, sentences값을 사용할 수 있으며 각각 사용자 결정, 모든 문자, 모든 단어의 시작 문자, 모든 문장의 시작 문자를 자동으로 대문자 화 한다.
• android:digits – String 형식으로 지정된 토큰만 입력 가능하게 함 (예. "123ab" 값 설정 시  1, 2, 3, a, b 문자만 입력 가능)  '\'을 에스케이프 문자로 사용함. (\n, \\ , \uxxxx <-유니코드 등)
• android:singleLine – false일 경우 복수 줄 허용.

 

EditText Test 예제 (main.xml)

<?xml version="1.0" encoding="utf-8"?>
<EditText  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:autoText="true"
    android:capitalize="words"
    android:text="" />

실행 결과는 다음과 같다.

android:autoText 속성이 true로 되어있어 alot 을 입력하면 저절로 A lot으로 고쳐지고,

android:capitalize 속성이 "words"로 지정되어 모든 단어의 첫 철자가 자동으로 대문자로 표기된다.

 

완전한 EditView API Reference는 다음 링크를 참조. 

EditView API Reference 링크