[공통][Common] 콘텐츠 상세 튜토리얼 화면 구현

app/src/main/java/kr/co/zumo/app/lifeplus/model/LifeplusPreferences.java

@@ -38,6 +38,7 @@ public class LifeplusPreferences {
   public final static String GUEST_LIKED_LIST = "guest_liked_list";
   public final static String DEBUG_TARGET = "debug_target";
   public final static String TUTORIAL_LISTICLE_DONE = "tutorial_listicle_done";
+  public final static String TUTORIAL_LISTICLE_DETAIL_DONE= "tutorial_listicle_detail_done";
 
 
   /**
@@ -272,4 +273,12 @@ public class LifeplusPreferences {
     return preferences.get(TUTORIAL_LISTICLE_DONE, false);
   }
 
+  public void setTutorialListicleDetailDone(boolean isDone) {
+    preferences.put(TUTORIAL_LISTICLE_DETAIL_DONE, isDone);
+  }
+
+  public boolean isTutorialListicleDetailDone() {
+    return preferences.get(TUTORIAL_LISTICLE_DETAIL_DONE, false);
+  }
+
 }

app/src/main/java/kr/co/zumo/app/lifeplus/model/SuperModel.java

@@ -90,6 +90,7 @@ public final class SuperModel implements IMemberStatus {
     clearMemberDataInternal();
 
     getPreferences().setEncryptedPin("");
+
   }
 
   private void clearMemberDataInternal() {
@@ -103,6 +104,8 @@ public final class SuperModel implements IMemberStatus {
     getPreferences().setPushEnabled(false);
     getPreferences().setPushMarketingEnabled(false);
     getPreferences().setLocationServiceEnabled(false);
+    getPreferences().setTutorialListicleDetailDone(false);
+    getPreferences().setTutorialListicleDone(false);
 
     memberStatus = 0;
 

app/src/main/java/kr/co/zumo/app/lifeplus/view/custom/Tutorial.java

@@ -0,0 +1,99 @@
+package kr.co.zumo.app.lifeplus.view.custom;
+
+import android.content.Context;
+import android.os.Handler;
+import android.support.constraint.ConstraintLayout;
+import android.support.v4.app.FragmentActivity;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.widget.FrameLayout;
+
+import kr.co.zumo.app.R;
+import kr.co.zumo.app.lifeplus.view.Event;
+import kr.co.zumo.app.lifeplus.view.IEventListener;
+
+/**
+ * Tutorial
+ * <pre>
+ * </pre>
+ *
+ * @author 하세미
+ * @version 1.0
+ * @history 하세미   [2018-12-21]   [최초 작성]
+ * @since 2018-12-21
+ */
+public class Tutorial {
+
+  private FragmentActivity activity;
+  private FrameLayout frameLayout;
+  private LayoutInflater inflater;
+  private View view;
+
+  public final static int TUTORIAL_LISTICLE_COVER = 0;
+  public final static int TUTORIAL_LISTICLE_DETAIL = 1;
+  public final static int TUTORIAL_BUCKET_SUCCESS = 2;
+  public final static int TUTORIAL_BUCKET_TAG = 3;
+
+  public void showTutorial(FragmentActivity activity, int tutorialID, IEventListener listener) {
+    this.activity = activity;
+    if (null != activity) {
+      frameLayout = activity.getWindow().findViewById(android.R.id.content);
+      inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
+      switch (tutorialID) {
+        case TUTORIAL_LISTICLE_COVER:
+          showTutorialListicle(listener);
+          break;
+        case TUTORIAL_LISTICLE_DETAIL:
+          showTutorialListicleDetail(listener);
+          break;
+        default:
+          break;
+      }
+    }
+
+  }
+
+  private void showTutorialListicle(IEventListener listener) {
+    view = inflater.inflate(R.layout.tutorial_listicle_cover, null);
+    frameLayout.addView(view);
+    view.setClickable(true);
+    new Handler().postDelayed(new Runnable() {
+      @Override
+      public void run() {
+        ConstraintLayout tutorialLayout = view.findViewById(R.id.tutorial_listicle_cover2);
+        tutorialLayout.setVisibility(View.VISIBLE);
+      }
+    }, 1000);
+
+    new Handler().postDelayed(new Runnable() {
+      @Override
+      public void run() {
+        frameLayout.removeView(view);
+        listener.onEvent(new Event.Builder(Event.NEXT).build());
+      }
+    }, 2000);
+
+  }
+
+  private void showTutorialListicleDetail(IEventListener listener) {
+    View view = inflater.inflate(R.layout.tutorial_listicle_detail, null);
+    frameLayout.addView(view);
+    view.setClickable(true);
+    new Handler().postDelayed(new Runnable() {
+      @Override
+      public void run() {
+        view.findViewById(R.id.tutorial_listicle_detail1).setVisibility(View.GONE);
+        view.findViewById(R.id.tutorial_listicle_detail2).setVisibility(View.VISIBLE);
+      }
+    }, 1000);
+
+    new Handler().postDelayed(new Runnable() {
+      @Override
+      public void run() {
+        frameLayout.removeView(view);
+      }
+    }, 3000);
+  }
+
+
+}

app/src/main/java/kr/co/zumo/app/lifeplus/view/screen/contents/ContentsFragment.java

@@ -1,12 +1,10 @@
 package kr.co.zumo.app.lifeplus.view.screen.contents;
 
 import android.content.ActivityNotFoundException;
-import android.content.Context;
 import android.content.Intent;
 import android.graphics.Typeface;
 import android.net.Uri;
 import android.os.Bundle;
-import android.os.Handler;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v7.widget.LinearLayoutManager;
@@ -17,7 +15,6 @@ import android.view.LayoutInflater;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
-import android.widget.FrameLayout;
 import android.widget.TextView;
 
 import java.util.List;
@@ -29,7 +26,9 @@ import kr.co.zumo.app.lifeplus.bean.api.SeriesItemBean;
 import kr.co.zumo.app.lifeplus.helper.ActionBarHelper;
 import kr.co.zumo.app.lifeplus.util.AppUtil;
 import kr.co.zumo.app.lifeplus.view.Event;
+import kr.co.zumo.app.lifeplus.view.IEventListener;
 import kr.co.zumo.app.lifeplus.view.IndexScrollListener;
+import kr.co.zumo.app.lifeplus.view.custom.Tutorial;
 import kr.co.zumo.app.lifeplus.view.screen.FragmentBase;
 import kr.co.zumo.app.lifeplus.view.screen.main.TouchEventWithDirection;
 
@@ -237,17 +236,6 @@ public class ContentsFragment extends FragmentBase<ContentsPresenter> implements
         startSmoothScroll(linearSmoothScroller);
       }
 
