CheckBox / RadioButton / Toggle / ImageView

CheckBox / RadioButton / Toggle / ImageView

2022. 10. 10. 15:39ㆍDev.Program/Android

728x90

======== 0609_ch04_Compundbutton_basic_1 새 프로젝트 만들기

< CheckBox >

< activity_main.xml >

안드로이드는 체크가 되어있는 상태

라디오 버튼 추가
그룹이 아니라서 다중선택이 된다. (선택이 풀리지도 않음)

>> RadioButton 위젯은 RadioGroup 태그를 사용하여 그룹화하지 않으면 단독으로 동작하게 되어 중복 선택이 가능해지며, 선택 후 해제가 불가능

그룹 안에 넣기
⇒
다른 거 선택하면 나머지는 체크풀림

cbAndroid.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "안드로이드폰 체크됨", Toast.LENGTH_SHORT).show();
}
});

근데 체크해제할때도 같은 토스트가 뜸

cbAndroid.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(cbAndroid.isChecked()) {
Toast.makeText(MainActivity.this, "안드로이드폰 체크됨", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "안드로이드폰 체크해제됨", Toast.LENGTH_SHORT).show();
}
}
});

if 문으로 구분해줌

> 다른 방법으로 체크/체크해제 구분하는 방법(OnCheckedChangeListener)

성능 차이는 없기 때문에 편한 거 쓰면 됨~~

cbAndroid.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// 파라미터로 전달되는 isChecked 값을 사용하여 체크 여부 판별
if(isChecked) {
Toast.makeText(MainActivity.this, "안드로이드폰 체크됨", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "안드로이드폰 체크해제됨", Toast.LENGTH_SHORT).show();
}
}
});
cbIphone.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// 파라미터로 전달되는 isChecked 값을 사용하여 체크 여부 판별
if(isChecked) {
Toast.makeText(MainActivity.this, "아이폰 체크됨", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "아이폰 체크해제됨", Toast.LENGTH_SHORT).show();
}
}
});
cbWindows.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// 파라미터로 전달되는 isChecked 값을 사용하여 체크 여부 판별
if(isChecked) {
Toast.makeText(MainActivity.this, "윈도우폰 체크됨", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "윈도우폰 체크해제됨", Toast.LENGTH_SHORT).show();
}
}
});

다 동작하는지 확인하기

< activity_main.xml >

전체 선택 체크박스 추가!

< MainActivity.java >

전체 선택 체크박스가 체크되면 위의 세 가지 체크박스를 모두 체크(setChecked())
후 “전체선택” 체크박스 텍스트를 “전체해제” 로 변경

cbAll = findViewById(R.id.cbAll);
cbAll.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// 전체 선택 체크박스가 체크되면 위의 세 가지 체크박스를 모두 체크(setChecked()) 후
// "전체선택" 체크박스 텍스트를 "전체해제" 로 변경
if(isChecked) {
cbAndroid.setChecked(true);
cbIphone.setChecked(true);
cbWindows.setChecked(true);
cbAll.setText("전체해제");
} else {
cbAndroid.setChecked(false);
cbIphone.setChecked(false);
cbWindows.setChecked(false);
cbAll.setText("전체선택");
}
}
});

< activity_main.xml >

추가

< MainActivity.java >

cbToggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// 세 가지 체크박스에 대한 상태를 반전(=토글)시킴(toggle())
cbAndroid.toggle();
cbIphone.toggle();
cbWindows.toggle();
}
});

< RadioButton >

원래 얘만 가져오면 됨! (일단은 다 가져오기)

> RadioButton 에 대한 이벤트 처리

// 1. RadioButton 각각에 대한 OnClickListener 연결 - 5단계
rbMale.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 각 RadioButton 에 대한 선택 여부 판별이 필요함
if(rbMale.isChecked()) {
Toast.makeText(MainActivity.this, "남자 선택됨", Toast.LENGTH_SHORT).show();
}
}
});

근데 이렇게 하면 클릭이벤트기 때문에 체크 된 상태에서 또 누르면 또 뜸!
그래서 OnClick 이벤트는 잘 안씀

