#6 rough_ui/로그인 화면 : 로그인 화면 및 가이드 온보딩 화면 📰

hometerview · Jul 28, 2022 · 0703931 · 0703931
1 parent b998c62
commit 0703931
Show file tree

Hide file tree

Showing 16 changed files with 163 additions and 35 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -68,7 +68,7 @@ dependencies {
     implementation "com.google.dagger:hilt-android:$hilt_version"
     kapt "com.google.dagger:hilt-android-compiler:$hilt_version"
 
-
+    implementation "com.tbuonomo:dotsindicator:$dotsindicator_version"
     implementation "com.kakao.sdk:v2-user:$kakao_version"
 
     testImplementation "junit:junit:$junit_version"

diff --git a/app/src/main/java/com/ftw/hometerview/adapter/AnimationAdapter.kt b/app/src/main/java/com/ftw/hometerview/adapter/AnimationAdapter.kt
@@ -0,0 +1,34 @@
+package com.ftw.hometerview.adapter
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import com.ftw.hometerview.R
+
+class AnimationAdapter(var guideImgaeList: List<Int>, var guideTextList: List<String>) : RecyclerView.Adapter<AnimationAdapter.AnimationViewHolder>() {
+
+    inner class AnimationViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
+        var imageViewIcon = itemView.findViewById<ImageView>(R.id.imageView_icon)
+        var guideText = itemView.findViewById<TextView>(R.id.guide_text)
+
+        fun onBind(res: Int, text: String) {
+            imageViewIcon.setImageResource(res)
+            guideText.text = text
+        }
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AnimationViewHolder {
+        var view = LayoutInflater.from(parent.context).inflate(R.layout.list_item_icon, parent, false)
+        return AnimationViewHolder(view)
+    }
+
+    override fun onBindViewHolder(holder: AnimationViewHolder, position: Int) {
+        holder.onBind(guideImgaeList[position], guideTextList[position])
+    }
+
+    override fun getItemCount(): Int = guideImgaeList.size
+
+}
diff --git a/app/src/main/java/com/ftw/hometerview/di/datasource/LoginDataSourceModule.kt b/app/src/main/java/com/ftw/hometerview/di/datasource/LoginDataSourceModule.kt
@@ -1,8 +1,8 @@
 package com.ftw.hometerview.di.datasource
 
 import com.ftw.data.datasource.LoginDataSource
+import com.ftw.data.network.datasource.LoginRemoteDataSource
 import com.ftw.data.remote.api.LoginAPI
-import com.ftw.data.remote.datasource.LoginRemoteDataSource
 import dagger.Module
 import dagger.Provides
 import dagger.hilt.InstallIn

diff --git a/app/src/main/java/com/ftw/hometerview/ui/login/LoginActivity.kt b/app/src/main/java/com/ftw/hometerview/ui/login/LoginActivity.kt
@@ -5,6 +5,9 @@ import android.os.Bundle
 import android.util.Log
 import android.widget.Toast
 import androidx.appcompat.app.AppCompatActivity
+import androidx.viewpager2.widget.ViewPager2
+import com.ftw.hometerview.R
+import com.ftw.hometerview.adapter.AnimationAdapter
 import com.ftw.hometerview.databinding.ActivityLoginBinding
 import com.ftw.hometerview.ui.main.MainActivity
 import com.kakao.sdk.auth.model.OAuthToken
@@ -29,12 +32,36 @@ class LoginActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
+        guideSetting()
+
         binding = ActivityLoginBinding.inflate(layoutInflater)
         setContentView(binding.root)
 
         binding.kakaoLoginButton.setOnClickListener {
             kakaoLogin()
         }
+
+    }
+
+    private fun guideSetting() {
+
+        // 가이드에 사용 될 이미지, 문구 
+        val guideImgaeList = listOf(R.drawable.icon1, R.drawable.icon2, R.drawable.icon3)
+        val guideTextList = listOf(getString(R.string.guide_text1), getString(R.string.guide_text2), getString(R.string.guide_text3))
+
+        binding.viewpager.setPageTransformer { page, position ->
+            page.translationX = position
+        }
+
+        // 몇 개의 페이지를 미리 로드 해둘것인지
+        binding.viewpager.offscreenPageLimit = 1
+        // 어댑터 생성 (Animation꺼 재활용 했습니다)
+        binding.viewpager.adapter = AnimationAdapter(guideImgaeList, guideTextList)
+        // 방향을 가로로
+        binding.viewpager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
+
+        // indicator 설정
+        binding.dotsIndicator.setViewPager2(binding.viewpager)
     }
 
     private fun kakaoLogin() {

diff --git a/app/src/main/res/drawable/icon1.png b/app/src/main/res/drawable/icon1.png
diff --git a/app/src/main/res/drawable/icon2.png b/app/src/main/res/drawable/icon2.png
diff --git a/app/src/main/res/drawable/icon3.png b/app/src/main/res/drawable/icon3.png
diff --git a/app/src/main/res/layout/activity_login.xml b/app/src/main/res/layout/activity_login.xml
@@ -8,11 +8,51 @@
         android:layout_height="match_parent"
         tools:context=".ui.login.LoginActivity">
 
+        <TextView
+            android:id="@+id/go_to_next"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/dp_size_32"
+            android:layout_marginEnd="@dimen/dp_size_16"
+            android:text="건너뛰기"
+            android:textStyle="bold"
+            android:textColor="@color/black"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/viewpager"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/dp_size_400"
+            android:layout_marginTop="@dimen/dp_size_16"
+            app:layout_constraintBottom_toTopOf="@+id/dots_indicator"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/go_to_next" />
+
+        <com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
+            android:id="@+id/dots_indicator"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:layout_marginTop="@dimen/dp_size_24"
+            app:dampingRatio="0.5"
+            app:dotsColor="@color/blue01"
+            app:dotsStrokeColor="@color/blue01"
+            app:dotsCornerRadius="@dimen/dp_size_20"
+            app:dotsSize="@dimen/dp_size_10"
+            app:dotsSpacing="@dimen/dp_size_6"
+            app:dotsStrokeWidth="@dimen/dp_size_1"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/viewpager"
+            app:stiffness="300" />
+
         <androidx.cardview.widget.CardView
             android:id="@+id/kakao_login_button_box"
             android:layout_height="wrap_content"
             android:layout_width="wrap_content"
-            android:layout_marginBottom="@dimen/kakao_login_button_box_bottom_margin"
+            android:layout_marginBottom="@dimen/dp_size_32"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent">

diff --git a/app/src/main/res/layout/activity_splash.xml b/app/src/main/res/layout/activity_splash.xml
@@ -6,35 +6,5 @@
     android:layout_height="match_parent"
     tools:context=".ui.splash.SplashActivity">
 
-    <Button
-        android:id="@+id/button"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="쓰기"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@+id/button2"
-        app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
 
-    <Button
-        android:id="@+id/button2"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="읽기"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_bias="0.5"
-        app:layout_constraintStart_toEndOf="@+id/button"
-        app:layout_constraintTop_toTopOf="parent" />
-
-    <TextView
-        android:id="@+id/textView"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="TextView"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/button" />
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/list_item_icon.xml b/app/src/main/res/layout/list_item_icon.xml
@@ -0,0 +1,32 @@
+<?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">
+
+    <ImageView
+        android:id="@+id/imageView_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/guide_text"
+        app:srcCompat="@drawable/icon1" />
+
+    <TextView
+        android:id="@+id/guide_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/dp_size_24"
+        android:layout_marginEnd="@dimen/dp_size_24"
+        android:textAlignment="center"
+        android:textSize="@dimen/guide_text_size"
+        android:textStyle="bold"
+        android:textColor="@color/black"
+        app:layout_constraintBottom_toTopOf="@+id/imageView_icon"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -7,4 +7,9 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+
+
+    <color name="blue01">#0052FF</color>
+    <color name="gray01">#D9D9D9</color>
+
 </resources>
diff --git a/app/src/main/res/values/dimen.xml b/app/src/main/res/values/dimen.xml
@@ -2,6 +2,8 @@
 <resources>
 
     <!-- Text size -->
+    <dimen name="guide_text_size">20sp</dimen>
+
     <dimen name="title_text_size">36sp</dimen>
     <dimen name="default_text_size">18sp</dimen>
     <dimen name="button_text_size">24sp</dimen>
@@ -12,11 +14,18 @@
 
     <!-- dp size -->
     <dimen name="fragment_height">0dp</dimen>
+    <dimen name="dp_size_1">1dp</dimen>
     <dimen name="dp_size_2">2dp</dimen>
     <dimen name="dp_size_4">4dp</dimen>
+    <dimen name="dp_size_6">6dp</dimen>
     <dimen name="dp_size_8">8dp</dimen>
     <dimen name="dp_size_10">10dp</dimen>
     <dimen name="dp_size_14">14dp</dimen>
+    <dimen name="dp_size_16">16dp</dimen>
+    <dimen name="dp_size_20">20dp</dimen>
+    <dimen name="dp_size_24">24dp</dimen>
+    <dimen name="dp_size_32">32dp</dimen>
+    <dimen name="dp_size_400">400dp</dimen>
 
     <!-- margin size -->
     <dimen name="margin_size_2">2dp</dimen>

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -2,4 +2,8 @@
     <string name="app_name">hometerview</string>
 
     <string name="get_token_error">저장된 토큰이 없습니다.</string>
+    <string name="guide_text1">나랑 같은 지역으로 출근하는 사람들은 어디에 살고있을까?</string>
+    <string name="guide_text2">집터뷰는 같은 지하철역으로 출근하는 사람들이 많이 사는 지역을 추천해줘요!</string>
+    <string name="guide_text3">다음 집은 어디로 이사가야 스트레스 안 받고 출퇴근 할 수 있을까?</string>
+
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
@@ -1,6 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
-    <style name="Theme.Hometerview" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="Theme.Hometerview" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <!-- Primary brand color. -->
         <item name="colorPrimary">@color/purple_500</item>
         <item name="colorPrimaryVariant">@color/purple_700</item>

diff --git a/data/src/main/java/com/ftw/data/network/datasource/LoginRemoteDataSource.kt b/data/src/main/java/com/ftw/data/network/datasource/LoginRemoteDataSource.kt
@@ -1,4 +1,10 @@
 package com.ftw.data.network.datasource
 
-class LoginRemoteDataSource {
+import com.ftw.data.datasource.LoginDataSource
+import com.ftw.data.remote.api.LoginAPI
+
+class LoginRemoteDataSource(private val api: LoginAPI): LoginDataSource {
+    override fun login(token: String): Result<String> {
+        TODO("Not yet implemented")
+    }
 }
diff --git a/versions.gradle b/versions.gradle
@@ -24,5 +24,6 @@ ext {
     android_junit_version = '1.1.3'
     android_espresso_core_version = '3.4.0'
 
+    dotsindicator_version = '4.3'
 
 }