-//      @Override
-//      public void startSmoothScroll(RecyclerView.SmoothScroller smoothScroller) {
-//        int[] out = snapHelper.calculateDistanceToFinalSnap(layoutManager, snapHelper.findSnapView(layoutManager));
-//        if (out[0] == 0 && out[1] == 0) {
-//          Log.e("APP#  ContentsFragment | startSmoothScroll", "|" + " 들어옴  stopscroll");
-//          recyclerViewContentsDetail.stopScroll();
-//          return;
-//        }
-//          super.startSmoothScroll(smoothScroller);
-//
-//      }
     };
     scrollEventListener = new IndexScrollListener(layoutManager, index -> {
       presenter.onChangedPageIndex(index);
@@ -286,23 +274,24 @@ public class ContentsFragment extends FragmentBase<ContentsPresenter> implements
 
   @Override
   public void showTutorialListicle() {
-    FrameLayout frameLayout = (FrameLayout) getActivity().getWindow().findViewById(android.R.id.content);
-    LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
-    View view = inflater.inflate(R.layout.tutorial_listicle_cover, null);
-    frameLayout.addView(view);
-
-    Handler delayHandler = new Handler();
-    delayHandler.postDelayed(new Runnable() {
+    Tutorial tutorial = new Tutorial();
+    tutorial.showTutorial(getActivity(), Tutorial.TUTORIAL_LISTICLE_COVER, new IEventListener() {
       @Override
-      public void run() {
-        frameLayout.removeView(view);
+      public void onEvent(Event event) {
+        presenter.onEvent(event);
       }
-    }, 2000);
+    });
   }
 
   @Override
   public void showTutorialListicleDetail() {
+    Tutorial tutorial = new Tutorial();
+    tutorial.showTutorial(getActivity(), Tutorial.TUTORIAL_LISTICLE_DETAIL, new IEventListener() {
+      @Override
+      public void onEvent(Event event) {
 
+      }
+    });
   }
 
 }

app/src/main/java/kr/co/zumo/app/lifeplus/view/screen/contents/ContentsListicleHolder.java

@@ -66,7 +66,7 @@ public class ContentsListicleHolder extends ContentsHolder<ContentsDetailBean> {
     layoutMoreInfoPopup.setOnClickListener(view -> {
       listener.onEvent(new Event.Builder(Event.MORE).index(getAdapterPosition()).build());
     });
-    
+
   }
 
   @Override

app/src/main/java/kr/co/zumo/app/lifeplus/view/screen/contents/ContentsPresenter.java

@@ -14,6 +14,7 @@ import kr.co.zumo.app.lifeplus.bean.api.ContentsDetailBean;
 import kr.co.zumo.app.lifeplus.bean.api.LifeplusContentsBean;
 import kr.co.zumo.app.lifeplus.helper.NavigationBar;
 import kr.co.zumo.app.lifeplus.model.LifeplusPreferences;
+import kr.co.zumo.app.lifeplus.model.SuperModel;
 import kr.co.zumo.app.lifeplus.supervisor.ScreenID;
 import kr.co.zumo.app.lifeplus.util.ResourceUtil;
 import kr.co.zumo.app.lifeplus.util.StringUtil;
@@ -45,6 +46,7 @@ public class ContentsPresenter extends ContentsBasePresenter<ContentsModel, ICon
   private IDialogBase dialogBase;
   private DoubleChecker doubleChecker;
   private Toast toast;
+  private LifeplusPreferences preferences = SuperModel.getInstance().getPreferences();
 
   public ContentsPresenter(ContentsModel model, IContentsView view) {
     super(model, view);
@@ -185,8 +187,10 @@ public class ContentsPresenter extends ContentsBasePresenter<ContentsModel, ICon
         showErrorDialog(R.string.ready_comment);
         break;
       case Event.TUTORIAL:
-        // TODO: 튜토리얼
-        view.showTutorialListicle();
+        if (preferences.isTutorialListicleDone() == false) {
+          view.showTutorialListicle();
+          preferences.setTutorialListicleDone(true);
+        }
         break;
       case Event.LAST:
         if (false == model.hasSeries()) {
@@ -204,6 +208,9 @@ public class ContentsPresenter extends ContentsBasePresenter<ContentsModel, ICon
           onCommand(new WebCommand(htmlBean.getUrl()));
         }
         break;
+      case Event.NEXT:
+        view.setSmoothScrollToPosition(1);
+        break;
       default:
         break;
     }
@@ -404,6 +411,16 @@ public class ContentsPresenter extends ContentsBasePresenter<ContentsModel, ICon
       });
     }
 
