Add gallery guide

app/src/main/java/com/hippo/ehviewer/Settings.java

@@ -682,4 +682,15 @@ public class Settings {
     public static void puttGuideDownloadLabels(boolean value) {
         putBoolean(KEY_GUIDE_DOWNLOAD_LABELS, value);
     }
+
+    private static final String KEY_GUIDE_GALLERY = "guide_gallery";
+    private static final boolean DEFAULT_GUIDE_GALLERY = true;
+
+    public static boolean getGuideGallery() {
+        return getBoolean(KEY_GUIDE_GALLERY, DEFAULT_GUIDE_GALLERY);
+    }
+
+    public static void putGuideGallery(boolean value) {
+        putBoolean(KEY_GUIDE_GALLERY, value);
+    }
 }

app/src/main/java/com/hippo/ehviewer/gallery/gl/GalleryView.java

@@ -64,8 +64,8 @@ public class GalleryView extends GLView implements GestureRecognizer.Listener {
 
     private static final float[] LEFT_AREA = {0.0f, 0.0f, 1.0f / 3.0f, 1f};
     private static final float[] RIGHT_AREA = {2.0f / 3.0f, 0.0f, 1.0f, 1f};
-    private static final float[] MENU_AREA = {1.0f / 3.0f, 0.0f, 2.0f / 3.0f, 3.0f / 4.0f};
-    private static final float[] SLIDER_AREA = {1.0f / 3.0f, 3.0f / 4.0f, 2.0f / 3.0f, 1.0f};
+    private static final float[] MENU_AREA = {1.0f / 3.0f, 0.0f, 2.0f / 3.0f, 2.0f / 3.0f};
+    private static final float[] SLIDER_AREA = {1.0f / 3.0f, 2.0f / 3.0f, 2.0f / 3.0f, 1.0f};
 
     private static final int METHOD_ON_SINGLE_TAP_UP = 0;
     private static final int METHOD_ON_SINGLE_TAP_CONFIRMED = 1;

app/src/main/java/com/hippo/ehviewer/ui/GalleryActivity.java

@@ -33,6 +33,7 @@ import android.view.KeyEvent;
 import android.view.View;
 import android.view.WindowManager;
 import android.webkit.MimeTypeMap;
+import android.widget.FrameLayout;
 import android.widget.Spinner;
 import android.widget.TextView;
 import android.widget.Toast;
@@ -49,6 +50,7 @@ import com.hippo.ehviewer.gallery.ZipGalleryProvider;
 import com.hippo.ehviewer.gallery.gl.GalleryPageView;
 import com.hippo.ehviewer.gallery.gl.GalleryView;
 import com.hippo.ehviewer.gallery.gl.ImageView;
+import com.hippo.ehviewer.widget.GalleryGuideView;
 import com.hippo.gl.glrenderer.ImageTexture;
 import com.hippo.gl.view.GLRootView;
 import com.hippo.image.Image;
@@ -59,6 +61,7 @@ import com.hippo.yorozuya.AnimationUtils;
 import com.hippo.yorozuya.ConcurrentPool;
 import com.hippo.yorozuya.SimpleAnimatorListener;
 import com.hippo.yorozuya.SimpleHandler;
+import com.hippo.yorozuya.ViewUtils;
 
 import java.io.File;
 
@@ -276,6 +279,11 @@ public class GalleryActivity extends TrackedActivity
         } else {
             getWindow().clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
         }
+
+        if (Settings.getGuideGallery()) {
+            FrameLayout mainLayout = (FrameLayout) ViewUtils.$$(this, R.id.main);
+            mainLayout.addView(new GalleryGuideView(this));
+        }
     }
 
     @Override

app/src/main/java/com/hippo/ehviewer/widget/GalleryGuideView.java

