기초 뷰 활용

TextView, ImageView, EditText, Button에서 자주 활용되는 속성을 보겠습니다.

(1) TextView

text : 화면에 출력할 문자열을 지정하는 속성. 레이아웃 XML 파일에 직접 문자열을 명시할 수 있고, 문자열 리소스를 이용할 수도 있다.

android:text="hello world"
android:text="@string/hello"

typeface : 화면에 출력할 문자열의 폰트를 지정하는 속성.

normal(default), sans, serif, monospace 중 하나를 입력하면 된다. 이 4가지 폰트는 안드로이드에서 기본으로 제공하는 폰트이며, 개발자가 임의의 폰트를 적용하고 싶다면 폰트 파일(ttf)을 assets 폴더에 복사한 후, 코드에서 setTypeFace() 함수를 이용하여 TextView에 지정해주면 된다. 쓰임은 아래와 같다.

TextView textView = findViewById(R.id.text_font);
Typeface typeface = Typeface.createFromAsset(getAssets(), "xmas.ttf");
textView.setTypeface(typeface);

textStyle : 화면에 출력할 문자열 효과

normal(default), bold, italic 중 하나를 입력하여 굵게 글씨 표현(bold), 기울게 표현(italic)이 가능하다.

 

textColor : 문자열의 색상을 16진수 RGB 포맷으로 지정할 때 사용한다.(예 : #FF0000)

 

textSize : 화면에 출력할 문자열의 폰트 크기 지정

 

autoLink : 텍스트뷰의 문자열을 분석해 문자열 내 autoLink 값에 해당하는 URL 문자열이 포함되었으면, 이 URL 문자열 부분을 자동 링크 형태로 출력해준다. 또한, 개발자 코드에서 이벤트를 처리하지 않아도 자동으로 사용자 클릭이 있을 때 다양한 화면으로 연결해준다.

android:autoLink="web|email|phone"

다음과 같이 지정하면, 클릭 시 url이나 email, 전화번호에 자동으로 브라우저, 이메일 앱, 전화 앱이 실행된다.

 

maxLines : 텍스트뷰에 긴 문자열 대입 시 자동 개행하여 여러 줄로 출력되는데, 특정 줄만큼만 출력하고 싶다면 이 속성으로 지정해준다.

android:maxLines="3"

이는 긴 문자열을 쓰게 됐을 때, 3줄까지만 출력되고 이후 문자열은 출력되지 않는다.

 

elipsize : 긴 문자열 중 줄임 표시(...)를 하고 싶을 때 사용한다.

end, start, middle 등을 지정하여 전체 문자열의 어느 부분을 줄임 표시로 표현할지 명시해준다. 만약 end로 지정하면 maxLines로 지정한 줄만큼만 출력되고 뒷부분에 줄임 표시(...)를 자동으로 추가해준다.

android:maxLines="3"
android:ellipsize="end"

출력해보면 텍스트뷰의 출력 문자열 맨 마지막 부분에 줄임 표시(...)가 자동으로 추가된다.

 

(2) ImageView

이미지뷰는 안드로이드에서 화면에 이미지를 출력하고자 할 때 사용하는 뷰다. 자주 사용되는 속성은 아래와 같다.

src : 화면에 출력할 이미지를 지정하는 속성이다.

 

maxWidth, maxHeight : 화면에 출력할 이미지의 최대 크기를 지정하는 속성이다. 이미지가 충분히 클 때는 뷰의 크기를 조정하는 게 아니라 이미지 자체의 출력 크기를 변경해야 한다. 이 속성들은 adjustViewBounds 속성과 함께 사용해야 하며, adjustViewBounds에 따라 이미지의 가로, 세로 비율을 유지할 수 있다.

 

adjustViewBounds : 이미지 크기를 변경할 때 가로, 세로 비율을 유지할지(true,false) 지정하는 속성이다.

 

tint : 이미지 위에 다른 색상을 입힐 때 사용하는 속성이다.

 

속성들을 사용하고자 하면 아래와 같이 사용해줄 수 있다.

android:src="@drawable/ic_launcher_background"
android:maxWidth="100dp"
android:maxHeight="100dp"
android:adjustViewBounds="true" 
app:tint="#8000ff"

 

(3) EditText

사용자에게 데이터를 입력받을 때 사용하는 뷰다. EditText 뷰는 layout_width, layout_height 정도의 속성 설정만으로도 이용할 수 있다. 만약 한 줄 입력 창에서 사용자가 키보드의 엔터 키를 눌러 개행하면, 입력 창이 여러 줄로 자동으로 늘어난다. 만약 한 줄 혹은 여러 줄로 고정하길 원한다면 속성으로 지정하여야 한다. 속성을 살펴보자.

 

lines : 처음 화면에 보일 때부터 특정 줄만큼 보이게 할 때 사용하는 속성이다. 만약 lines="3"으로 지정하면, 처음부터 세로 방향 3줄 입력 크기로 출력되고 더는 늘거나 줄지 않는다. 물론 화면에서 입력 창의 크기가 3줄로 고정되는 것이도 3줄 내에서 스크롤 되어 여러 줄 입력은 가능하다.

 

maxLines : 사용자가 키보드에서 엔터를 입력하면 아래로 늘어나 최대 지정한 줄까지 늘어나고 더는 늘어나지 않는다. 

(maxLines="3"으로 지정하면 최대 3줄까지 늘어난다.) 

처음 화면에 보일 때는 한 줄 입력 크기로 보인다. lines와 동일하게 EditText 내에서 스크롤 되어 여러 줄 입력은 가능하다.

 

inputType : 아주 중요하고 자주 이용되는 속성이다. 입력받을 시 사용자의 키보드를 어떤 형태로 보여줄 지 결정해주는 속성이다.

android:inputType="phone"

phone 값을 지정하면 키보드가 전화번호 입력 모드로 올라오게 된다.

phone 이외에도 number, textEmailAddress, textPassword 등 다양한 속성값이 제공된다.

만약 속성 값을 "text"라고 한다면, 한줄 입력만 보장하게 된다. 즉, 사용자가 한 줄만 입력할 수 있게 된다.

물론 값을 text로 주지 않고 phone, number 같은 위의 속성으로 지정해주어도 한 줄만 입력할 수 있게 된다. inputType의 속성에 지정할 수 있는 값은 매우 다양하므로 해당 목적에 맞춰 속성값을 사용하면 된다.

 

gravity : 입력한 글의 위치를 지정할 수 있다. 기본값은 left top이며 center, right 등을 지정하여 위치를 조정한다.

android:gravity="center"

이 속성은 EditText만을 위한 속성은 아니며, 모든 뷰에서 내용이 정렬되는 위치를 지정할 때 사용된다.

 

(4) Button

모든 뷰에서 클릭 이벤트를 처리할 수 있다. 이는 텍스트뷰에서 설정했던 대부분의 속성을 그대로 사용할 수 있다. Button의 하위 클래스로 CheckBox, RadioButton, ToggleButton 등이 있다.

 

CheckBox : 선택과 선택되지 않은 두 가지 상태를 표현하기 위한 뷰다. 이는 텍스트뷰의 서브 클래스이므로 textColor, textSize 등의 문자열 속성을 그대로 적용할 수 있다.

이는 코드에서 Checkbox의 상태를 획득하거나 조정할 필요가 있다. 이때 사용되는 함수는 아래와 같다.

<CheckBox
    android:id="@+id/checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="is unChecked"/>

실제 java 코드에서는 아래와 같이 써준다.

checkBox = findViewById(R.id.checkbox);
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
        if (isChecked) {
            checkBox.setText("is Checked");
        } else {
            checkBox.setText("is unChecked");
        }
    }
});