+    /**
+     * 리스티클형 최초진입 인덱스 1일 때 튜토리얼 표시 한다.
+     */
+    if (model.getContentsType().equals(ContentsDetailBean.TYPE_LISTICLE) && model.getCurrentPageIndex() == 1) {
+      if (preferences.isTutorialListicleDetailDone() == false) {
+        view.showTutorialListicleDetail();
+        preferences.setTutorialListicleDetailDone(true);
+      }
+    }
+
     /**
      * 카드형, 카드 리스티클 형일 때 인덱스가 1보다 큰 경우 페이지 넘버를 보여준다.
      */
@@ -434,7 +451,7 @@ public class ContentsPresenter extends ContentsBasePresenter<ContentsModel, ICon
               case Event.FAQ:
                 go(ScreenID.FAQ);
                 break;
-                default:
+              default:
                 break;
             }
           }

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

@@ -4,56 +4,71 @@
   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"
-  android:background="@color/C4D000000">
+  android:layout_height="match_parent">
 
-  <ImageView
-    android:id="@+id/image_view_tutorial_share"
+  <android.support.constraint.ConstraintLayout
+    android:id="@+id/tutorial_listicle_cover1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginTop="67dp"
     app:layout_constraintEnd_toEndOf="parent"
-    app:layout_constraintTop_toTopOf="parent"
-    app:srcCompat="@drawable/ic_bubble_tutorial_share"
-    />
+    app:layout_constraintTop_toTopOf="parent">
 