@@ -0,0 +1,211 @@
+/*
+ * Copyright 2016 Hippo Seven
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.hippo.ehviewer.widget;
+
+import android.annotation.TargetApi;
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.os.Build;
+import android.util.AttributeSet;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import com.hippo.ehviewer.R;
+import com.hippo.ehviewer.Settings;
+import com.hippo.yorozuya.ViewUtils;
+
+public class GalleryGuideView extends ViewGroup implements View.OnClickListener {
+
+    private int mBgColor;
+    private Paint mPaint;
+    private final float[] mPoints = new float[3 * 4];
+    private int mStep;
+
+    private TextView mLeftText;
+    private TextView mRightText;
+    private TextView mMenuText;
+    private TextView mProgressText;
+    private TextView mLongClickText;
+
+    public GalleryGuideView(Context context) {
+        super(context);
+        init(context);
+    }
+
+    public GalleryGuideView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        init(context);
+    }
+
+    public GalleryGuideView(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        init(context);
+    }
+
+    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
+    public GalleryGuideView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
+        super(context, attrs, defStyleAttr, defStyleRes);
+        init(context);
+    }
+
+    @SuppressWarnings("deprecation")
+    private void init(Context context) {
+        mBgColor = context.getResources().getColor(R.color.guide_bg);
+        mPaint = new Paint();
+        mPaint.setColor(Color.WHITE);
+        mPaint.setStyle(Paint.Style.STROKE);
+        mPaint.setStrokeWidth(context.getResources().getDimension(R.dimen.gallery_guide_divider_width));
+        setOnClickListener(this);
+        setWillNotDraw(false);
+        bind();
+    }
+
+    private void bind() {
+        // Clear up
+        removeAllViews();
+        mLeftText = null;
+        mRightText = null;
+        mMenuText = null;
+        mProgressText = null;
+        mLongClickText = null;
+
+        switch (mStep) {
+            case 0:
+                bind1();
+                break;
+            default:
+            case 1:
+                bind2();
+                break;
+        }
+    }
+
+    private void bind1() {
+        LayoutInflater inflater = LayoutInflater.from(getContext());
+        inflater.inflate(R.layout.widget_gallery_guide_1, this);
+        mLeftText = (TextView) getChildAt(0);
+        mRightText = (TextView) getChildAt(1);
+        mMenuText = (TextView) getChildAt(2);
+        mProgressText = (TextView) getChildAt(3);
+    }
+
+    private void bind2() {
+        LayoutInflater inflater = LayoutInflater.from(getContext());
+        inflater.inflate(R.layout.widget_gallery_guide_2, this);
+        mLongClickText = (TextView) getChildAt(0);
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
+        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
+        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
+        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
+        if (MeasureSpec.EXACTLY != widthMode || MeasureSpec.EXACTLY != heightMode) {
+            throw new IllegalStateException();
+        }
+
+        switch (mStep) {
+            case 0:
+                mLeftText.measure(MeasureSpec.makeMeasureSpec(widthSize / 3, MeasureSpec.EXACTLY),
+                        MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY));
+                mRightText.measure(MeasureSpec.makeMeasureSpec(widthSize / 3, MeasureSpec.EXACTLY),
+                        MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY));
+                mMenuText.measure(MeasureSpec.makeMeasureSpec(widthSize / 3, MeasureSpec.EXACTLY),
+                        MeasureSpec.makeMeasureSpec(heightSize * 2 / 3, MeasureSpec.EXACTLY));
+                mProgressText.measure(MeasureSpec.makeMeasureSpec(widthSize / 3, MeasureSpec.EXACTLY),
+                        MeasureSpec.makeMeasureSpec(heightSize / 3, MeasureSpec.EXACTLY));
+                break;
+            default:
+            case 1:
+                mLongClickText.measure(MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY),
+                        MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY));
+                break;
+        }
+
+        setMeasuredDimension(widthSize, heightSize);
+    }
+
+    @Override
+    protected void onLayout(boolean changed, int l, int t, int r, int b) {
+        int width = r - l;
+        int height = b - t;
+
+        switch (mStep) {
+            case 0:
+                mLeftText.layout(0, 0, width / 3, height);
+                mRightText.layout(width * 2 / 3, 0, width, height);
+                mMenuText.layout(width / 3, 0, width * 2 / 3, height * 2 / 3);
+                mProgressText.layout(width / 3, height * 2 / 3, width * 2 / 3, height);
+                break;
+            default:
+            case 1:
+                mLongClickText.layout(0, 0, width, height);
+                break;
+        }
+    }
+
+    @Override
+    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
+        super.onSizeChanged(w, h, oldw, oldh);
+
+        if (0 == mStep) {
+            mPoints[0] = w / 3;
+            mPoints[1] = 0;
+            mPoints[2] = w / 3;
+            mPoints[3] = h;
+
+            mPoints[4] = w * 2 / 3;
+            mPoints[5] = 0;
+            mPoints[6] = w * 2 / 3;
+            mPoints[7] = h;
+
+            mPoints[8] = w / 3;
+            mPoints[9] = h * 2 / 3;
+            mPoints[10] = w * 2 / 3;
+            mPoints[11] = h * 2 / 3;
+        }
+    }
+
+    @Override
+    protected void onDraw(Canvas canvas) {
+        super.onDraw(canvas);
+        canvas.drawColor(mBgColor);
+        if (0 == mStep) {
+            canvas.drawLines(mPoints, mPaint);
+        }
+    }
+
+    @Override
+    public void onClick(View v) {
+        switch (mStep) {
+            case 0:
+                mStep++;
+                bind();
+                break;
+            default:
+            case 1:
+                Settings.putGuideGallery(false);
+                ViewUtils.removeFromParent(this);
+                break;
+        }
+    }
+}

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

@@ -15,8 +15,11 @@
   ~ limitations under the License.
   -->
 
-<merge
-    xmlns:android="http://schemas.android.com/apk/res/android">
+<FrameLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/main"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
 
     <com.hippo.gl.view.GLRootView
         android:id="@+id/gl_root_view"
@@ -78,4 +81,4 @@
             android:gravity="center_horizontal"/>
 
     </com.hippo.ehviewer.widget.SliderPanel>
-</merge>
+</FrameLayout>

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

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2016 Hippo Seven
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<merge
+    xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/guide_gallery_left"
+        android:gravity="center"
+        style="@style/Guide.Title"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/guide_gallery_right"
+        android:gravity="center"
+        style="@style/Guide.Title"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/guide_gallery_menu"
+        android:gravity="center"
+        style="@style/Guide.Title"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/guide_gallery_progress"
+        android:gravity="center"
+        style="@style/Guide.Title"/>
+
+</merge>

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

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright 2016 Hippo Seven
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<merge
+    xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <TextView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:gravity="center"
+        android:text="@string/guide_gallery_long_click"
+        style="@style/Guide.Title"/>
+
+</merge>

app/src/main/res/values-zh-rCN/strings.xml

@@ -424,6 +424,11 @@
     <string name="guide_download_labels_text">从右侧滑动打开下载标签面板</string>
     <string name="guide_download_thumb_title">画廊详情</string>
     <string name="guide_download_thumb_text">点击缩略图查看画廊详情</string>
+    <string name="guide_gallery_left">翻页</string>
+    <string name="guide_gallery_right">翻页</string>
+    <string name="guide_gallery_menu">菜单</string>
+    <string name="guide_gallery_progress">进度条</string>
+    <string name="guide_gallery_long_click">长按打开页面菜单</string>
 
     <!-- Readable Time -->
     <string name="from_the_future">来自未来</string>

app/src/main/res/values-zh-rHK/strings.xml

@@ -424,6 +424,11 @@
     <string name="guide_download_labels_text">從右側滑動打開下載標籤面板</string>
     <string name="guide_download_thumb_title">畫廊詳情</string>
     <string name="guide_download_thumb_text">點擊縮略圖查看畫廊詳情</string>
+    <string name="guide_gallery_left">翻頁</string>
+    <string name="guide_gallery_right">翻頁</string>
+    <string name="guide_gallery_menu">菜單</string>
+    <string name="guide_gallery_progress">進度條</string>
+    <string name="guide_gallery_long_click">長按打開頁面菜單</string>
 
     <!-- Readable Time -->
     <string name="from_the_future">來自未來</string>

app/src/main/res/values-zh-rTW/strings.xml

@@ -424,6 +424,11 @@
     <string name="guide_download_labels_text">從右側滑動開啟下載標籤面板</string>
     <string name="guide_download_thumb_title">畫廊詳情</string>
     <string name="guide_download_thumb_text">點選縮圖檢視畫廊詳情</string>
+    <string name="guide_gallery_left">翻頁</string>
+    <string name="guide_gallery_right">翻頁</string>
+    <string name="guide_gallery_menu">選單</string>
+    <string name="guide_gallery_progress">進度條</string>
+    <string name="guide_gallery_long_click">長按開啟頁面選單</string>
 
     <!-- Readable Time -->
     <string name="from_the_future">來自未來</string>

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

@@ -107,4 +107,6 @@
 
     <color name="big_icon">#1f000000</color>
 
+    <color name="guide_bg">#e5009688</color>
+
 </resources>

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

@@ -47,9 +47,9 @@
     <dimen name="list_padding_top_search_bar">77dp</dimen>
     <dimen name="list_padding_bottom_fab">80dp</dimen>
 
-    <dimen name="gallery_list_min_width">320dp</dimen>
-    <dimen name="gallery_grid_min_width">120dp</dimen>
-    <dimen name="preview_grid_min_width">120dp</dimen>
+    <dimen name="gallery_list_min_width">240dp</dimen>
+    <dimen name="gallery_grid_min_width">80dp</dimen>
+    <dimen name="preview_grid_min_width">80dp</dimen>
 
     <!-- DrawerArrowDrawable -->
     <dimen name="dad_drawable_size">24dp</dimen>
@@ -98,4 +98,6 @@
     <dimen name="gallery_widget_margin_h">12dp</dimen>
     <dimen name="gallery_widget_margin_v">12dp</dimen>
 
+    <dimen name="gallery_guide_divider_width">3dp</dimen>
+
 </resources>

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

@@ -468,6 +468,11 @@
     <string name="guide_download_labels_text">Swipe right to open download labels panel</string>
     <string name="guide_download_thumb_title">Gallery Detail</string>
     <string name="guide_download_thumb_text">Click thumb to view gallery detail</string>
+    <string name="guide_gallery_left">Turn Page</string>
+    <string name="guide_gallery_right">Turn Page</string>
+    <string name="guide_gallery_menu">Menu</string>
+    <string name="guide_gallery_progress">Progress</string>
+    <string name="guide_gallery_long_click">Long click to open page menu</string>
 
     <!-- Readable Time -->
     <string name="from_the_future">From the future</string>

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

@@ -146,7 +146,7 @@
     </style>
 
     <style name="Guide">
-        <item name="sv_backgroundColor">#e5009688</item>
+        <item name="sv_backgroundColor">@color/guide_bg</item>
         <item name="sv_titleTextAppearance">@style/Guide.Title</item>
         <item name="sv_detailTextAppearance">@style/Guide.Text</item>
     </style>