elevne's Study Note
Android 시작 (4: Layout, View 활용 예제) 본문
Do it! Android 앱 프로그래밍 서적의 Chapter 2 문제 2개를 풀어보았다.
1번 문제는 아래와 같았다.
- 화면을 위와 아래 두 영역으로 나누고 그 영역에 각각 Image View를 배치한다
- 각각의 Image View는 Scroll이 생길 수 있도록 한다
- 상단의 Image View에 하나의 이미지를 보이게 한다
- 두 개의 Image View 사이에 버튼을 하나 만들고 그 버튼을 누르면 상단의 이미지가 하단으로 옮겨져 보이고 다시 누르면 상단으로 옮겨지는 기능을 추가한다
이를 위해서 우선 Java 코드는 아래와 같이 작성해보았다.
public class MainActivity extends AppCompatActivity {
ImageView imageView;
ImageView imageView2;
boolean upOrDown = false;
Drawable image;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageView);
imageView2 = findViewById(R.id.imageView2);
image = imageView2.getDrawable();
imageView.setImageDrawable(image);
imageView2.setVisibility(View.INVISIBLE);
}
public void buttonClick(View v){
if (!upOrDown){
imageView.setVisibility(View.INVISIBLE);
imageView2.setVisibility(View.VISIBLE);
upOrDown = true;
} else if (upOrDown) {
imageView.setVisibility(View.VISIBLE);
imageView2.setVisibility(View.INVISIBLE);
upOrDown = false;
}
}
}
처음에 boolean 값을 하나 만들어주어 Button이 눌릴 때마다 다르게 작동할 수 있도록 하는 기준이 되도록 하였다. View 파일의 코드는 아래와 같다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="317dp" />
<ScrollView
android:id="@+id/scrollView2"
android:layout_width="380dp"
android:layout_height="230dp"
android:layout_marginBottom="30dp"
app:layout_constraintBottom_toTopOf="@+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.516"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/example1" />
</ScrollView>
<ScrollView
android:id="@+id/scrollView3"
android:layout_width="380dp"
android:layout_height="230dp"
android:layout_marginTop="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.483"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline2">
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/example2" />
</ScrollView>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="buttonClick"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/scrollView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/scrollView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
문제에서 말한대로 두 개의 Scroll View 안에 각각 ImageView를 넣어주었고, Button을 만들어준 뒤 여기에는 onClick 속성을 지정해주었다. 결과는 아래와 같이 잘 나온다!
2번 문제는 다음과 같다.
- MS로 문자를 전송하는 화면은 위쪽에 텍스트 입력상자, 아래쪽에 [전송]과 [닫기] 버튼을 수평으로 배치하도록 구성한다
- 텍스트 입력상자 바로 아래에 입력되는 글자의 바이트 수를 "10/80 바이트"와 같은 포맷으로 표시하되 우측 정렬로 하고 색상을 눈에 잘 띄는 색으로 지정한다
- 텍스트 입력상자에 입력되는 글자의 크기와 줄 간격을 조정하여 한 줄에 한글 8글자가 들어가도록 만든다
- [전송] 버튼을 누르면 입력된 글자를 화면에 토스트로 표시한다
이번에는 우선 View부터, 코드를 아래와 같이 작성할 수 있었다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<EditText
android:id="@+id/editText"
android:layout_width="380dp"
android:layout_height="300dp"
android:layout_marginTop="40dp"
android:background="@drawable/memo"
android:inputType="textMultiLine|textNoSuggestions"
android:maxLength="80"
android:padding="10dp"
android:scrollHorizontally="false"
android:singleLine="false"
android:textSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="350dp"
android:layout_marginEnd="0dp"
android:text="0"
app:layout_constraintEnd_toStartOf="@+id/textView2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="80dp"
android:layout_height="20dp"
android:layout_marginTop="350dp"
android:layout_marginEnd="0dp"
android:text="/ 80 바이트"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginBottom="150dp"
android:text="전송"
android:onClick="buttonClick"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline3" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginBottom="150dp"
android:text="닫기"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="205dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
밑의 버튼 두 개는 Guideline을 생성하고 이를 기준으로 정렬해주었다. 그리고 Edittext View 안에 많은 설정을 넣어주었는데, 핵심적으로는 테두리를 만들기 위해 drawable에 xml 파일을 하나 만들어주고 이를 backgroud 속성에 넣어준 것이 있다. 해당 xml 파일은 아래와 같이 작성되었다.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke android:width = "1dp" android:color = "#8041FF"/>
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
</shape>
</item>
</selector>
아직 drawable에 넣는 xml파일에 대해서는 공부한 바가 없어서... 사실 태그들이 무엇을 뜻하는지는 잘 모르겠다. 이후 자바 코드는 아래와 같이 작성했다.
public class MainActivity extends AppCompatActivity {
EditText textInput;
TextView textLength;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textInput = findViewById(R.id.editText);
textLength = findViewById(R.id.textView);
textInput.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
textLength.setText(String.valueOf(editable.length()));
}
});
}
public void buttonClick(View v){
Toast.makeText(this, textInput.getText(), Toast.LENGTH_LONG).show();
}
@Override
public boolean dispatchTouchEvent(MotionEvent e){
View focus = getCurrentFocus();
if (focus != null){
Rect rect = new Rect();
focus.getGlobalVisibleRect(rect);
int x = (int) e.getX(), y = (int) e.getY();
if (!rect.contains(x, y)) {
InputMethodManager imm = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
if (imm != null)
imm.hideSoftInputFromWindow(focus.getWindowToken(), 0);
focus.clearFocus();
}
}
return super.dispatchTouchEvent(e);
}
}
글자 수를 세기 위해서(문제에는 Byte로 세라고 되어있긴 했지만 글자 수로 했다...) EditText View 객체를 만들어주고 여기에 addTextChangedListener 함수를 적용해주면 자동으로 3개의 함수가 @Override annotation과 함께 생성된다. 여기에서 나는 글자가 입력된 후 글자 수를 세는 것이기에 afterTextChanged 함수에 필요한 로직을 적어주었다. 글자 수를 표시할 TextView View에 setText를 하는 것이다. 해당 함수의 인자로 사용되는 Editable Class는 Edittext View의 기본 type으로, 편집 가능한 문자열을 뜻한다.
그 다음으로는 [전송] 버튼이 눌렸을 때 내용을 Toast로 띄울 수 있도록 Toast.makeText를 사용해주었다.
마지막으로는 dispatchTouchEvent 함수를 Override 하여 사용하였는데, 이는 Edittext View 바깥 쪽을 클릭하였을 때 키보드가 내려갈 수 있도록 해주는 함수이다. 이에 대해 이해하기 위해서 Android의 Touch Event 흐름에 대해서 알 필요가 있다고 한다. 이에 대해서는 나중에 꼭 자세하게 알아봐야겠다.
위 코드들에 대한 실행결과는 아래 사진과 같다. 잘 실행된다!
출처:
https://behappyaftercoding.tistory.com/4
'Frontend > Android' 카테고리의 다른 글
| Android 시작 (3: Layout) (0) | 2022.12.01 |
|---|---|
| Android 시작 (2: View) (0) | 2022.11.30 |
| Android 시작 (1) (0) | 2022.11.28 |
'Frontend/Android' Related Articles
more