-  <TextView
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:gravity="center_horizontal"
-    android:lineSpacingExtra="4sp"
-    android:textColor="@color/C000000"
-    android:textSize="12sp"
-    android:layout_marginTop="18dp"
-    android:layout_marginBottom="22dp"
-    app:layout_constraintBottom_toBottomOf="@+id/image_view_tutorial_share"
-    app:layout_constraintEnd_toEndOf="@+id/image_view_tutorial_share"
-    app:layout_constraintStart_toStartOf="@+id/image_view_tutorial_share"
-    app:layout_constraintTop_toTopOf="@+id/image_view_tutorial_share"
-    android:text="@string/tutorial_listicle_cover_1"
-    />
+    <ImageView
+      android:id="@+id/image_view_tutorial_share"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      app:srcCompat="@drawable/ic_bubble_tutorial_share"
+      />
 
-  <ImageView
-    android:id="@+id/image_view_tutorial_tag"
+    <TextView
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="18dp"
+      android:layout_marginBottom="22dp"
+      android:gravity="center_horizontal"
+      android:lineSpacingExtra="4sp"
+      android:text="@string/tutorial_listicle_cover_1"
+      android:textColor="@color/C000000"
+      android:textSize="12sp"
+      app:layout_constraintBottom_toBottomOf="@+id/image_view_tutorial_share"
+      app:layout_constraintEnd_toEndOf="@+id/image_view_tutorial_share"
+      app:layout_constraintStart_toStartOf="@+id/image_view_tutorial_share"
+      app:layout_constraintTop_toTopOf="@+id/image_view_tutorial_share"
+      />
+  </android.support.constraint.ConstraintLayout>
+
+  <android.support.constraint.ConstraintLayout
+    android:id="@+id/tutorial_listicle_cover2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginStart="20dp"
     android:layout_marginBottom="74dp"
+    android:visibility="gone"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintStart_toStartOf="parent"
-    app:srcCompat="@drawable/ic_bubble_tutorial_tag"
-    />
+    tools:visibility="visible"
+    >
 
-  <TextView
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:lineSpacingExtra="4sp"
-    android:textColor="@color/C000000"
-    android:textSize="12sp"
-    app:layout_constraintBottom_toBottomOf="@+id/image_view_tutorial_tag"
-    app:layout_constraintEnd_toEndOf="@+id/image_view_tutorial_tag"
-    app:layout_constraintStart_toStartOf="@+id/image_view_tutorial_tag"
-    app:layout_constraintTop_toTopOf="@+id/image_view_tutorial_tag"
-    android:text="@string/tutorial_listicle_cover_2"
-    />
+    <ImageView
+      android:id="@+id/image_view_tutorial_tag"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+
+      app:srcCompat="@drawable/ic_bubble_tutorial_tag"
+      />
+
+    <TextView
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:lineSpacingExtra="4sp"
+      android:text="@string/tutorial_listicle_cover_2"
+      android:textColor="@color/C000000"
+      android:textSize="12sp"
+      app:layout_constraintBottom_toBottomOf="@+id/image_view_tutorial_tag"
+      app:layout_constraintEnd_toEndOf="@+id/image_view_tutorial_tag"
+      app:layout_constraintStart_toStartOf="@+id/image_view_tutorial_tag"
+      app:layout_constraintTop_toTopOf="@+id/image_view_tutorial_tag"
+      />
+  </android.support.constraint.ConstraintLayout>
 </android.support.constraint.ConstraintLayout>

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

@@ -3,43 +3,83 @@
   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"
-  tools:background="@color/C888888"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
 
-  <ImageView
-    android:id="@+id/image_view_bubble"
+  <android.support.constraint.ConstraintLayout
+    android:id="@+id/tutorial_listicle_detail2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginTop="111dp"
-    android:src="@drawable/tutorial_bubble"
+    android:visibility="gone"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
-    app:layout_constraintTop_toTopOf="parent"/>
+    app:layout_constraintTop_toTopOf="parent"
+    tools:visibility="visible">
 
