Browse Source

Show and hide title with animation on collapse

Guy Carmeli 8 years ago
parent
commit
f8fb437441

+ 1
- 0
android/app/src/main/java/com/reactnativenavigation/params/CollapsingTopBarParams.java View File

11
     public StyleParams.Color scrimColor;
11
     public StyleParams.Color scrimColor;
12
     public CollapseBehaviour collapseBehaviour;
12
     public CollapseBehaviour collapseBehaviour;
13
     public boolean expendOnTopTabChange;
13
     public boolean expendOnTopTabChange;
14
+    public boolean showTitleWhenCollapsed;
14
 
15
 
15
     public boolean hasBackgroundImage() {
16
     public boolean hasBackgroundImage() {
16
         return imageUri != null;
17
         return imageUri != null;

+ 8
- 11
android/app/src/main/java/com/reactnativenavigation/params/parsers/CollapsingTopBarParamsParser.java View File

14
     private Bundle params;
14
     private Bundle params;
15
     private boolean titleBarHideOnScroll;
15
     private boolean titleBarHideOnScroll;
16
     private boolean drawBelowTopBar;
16
     private boolean drawBelowTopBar;
17
+    private final boolean hasReactView;
18
+    private final boolean hasBackgroundImage;
17
 
19
 
18
     CollapsingTopBarParamsParser(Bundle params, boolean titleBarHideOnScroll, boolean drawBelowTopBar) {
20
     CollapsingTopBarParamsParser(Bundle params, boolean titleBarHideOnScroll, boolean drawBelowTopBar) {
19
         this.params = params;
21
         this.params = params;
20
         this.titleBarHideOnScroll = titleBarHideOnScroll;
22
         this.titleBarHideOnScroll = titleBarHideOnScroll;
21
         this.drawBelowTopBar = drawBelowTopBar;
23
         this.drawBelowTopBar = drawBelowTopBar;
24
+        hasReactView = params.containsKey("collapsingToolBarComponent");
25
+        hasBackgroundImage = params.containsKey("collapsingToolBarImage");
22
     }
26
     }
23
 
27
 
24
     public CollapsingTopBarParams parse() {
28
     public CollapsingTopBarParams parse() {
31
         result.reactViewHeight = params.getInt("collapsingToolBarComponentHeight");
35
         result.reactViewHeight = params.getInt("collapsingToolBarComponentHeight");
32
         result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
36
         result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
33
         result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
37
         result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
38
+        result.showTitleWhenCollapsed = hasReactView;
34
         result.collapseBehaviour = getCollapseBehaviour();
39
         result.collapseBehaviour = getCollapseBehaviour();
35
         return result;
40
         return result;
36
     }
41
     }
39
         return titleBarHideOnScroll || hasImageOrReactView();
44
         return titleBarHideOnScroll || hasImageOrReactView();
40
     }
45
     }
41
 
46
 
42
-    private boolean hasImageOrReactView() {
43
-        return hasBackgroundImage() || hasReactView();
44
-    }
45
-
46
     private CollapseBehaviour getCollapseBehaviour() {
47
     private CollapseBehaviour getCollapseBehaviour() {
47
-        if (hasBackgroundImage() || hasReactView()) {
48
+        if (hasImageOrReactView()) {
48
             return new CollapseTopBarBehaviour();
49
             return new CollapseTopBarBehaviour();
49
         }
50
         }
50
         if (titleBarHideOnScroll && drawBelowTopBar) {
51
         if (titleBarHideOnScroll && drawBelowTopBar) {
53
         return new TitleBarHideOnScrollBehaviour();
54
         return new TitleBarHideOnScrollBehaviour();
54
     }
55
     }
55
 
56
 
56
-    private boolean hasBackgroundImage() {
57
-        return params.containsKey("collapsingToolBarImage");
58
-    }
59
-
60
-    private boolean hasReactView() {
61
-        return params.containsKey("collapsingToolBarComponent");
57
+    private boolean hasImageOrReactView() {
58
+        return hasBackgroundImage || hasReactView;
62
     }
59
     }
63
 }
60
 }

+ 20
- 1
android/app/src/main/java/com/reactnativenavigation/views/TitleBar.java View File

11
 import android.view.View;
11
 import android.view.View;
12
 import android.view.animation.AccelerateDecelerateInterpolator;
12
 import android.view.animation.AccelerateDecelerateInterpolator;
13
 import android.view.animation.AccelerateInterpolator;
13
 import android.view.animation.AccelerateInterpolator;
14
+import android.widget.TextView;
14
 
15
 
15
 import com.reactnativenavigation.params.BaseTitleBarButtonParams;
16
 import com.reactnativenavigation.params.BaseTitleBarButtonParams;
16
 import com.reactnativenavigation.params.StyleParams;
