[DSC] 위젯(Widget) 익히기

1. 위젯(Widget) 익히기

저번 주에는 TextView와 Button만 이용해봤었는데 이번에는 EditText, ImageView, ImageButton, CheckBox, RadioButton, CalendarView도 한 번 사용해보겠습니다.

 

우선 안드로이드 스튜디오에 새 프로젝트를 만들고 activity_mai.xml의 Layout은 LinearLayout, orientation 속성은 vertical로 바꿔주세요. 그리고 안에 위젯을 많이 추가할 예정이라 ScrollView도 이용할게요.

 

activity_main.xml

<ScrollView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
    </LinearLayout>
</ScrollView>

 

EditText

 EditText는 사용자로부터 값을 입력받을 때 사용합니다.

 

activity_main.xml

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="텍스트를 입력해주세요."
    android:inputType="text"/>

LinearLayout 안에 위와 같이 입력해주세요.

hint 속성은 아무 값도 입력하지 않았을 때 나타나는 문구입니다.

inputType 속성은 키패드의 문자 유형을 지정할 수 있게합니다.

 

실행을 시키면 다음과 같이 나타납니다.

 

만약 text 속성을 phone으로 바꾸면 

키패드가 자동적으로 숫자로 나타나게 됩니다.

 

그리고 EditText는 보통 사용자의 입력을 받아 다른 일을 수행하기 위해 사용되기 때문에 입력값을 받아오는 코드를 알아야겠죠??

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="텍스트를 입력해주세요."
    android:inputType="text"/>
    
<Button
    android:id="@+id/btn_et"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="edittext" />

위와 같이 id 값들을 부여하고 MainActivity.java 파일로 가겠습니다. 

버튼을 클릭하면 TextView의 text가 EditText의 text로 설정되도록 해봅시다.

 

MainActivity.java

package com.example.week2;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView textView;
    EditText editText;
    Button btn_editText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);
        editText = findViewById(R.id.editText);
        btn_editText = findViewById(R.id.btn_et);
        
        btn_editText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText(editText.getText().toString());
            }
        });

    }
}

TextView 형식의 textView 변수, EditText 형식의 editText 변수, Button 형식의 btn_editText를 MainActivity 클래스 내부에서 선언하고 onCreate 함수 안에서는 id 값으로 activity_main.xml 파일에 있던 뷰들을 연결해줍니다.

그리고 btn_editText를 클릭했을 때 editText의 text를 얻어와 String 형식으로 바꾼 값을 textView의 text로 지정해준 것이 위의 코드입니다.

 

화질이 좋지 않아 보이실지 모르겠지만 버튼을 누르면 EditText에서 입력받은 rina라는 글씨가 최상단에 나타납니다.

ImageView, ImageButton

 ImageView와 ImageButton의 차이점은 버튼 기능이 있냐 없냐의 차이이기 때문에 ImageView를 설명해드리겠습니다.

 

activity_main.xml

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher" />

위와 같이 ImageView를 추가해주세요.

뷰에 나타내고 싶은 이미지를 src 속성에 입력해주면 이미지가 나타날거에요. @mipmap/ic_launcher는 안드로이드 스튜디오에 기본적으로 깔려있고 실행시켜보면 안드로이드가 나타날거예요.

 

만약 내가 원하는 이미지를 넣고 싶다면 원하는 이미지를 drawable 폴더에 넣어줍니다.

이미지 이름은 영어 소문자만 가능해요!

위와 같이 drawable 폴더에 이미지 파일을 넣어주시고 

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/rina"/>

ImageView의 src를 바꿔주시면

이렇게 사진이 추가되는 것을 확인할 수 있습니다.

CheckBox

CheckBox는 말 그대로 체크를 할 수 있는 버튼입니다.

<CheckBox
    android:id="@+id/cb_pnu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="부산대학교"/>
    
<CheckBox
    android:id="@+id/cb_computer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="정컴" />

CheckBox를 두 개 추가해보았습니다.

사용자가 어떤 것을 눌렀는지 알아야겠죠??

<Button
    android:id="@+id/btn_cb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="checkbox" />

버튼을 추가해주시고 MainActivity.java 파일로 가보겠습니다.

 

MainActivity.java

CheckBox cb_pnu, cb_computer;
Button btn_cb;

cb_pnu = findViewById(R.id.cb_pnu);
cb_computer = findViewById(R.id.cb_computer);
btn_cb = findViewById(R.id.btn_cb);

위에서와 동일하게 변수를 선언해 주시고 id로 연결을 해줍니다.

btn_cb.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    	String checkbox = "";
    	if (cb_pnu.isChecked()) {
    		checkbox += cb_pnu.getText();
    	}
    	if (cb_computer.isChecked()) {
    		checkbox += cb_computer.getText();
    	}
    	textView.setText(checkbox);
    }
});

그리고 버튼을 클릭했을 때 cb_pnu가 체크되어 있으면 "부산대학교", cb_computer가 체크되어 있으면 "정컴"을 TextView에 나타나게 한 코드입니다. 실행시켜봅시다.

클릭하는대로 TextView에 나타나는 것을 확인할 수 있습니다.

