product 화면 구현

product 화면은 애플스토어처럼 만들기로 했다.

이미지를 res/drawable 폴더에 저장한 다음, 불러올 수 있도록 하였다.

activity_product.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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=".ProductActivity">

    <ScrollView
        android:id="@+id/productScroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_gravity="center"
        android:fillViewport="true">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/macbook"
                android:layout_width="200dp"
                android:layout_height="180dp"
                android:layout_row="1"
                android:layout_column="0"
                android:layout_marginTop="20dp"
                app:srcCompat="@drawable/macbook_air" />

            <TextView
                android:id="@+id/macbookText"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_row="1"
                android:layout_column="1"
                android:layout_marginTop="40dp"
                android:text="@string/macbookText"
                android:textAlignment="center"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/airpodsMax"
                android:layout_width="200dp"
                android:layout_height="180dp"
                android:layout_row="2"
                android:layout_column="0"
                app:srcCompat="@drawable/airpods_max" />

            <TextView
                android:id="@+id/airpodsMaxText"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="1"
                android:layout_marginTop="20dp"
                android:text="@string/airpodsMaxText"
                android:textAlignment="center"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/ipad"
                android:layout_width="200dp"
                android:layout_height="180dp"
                android:layout_row="3"
                android:layout_column="0"
                app:srcCompat="@drawable/ipad_pro_11" />

            <TextView
                android:id="@+id/iPadText"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="1"
                android:layout_marginTop="20dp"
                android:text="@string/iPadText"
                android:textAlignment="center"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/iphone"
                android:layout_width="200dp"
                android:layout_height="180dp"
                android:layout_row="4"
                android:layout_column="0"
                app:srcCompat="@drawable/iphone14" />

            <TextView
                android:id="@+id/iPhoneText"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="1"
                android:layout_marginTop="20dp"
                android:text="@string/iPhoneText"
                android:textAlignment="center"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/watch"
                android:layout_width="200dp"
                android:layout_height="180dp"
                android:layout_row="5"
                android:layout_column="0"
                app:srcCompat="@drawable/watch_ultra" />

            <TextView
                android:id="@+id/watchText"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_row="5"
                android:layout_column="1"
                android:layout_marginTop="20dp"
                android:text="@string/watchText"
                android:textAlignment="center"
                android:textStyle="bold" />

            <Button
                android:id="@+id/btnInfo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_row="6"
                android:layout_column="0"
                android:layout_columnSpan="2"
                android:text="회원정보" />

        </GridLayout>

    </ScrollView>

</GridLayout>

ScrollView를 사용하여 화면을 움직일 수 있도록 하였다.

GirdLayout을 사용하여 사진과 글을 넣었고, 비율이 맞춰지도록 설정하였다. 마지막에는 btnInfo 를 넣었는데, 이 값은 로그인을 하고 클릭했을 경우 회원정보를 보여주고, 로그인을 안하고 클릭했을 경우(main화면에서 이동)에는 회원가입을 하도록 message를 띄울 것이다.

ProductActivity.java

package com.example.myapp;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

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

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;

public class ProductActivity extends MainActivity {

    Button btnInfo;
    String id;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_product);
        btnInfo = (Button) findViewById(R.id.btnInfo);

        //로그인 정보 받기
        Intent intent = getIntent();
        id = intent.getExtras().getString("intentId");

        //회원정보 버튼 눌렀을 경우
        btnInfo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //로그인 안했을 경우
                if(id == null){
                    //dialog 띄우기
                    AlertDialog.Builder builder = new AlertDialog.Builder(ProductActivity.this);
                    builder.setTitle("로그인 선택");
                    builder.setMessage("회원가입을 하시겠습니까?");

                    //예 누르면 회원가입 페이지로 이동
                    builder.setPositiveButton("예",
                            new DialogInterface.OnClickListener() {
                                public void onClick(DialogInterface dialog, int which) {
                                    Intent intent = new Intent(getApplicationContext(), joinActivity.class);
                                    startActivity(intent);
                                }
                            });
                    builder.show();
                }
                else{
                    //info activity로 넘어감
                    Intent intent = new Intent(getApplicationContext(),
                            InfoActivity.class);
                    intent.putExtra("intentId", id);
                    startActivity(intent);
                }
            }
        });
    }
}

AlertDialog 를 사용하여 회원가입을 할 수 있도록 구현하였다.

또한, 로그인 값을 보여주기 위해서는 intent를 넘길 때 id값도 넘겨야 함을 알고 putExtra 를 사용하여 id값을 intent를 넘길 때마다 같이 보내주었다.

회원정보 화면 구현