1. 주제 구상
-여러가지 주제가 나온 가운데 디저트, 커피, 고양이가 남은 상황에서 디저트와 커피를 합쳐서 카페 메뉴 소개를 주제로 잡기로 함.
2. 역할 분담
페이지는 로그인, 회원가입, 메인페이지, 세부페이지, 마이페이지로 나누어서 나는 로그인과 회원가입 페이지를 작성하기로 하였다.
@깃헙: stash와 fetch에 대해 알게됨
-git stash:로컬에 임시저장
-git pull origin 브랜치이름
-git stash apply:저장해둔 코드를 불러옴
이 순서로 하여 pull을 해서 충돌이 심하게 발생한 경우 복구시킬 수 있음.
-git fetch 브랜치 이름: pull하기 전에 변경점을 미리 확인 할 수 있는 것
3. 디자인
-주로 사용할 색상들을 고름
-피그마를 이용하여 디자인
-디자인시 보통 4단위로 픽셀을 짜고 16이 기본이 된다는 사실을 알게 됨
-피그마에서 간격확인은 위젯 클릭 후 alt를 눌러 확인가능하다는 것을 알게됨
-프레임으로 묶는 방법은 ctrl + alt + g로 하는것을 알게됨.(해제는 ctrl + shift + g)
-로그인 페이지는 다른 팀원분이 디자인 해주셨다.
-회원가입 페이지는 내가 디자인 하였다.
-전체 디자인
4. 구현
1)폰트:shrinkhand폰트가 필요해서 res하위파일에 font를 생성하고 폰트파일을 받아 넣음
2)색상값: 주로 사용하는 색상들을 color파일 내에 추가
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="primary">#FFF1EBE7</color>
<color name="secondary">#FFE8DFCF</color>
<color name="teritary">#FFA79C8A</color>
<color name="highlight">#FF6C6053</color>
<color name="black_shade">#FF202020</color>
<color name="gray">#FFDDDFE4</color>
<color name="transparent">#00000000</color>
</resources>
3)유저 정보
-parcel을 상속받아 인텐트로 전달 가능하도록 함.
-data클래스로 구현
data class User(val name:String, val id:String, val pass:String, val introduce:String ): Parcelable {
constructor(parcel: Parcel) : this(
parcel.readString().toString(),
parcel.readString().toString(),
parcel.readString().toString(),
parcel.readString().toString()
)
override fun describeContents(): Int {
return 0
}
override fun writeToParcel(dest: Parcel, flags: Int) {
dest.writeString(name)
dest.writeString(id)
dest.writeString(pass)
dest.writeString(introduce)
}
companion object CREATOR : Parcelable.Creator<User> {
override fun createFromParcel(parcel: Parcel): User {
return User(parcel)
}
override fun newArray(size: Int): Array<User?> {
return arrayOfNulls(size)
}
}
}
4)로그인 페이지 UI구현
-회색 테두리 박스와 버튼 디자인은 drawable에 shape 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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".LogInActivity">
<TextView
android:id="@+id/login_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="90dp"
android:layout_marginTop="140dp"
android:layout_marginEnd="90dp"
android:text="@string/app_name"
android:textSize="36dp"
android:fontFamily="@font/shrikhand_regular"
android:textColor="@color/highlight"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/login_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text"
android:hint="@string/login_id"
android:paddingVertical="12dp"
android:paddingStart="16dp"
android:textSize="16sp"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="56dp"
android:background="@drawable/login_graybox"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/login_title" />
<EditText
android:id="@+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword"
android:textSize="16sp"
android:layout_marginTop="16dp"
android:layout_marginHorizontal="16dp"
android:paddingVertical="12dp"
android:paddingStart="16dp"
android:hint="@string/login_password"
android:background="@drawable/login_graybox"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/login_id" />
<android.widget.Button
android:id="@+id/login_loginbtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/login_loginbtn"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="16dp"
android:paddingVertical="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textSize="18sp"
android:textColor="@color/black"
android:textStyle="bold"
android:background="@drawable/login_loginbtn"
android:stateListAnimator="@null"
app:layout_constraintTop_toBottomOf="@+id/login_password" />
<LinearLayout
android:gravity="right"
android:paddingTop="12dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/login_loginbtn">
<android.widget.Button
android:id="@+id/login_signupbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/login_signupbtn"
android:textSize="14sp"
android:textColor="#818181"
android:background="@color/transparent"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
4)로그인 페이지 코드 구현
-회원가입한 유저 정보는 hashmap으로 관리
-회원가입시 가입후 돌아올때 가입정보를 받아오기 위해 registerForActivityResult를 이용
package com.harmony6.harmony_cafe
import android.app.Activity
import android.content.Intent
import android.os.Build
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.activity.result.contract.ActivityResultContracts
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
class LogInActivity : AppCompatActivity() {
//키를 아이디로 하는 해시맵으로 회원가입 유저 데이터들 관리
val users=HashMap<String,User>()
@RequiresApi(Build.VERSION_CODES.TIRAMISU)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_login)
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
insets
}
val editId=findViewById<EditText>(R.id.login_id)
val editPw=findViewById<EditText>(R.id.login_password)
val login=findViewById<Button>(R.id.login_loginbtn)
val signup=findViewById<Button>(R.id.login_signupbtn)
login.setOnClickListener{
val id=editId.text.toString().trim()
val pw=editPw.text.toString().trim()
if(id.isEmpty()||pw.isEmpty()){
Toast.makeText(this, "아이디와 패스워드 모두 입력해주세요.", Toast.LENGTH_SHORT).show()
return@setOnClickListener
}
if(!users.keys.contains(id)){
Toast.makeText(this, "가입되지 않은 아이디입니다.", Toast.LENGTH_SHORT).show()
return@setOnClickListener
}else if(users[id]!!.pass!=pw){
Toast.makeText(this,"비밀번호를 다시 입력해주세요.",Toast.LENGTH_SHORT).show()
return@setOnClickListener
}
val intent=Intent(this, HomeActivity::class.java)
intent.putExtra("user",users[id])
startActivity(intent)
}
val launcher=registerForActivityResult(ActivityResultContracts.StartActivityForResult()){
result->
if (result.resultCode == Activity.RESULT_OK){
val user: User? =result.data!!.getParcelableExtra("user", User::class.java)
if (user != null) {
users.put(user.id,user)
}
}
}
signup.setOnClickListener{
launcher.launch(Intent(this,SignUpActivity::class.java))
}
}
}
5)회원가입 페이지 UI구현
-앱바로 상단 구현
<?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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SignUpActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/signup_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/signup_title"
android:layout_gravity="center"
android:textSize="16sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.Toolbar>
<ImageView
android:id="@+id/imageView"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="@drawable/signup_person"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/signup_toolbar" />
<EditText
android:id="@+id/signup_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="40dp"
android:background="@drawable/login_graybox"
android:ems="10"
android:hint="@string/signup_name"
android:inputType="text"
android:paddingVertical="12dp"
android:paddingStart="16dp"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView" />
<LinearLayout
android:id="@+id/signup_wrapid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/signup_name">
<EditText
android:id="@+id/signup_id"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
android:background="@drawable/login_graybox"
android:ems="10"
android:hint="@string/login_id"
android:inputType="text"
android:paddingVertical="12dp"
android:paddingStart="16dp"
android:textSize="16sp" />
<android.widget.Button
android:id="@+id/signup_dupbtn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:background="@drawable/login_loginbtn"
android:text="중복 확인"
android:textStyle="bold"
android:textSize="16sp"/>
</LinearLayout>
<EditText
android:id="@+id/signup_pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="16dp"
android:background="@drawable/login_graybox"
android:ems="10"
android:hint="@string/login_password"
android:inputType="text"
android:paddingVertical="12dp"
android:paddingStart="16dp"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/signup_wrapid" />
<EditText
android:id="@+id/signup_introduce"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="68dp"
android:background="@drawable/login_graybox"
android:hint="@string/signup_introduce"
android:paddingVertical="12dp"
android:paddingStart="16dp"
android:textSize="16sp"
android:gravity="top"
app:layout_constraintBottom_toTopOf="@+id/signup_signupbtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/signup_pw" />
<android.widget.Button
android:id="@+id/signup_signupbtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@color/black"
android:textStyle="bold"
android:background="@drawable/login_loginbtn"
android:stateListAnimator="@null"
android:text="@string/signup_signupbtn"
android:layout_marginBottom="16dp"
android:layout_marginHorizontal="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
'코틀린 팀플2-카페메뉴소개' 카테고리의 다른 글
| 최종 완성 (0) | 2024.07.08 |
|---|---|
| 발표자료 작성 (0) | 2024.07.05 |
| 추천 가게 띄우기 (0) | 2024.07.04 |
| 회원가입 코드 구현 및 landscape, 다크모드, 다국어 적용 (0) | 2024.07.03 |