17
 import com.reactnativenavigation.params.StyleParams;
21
 import java.util.List;
22
 import java.util.List;
22
 
23
 
23
 public class TitleBar extends Toolbar {
24
 public class TitleBar extends Toolbar {
24
-
25
+    private static final int TITLE_VISIBILITY_ANIMATION_DURATION = 320;
25
     private LeftButton leftButton;
26
     private LeftButton leftButton;
26
     private ActionMenuView actionMenuView;
27
     private ActionMenuView actionMenuView;
27
 
28
 
175
                     }
176
                     }
176
                 });
177
                 });
177
     }
178
     }
179
+
180
+    public void showTitle() {
181
+        animateTitle(1);
182
+    }
183
+
184
+    public void hideTitle() {
185
+        animateTitle(0);
186
+    }
187
+
188
+    private void animateTitle(int alpha) {
189
+        getTitleView().animate()
190
+                .alpha(alpha)
191
+                .setDuration(TITLE_VISIBILITY_ANIMATION_DURATION);
192
+    }
193
+
194
+    private View getTitleView() {
195
+        return getChildAt(0) instanceof TextView ? getChildAt(0) : getChildAt(1);
196
+    }
178
 }
197
 }

+ 13
- 0
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTitleBar.java View File

6
 
6
 
7
 import com.reactnativenavigation.params.CollapsingTopBarParams;
7
 import com.reactnativenavigation.params.CollapsingTopBarParams;
8
 import com.reactnativenavigation.params.StyleParams;
8
 import com.reactnativenavigation.params.StyleParams;
9
+import com.reactnativenavigation.utils.ViewUtils;
9
 import com.reactnativenavigation.views.TitleBar;
10
 import com.reactnativenavigation.views.TitleBar;
10
 
11
 
11
 public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
12
 public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
21
         this.params = params;
22
         this.params = params;
22
         addCollapsingTitle();
23
         addCollapsingTitle();
23
         setOnTouchListener(this);
24
         setOnTouchListener(this);
25
+        hideTitle(params);
26
+    }
27
+
28
+    private void hideTitle(CollapsingTopBarParams params) {
29
+        if (params.showTitleWhenCollapsed) {
30
+            ViewUtils.runOnPreDraw(this, new Runnable() {
31
+                @Override
32
+                public void run() {
33
+                    hideTitle();
34
+                }
35
+            });
36
+        }
24
     }
37
     }
25
 
38
 
26
     private void addCollapsingTitle() {
39
     private void addCollapsingTitle() {

+ 2
- 12
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTopBar.java View File

26
     private final CollapsingTopBarParams params;
26
     private final CollapsingTopBarParams params;
27
     private final ViewCollapser viewCollapser;
27
     private final ViewCollapser viewCollapser;
28
     private final int topBarHeight;
28
     private final int topBarHeight;
29
-    private String title;
30
 
29
 
31
     public CollapsingTopBar(Context context, final StyleParams params) {
30
     public CollapsingTopBar(Context context, final StyleParams params) {
32
         super(context);
31
         super(context);
58
         this.scrollListener = scrollListener;
57
         this.scrollListener = scrollListener;
59
     }
58
     }
60
 
59
 
61
-    @Override
62
-    public void setTitle(String title) {
63
-        if (params.hasReactView()) {
64
-            this.title = title;
65
-        } else {
66
-            super.setTitle(title);
67
-        }
68
-    }
69
-
70
     private void createBackgroundImage() {
60
     private void createBackgroundImage() {
71
         if (params.hasBackgroundImage()) {
61
         if (params.hasBackgroundImage()) {
72
             collapsingTopBarBackground = new CollapsingTopBarBackground(getContext(), params);
62
             collapsingTopBarBackground = new CollapsingTopBarBackground(getContext(), params);
86
             header.setOnHiddenListener(new CollapsingTopBarReactHeaderAnimator.OnHiddenListener() {
76
             header.setOnHiddenListener(new CollapsingTopBarReactHeaderAnimator.OnHiddenListener() {
87
                 @Override
77
                 @Override
88
                 public void onHidden() {
78
                 public void onHidden() {
89
-                    titleBar.setTitle(title);
79
+                    titleBar.showTitle();
90
                 }
80
                 }
91
             });
81
             });
92
             header.setOnVisibleListener(new CollapsingTopBarReactHeaderAnimator.OnVisibleListener() {
82
             header.setOnVisibleListener(new CollapsingTopBarReactHeaderAnimator.OnVisibleListener() {
93
                 @Override
83
                 @Override
94
                 public void onVisible() {
84
                 public void onVisible() {
95
-                    titleBar.setTitle("");
85
+                    titleBar.hideTitle();
96
                 }
86
                 }
97
             });
87
             });
98
         }
88
         }