Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[AN-UI] 홈 화면 UI 구현 #11

Merged
merged 11 commits into from
Jul 15, 2024
Merged

[AN-UI] 홈 화면 UI 구현 #11

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5b6abf5
ui: toolbar와 관련된 drawable 추가
kkosang Jul 13, 2024
b1a897d
ui: toolbar xml 작성
kkosang Jul 13, 2024
1cf0986
ui: toolbar 구현
kkosang Jul 13, 2024
18b6807
ui: home과 관련된 drawable 추가
kkosang Jul 14, 2024
f562935
ui: home xml 작성
kkosang Jul 14, 2024
c450c59
feat: 메뉴 클릭시 화면 이동
kkosang Jul 14, 2024
acf5036
chore: xml id 컨벤션
kkosang Jul 14, 2024
b8be8da
chore: 코드리뷰 반영
kkosang Jul 15, 2024
0830e74
Merge remote-tracking branch 'origin/an/develop' into an/feat/home_ui
murjune Jul 15, 2024
94acef4
ui: home drawable 추가
kkosang Jul 15, 2024
b6159a0
ui: 스타일 적용
murjune Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 42 additions & 4 deletions android/app/src/main/java/poke/rogue/helper/presentation/home/HomeActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,57 @@
package poke.rogue.helper.presentation.home

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import poke.rogue.helper.R
import poke.rogue.helper.databinding.ActivityHomeBinding
import poke.rogue.helper.presentation.base.BindingActivity
import poke.rogue.helper.presentation.type.TypeActivity
import poke.rogue.helper.presentation.util.context.stringOf
import poke.rogue.helper.presentation.util.context.toast

class HomeActivity : BindingActivity<ActivityHomeBinding>(R.layout.activity_home) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding.tvTmp.setOnClickListener {
Intent(this, TypeActivity::class.java).apply {
startActivity(this)
setSupportActionBar(binding.toolbarHome.toolbar)
supportActionBar?.setDisplayShowTitleEnabled(false)

initClickListeners()
}

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.menu_toolbar, menu)
return super.onCreateOptionsMenu(menu)
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.item_toolbar_pokerogue -> {
navigateToPokeRogue()
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

34 ~ 37 번 줄이 initClickListeners 의 binding.ibtnHomeLogo.setOnClickListener 블록 내부와 완전히 겹치는 것 같아요.

toast(stringOf(R.string.toolbar_pokerogue))
val intent = Intent(Intent.ACTION_VIEW, Uri.parse(stringOf(R.string.home_pokerogue_url)))
startActivity(intent)

함수로 빼서 사용하는게 좋을 것 같아요.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

동감합니다


R.id.item_toolbar_feedback -> {
toast(R.string.toolbar_feedback)
}
}
return true
}

private fun initClickListeners() {
binding.apply {
ibtnHomeLogo.setOnClickListener { navigateToPokeRogue() }
cvHomeType.setOnClickListener { toast("상성 페이지로 이동") }
cvHomeDex.setOnClickListener { toast("도감 페이지로 이동") }
/* cvHomeAbility.setOnClickListener { toast("특성 페이지로 이동") }
cvHomeTip.setOnClickListener { toast("꿀팁 페이지로 이동") }*/
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

binding.apply {
          cvHomeType.setOnClickListener { toast("상성 페이지로 이동") }
          cvHomeDex.setOnClickListener { toast("도감 페이지로 이동") }
          cvHomeAbility.setOnClickListener { toast("특성 페이지로 이동") }
          cvHomeTip.setOnClickListener { toast("꿀팁 페이지로 이동") }
}

이런 식으로 사용하면 binding 의 반복을 줄일 수 있습니다

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분 dataBinding으로 바뀌면 사라질 것입니다.

}

private fun navigateToPokeRogue() {
toast(R.string.toolbar_pokerogue)
val intent =
Intent(Intent.ACTION_VIEW, Uri.parse(stringOf(R.string.home_pokerogue_url)))
startActivity(intent)
}
}
13 changes: 13 additions & 0 deletions android/app/src/main/res/drawable/ic_toolbar_back.xml
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안드로이드 스튜디오의 vector asset 을 사용해서 만드셨나요?
저는 안드로이드 스튜디오의 vector asset 을 사용해서 뷰를 구현했습니다.

리빙 포인트: vector asset 에서 기본 icon 들이 별로 안 보인다면
/Users/맥 사용자 이름/Library/Android/sdk/icons/material 에서
icons_metadata.txt 을 삭제하면 보인다.

저는 이거 안보여서 찾아 해매느라 고생했어요.. ㅋ

Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:tint="#AFAFAF"
android:viewportWidth="24"
android:viewportHeight="24">

<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />

</vector>
5 changes: 5 additions & 0 deletions android/app/src/main/res/drawable/ic_toolbar_nav.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="27.84dp" android:viewportHeight="29" android:viewportWidth="25" android:width="24dp">

<path android:fillColor="#AFAFAF" android:pathData="M14.5,12C14.5,13.105 13.605,14 12.5,14C11.395,14 10.5,13.105 10.5,12C10.5,10.895 11.395,10 12.5,10C13.605,10 14.5,10.895 14.5,12ZM14.5,19C14.5,20.105 13.605,21 12.5,21C11.395,21 10.5,20.105 10.5,19C10.5,17.895 11.395,17 12.5,17C13.605,17 14.5,17.895 14.5,19ZM14.5,5C14.5,6.105 13.605,7 12.5,7C11.395,7 10.5,6.105 10.5,5C10.5,3.895 11.395,3 12.5,3C13.605,3 14.5,3.895 14.5,5Z"/>

