이전 글에서 액티비티를 만들고 레이아웃과 연결하는 것을 해보았는데, 이번에는 텍스트뷰에 글을 입력해보고, 버튼을 터치하고, 이미지뷰에 이미지를 띄우는 등 여러가지 UI를 사용해보겠습니다. 안드로이드 스튜디오 내에는 매우 다양한 UI가 존재하지만, 그 중에서 가장 많이 사용하는 것들만 보도록 하겠습니다. 이 포스트는 이전 글에서 이어집니다.
https://keykat7.blogspot.com/2021/03/android-activity.html
1. 텍스트뷰 (TextView)
텍스트 형식의 설명이나 정보가 없다면 사용자는 앱이 어떤 일을 하고 앱에서 어떤 정보를 얻을 수 있는지 등 행동에 제약이 매우 커지기 때문에 텍스트뷰는 매우 중요한 UI 중 하나이며, 사실 상 다른 어떤 것보다도 필수적인 UI 입니다. 텍스트뷰를 하나 만들고 안에 글을 써봅시다.
1) 이전에 만들었던 layout 폴더의 activity_sub.xml을 열고 텍스트뷰 하나를 만들어주세요. 빨간 박스 안의 Palette에서 돋보기로 'textview'라고 검색하셔도 좋고, Common - TextView로 찾으셔도 좋습니다.
2) 찾으셨다면 드래그해서 파란 박스 안의 레이아웃 화면에 끌어다놓으세요.
3) 생성한 텍스트뷰를 클릭하면 빨간 박스의 Attributes에서 텍스트뷰의 아이디를 바꾸거나, 폰트 크기를 바꾸거나, 텍스트뷰 안의 내용을 바꾸는 등 여러 속성들을 제어할 수 있습니다. 특히 뷰의 id를 변경하는 것은 상당히 중요한 포인트인데요, 코드로 뷰를 제어하기 위해선 해당 뷰의 id를 알아야하기 때문입니다. 텍스트뷰의 내용을 Hello world!로 바꾸고 폰트 크기를 조금 키우고 Bold를 적용해봅시다. 파란 박스 내에서 전부 제어할 수 있습니다. 참고로 텍스트뷰를 생성했을 때 옆에 빨간색 경고 표시가 생기는데, ContraintLayout의 contraint 설정을 하지 않아서 발생하는 것입니다. 일단 넘어가 주세요.
4) 코드로 텍스트뷰의 내용을 바꾸려면 어떻게 해야할까요? TextView의 setText를 사용하여 바꿔줄 수 있습니다. TextView의 id를 가져오고 onCreate 등의 메서드에서 setText를 적용하면 됩니다. 우리가 만든 텍스트뷰의 id를 test_text라고 지어 놓고 진행해 보았습니다. 아래의 코드를 따라해보세요.
package com.example.test;
import android.os.Bundle;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class SubActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sub);
TextView textView = findViewById(R.id.test_text);
textView.setText("setText를 이용해 문자를 바꿔보았습니다.");
}
}
findViewById로 위에서 설정한 텍스트뷰의 아이디를 가져와서 TextView 객체를 선언해주고 setText로 텍스트 내용을 바꿔줍니다. 특히 findViewById는 생성한 뷰를 가져오기 위한 것으로 중요한 것이니 잘 기억해주세요. 당연히 xml 파일 내에선 변경 사항을 확인할 수 없고, 빌드를 했을 때 위의 변경된 내용이 적용됩니다. onCreate는 앱이 실행될 때 해당 액티비티가 앱에서 처음으로 생성될 때 실행되는 것이니까요.
2. 이미지뷰 (ImageView)
이번엔 이미지뷰를 사용해봅시다. 이미지뷰 또한 텍스트 만으로는 설명할 수 없거나 정보를 완전히 제공할 수 없을 경우 유용하게 쓰이는 UI이므로 매우 중요한 요소입니다.
1) 텍스트뷰를 생성했던 것과 마찬가지로 ImageView를 하나 생성해주세요. 대신 이번에는 드래그해서 화면 위에 놓으면 사진을 선택하는 창이 생기는데, 밑에 있는 round_account_box_24를 이미지뷰에 나오도록 해보겠습니다.
2) 생성된 이미지가 조금 작게 나오네요. 이번에는 Attributes를 이용해 크기를 조절해 보겠습니다. 파란 박스 안에 layout_width와 layout_height이 있는데요, 이것은 뷰의 크기를 조절하는 속성이며 속성 값에 따라 뷰가 나타나는 방식이 달라집니다.
wrap_content : 뷰 안에 들어가는 컨텐츠의 크기에 따라 뷰의 크기가 맞춰집니다.
match_parent : 뷰가 속한 부모뷰의 크기에 맞게 조절됩니다.
x dp : x 값 만큼 크기가 확보됩니다. 이 때 dp는 안드로이드 내에서 크기를 정하는 px과 비슷한 단위입니다.
저는 적당히 100dp * 100dp 만큼 크기를 바꿔봤습니다.
3) 코드로 이미지를 적용하려면 어떻게 해야할까요? 이미지뷰의 이미지를 바꾸는 방법은 여러가지가 있습니다. 이미지를 bitmap 형식으로 가지고 있다면 setImageBitmap을, Drawable 형식의 이미지를 불러온다면 setImageDrawable을, Drawable 폴더 내의 저장된 이미지를 불러오고 싶다면 setImageResource를 사용하면 됩니다. 그 밖에도 정말 여러가지 방법으로 이미지 처리를 할 수 있지만 가장 직관적인, Drawable 폴더에 저장된 이미지를 불러오는 방식인 setImageResource를 사용해 봅시다. 이번에도 ImageView의 id는 test_image로 바꿔보았습니다. 아래의 코드를 따라해 보세요.
package com.example.test;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class SubActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sub);
TextView textView = findViewById(R.id.test_text);
textView.setText("setText를 이용해 문자를 바꿔보았습니다.");
ImageView imageView = findViewById(R.id.test_image);
imageView.setImageResource(R.drawable.ic_launcher_foreground);
}
}
이번에도 앱을 실행시켜서 제대로 적용이 되는지 확인해 봅시다. 잘 보이진 않지만 텍스트뷰 사이에 뭔가 하얀색 안드로이드 이미지가 들어가 있네요. 그런데 위치가 우리가 의도한 것과는 뭔가 많이 다릅니다. 이것은 ConstraintLayout을 제대로 알고 있지 않기 때문에 발생하는 현상인데요, 다른 포스팅에서 설명할 것 같습니다.
3. 버튼 (Button)
요즘의 앱은 모션과 여러가지 상호작용을 이용하여 버튼의 개수를 줄이려는 노력을 하고 있지만, 그럼에도 불구하고 버튼은 아직도 많이 사용하는 UI 중 하나입니다. 앱에서 어떤 행동을 직관적으로 할 수 있게 유도하는 기능이니까요. 이번에도 버튼을 만들어서 사용해 보겠습니다.
1) 똑같은 방식으로 Button을 하나 만들어주세요. Palette의 Buttons에서 확인할 수 있습니다. 주의할 점은 Button과 ImageButton은 다른 것입니다. 일반 Button은 주로 버튼 위에 텍스트를 나타내어 특정 액션을 취할 수 있게 보여주는 형태이고, ImageButton은 이미지 자체를 버튼으로 만들어서 액션을 하도록 유도하는 형태입니다. 둘 다 많이 사용하는 것이지만, 여기에서는 일반 버튼을 사용할 것입니다.
2) 버튼은 코드로 제어할 수 있습니다. 버튼의 id를 test_button으로 짓고 다시 자바 클래스로 넘어갑시다. 버튼을 제어하기 위한 방법은 정말 여러 가지 방법이 있지만, setOnClickListener를 사용하는 가장 기본적인 방법을 보도록 합시다. 람다식으로 구현할 수도 있지만 build.gradle에서 컴파일 옵션을 바꾸고 하는 것은 조금 헷갈릴 수도 있으니 일단 넘어가겠습니다. 아래의 코드를 확인해 보세요.
package com.example.test;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class SubActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sub);
TextView textView = findViewById(R.id.test_text);
textView.setText("setText를 이용해 문자를 바꿔보았습니다.");
ImageView imageView = findViewById(R.id.test_image);
imageView.setImageResource(R.drawable.ic_launcher_foreground);
Button button = findViewById(R.id.test_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
textView.setText("button을 클릭해서 위에서 만든 textView의 내용을 바꾸어 보았습니다.");
}
});
}
}
위에서 만들었던 textView의 내용을 바꾸도록 해보았습니다. onClick 메서드에서 버튼을 클릭할 때 취할 액션을 넣어주시면 됩니다.
버튼을 누르기 전에는 전자의 이미지와 같이 onClick 메서드 이전에 설정한 textView.setText의 값이 출력되지만, 버튼을 누르면 onClick 메서드에서 설정한 텍스트의 내용이 출력됩니다.
4. 에디트 텍스트 (textInputEditText)
마지막으로 하나만 더 보고 갑시다. 로그인을 할 때나 메모앱을 만드는 등 텍스트를 입력할 수 있는 공간이 있어야 합니다. 이 때 사용하는 것이 에디트 텍스트입니다. 사실 에디트 텍스트는 TextWatcher라던지 Hint 제어라던지 개행 및 폰트 크기 조절 처리라던지 조금 기능이 복잡해서 설명할 것이 많지만, 일단 가장 기본적인 내용만 공부해 보도록 하겠습니다.
1) 많이 해보았으니 이제는 쉬울 것입니다. 마찬가지로 textInputEditText를 찾아봅시다. 아마 TextInputLayout이란 이름으로 있을 것입니다. 하나 생성해주세요.
2) 맨 위에 회색 박스가 생긴 것을 볼 수 있는데, 다른 뷰와 달리 형태가 조금 다르네요. Component Tree에서 TextInputLayout의 화살표를 눌러 펼쳐주면 TextInputEditText라는 것이 있는데, 이것이 텍스트를 입력하는 공간입니다. 즉 이것의 아이디를 코드로 가져와야 텍스트 편집 기능을 사용할 수 있습니다. test_input이라고 아이디를 짓도록 해보겠습니다. 일단 코드 없이 실행해 봅시다.
아 이건 좀... 많이 가리네요. 아무래도 위치 설정을 조금 해주어야 할 것 같습니다. 위에서 잠깐 얘기했듯이 ContraintLayout에서 contraint 설정을 하면 적절하게 디자인 할 수 있지만, 조금 직관적인 방법을 사용하겠습니다. Palette - Layouts - LinearLayout (vertical)를 아래의 Component Tree의 ConstraintLayout 바로 밑에 끌어다놓고, 만들었던 모든 뷰를 전체 선택하고 LinearLayout에 넣어주세요. 이렇게 하면 사진과 같은 구조로 만들어질 것입니다.
순서가 조금 뒤죽박죽 된 것 같습니다만, LinearLayout 내에서 뷰의 순서를 바꿔서 원하는 순서로 뷰가 보이도록 할 수 있습니다. UI를 사용하는데에 당장 중요한 것은 아니므로 일단은 넘어가겠습니다. 이제 코드로 넘어가봅시다.
3) 아래의 코드를 작성해주세요. 이 때 당연하지만 Button의 위에 TextInputEditText editText를 선언해주어야 버튼의 setOnClickListener에서 editText를 사용할 수 있겠죠? setOnClickListener에서 작성했던 이전의 코드는 주석처리해 주세요. 아래의 코드는 editText.getText()로 입력한 텍스트 내용을 가져와 toString()으로 변환하여 setText()를 이용해 textView에 넣어주는 기능입니다.
package com.example.test;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import com.google.android.material.textfield.TextInputEditText;
import androidx.appcompat.app.AppCompatActivity;
public class SubActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sub);
TextView textView = findViewById(R.id.test_text);
textView.setText("setText를 이용해 문자를 바꿔보았습니다.");
ImageView imageView = findViewById(R.id.test_image);
imageView.setImageResource(R.drawable.ic_launcher_foreground);
TextInputEditText editText = findViewById(R.id.test_input);
Button button = findViewById(R.id.test_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//textView.setText("button을 클릭해서 위에서 만든 textView의 내용을 바꾸어 보았습니다.");
textView.setText(editText.getText().toString());
}
});
}
}
댓글
댓글 쓰기