[3주 차] - TextView, EditText & Button, Intent 화면 전환, ImageView & Toast.makeText() 메소드

과목명 : 모바일 프로그래밍(Mobile programming with Android Studio)

수업일자 : 2023년 03월 17일 (금)

Build 추가 환경 설정

(1) build.gradle

defaultConfig {} 하단에 아래의 속성을 추가합니다.

    configurations.all {
        resolutionStrategy { force 'androidx.core:core-ktx:1.6.0' }
    }

(2) complieSdk, targetSdk를 Recommend version 33으로 설정합니다.

1. TextView

(1) 텍스트 문구를 출력하는 기능을 담당하는 위젯이며, 텍스트를 출력하는만큼 자주 사용되는 위젯입니다.

1-1. 직접 텍스트 입력해 보기(2줄)

- <TextView> 위젯을 통해 텍스트 작성이 가능합니다

- <TextView>에서 android:layout_width, android:layout_height를 통해 가로와 세로 길이를 설정할 수 있으며, text 부분에 적용할 텍스트를 입력합니다.

- match_parent : 부모 위젯의 길이와 동일하게 설정

- wrap_content : 폭과 높이를 폰트가 알맞게 들어갈 정도로만 설정

- <LinearLayout> 부분의 android:orientation은 앱의 전반적인 레이아웃을 vertical(수직), horizontal(수평)으로 맞출 것인지 설정

<?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="match_parent"
        android:layout_height="wrap_content"
        android:text="안녕하세요." />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="안드로이드 스튜디오입니다."/>


</LinearLayout>

<실행 결과>

1-2. 폰트 색상 추가, 크기 설정하기

- 위에서 작성된 코드에 textColor, textSize를 옵션을 부여하여 폰트를 스타일링 할 수 있습니다.

- sp의 경우 폰트의 크기를 나타내는 단위입니다.

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#3F51B5"
        android:text="안녕하세요." />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#E91E63"
        android:textSize="20sp"
        android:text="안드로이드 스튜디오입니다."/>

<실행 결과>

2. EditText, Button

2-1. EditText

- 쉽게 말하면, HTML 마크업 언어에 비유했을 때 input 태그로 비유할 수 있는 위젯입니다.

- 텍스트를 입력할 수 있는 필드(ID, PW 입력 폼)를 생성할 수 있게 됩니다.

2-2. Button

- 버튼을 생성할 수 있는 위젯입니다. 버튼 생성 후 이후에, MainActivity.java에서 버튼에 대한 이벤트 발생 시 특정한 동작이 수행되도록 설정합니다.

2-3. 테스트를 위한 프로젝트 생성하기

2-4. EditText, Button 생성하기

(1) <EditText>를 통해 input 태그와 같은 폼을 생성할 수 있습니다.

(2) layout_width 속성에서의 dp

- width의 단위를 의미합니다.

(3) hint 속성

- 사용자의 입력을 받기 전, 사용자가 해당 폼에 대해 대한 정보를 확인할 수 있도록 텍스트를 미리 지정해 줄 수 있습니다.

(4) id 속성

- 위젯에서 발생한 이벤트에 대해 다음 동작을 미리 정의하기 위해 자바 코드를 작성하게 되며 코드를 작성하는 과정에서 위젯에 부여된 id 속성을 이용하기 때문에 정의되었습니다.

<?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">
    
    <EditText
        android:id="@+id/et_id"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="ID를 입력하세요."/>
    
    <Button
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>

</LinearLayout>

<실행 결과>

2-5. MainActivity.java에서 이벤트 발생 시 다음 동작 지정하기

- 우선 코드로 먼저 확인해 보겠습니다.

(1) onCreate() 메소드의 경우 애플리케이션이 처음 실행될 때 수행되는 메인 프로그램의 생명주기를 의미합니다.

package com.example.edittextexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    EditText et_id;
    Button btn_test;

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


        et_id = findViewById(R.id.et_id);
        btn_test = findViewById(R.id.btn_test);

        btn_test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                et_id.setText("안드로이드 스튜디오");
            }
        });

    }
}

(2) 이전 xml 파일에서 지정해 주었던 버튼에 대한 속성 btn_test와 EditText에 대한 속성 et_id를 미리 선언합니다.

EditText et_id;
Button btn_test;

(3) id에 대한 속성을 찾아주고, 버튼에 대한 클릭이 발생했을 때 EditText 위젯에 "안드로이드 스튜디오"가 출력되도록 OnClickListener를 지정해 주었습니다.

et_id = findViewById(R.id.et_id);
btn_test = findViewById(R.id.btn_test);

btn_test.setOnClickListener(new View.OnClickListener() {
    @Override
      et_id.setText("안드로이드 스튜디오");
    }

<실행 결과 - 버튼 클릭 이벤트 발생 전>

<실행 결과 - 클릭 이벤트 발생>

3. Intent(화면 전환하기)

(1) 실제로 애플리케이션에서 화면 전환을 위해 프로젝트 폴더에 새로운 프로젝트를 생성합니다.

- 프로젝트 폴더(우클릭) → New → Activity → Empty Activity

(2) 화면 전환에 사용할 서브 Activity의 이름을 지정해 주고 설정을 완료합니다.

3-1. 이동되는 화면인 SubActivity 레이아웃 구성하기

<?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=".SubActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SubActivity로 이동되었습니다."
        android:textSize="25sp" />


</LinearLayout>

<실행 결과>

3-2. MainActivity 화면 레이아웃 구성하기

<?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">

    <Button
        android:id="@+id/btn_move"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이동"/>
</LinearLayout>

<실행 결과>

3-3. 화면 전환 이벤트 구성 : MainActivity.java

package com.example.intendexample;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button btn_move;

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

        btn_move = findViewById(R.id.btn_move);
        btn_move.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // 두 개의 매개변수 : 현재 activity, 이동하고 싶은 activity
                Intent intent = new Intent(MainActivity.this, SubActivity.class);

                // 실제 Activity를 이동시키는 구문
                startActivity(intent);
            }
        });
    }
}