-  <ImageView
-    android:id="@+id/image_view_finger"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    app:srcCompat="@drawable/icon_tutorial_finger"
-    android:layout_marginStart="20dp"
-    app:layout_constraintStart_toStartOf="@+id/image_view_bubble"
-    app:layout_constraintBottom_toBottomOf="@+id/image_view_bubble"
-    app:layout_constraintTop_toTopOf="@+id/image_view_bubble"/>
+    <ImageView
+      android:id="@+id/image_view_bubble"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:src="@drawable/tutorial_bubble"
+      />
+
+    <ImageView
+      android:id="@+id/image_view_finger"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginStart="20dp"
+      app:layout_constraintBottom_toBottomOf="@+id/image_view_bubble"
+      app:layout_constraintStart_toStartOf="@+id/image_view_bubble"
+      app:layout_constraintTop_toTopOf="@+id/image_view_bubble"
+      app:srcCompat="@drawable/icon_tutorial_finger"/>
+
+    <TextView
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginStart="15dp"
+      android:layout_marginEnd="20dp"
+      android:lineSpacingExtra="4sp"
+      android:text="@string/tutorial_listicle_detail_1"
+      android:textColor="@color/C000000"
+      android:textSize="12sp"
+      android:textStyle="bold"
+      app:layout_constraintBottom_toBottomOf="@id/image_view_bubble"
+      app:layout_constraintEnd_toEndOf="@id/image_view_bubble"
+      app:layout_constraintStart_toEndOf="@id/image_view_finger"
+      app:layout_constraintTop_toTopOf="@+id/image_view_bubble"/>
+  </android.support.constraint.ConstraintLayout>
 
-  <TextView
+
+  <android.support.constraint.ConstraintLayout
+    android:id="@+id/tutorial_listicle_detail1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:lineSpacingExtra="4sp"
-    android:text="@string/tutorial_listicle_detail"
-    android:textColor="@color/C000000"
-    android:textSize="12sp"
-    android:textStyle="bold"
-    android:layout_marginStart="15dp"
-    android:layout_marginEnd="20dp"
-    app:layout_constraintEnd_toEndOf="@id/image_view_bubble"
-    app:layout_constraintBottom_toBottomOf="@id/image_view_bubble"
-    app:layout_constraintStart_toEndOf="@id/image_view_finger"
-    app:layout_constraintTop_toTopOf="@+id/image_view_bubble"/>
+    android:layout_marginTop="61dp"
+    android:layout_marginEnd="50dp"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintTop_toTopOf="parent">
+
+    <ImageView
+      android:id="@+id/image_view_share_bubble"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      app:srcCompat="@drawable/bubble_tutorial_edit"
+      />
 
+    <TextView
+      android:id="@+id/text_view_share_tutorial"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:gravity="center_horizontal"
+      android:lineSpacingExtra="4sp"
+      android:text="@string/tutorial_listicle_detail_2"
+      android:textColor="@color/C000000"
+      android:textSize="12sp"
+      app:layout_constraintBottom_toBottomOf="@id/image_view_share_bubble"
+      app:layout_constraintEnd_toEndOf="@id/image_view_share_bubble"
+      app:layout_constraintStart_toStartOf="@id/image_view_share_bubble"
+      app:layout_constraintTop_toTopOf="@id/image_view_share_bubble"
+      />
+  </android.support.constraint.ConstraintLayout>
 </android.support.constraint.ConstraintLayout>

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

@@ -698,7 +698,8 @@
 
   <string name="tutorial_listicle_cover_1">"<b>전체 콘텐츠</b>"\n공유하고 싶다면 꾹!</string>
   <string name="tutorial_listicle_cover_2">"<b>태그를 누르면</b>"\n다른 콘텐츠를 확인 가능해요</string>
-  <string name="tutorial_listicle_detail">다음으로 넘겨서\n다양한 사진을 확인하세요</string>
+  <string name="tutorial_listicle_detail_1">다음으로 넘겨서\n다양한 사진을 확인하세요</string>
+  <string name="tutorial_listicle_detail_2">"<b>현재 콘텐츠</b>"\n공유하고 싶다면 꾹!</string>
   <string name="tutorial_bucket_list_success">버킷리스트를\n"<b>완료했다면 체크를 꾹!</b>"</string>
   <string name="tutorial_bucket_list_tag">"<b>연관태그를 선택해서</b>"\n원하는 콘텐츠를 찾아보세요</string>
   <string name="tutorial_bucket_list_update">"<b>여기를 눌러서</b>"\n수정을 해보세요</string>