// 2. RadioButton 모두에 대한 OnClickListener 연결 - 4단계
View.OnClickListener rbClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
// 각 라디오 버튼에 대한 선택 여부를 판별하여 동작 수행
if(rbMale.isChecked()) {
Toast.makeText(MainActivity.this, "남자 선택됨", Toast.LENGTH_SHORT).show();
} else if(rbFemale.isChecked()) {
Toast.makeText(MainActivity.this, "여자 선택됨", Toast.LENGTH_SHORT).show();
}
}
};

rbMale.setOnClickListener(rbClickListener);
rbFemale.setOnClickListener(rbClickListener);

남 / 여 선택 한 번에 제어가능

⇒ 지금 1, 2번 과정은 rbMale = findViewById(R.id.rbMale);

rbFemale = findViewById(R.id.rbFemale); 이렇게 아이디 객체 들고와야함

> 3. RadioButton 이 아닌 RadioGroup 에 대한 리스너 연결

라디오 그룹에 대한 리스너가 있음!

얘는 checkedId 값이 넘어온다! (그래서 rbMale, rbFemale 객체를 가져올 필요가 없음)

rGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// onCheckedChanged() 메서드 파라미터로 체크된 RadioButton 의 id 값이 전달됨
// => 전달받은 id 값(checkedId)과 RadioButton 위젯 id 값(R.id.XXX) 을 비교
// => 이 방법을 사용할 경우 각 RadioButton에 대한 findViewById() 작업이 필요없음
switch (checkedId) {
case R.id.rbMale:
Toast.makeText(MainActivity.this, "남자 선택됨", Toast.LENGTH_SHORT).show();
break;
case R.id.rbFemale:
Toast.makeText(MainActivity.this, "여자 선택됨", Toast.LENGTH_SHORT).show();
}
}
});

이제 선택된 값 다시 선택해도 밑에 토스트 안뜸!
이건 라디오그룹에 동작을 걸어서가 아니라 OnCheckedChangeListener기 때문이다!

// 3. RadioButton 이 아닌 RadioGroup 에 대한 리스너 연결
// => 이미 선택된 항목에 대해 다시 선택 시 동작하지 않음
rGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// onCheckedChanged() 메서드 파라미터로 체크된 RadioButton 의 id 값이 전달됨
// => 전달받은 id 값(checkedId)과 RadioButton 위젯 id 값(R.id.XXX) 을 비교
// => 이 방법을 사용할 경우 각 RadioButton에 대한 findViewById() 작업이 필요없음
switch (checkedId) {
case R.id.rbMale:
Toast.makeText(MainActivity.this, rbMale.getText()+" 선택됨", Toast.LENGTH_SHORT).show();
break;
case R.id.rbFemale:
Toast.makeText(MainActivity.this, rbFemale.getText()+" 선택됨", Toast.LENGTH_SHORT).show();
}
}
});

이렇게 바꾸면 내용이 변경되도 값을 가져오는 거라 따로 수정안해도 됨!

======== 0609_ch04_CompoundButton_Basic_Switch_ToggleButton

< Toggle >

스위치와 차이점은 Text 가 안보임!

< activity_main.xml >

누를때마다 글자가 달라지기 때문에 text 로는 설정이 안됨

On/Off 둘 다 설정해줘야함!

android:textOn="Wi-Fi On"

android:textOff="Wi-Fi Off"

On/Off 둘 다 설정해주면 이렇게 나온다! (대신 소문자를 쓰더라도 대문자로 나옴)

< MainActivity.java >

sw1 = findViewById(R.id.sw1);
sw2 = findViewById(R.id.sw2);
toggle1 = findViewById(R.id.toggle1);
toggle2 = findViewById(R.id.toggle2);

id 값 가져오기!

sw1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked) {
Toast.makeText(MainActivity.this, "Wi-Fi ON", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "Wi-Fi OFF", Toast.LENGTH_SHORT).show();
}
}
});

토글도 똑같음!

package com.example.a0609_ch04_compoundbutton_basic_switch_togglebutton;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

Switch sw1, sw2;
ToggleButton toggle1, toggle2;

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

sw1 = findViewById(R.id.sw1);
sw2 = findViewById(R.id.sw2);
toggle1 = findViewById(R.id.toggle1);
toggle2 = findViewById(R.id.toggle2);