체크 상태 바꾼 순간의 이벤트 처리를 해준다. 체크 상태가 바뀔 때마다 onCheckedChanged() 함수가 자동으로 호출되며, 두 번째 매개변수인 boolean isChecked를 통해 체크를 했는지, 안 했는지 알려준다. true면 체크된 상태이고, false면 체크되지 않은 상태이다. 체크되면 "is Checked"를 화면에 띄워주고, 체크되지 않았다면 "is unChecked"를 화면에 띄워준다.

 

RadioButton : 여러 개 중 단일 선택을 표현할 때 사용한다. Checkbox는 화면에 여러 개가 함께 나오더라도 서로 영향을 미치지 않는다. 하지만 RadioButton은 여러 개 중 하나만 선택할 수 있다. 이를 위해 제공되는 클래스가 RadioGroup이며, 같은 RadioGroup으로 묶인 RadioButton 중 하나만 체크할 수 있다.

xml 파일을 아래와 같이 만들어보자.

<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    
    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="radio 1"/>

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="radio 2"/>
</RadioGroup>

 RadioButton의 체크 상태를 파악하기 위해 각각 id 값을 부여하였고, 버튼 2개 중 단일 선택을 표현하기 위해 RadioGroup으로 묶었다. RadioGroup에서 제공하는 함수는 아래와 같다.

check() : 매개변수로 체크하고자 하는 RadioButton의 id 값을 주면 해당 RadioButton이 체크된다.

clearCheck() :  RadioGroup의 RadioButton의 체크 상태를 해제한다.

getCheckedRadioButtonId() : 체크된 RadioButton의 id 값을 획득한다.