[공통][New] 튜토리얼 화면 GUI 적용

app/src/main/java/kr/co/zumo/app/lifeplus/activity/TutorialActivity.java

@@ -6,14 +6,15 @@ package kr.co.zumo.app.lifeplus.activity;
 import android.os.Bundle;
 import android.support.design.widget.TabLayout;
 import android.support.v4.view.ViewPager;
+import android.view.View;
 
 import kr.co.zumo.app.R;
 import kr.co.zumo.app.lifeplus.manager.ActionBarManager;
-import kr.co.zumo.app.lifeplus.view.ITutorialView;
 import kr.co.zumo.app.lifeplus.model.TutorialModel;
-import kr.co.zumo.app.lifeplus.view.presenter.TutorialPresenter;
 import kr.co.zumo.app.lifeplus.supervisor.DialogHelper;
+import kr.co.zumo.app.lifeplus.view.ITutorialView;
 import kr.co.zumo.app.lifeplus.view.fragment.tutorial.TutorialPagerAdapter;
+import kr.co.zumo.app.lifeplus.view.presenter.TutorialPresenter;
 
 /**
  * TutorialActivity
@@ -27,6 +28,7 @@ import kr.co.zumo.app.lifeplus.view.fragment.tutorial.TutorialPagerAdapter;
  */
 public class TutorialActivity extends ActivityBase implements ITutorialView {
 
+  private View view;
   private TutorialPagerAdapter tutorialPagerAdapter;
   private ViewPager viewPager;
   private TabLayout tabLayout;
@@ -34,19 +36,22 @@ public class TutorialActivity extends ActivityBase implements ITutorialView {
   @Override
   void onAfterCreate(Bundle savedInstanceState) {
 
-    setContentView(R.layout.fragment_tutorial);
-
+    setContentView(R.layout.activity_tutorial);
     DialogHelper.getInstance().setFragmentManager(getSupportFragmentManager());
 
     presenter = new TutorialPresenter(new TutorialModel(), this);
 
+    view = (View) findViewById(R.id.tutorial_bottom_layout);
     viewPager = (ViewPager) findViewById(R.id.tutorial_view_pager);
     tabLayout = (TabLayout) findViewById(R.id.tutorial_tab_layout);
 
     tutorialPagerAdapter = new TutorialPagerAdapter(this);
     tutorialPagerAdapter.setPresenter(presenter);
+    tutorialPagerAdapter.setBottomView(view);
     tabLayout.setupWithViewPager(viewPager, true);
     viewPager.setAdapter(tutorialPagerAdapter);
+
+
   }
 
   @Override

app/src/main/java/kr/co/zumo/app/lifeplus/view/fragment/tutorial/TutorialPagerAdapter.java

@@ -7,12 +7,10 @@ import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
-import android.widget.TextView;
+import android.widget.ImageView;
 
 import kr.co.zumo.app.R;
 import kr.co.zumo.app.lifeplus.view.presenter.Presenter;
-import kr.co.zumo.app.lifeplus.view.command.TutorialCommand;
-import kr.co.zumo.app.lifeplus.view.presenter.Event;
 
 /**
  * TutorialPagerAdapter
@@ -27,6 +25,8 @@ import kr.co.zumo.app.lifeplus.view.presenter.Event;
  */
 public class TutorialPagerAdapter extends PagerAdapter {
 
+  private View view;
+  private View bottomView;
   private Presenter presenter;
   private LayoutInflater layoutInflater;
   private static final int VIEW_COUNT = 5;
@@ -44,6 +44,10 @@ public class TutorialPagerAdapter extends PagerAdapter {
     layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
   }
 
+  public void setBottomView(View view) {
+    bottomView = view;
+  }
+
   /**
    * viewPager의 item 갯수 return
    *
@@ -79,41 +83,40 @@ public class TutorialPagerAdapter extends PagerAdapter {
   @Override
   public Object instantiateItem(@NonNull ViewGroup container, int position) {
 
-    Log.e("APP#  TutorialPagerAdapter | instantiateItem", "|" + "position" + position);
-    View view = layoutInflater.inflate(R.layout.tutorial_layout, container, false);
-    TextView buttonTutorial1 = (TextView) view.findViewById(R.id.button1_tutorial);
-    TextView buttonTutorial2 = (TextView) view.findViewById(R.id.button2_tutorial);
+    view = layoutInflater.inflate(R.layout.tutorial_layout, container, false);
+    Log.e("APP#  TutorialPagerAdapter | instantiateItem", "|" + position);
+    ImageView imageViewTutorial = (ImageView) view.findViewById(R.id.image_view_tutorial);
+
+    switch (position) {
+      case 0:
+        bottomView.setVisibility(View.VISIBLE);
+        imageViewTutorial.setImageResource(R.drawable.tutorial_image1);
+        break;
+      case 1:
+        bottomView.setVisibility(View.VISIBLE);
+        imageViewTutorial.setImageResource(R.drawable.tutorial_image2);
+        break;
+      case 2:
+        bottomView.setVisibility(View.VISIBLE);
+        imageViewTutorial.setImageResource(R.drawable.tutorial_image3);
+        break;
+      case 3:
+        bottomView.setVisibility(View.VISIBLE);
+        imageViewTutorial.setImageResource(R.drawable.tutorial_image4);
+        break;
+      case 4:
+        //하단 바 사라짐
+        bottomView.setVisibility(View.GONE);
+        view = layoutInflater.inflate(R.layout.tutorial_last, container, false);
+        break;
+      default:
+        break;
 
-    if (position == 4) {
-      buttonTutorial1.setVisibility(View.INVISIBLE);
-      buttonTutorial2.setText("닫기");
-    }
 
-    buttonTutorial1.setOnClickListener(new View.OnClickListener() {
-      @Override
-      public void onClick(View view) {
-        presenter.onCommand(new TutorialCommand(Event.TUTORIAL_CLOSE));
-      }
-    });
-
-    if (buttonTutorial2.getText().equals("다음")) {
-      buttonTutorial2.setOnClickListener(new View.OnClickListener() {
-        @Override
-        public void onClick(View view) {
-          presenter.onCommand(new TutorialCommand(Event.TUTORIAL_NEXT));
-        }
-      });
-    }
-    else {
-      buttonTutorial2.setOnClickListener(new View.OnClickListener() {
-        @Override
-        public void onClick(View view) {
-          presenter.onCommand(new TutorialCommand(Event.TUTORIAL_CLOSE));
-        }
-      });
     }
 
     container.addView(view);
+
     return view;
   }
 

app/src/main/res/drawable/tab_indicator_active.xml

@@ -3,7 +3,7 @@
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:innerRadius="0dp"
   android:shape="ring"
-  android:thickness="4dp"
+  android:thickness="6dp"
   android:useLevel="false">
   <solid android:color="@color/black"/>
 </shape>

app/src/main/res/drawable/tab_indicator_inactive.xml

@@ -4,7 +4,7 @@
     <shape
       android:innerRadius="0dp"
       android:shape="ring"
-      android:thickness="2dp"
+      android:thickness="6dp"
       android:useLevel="false">
       <solid android:color="@android:color/darker_gray"/>
     </shape>

app/src/main/res/layout/fragment_tutorial.xml

@@ -7,23 +7,26 @@
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
-  tools:context=".lifeplus.view.fragment.tutorial.TutorialFragment">
+  tools:context="kr.co.zumo.app.lifeplus.activity.TutorialActivity">
 
   <android.support.v4.view.ViewPager
     android:id="@+id/tutorial_view_pager"
     android:layout_width="match_parent"
-    android:layout_height="518dp"
+    android:layout_height="match_parent"
     android:layout_alignParentBottom="true"
     android:layout_alignParentStart="true"
     app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
+
   <android.support.design.widget.TabLayout
     android:id="@+id/tutorial_tab_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentStart="true"
     android:layout_alignParentTop="true"
+    app:tabBackground="@drawable/tab_selector"
     app:tabGravity="center"
-    app:tabIndicatorHeight="0dp"
-    app:tabBackground="@drawable/tab_selector"/>
+    app:tabIndicatorHeight="0dp"/>
+
+  <include layout="@layout/tutorial_bottom_layout"/>
 
 </RelativeLayout>

app/src/main/res/layout/tutorial_bottom_layout.xml

@@ -1,40 +1,48 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
+  android:id="@+id/tutorial_bottom_layout"
   android:layout_width="match_parent"
-  android:layout_height="0dp"
-  android:layout_weight="1"
-  android:background="@color/black"
-  android:orientation="horizontal"
-  android:weightSum="4"
+  android:layout_height="match_parent"
+  android:gravity="bottom"
+  android:orientation="vertical"
   >
 
-  <TextView
-    android:id="@+id/button1_tutorial"
-    android:layout_width="0dp"
-    android:layout_height="wrap_content"
-    android:layout_weight="2"
-    android:paddingTop="5dp"
-    android:paddingBottom="5dp"
-    android:paddingLeft="10dp"
-    android:text="@string/tutorial_bottom_jump"
-    android:textAlignment="textStart"
-    android:textColor="@color/white"
-    android:textSize="20dp"
-    />
+  <LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="48dp"
+    android:layout_gravity="bottom"
+    android:background="@color/black"
+    android:gravity="bottom"
+    android:orientation="horizontal"
+    android:weightSum="4"
+    >
 
-  <TextView
-    android:id="@+id/button2_tutorial"
-    android:layout_width="0dp"
-    android:layout_height="wrap_content"
-    android:layout_weight="2"
-    android:paddingTop="5dp"
-    android:paddingBottom="5dp"
-    android:paddingRight="10dp"
-    android:text="@string/tutorial_bottom_next"
-    android:textAlignment="textEnd"
-    android:textColor="@color/white"
-    android:textSize="20dp"
-    />
 
+    <TextView
+      android:id="@+id/button1_tutorial"
+      android:layout_width="0dp"
+      android:layout_height="wrap_content"
+      android:layout_marginLeft="28dp"
+      android:layout_marginTop="13.7dp"
+      android:layout_weight="2"
+      android:text="@string/tutorial_bottom_jump"
+      android:textAlignment="textStart"
+      android:textColor="@color/white"
+      android:textSize="18dp"
+      />
+
+    <TextView
+      android:id="@+id/button2_tutorial"
+      android:layout_width="0dp"
+      android:layout_height="wrap_content"
+      android:layout_marginRight="28dp"
+      android:layout_marginTop="13.7dp"
+      android:layout_weight="2"
+      android:text="@string/tutorial_bottom_next"
+      android:textAlignment="textEnd"
+      android:textColor="@color/white"
+      android:textSize="18dp"
+      />
+  </LinearLayout>
 </LinearLayout>

app/src/main/res/layout/tutorial_last.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:background="@drawable/tutorial_image5">
+
+  <ImageView
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_alignParentBottom="true"
+    android:layout_alignParentStart="true"
+    android:layout_marginBottom="160dp"
+    android:layout_marginStart="44dp"
+    android:src="@drawable/tutorial_last_text"/>
+
+  <LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_alignParentBottom="true"
+    android:layout_alignParentStart="true"
+    android:layout_marginBottom="81dp"
+    android:layout_marginLeft="40dp"
+    android:orientation="vertical">
+
+    <TextView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      android:layout_alignParentStart="true"
+      android:layout_alignParentTop="true"
+      android:text="내 일상의 플러스"
+      android:textColor="@color/white"
+      android:textSize="30dp"/>
+
+    <TextView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      android:text="삶을 더 잘 살기 위한 이야기 시작해볼까요?"
+      android:textColor="@color/white"
+      android:textSize="17dp"
+      />
+
+  </LinearLayout>
+
+  <LinearLayout
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_alignParentBottom="true"
+    android:layout_marginBottom="25dp"
+    android:layout_marginLeft="40dp"
+    android:orientation="vertical">
+
+    <Button
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:background="@color/white"
+      android:text="시작하기"
+      android:textColor="@color/black"/>
+
+  </LinearLayout>
+</RelativeLayout>

app/src/main/res/layout/tutorial_layout.xml

@@ -4,27 +4,52 @@
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
-  android:orientation="vertical">
+  android:orientation="vertical"
+  android:paddingTop="100dp">
 
-  <TextView
-    android:id="@+id/text_view_tutorial"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:text="Tutorial"
-  />
   <LinearLayout
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical"
-    android:weightSum="10">
+    android:layout_height="wrap_content"
+    android:orientation="vertical">
 
-    <ImageView
+    <TextView
       android:layout_width="match_parent"
-      android:layout_height="0dp"
-      android:layout_weight="9"
-      android:src="@drawable/tutorial"
-      android:text="layout2"/>
+      android:layout_height="wrap_content"
+      android:text="@string/tutorial_title1"
+      android:textAlignment="center"
+      android:textSize="28dp"
+      />
+  </LinearLayout>
+
+  <LinearLayout
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginLeft="103dp"
+    android:layout_marginTop="8dp"
+    android:orientation="vertical">
+
+    <TextView
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:text="@string/tutorial_title1_message"
+      android:textAlignment="center"
+      />
 
-    <include layout="@layout/tutorial_bottom_layout"/>
   </LinearLayout>
+
+  <RelativeLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <ImageView
+      android:id="@+id/image_view_tutorial"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_alignParentStart="true"
+      android:layout_alignParentTop="true"
+      android:src="@drawable/tutorial_image1"/>
+
+  </RelativeLayout>
+
+
 </LinearLayout>

app/src/main/res/values/strings.xml

@@ -1,9 +1,20 @@
 <resources>
   <string name="empty_string" translatable="false"/>
+  <string name="tutorial_title1">트렌디하게, 콘텐츠</string>
+  <string name="tutorial_title1_message">소소한 일상부터 화제의 이슈까지 \n 다양하게 경험해보세요.</string>
 
-  <string name="sign_up_hello_text">Lifeplus 회원가입을 하시면 다양한 혜택을 누릴 수 있어요.</string>
-  <string name="sign_up_need_id">Lifeplus만의 혜택을 누리기 위해서는 본인인증 과정이 필요해요.</string>
+
+  <string name="sign_up_hello_text">Lifeplus만의 \n 다양한 혜택을 이용해 보세요.</string>
+  <string name="sign_up_need_id">Lifeplus만의 혜택을 이용하기 위해서는 \n 본인인증 과정이 필요해요.</string>
   <string name="sign_up_need_pin">Lifeplus에서 사용할 간편암호를 등록해주세요.</string>
+
+  <string name="sign_up_benefit1">혜택 하나. 코인</string>
+  <string name="sign_up_benefit1_detail">서비스만 이용해도 코인을 드려요.</string>
+  <string name="sign_up_benefit2">혜택 둘. 쿠폰</string>
+  <string name="sign_up_benefit2_detail">코인을 쿠폰으로 교환하세요.</string>
+  <string name="sign_up_benefit3">혜택 셋. 쇼핑</string>
+  <string name="sign_up_benefit3_detail">구매/예약하면 추가 코인을 드려요.</string>
+
   <string name="sign_up_mobile_identify_pop_up">휴대폰 인증</string>
   <string name="sign_up_identify">본인 인증</string>
   <string name="sign_up_mobile_identify">휴대폰 인증 하기</string>
@@ -11,13 +22,13 @@
   <string name="sign_up_input_pin">간편암호 등록</string>
   <string name="sign_up_input_pin_fail">간편암호 등록 실패</string>
   <string name="sign_up_pin_confirm">간편암호 등록 완료</string>
-  <string name="sign_up_id_confirm_completed">본인인증이 완료되었습니다.</string>
+  <string name="sign_up_id_confirm_completed">본인인증이 \n 완료되었습니다.</string>
   <string name="sign_up_pin_confirm_completed">정상적으로 등록되었습니다.</string>
   <string name="sign_up_agree_completed">약관 동의 완료</string>
   <string name="sign_up_agree">약관 동의</string>
   <string name="sign_up_completed_message">%s님 Lifeplus 회원가입이 완료되었습니다.</string>
   <string name="sign_up_completed">가입 완료</string>
-  <string name="sign_up_benefit1">서비스만 이용해도 코인을 드려요.</string>
+
   <string name="sign_up_start_lifeplus">Lifeplus 시작하기</string>
 
   <string name="sign_up">회원가입</string>
@@ -98,4 +109,5 @@
   <string name="title_activity_tutorial">TutorialActivity</string>
   <string name="action_settings">Settings</string>
   <string name="section_format">Hello World from section: %1$d</string>
+
 </resources>