</vector>
Binary file added android/app/src/main/res/drawable/img_home_ability.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added android/app/src/main/res/drawable/img_home_dex.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added android/app/src/main/res/drawable/img_home_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added android/app/src/main/res/drawable/img_home_temp1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added android/app/src/main/res/drawable/img_home_tip.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
205 changes: 198 additions & 7 deletions android/app/src/main/res/layout/activity_home.xml
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제 avd 로 돌렸을 때 화면이 이렇게 나와요.
image

Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,208 @@
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
tools:context=".presentation.home.HomeActivity">

<TextView
android:id="@+id/tv_tmp"
<include
android:id="@+id/toolbar_home"
layout="@layout/toolbar" />

<ImageButton
android:id="@+id/ibtn_home_logo"
android:layout_width="232dp"
android:layout_height="108dp"
android:layout_marginTop="75dp"
android:background="@color/black"
android:src="@drawable/img_home_logo"
app:layout_constraintEnd_toEndOf="@id/gl_end"
app:layout_constraintStart_toStartOf="@id/gl_start"
app:layout_constraintTop_toTopOf="parent" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

constraint 가 잘못 설정되어 있는 것 같아요.

app:layout_constraintTop_toBottomOf="@id/toolbar_home"
로 설정되는 게 자연스럽지 않을까요?


<GridLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:columnCount="2"
android:padding="12dp"
android:rowCount="2"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toEndOf="@id/gl_end"
app:layout_constraintStart_toStartOf="@id/gl_start"
app:layout_constraintTop_toBottomOf="@+id/gl_top">

<androidx.cardview.widget.CardView
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

include 로 빼주시면 사용하기 더 수월할 것 같습니다!

android:id="@+id/cv_home_type"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_margin="6dp"
android:backgroundTint="@color/white"
app:cardCornerRadius="16dp">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/iv_home_type"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/img_home_temp1" />

<TextView
android:id="@+id/tv_home_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:text="@string/home_menu_type"
android:textAlignment="center" />
</LinearLayout>
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/cv_home_dex"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_margin="6dp"
android:backgroundTint="@color/white"
app:cardCornerRadius="16dp">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

layout_gravity 가 center 가 아닌, center_vertical|center_horizontal 인 이유가 있을까요?

android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/iv_home_dex"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/img_home_dex" />

<TextView
android:id="@+id/tv_home_dex"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:text="@string/home_menu_dex"
android:textAlignment="center" />
</LinearLayout>
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/cv_home_ability"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_margin="6dp"
android:backgroundTint="@color/white"
app:cardCornerRadius="16dp">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/iv_home_ability"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/img_home_ability" />

<TextView
android:id="@+id/tv_home_ability"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:text="@string/home_menu_ability"
android:textAlignment="center" />
</LinearLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/cv_home_tip"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_margin="6dp"
android:backgroundTint="@color/white"
app:cardCornerRadius="16dp">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/iv_home_tip"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/img_home_tip" />

<TextView
android:id="@+id/tv_home_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="12dp"
android:text="@string/home_menu_tip"
android:textAlignment="center" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>

<androidx.constraintlayout.widget.Guideline
android:id="@+id/gl_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:orientation="vertical"
app:layout_constraintGuide_begin="25dp" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/gl_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="25dp" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/gl_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="200dp" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/gl_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="500dp" />

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
34 changes: 34 additions & 0 deletions android/app/src/main/res/layout/toolbar.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data>

</data>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

toolbar 를 include 로 만드셨군요!
ConstraintLayout 의 layout_height 가 wrap 이어야 할 것 같아요.


<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/black"
app:layout_constraintTop_toTopOf="parent">

<TextView
android:id="@+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/app_name"
android:textColor="#AFAFAF"
android:textSize="20sp"
android:textStyle="bold" />

</androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>
9 changes: 9 additions & 0 deletions android/app/src/main/res/menu/menu_toolbar.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item_toolbar_pokerogue"
android:title="@string/toolbar_pokerogue" />
<item
android:id="@+id/item_toolbar_feedback"
android:title="@string/toolbar_feedback" />
</menu>
2 changes: 1 addition & 1 deletion android/app/src/main/res/values-night/themes.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@
<!-- Customize your dark theme here. -->
<!-- <item name="colorPrimary">@color/my_dark_primary</item> -->
</style>
</resources>
</resources>
10 changes: 9 additions & 1 deletion android/app/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
<resources>
<string name="app_name">PokeRogueHelper</string>
<!-- type -->
<string name="type_my_type_title">내 타입</string>
<string name="type_opponent_type_title">상대 타입</string>
<string name="type_result_title">상성 결과</string>
<string name="type_result_sub_title">* 1배는 표시되지 않습니다.</string>
<string name="type_item_result_subject_mine">%s 이(가)</string>
<string name="type_item_result_subject_opponent">%s 에게</string>
<string name="type_item_result_tail">%s 타입</string>

<!-- home -->
<string name="toolbar_pokerogue">포켓로그 바로가기</string>
<string name="toolbar_feedback">피드백 보내기</string>
<string name="home_pokerogue_url">https://pokerogue.net/</string>
<string name="home_menu_type">상성 보기</string>
<string name="home_menu_dex">포켓몬 도감</string>
<string name="home_menu_ability">특성 도감</string>
<string name="home_menu_tip">꿀팁</string>
</resources>
Loading