- 해당 코드에서 핵심이 되는 부분입니다.

- findViewById() 메소드로 btn_move 속성에 대한 버튼을 찾은 이후, 클릭 이벤트가 발생했을 때 Intent() 메소드를 생성해 주어 첫 번째 매개변수로 현재 화면인 MainActivity 클래스, 클릭 후 화면 전환이 이루어질 SubActivity 클래스 인자를 넣어주게 되면 버튼 클릭 시 화면 Intent가 발생합니다.

- 마지막으로 startActivity() 메소드로 버튼 클릭이 발생했을 때 화면이 전환되도록 합니다.

 btn_move = findViewById(R.id.btn_move);
        btn_move.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // 두 개의 매개변수 : 현재 activity, 이동하고 싶은 activity
                Intent intent = new Intent(MainActivity.this, SubActivity.class);

                // 실제 Activity를 이동시키는 구문
                startActivity(intent);
            }
        });

<실행 결과 - 클릭 이전>

<실행 결과 - 클릭 이후 화면 Intent 발생>

4. ImageView & Toast.makeText() 메소드

(1) <ImageView>

- View를 구성하는 Front에서 이미지 레이아웃을 추가할 수 있는 위젯입니다.

- 이미지를 클릭했을 때 하단에 Toast message가 출력되도록 설정해 보겠습니다.

4-1. 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="ImageView 테스트입니다."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/et_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="by Android Studio"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/test"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher"/>

    </LinearLayout>
    
    <Button
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
    
</LinearLayout>

4-2. activity_main.xml에서 ImageView 생성, 위치 정렬하기

(1) 메인 <LinearLayout> 위젯 아래에 서브 타입으로 <LinearLayout>을 추가로 지정해 줍니다.

(2) 이미지를 보여주는 <ImageView> 위젯을 주고, android:layout_width, layout_height 속성을 통해 너비와 높이를 적절히 조절합니다.

(3) android:src 속성의 경우 Local에 저장된 이미지의 경로를 알려주어, 이미지를 사용할 수 있도록 합니다.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/test"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>

<실행 결과>

4-3. Toast message를 출력하기 위한 MainActivity.java

package com.example.imageviewtest;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    
    ImageView test;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        test = (ImageView)findViewById(R.id.test);
        test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Toast message가 생성되었습니다.", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

4-4. Toast.makeText(para1, para2, para3) 메소드 호출

(1) para1 : 첫 번째 전달인자

- getApplicaitonContext()로, MainActivity 클래스를 의미합니다

(2) para2 : 두 번째 전달인자

- Toast message에 출력할 텍스트

(3) para3 : 세 번째 전달인자

- LENGTH_SHORT 값으로 메시지를 잠시 짧은 시간 동안 출력하도록 함

- 해당 코드의 핵심이 되는 부분입니다.

- test 변수로 test라는 속성을 보유한 ImageView 위젯을 우선적으로 탐색합니다.

- 이후 클릭 이벤트 발생 시, Toast.makeText()를 호출하여 Toast message를 생성하도록 하고 마지막으로 show() 메소드로 최종적인 메시지가 출력되도록 합니다.

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

        test = (ImageView)findViewById(R.id.test);
        test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Toast message가 생성되었습니다.", Toast.LENGTH_SHORT).show();
            }
        });
    }

<실행 결과 - 이미지 클릭 이벤트 발생>

- 학부에서 수강했던 전공 수업 내용을 정리하는 포스팅입니다.

- 내용 중에서 오타 또는 잘못된 내용이 있을 시 지적해 주시기 바랍니다.

'전공 수업 > 모바일 프로그래밍(Android Studio)' 카테고리의 다른 글

[5주 차] - 안드로이드 주요 레이아웃 (LinearLayout, RelativeLayout, TableLayout, GridLayout, FrameLayout) (0)	2023.04.05
[4주 차] - 안드로이드 기본 위젯 (View 클래스, TextView, EditText, Button, ImageView & ImageButton, CheckBox, ToggleButton, RadioButton & RadioGroup) (0)	2023.03.26
Action Bar의 setTitle(), setIcon(), Intent 객체의 Uri.parse(), setImageResource() 메소드 정리 (0)	2023.03.24
[2주 차] - Android Studio 개발 환경 설정 (0)	2023.03.10
[1주 차] - 모바일 프로그래밍 수업 개요 (0)	2023.03.03

TwoJun's Tech Blog

[3주 차] - TextView, EditText & Button, Intent 화면 전환, ImageView & Toast.makeText() 메소드

1. TextView

2. EditText, Button

3. Intent(화면 전환하기)

4. ImageView & Toast.makeText() 메소드

'전공 수업 > 모바일 프로그래밍(Android Studio)' 카테고리의 다른 글

댓글

티스토리툴바

[3주 차] - TextView, EditText & Button, Intent 화면 전환, ImageView & Toast.makeText() 메소드

1. TextView

2. EditText, Button

3. Intent(화면 전환하기)

4. ImageView & Toast.makeText() 메소드

'전공 수업 > 모바일 프로그래밍(Android Studio)' 카테고리의 다른 글

관련글

댓글

티스토리툴바