안드로이드 어플리케이션을 만들 때 사용하는 Android Studio를 통해 UI 및 프론트에 대한 공부를 하며 그 내용들을 기록하고자 이렇게 글을 작성한다.
개발언어는 Java와 Kotlin 중 Java를 채택하여 학습하였다. Kotlin은 사용해 본 적이 없으나 Java의 경우 기본적인 기능들을 사용해 본 적이 있어 이를 선택하게 되었다.
UI 구조 확인
이번에 해 볼 UI 디자인은 위 이미지와 같다.
학교, 학과, 이름, 굵게, 이탤릭 까지는 이전에 연습했던 것과 동일한 기능들을 연습하는 것으로 동일 구조를 복습하는 것이다.
그리고 스타일지정 버튼부터는 새로운 기능의 연습이다.
복습 먼저.. (텍스트 뷰에 띄워지는 텍스트와 색상 변경 / 리스너 클래스 생성 활용)
우선 학교, 학과, 이름 버튼은 누르게 되면 상단의 텍스트 뷰에 띄워지는 텍스트와 텍스트 색상이 동시에 변경되도록 할 것이다.
이를 위해서 별도의 리스너 클래스를 만들고 이를 적용하는 법을 복습할 예정이다. 한 번 복습 해 보자.
* 항상 하던 것 처럼 객체 참조 변수를 먼저 만들어 두어야
public class MainActivity extends AppCompatActivity {
Button btnUniv, btnDept, btnPerson;객체 참조 변수를 만들어 두어야 이벤트 처리 등을 수행할 수 있으니 항상 이를 작성하는 것을 잊어선 안 된다. MainActivity 하단에 작성 해 두자.
이제 사전 준비는 끝났으니 리스너 객체를 활용 해 보자.
OnCreate()아래에 생성한 객체참조변수에 뷰의 ID 등록 수행
txtMessage = (TextView) findViewById(R.id.textView1);
// 텍스트뷰도 텍스트뷰를 위한 객체참조변수에 뷰의 ID를 등록해야 한다.
btnUniv = (Button) findViewById(R.id.button1);
btnDept = (Button) findViewById(R.id.button2);
btnPerson = (Button) findViewById(R.id.button3);
// 세 버튼의 객체참조변수에 버튼의 ID들을 할당 해 두도록 하자.
...- 각 버튼을 클릭했을 때 수행할 동작을 별도의 리스너 클래스를 생성하여 작성해 버튼들이 어떤 기능을 수행할 지를 정의
public class ButtonClickListener implements View.OnClickListener {
@Override
public void onClick(View view) { //onClick은 필수 메소드임. 빠져선 안 됨
if(view.getId() == R.id.button1) {
txtMessage.setText(getString(R.string.univ_name));
txtMessage.setTextColor(Color.BLUE);
}else if (view.getId() == R.id.button2) {
txtMessage.setText(getString(R.string.dept_name));
txtMessage.setTextColor(Color.GREEN);
}else if(view.getId() == R.id.button3) {
txtMessage.setText(getString(R.string.person_name));
txtMessage.setTextColor(Color.RED);
}
}
}해당 코드를 보면, R.string.univ_name, dept_name, person_name이라는 리소스를 활용한다.
이 리소스들은 이전에 해 보았던 res폴더의 values에서 strings.xml에 미리 문자열을 생성해 이를 활용하는 방식이다.
strings.xml에 작성해 둔 코드는 아래와 같다.
<resources>
<string name="app_name">app name</string>
<string name="univ_name">대학교</string>
<string name="dept_name">공학</string>
<string name="person_name">Neta</string>
</resources>으로 작성 해 두었다.
이에 따라 위의 학교, 학과, 이름 버튼에서 미리 xml파일에 만들어 둔 string 리소스를 가져와 R.string.<string에 만들어 둔 리소스>로 활용한다.
이제 만들어 둔 리스너를 활용해야 한다.
- 생성한 리스너 클래스를 각 객체참조변수에 연결
//ButtonClickListener listener = new ButtonClickListener();// 리스너는 굳이 작성하지 않는 경우가 많음
btnUniv.setOnClickListener(new ButtonClickListener());
btnDept.setOnClickListener(new ButtonClickListener());
btnPerson.setOnClickListener(new ButtonClickListener());이미 만들어 둔 리스너에 대해서는 굳이 새로 생성해서 setOnClickListener() 안에 넣어줄 필요는 없다.
바로 해당 리스너 클래스를 new를 통해 생성해주면 바로 사용이 가능하다.
이렇게 작성한 세 버튼의 리스너 클래스는 텍스트를 변경 해 주고, 텍스트 내용과 텍스트 색상을 변경 해 주는 기능을 한다.
이로서 새로운 리스너 클래스를 생성하여 이벤트를 처리하는 방법에 대해서 복습 해 보았다.
두 번째 복습.. (폰트 타입 변경 / 리스너 클래스 생성 활용)
다음 번으로 할 복습은 굵게, 이탤릭 버튼을 누르면 텍스트뷰에 작성된 텍스트의 폰트 타입이 변경되는 기능을 하도록 한다.
첫 번째 복습처럼 객체참조변수를 먼저 생성하자.
public class MainActivity extends AppCompatActivity {
Button btnBold, btnItalic;
...객체참조변수를 생성했으니 이제 리스너를 활용할 수 있도록 코드를 작성하자.
OnCreate()아래에 생성한 객체참조변수에 뷰의 ID 등록 수행
// 굵게, 이탤릭으로 폰트타입 변경
btnBold = (Button) findViewById(R.id.button4);
btnItalic = (Button) findViewById(R.id.button5);- 복습 1과 동일하게 각 버튼을 클릭했을 때 수행할 동작을 별도의 리스너 클래스를 생성하여 작성해 버튼들이 어떤 기능을 수행할 지를 정의
//버튼을 길게 눌렀을 때 작동하도록 만드는 Listener객체
public class ButtonLongListener implements View.OnLongClickListener {
@Override
public boolean onLongClick(View view) {
if(view.getId() == R.id.button4) {
//TypeFace 정보를 수정
txtMessage.setTypeface(null, Typeface.BOLD);
//typeface를 사용해 직접 글꼴 객체를 만들어서 사용할 수도 있음
//여기서 괄호 안에 null을 넣으면 글꼴을 직접 지정하겠다는 의미
}else if(view.getId() == R.id.button5) {
txtMessage.setTypeface(null, Typeface.ITALIC);
}
return false;
}
}이번에 생성하는 버튼은 버튼을 길게 클릭했을 때 버튼의 이벤트를 감지하고 작동하도록 만드는 리스너 클래스를 생성해 활용하는 것이다.
이를 위해서 기존에는 OnClickListener을 사용했지만 이번에는 OnLongClickListener을 implement하여 클래스를 생성한다.
OnLongClickListener은 void로 처리되던 OnClick()메소드와 다르게 boolean타입으로 처리된다.
다만 타입만 다를 뿐 기본 로직은 길게 누르냐 단순 터치만 하냐의 차이이므로 구조적인 면에서는 큰 차이를 가지진 않는다.
- 생성한 클래스를 사용하기 위해 객체참조변수에 탑재
btnBold.setOnLongClickListener(new ButtonLongListener());
btnItalic.setOnLongClickListener(new ButtonLongListener());이렇게 하면 굵게 버튼과 이탤릭 버튼을 길게 누르면 텍스트 뷰에 입력되어 있는 텍스트의 폰트 타입이 변경되는 것을 볼 수 있다.
복습 완료, 새로운 버튼 활용 해 보기 (ToggleButton)
이번에 새롭게 활용해 볼 버튼은 토글 버튼이다. 토글 버튼은 체크(선택)에 대한 변화를 감지하는 버튼이다. 토글 버튼은 CheckedChangeListener 객체를 사용한다.
해당 리스너 객체에서는 OnCheckedChange() 메소드를 활용하는데, 해당 메소드는 버튼의 입력을 감지하는 메소드이다.
토글 버튼은 전등의 스위치와 같은 개념으로 한 번 누르면 전등이 켜지고, 두 번째 누르면 전등이 꺼지는 느낌이라고 생각하면 그 이해가 편할 것이다.
토글 버튼의 이해를 위해서 토글 버튼을 통해 클릭에 따라 텍스트 뷰에 나타나는 폰트 타입이 변경되도록 하는 토글 버튼을 만들 것이다.
모든 것을 사용하기 전에는 항상 객체참조변수를 먼저 생성하자.
public class MainActivity extends AppCompatActivity {
ToggleButton btnStyle; // 두 가지 기능을 가지지만 한 버튼에서 이루어지므로 객체는 하나만 형성
...토글 버튼은 두 가지 기능을 하더라도 하나의 버튼에서만 그 기능이 이루어지기 때문에 객체는 하나만 생성한다.
- 생성한 객체참조변수에 버튼의 ID를 할당
btnStyle = (ToggleButton)findViewById(R.id.toggleButton1);- 토글 버튼의 check여부를 확인하는 기능 구현
토글 버튼은 별도의 리스너 객체를 만들지 않는다. Checkbox와 유사한 역할을 수행한다.
btnStyle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
//boolean은 눌러서 Check상태가 되었는지, Check상태가 해제되었는지를 의미함
if (b == true){ //b가 선택되었으면(눌렸으면)
txtMessage.setTypeface(null, Typeface.BOLD_ITALIC);
} else { //b가 해제되었으면
txtMessage.setTypeface(null, Typeface.NORMAL);
}
}
});여기서 보면 CheckedChangeListener은 토글 버튼을 위해 클릭(체크)여부를 확인하는 리스너인데, 해당 리스너는 별도로 리스너 객체를 생성할 필요 없이 무명클래스로 구현하는 것을 볼 수 있다.
onCheckedChanged(CompoundButton compoundButton, boolean b)는 compoundButton에서 어떤 버튼인지 정보를 긁어오고, b에서 버튼이 Check 상태가 되었는지 Check가 해제되었는지를 확인한다.
위 코드에서는 b가 true면(= 버튼이 눌렸으면) 텍스트 뷰의 폰트 타입이 Italic으로 변경되고 b가 false면(= 버튼이 해제됐으면) 텍스트 뷰의 폰트 타입이 Normal로 돌아간다.
여기서 null값의 자리는 폰트를 변경하려면 폰트 명을 넣어주는 자리로, 지금은 별도의 폰트 변경을 수행하지 않을 것이므로 null을 넣어 두었다.
이렇게 하면 토글 버튼을 의도한 기능대로 사용할 수 있다.
마무리
이번에는 주로 복습을 위주로 수행했다.
다음에는 알림 메시지를 띄워주는 Toast를 활용해 볼 예정이다.
새로운 기능을 아는 것도 중요하지만, 기존에 배운 기능들에서 약간 변형되는 것이 주류이니 만큼 이전에 했던 것들을 까먹지 않는 것이 중요한 포인트로 보인다.