클릭이 되었는지 확인하는 isChecked() 라는 코드만 알아도 좋을 것 같아요.

RadioButton

체크박스는 여러 개를 동시에 체크 가능하지만 라디오버튼은 그룹 내에서 하나만 선택 가능합니다. 따라서 라디오버튼이 하나가 선택이되면 나머지 라디오버튼은 선택이 해제가 됩니다.

 

activity_main.xml

<RadioGroup
	android:id="@+id/radiogroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <RadioButton
        android:id="@+id/male"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="남자" />

    <RadioButton
        android:id="@+id/female"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="여자" />

</RadioGroup>

<Button
    android:id="@+id/btn_rb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="radiobutton" />

 

MainActivity.java

RadioButton rb_male, rb_female;
Button btn_rb;
RadioGroup radioGroup;

rb_male = findViewById(R.id.male);
rb_female = findViewById(R.id.female);
btn_rb = findViewById(R.id.btn_rb);
radioGroup = findViewById(R.id.radiogroup);

btn_rb.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String radiobutton = "";
        if (rb_male.isChecked()) {
            radiobutton += rb_male.getText();
        }
        else if (rb_female.isChecked()) {
            radiobutton += rb_female.getText();
        }
    textView.setText(radiobutton);
    }
});

RadioButton은 어짜피 하나 밖에 선택안되기 때문에 else if를 씁니다.

실행시키면 다음과 같습니다.

 

또 다른 방법으로는 switch 문으로도 작성이 가능합니다.

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch (checkedId) {
			case R.id.male : {
                textView.setText(rb_male.getText());
                break;
            }
            case R.id.female : {
                textView.setText(rb_female.getText());
                break;
            }

        }
   }
});

setOnCheckedChangeListener는 값이 바뀔 때마다 함수가 실행되기 때문에 라디오버튼을 누를 때마다 TextView의 text가 바뀝니다.

 

CalendarView

CalendarView는 달력을 보여주는 위젯입니다.

 

activity_main.xml

<CalendarView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

위젯을 추가하고 실행결과만 확인해보겠습니다.

기본적으로 오늘 날짜가 잡혀있는 것을 확인할 수 있습니다.

 

Drawable

 드로어블은 상태에 따라 그래픽이나 이미지가 선택적으로 보이게 해줍니다. 예를 들어 버튼이 눌려진 상태를 보여주고 싶을 때 사용하는 것입니다.

상태 드로어블(StateListDrawable)

 뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 지정 가능합니다.

drawable 폴더를 마우스 우클릭하여 New -> Drawable Resource File을 클릭해줍니다. 

 

이름은 state_drawable이라고 하고 OK를 눌러주겠습니다.

 

그러면 이런 화면이 뜰텐데 

우측 상단의 이 버튼을 클릭하면 코드를 작성할 수 있는 창이 뜹니다.

 

state_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@drawable/ic_launcher_background" />
    <item android:drawable="@drawable/ic_launcher_foreground" />
</selector>

그리고 이와 같이 코드를 입력해줍니다.

selector 내부의 item이 두 가지가 있습니다.

하나는 state_pressed="true", 즉 눌려진 상태일 때, @drawable/ic_launcher_background을 보여주고

다른 하나는 눌려지지 않았을 때 겠죠? 그 때는 @drawable/ic_launcher_foreground을 보여줍니다.

 

 

그리고 activity_main.xml 파일로 돌아가 버튼을 추가해주겠습니다.

 

activity_main.xml

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/state_drawable" />

background 속성에 방금 생성했던 state_drawable.xml 파일로 설정해주시면 완료입니다.

실행해보겠습니다.

 

셰이프 드로어블(ShapeDrawable)

 XML로 도형을 그릴 수 있습니다.

shape_drawable이라는 이름으로 xml 파일을 만들어줍니다.

 

shape_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="200dp" android:height="120dp"/>
    <stroke android:width="1dp" android:color="#FF0000"/>
    <solid android:color="#FAD844"/>
    <padding android:bottom="5dp"/>
</shape>

이라고 입력해주면 

이러한 도형이 만들어진 것을 확인할 수 있습니다.

코드의 의미는 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> //사각형 모양의 도형을 만듦
    <size android:width="200dp" android:height="120dp"/> //가로는 200dp, 세로는 120dp 크기를 가짐
    <stroke android:width="1dp" android:color="#FF0000"/> //테두리는 1dp 굵기로 빨간색
    <solid android:color="#FAD844"/> //도형 내부의 색깔은 노란색
    <padding android:bottom="5dp"/> //아래쪽에 5dp만큼 공간을 띄움
</shape>

 

activity_main.xml로 돌아가서 밑과 같이 입력해주세요.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/shape_drawable" />

 

그리고 실행시켜보면

방금 만든 도형이 나타나는 것을 확인할 수 있습니다.

 

drawable은 이미지나 그래픽을 사용해서 좀 더 다양한 효과를 줄 수 있어 실제 앱을 만들 때 자주 사용합니다.

 

 

다음 포스트에서 이어서 진행하겠습니다. :D

 

[Android] - [DSC] 또 다른 위젯(Widget)과 그래들(Gradle)

[DSC] 또 다른 위젯(Widget)과 그래들(Gradle)