안드로이드 스튜디오 버튼 생성 및 화면 전환(배달의 민족 앱 만들어보기)

 

 

※ 이 프로젝트는 앱 개발 경험을 쌓기 위한 프로젝트이며 절대 상업적 용도로는 사용하지 않습니다. 

 

 

 

(+2020.01.17 수정 : 레이아웃 코드는 다음 포스팅을 참고해주세요. 코드가 깔끔하지 못합니다)

 

 

 

배달의민족 어플을 켜면 제일 먼저 보이는 

 

음식 종류 선택 버튼을 만들고 버튼을 눌렀을 때 해당 페이지로 이동하는 것까지 구현해보겠습니다.

 

새로운 프로젝트를 만들게되면 가장 먼저 눈에 보이는 버튼을 만드는 게 편하겠죠.

 

먼저 activity_main.xml에서 버튼을 생성해줍니다.

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

    <LinearLayout
        android:layout_width="410dp"
        android:layout_height="500dp"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="230dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="410dp"
            android:layout_height="100dp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="300dp"
            android:orientation="horizontal">


            <Button
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="한식" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="중식"/>

        </LinearLayout>


    </LinearLayout>




</androidx.constraintlayout.widget.ConstraintLayout>

 

<Button ~/>태그를 살펴보면 명령어가 직관적으로 되어있어서 이해하기 어렵지는 않습니다. 딱 보면 어떤 것을 지정해주는 지 이해하기 쉽습니다.

 

layout_margin은 버튼의 상하좌우 여백을 한꺼번에 동일하게 설정할 수 있습니다.

 

그다음 <LinearLayout ~/>에 대한 설명입니다.

여기서 제일 눈여겨 봐야 할 것은 android:orientation="vertical"과 android:orientation="horizontal"입니다.

 

혹시 vertical과 horizontal을 모르신다면 아래에 잘 설명되어 있는 포스팅 링크를 걸어드리겠습니다.

[Android] 안드로이드 - 리니어 레이아웃 (Linear Layout)

 

 

제 코드의 구조를 보면 vertical이 horizontal을 감싸고 있습니다. 이렇게 여러 개의 Linearlayout을 사용할 수도 있는데 이렇게 되면 버튼의 배열이 아래의 그림과 같아집니다.

  

지금 상태는 코드가 단순하지만 아래 코드처럼 한 겹만 더 추가하게되면

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

    <!--
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    -->

    <LinearLayout
        android:layout_width="410dp"
        android:layout_height="500dp"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="230dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="410dp"
            android:layout_height="100dp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="300dp"
            android:orientation="horizontal">


            <Button
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="한식" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="중식"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="410dp"
            android:layout_height="100dp"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="300dp"
            android:orientation="horizontal">


            <Button

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="한식" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:text="중식"/>

        </LinearLayout>


    </LinearLayout>




</androidx.constraintlayout.widget.ConstraintLayout>

 

아래 그림처럼 버튼이 배열됩니다.

 

제일 바깥의 초록색 칸이 앱 화면입니다. 이렇게 Linearlayout을 사용하면 버튼 등을 편리하게 배치할 수 있습니다.

 

여기까지 하고나면 안드로이드 스튜디오의 가상머신으로 어플을 실행했을 때 아래의 화면과 같습니다.

 

 

이제 버튼을 클릭하면 다른 페이지로 이동하도록 구현해보겠습니다. 

 

저는 아래의 포스팅을 참고하여 작성했습니다.

안드로이드 스튜디오 버튼 클릭 시 화면 전환하기 (Intent)

그리고 타이핑 하시다가 키워드가 빨간색이라면 무조건 Import 해주셔야 합니다. 

 

저는 한식 페이지를 만들었기 때문에 서브 페이지의 이름을 koreafoodpage.xml 이라고 지었습니다.

 

koreafoodpage.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
    <TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="한식 페이지입니다!"
        android:textSize="35dp"

    />

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

KoreaActivity.java

package com.example.badal;

import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class KoreaActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.koreafoodpage);
    }
}

 

 

MainActivity.java

package com.example.badal;

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 {

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


        Button imageButton = (Button) findViewById(R.id.btn1);
        imageButton.setOnClickListener(new View.OnClickListener() {

            //@Override
            public void onClick(View view) {
                Intent intent = new Intent(getApplicationContext(), KoreaActivity.class);
                startActivity(intent);
            }

        });
    }

}

 

 

마지막으로 Manifest 추가하는 것도 잊지 마세요.

 

실행하면 아래와 같습니다.

 

 

 

이것으로 이번 포스팅을 마치겠습니다.