// Switch 와 ToggleButton 은 CheckBox, RadioButton 과 이벤트 처리 방법이 동일함
sw1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked) {
Toast.makeText(MainActivity.this, "Wi-Fi ON", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "Wi-Fi OFF", Toast.LENGTH_SHORT).show();
}
}
});

sw2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked) {
Toast.makeText(MainActivity.this, "Bluetooth ON", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "Bluetooth OFF", Toast.LENGTH_SHORT).show();
}
}
});

toggle2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked) {
Toast.makeText(MainActivity.this, "Bluetooth ON", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "Bluetooth OFF", Toast.LENGTH_SHORT).show();
}
}
});
}
}

======== 0609_ch04_CompoundButton_ImageView_ImageButton

p.48

둘 다 이미지 저장하는 파일
drawable 은 그냥 이미지 저장 / mipmap 은 아이콘에 해당하는 이미지 저장

# tip

이름이 똑같은데 한 폴더에 있을 수 있는 이유 : 뒤에 해상도가 다르기 때문! (hdpi…)
휴대폰 해상도에 맞게 알아서 선택해줌 (지금 우리가 할 건 아님)

drawable 에 이미지 파일 넣기

< ImageView >

< activity_main.xml >

클릭할 수 있는 형태

알아서 늘려줌

fitXY 와 fitCenter 차이

< MainActivity.java >

ImageView iv = findViewById(R.id.iv);
Button btnChange = findViewById(R.id.btnChange);

btnChange.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});

버튼 클릭 이벤트 준비

빨갛게 밑줄 그이는 이유는 final 설정 안해서! 이렇게 쓰기 싫으면 멤버변수로 빼기
자동완성하면
알아서 붙음

< setImageResource 속성 >

btnChange.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
iv.setImageResource(R.drawable.lollipop);
}
});

버튼 클릭시 이미지 변경됨! (근데 되돌릴 순 없다)

======== 0609_ch04_p51_Exam_4_2

> 만들어보기

< activity_main.xml >

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="선택을 시작하겠습니까?"
android:textSize="30sp"
android:layout_marginTop="20dp"
android:layout_marginHorizontal="20dp"/>

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:id="@+id/cb"
android:text="시작함"
android:textSize="20sp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="좋아하는 애완동물은?"
android:id="@+id/tv2"
android:visibility="invisible"
android:textSize="30sp"
android:layout_marginHorizontal="20dp"/>

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/rg"
android:visibility="invisible">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/dog"
android:layout_marginLeft="20dp"
android:textSize="20sp"
android:text="강아지"/>
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cat"
android:textSize="20sp"
android:layout_marginLeft="20dp"
android:text="고양이"/>
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/rabbit"
android:layout_marginLeft="20dp"
android:textSize="20sp"
android:text="토끼"/>
</RadioGroup>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_marginLeft="20dp"
android:text="선택완료"
android:visibility="invisible"
android:id="@+id/btnOK"/>

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/img"
android:visibility="invisible"/>

</LinearLayout>

< MainActivity.java >

rg.getCheckedRadioButtonId() 라디오 박스에 각 버튼이름 가져올 때
switch~case 문 break 필수!!
시작화면
시작함 클릭하면 밑에 창 뜨면서 라디오버튼 선택하고 선택완료 클릭 시 해당 이미지 나옴
** 선택완료 버튼이 없다면 라디오 그룹에 OnChecked 이벤트 걸어서 하면 됨

>> 다시 시작함을 언체크 했을 때 값이 초기화 됐으면 좋겠다

// 시작함 CheckBox 를 체크 해제 시 RadioButton 과 ImageView 를 초기화
// 1. RadioButton 선택 초기화 : RadioGroup 객체의 clearCheck() 메서드 호출
rg.clearCheck();
// 2. ImageView 에 표시된 이미지 제거 : 파라미터에 0 전달
img.setImageResource(0);

checkBox 이벤트에 추가
체크 풀었다가 다시 체크해보면 이렇게 초기화 되어있음!

> 최종 코드

< MainActivity.java >

package com.example.a0609_ch04_p51_exam_4_2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

