안드로이드 어플리케이션을 만들 때 사용하는 Android Studio를 통해 UI 및 프론트에 대한 공부를 하며 그 내용들을 기록하고자 이렇게 글을 작성한다.
개발언어는 Java와 Kotlin 중 Java를 채택하여 학습하였다. Kotlin은 사용해 본 적이 없으나 Java의 경우 기본적인 기능들을 사용해 본 적이 있어 이를 선택하게 되었다.
UI 구조 확인
이번에 해 볼 것은 간단한 체크박스 활용 공부이다.
CheckBox 를 이용해 입력받은 값을 확인해서 아래의 체크박스 모음을 보여주거나 숨기는 기능과 아래 두 번째 컨테이너에 포함되는 체크박스에서 선택된 값만 텍스트 뷰에 출력하도록 한다.
체크박스(CheckBox)는 무슨 기능을 할까?
체크박스(CheckBox)는 사용자가 항목을 선택하거나 선택하지 않을 수 있는 UI 구성 요소이다.
체크박스는 여러 개의 옵션 중 하나 이상을 선택하는 경우에 주로 사용하며, 여기서 라디오 버튼과는 다르게 체크박스는 여러 개를 동시에 선택이 가능하다는 차이점을 알 수 있다.
체크박스의 활용법은 이렇고, 이제 이 체크박스를 한 번 활용 해 보는 코드를 작성 해 볼 것이다.
체크박스를 활용 해 보기
이번에 해볼 체크박스 활용 시나리오를 우선 정리 해 보고 위의 UI에 맞게 코드를 작성 해 보도록 하겠다.
체크박스를 활용하는 시나리오
- '동의합니다'에 체크를 해야 아래에 존재하는 '취미를 선택하세요'의 항목들이 보임
- 해당 항목을 체크하지 않거나 해제하면 보이지 않도록 만들 것.
- 내용을 선택하면 선택한 내용이 나타남.
체크박스 활용 코드 작성
- 각 리소스들에 대한 객체참조변수를 생성
public class MainActivity extends AppCompatActivity {
CheckBox chkAgree, chkSports, chkReading, chkGame;
TextView txtDisplay;
// 취미를 선택하세요의 어느 영역을 보여주고 가릴 것인지 선택해야 함. 여기서는 두 번째 레이아웃인 linear_survey를 전부 보이거나 안보이게 처리할 것
LinearLayout linSurvey; //레이아웃에 대한 객체참조변수
...- 동의 체크박스와 동의 체크박스 체크 유무에 따라 아래 항목을 보이게/보이지 않게 할 리니어 레이아웃의 객체참조변수에 각각 ID 할당
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chkAgree = (CheckBox) findViewById(R.id.checkBox1);
linSurvey = (LinearLayout) findViewById(R.id.linear_survey);
//아래 레이아웃을 띄우거나 가리는 기능에 대한 테스트를 위해 이를 먼저 할당해줌- 1) 설문을 위한 리니어 레이아웃의 기본설정을 '보이지 않음'으로 만들고 동의 체크박스의 체크유무를 확인해 처리하는
onClickListener무명클래스를 생성
@Override
protected void onCreate(Bundle savedInstanceState) {
기존 코드 영역..
//레이아웃 감추기
linSurvey.setVisibility(View.INVISIBLE); //setVisibility에 INVISIBLE값을 할당하면 해당 레이아웃의 요소들을 전부 보여주지 않음
//Invisible, Visible은 레이아웃뿐만 아니라 대부분의 컴포넌트(View)에서 쓰이기 때문에 View에 존재하는 속성값인 것
// 체크박스는 onClick 이벤트를 사용함.(이외의 CheckedChangedListener 등도 사용할 수 있으나 보편적으로는 onClick 사용)
chkAgree.setOnClickListener(new View.OnClickListener() {
// 단순히 체크유무만 다루므로 무명클래스 사용함
@Override
public void onClick(View view) {
// 체크가 되었는지 여부 검사
// isChecked는 checkBox에만 있는 메소드이므로 해당 메소드를 사용하기 위해
// view 클래스를 checkBox로 캐스팅시켜주어야 함 = 다형성의 문제
if(((CheckBox)view).isChecked()) { //체크되었을 때
// 해당 메소드는 CheckBox객체만 사용할 수 있으므로 상위 클래스 객체인 view는 CheckBox 객체로 형변환해야 사용할 수 있다.
// 동의 시 대화상자 표시
AlertDialog.Builder confirm = new AlertDialog.Builder(MainActivity.this);
confirm.setTitle("동의여부");
confirm.setMessage("다음 설문에 응답해주세요");
confirm.setPositiveButton("확인", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
linSurvey.setVisibility(View.VISIBLE);
checkSurvey();
}
});
confirm.show();
}
else {
linSurvey.setVisibility(View.INVISIBLE);
}
}
});
}- 체크 유무를 파악한 후에 만약 체크했음이 확인되면
AlertDialog를 사용해서 대화상자를 띄워 아래의 설문에 응답해달라고 띄워줌 - 그리고 해당 대화상자에 '확인' 버튼을 누르면 숨겨두었던 리니어 레이아웃을 보이게 만듦
- 리니어 레이아웃 각 체크 버튼들의 객체참조변수에 ID값을 할당
///위치는 onCreate() 아래에 생성하였음.
public void checkSurvey() {
chkSports = (CheckBox) findViewById(R.id.checkBox2);
chkReading = (CheckBox) findViewById(R.id.checkBox3);
chkGame = (CheckBox) findViewById(R.id.checkBox4);
txtDisplay = (TextView) findViewById(R.id.textView3);
chkSports.setOnClickListener(new SurveyClickListener());
chkReading.setOnClickListener(new SurveyClickListener());
chkGame.setOnClickListener(new SurveyClickListener());
}- 각 버튼들의 체크 여부를 확인하는
onClickListener리스너 처리 클래스 생성
public class SurveyClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
// 설문조사에 대해 체크했을 때 처리 (클릭해서 체크됐는지 체크해제됐는지를 구분하는 것)
//굳이 view객체를 꼭 사용해야 하는 것은 아님. 지금 체크박스는 각자 따로 사용할 것이므로 뭐를 클릭한건지는 필요없음
String message = "";
if(chkSports.isChecked()) {
message += chkSports.getText().toString();
}
if(chkReading.isChecked()) {
message += chkReading.getText().toString();
}
if(chkGame.isChecked()) {
message += chkGame.getText().toString();
}
txtDisplay.setText(message);
// 이대로 사용하면 체크박스 순서대로 나타나는 것을 확인할 수 있음
}
}이렇게 리스너 처리 클래스 내부에서 체크 여부를 파악하고 체크한 항목을 텍스트 뷰에서 보여주도록 만든다.
마무리
이번에 해 본 체크 박스는 저번보다 상대적으로 간단하여 제작 자체가 빨리 끝났다.
이번에는 레이아웃, 그러니까 컨테이너를 세부적으로 나누어서 보이게, 보이지 않게 처리하는 것도 동시에 수행했다.
이번 예시처럼 체크 전에 가리거나 해야 하는 경우에는 위 방식을 사용할 필요도 있을 것으로 보인다.
이상으로 체크박스 활용 정리를 마무리하도록 하겠다.