CheckBox cb;
TextView tv2;
RadioGroup rg;
Button btnOK;
ImageView img;

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

// 숨김항목(RadioButton 의 경우 RadioGroup 으로 통합 제어)
cb = findViewById(R.id.cb);
tv2 = findViewById(R.id.tv2);
rg = findViewById(R.id.rg);
btnOK = findViewById(R.id.btnOK);
img = findViewById(R.id.img);

// CheckBox 이벤트
cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// 체크박스 체크 시 숨김항목 표시, 체크 해제 시 숨김항목 숨김 => setVisibility() 메서드 사용
if(isChecked) {
tv2.setVisibility(View.VISIBLE);
rg.setVisibility(View.VISIBLE);
btnOK.setVisibility(View.VISIBLE);
img.setVisibility(View.VISIBLE);
} else {
tv2.setVisibility(View.INVISIBLE);
rg.setVisibility(View.INVISIBLE);
btnOK.setVisibility(View.INVISIBLE);
img.setVisibility(View.INVISIBLE);

// 시작함 CheckBox 를 체크 해제 시 RadioButton 과 ImageView 를 초기화
// 1. RadioButton 선택 초기화 : RadioGroup 객체의 clearCheck() 메서드 호출
rg.clearCheck();
// 2. ImageView 에 표시된 이미지 제거 : 파라미터에 0 전달
img.setImageResource(0);

}
}
});

// 선택완료 버튼 클릭 시 선택된 RadioButton 항목에 대한 id 값을 비교하여
// id값에 맞은 이미지 파일을 ImageView 에 표시
btnOK.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
switch(rg.getCheckedRadioButtonId()) { // RadioGroup 에서 선택된 항목 id 가져오기
case R.id.cat: // 고양이 선택시
img.setImageResource(R.drawable.cat);
break;
case R.id.dog: // 강아지 선택시
img.setImageResource(R.drawable.dog);
break;
case R.id.rabbit: // 토끼 선택시
img.setImageResource(R.drawable.rabbit);
}
}
});

}
}

======== 0609_ch04_EditText_Input_Event

< EditText Input >

< activity_main.xml >

< MainActivity.java >

키보드의 모든키에 반응하게 만들 수 있다!

public class MainActivity extends AppCompatActivity {

EditText edit1, edit2;

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

edit1 = findViewById(R.id.edit1);
edit2 = findViewById(R.id.edit2);

// EditText 위젯에 OnClickListener 연결 시 엔터키 눌렀을 때 이벤트 발생
// => 단, singleLine="true" 속성이 설정되어 있어야 한다!
edit1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// EditText(edit1)에 입력된 텍스트를 가져와서 Toast 로 출력
Toast.makeText(MainActivity.this, edit1.getText().toString(), Toast.LENGTH_SHORT).show();
}
});

// EditText 위젯에 OnKeyListener 연결 시 키보드의 키를 눌렀을 때 이벤트 발생
edit2.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
// 엔터키가 눌러졌을 때 입력된 텍스트를 Toast 로 출력
if(keyCode == KeyEvent.KEYCODE_ENTER) {
Toast.makeText(MainActivity.this, edit2.getText().toString(), Toast.LENGTH_SHORT).show();
}
return false;
}
});

}
}

edit1 은 엔터키에만 반응
edit2 는 모든 키보드에 반응(숫자만 입력한다던가 그런식으로 제어도 가능)

728x90

'Dev.Program > Android' 카테고리의 다른 글

ScrollView / SlidingDrawer / ViewFlipper / WebView (0)	2022.10.10
TextView / ProgressBar / SeekBar / RatingBar (0)	2022.10.10
Layout / Chronometer / TimePicker / DatePicker / CalendarView (0)	2022.10.10
View / TextView / Button / EditText (0)	2022.10.10
Android Studio 설치 및 세팅 / jre 설정 (0)	2022.10.10

두 유라 이크 개발

두 유라 이크 개발

태그

최근글

댓글

공지사항

아카이브

< CheckBox >

< RadioButton >

< Toggle >

< ImageView >

< setImageResource 속성 >

< EditText Input >

'Dev.Program > Android' 카테고리의 다른 글

관련글

티스토리툴바