Browse Source

Implement collapsedTitleBarBackgroundColor style property (#786)

Animate between translucent and solid background in collapsed titlebar
Guy Carmeli 7 years ago
parent
commit
eb8eb4be16

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

7
 public class CollapsingTopBarParams {
7
 public class CollapsingTopBarParams {
8
     public @Nullable String imageUri;
8
     public @Nullable String imageUri;
9
     public @Nullable String reactViewId;
9
     public @Nullable String reactViewId;
10
-    public int reactViewHeight;
11
     public StyleParams.Color scrimColor;
10
     public StyleParams.Color scrimColor;
12
     public CollapseBehaviour collapseBehaviour;
11
     public CollapseBehaviour collapseBehaviour;
13
     public boolean expendOnTopTabChange;
12
     public boolean expendOnTopTabChange;

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

32
         CollapsingTopBarParams result = new CollapsingTopBarParams();
32
         CollapsingTopBarParams result = new CollapsingTopBarParams();
33
         result.imageUri = params.getString("collapsingToolBarImage", null);
33
         result.imageUri = params.getString("collapsingToolBarImage", null);
34
         result.reactViewId = params.getString("collapsingToolBarComponent", null);
34
         result.reactViewId = params.getString("collapsingToolBarComponent", null);
35
-        result.reactViewHeight = params.getInt("collapsingToolBarComponentHeight");
36
         result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
35
         result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
37
         result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
36
         result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
38
         result.showTitleWhenCollapsed = hasReactView;
37
         result.showTitleWhenCollapsed = hasReactView;

+ 6
- 2
android/app/src/main/java/com/reactnativenavigation/views/TitleBar.java View File

72
         setTitleTextColor(params);
72
         setTitleTextColor(params);
73
         setSubtitleTextColor(params);
73
         setSubtitleTextColor(params);
74
         colorOverflowButton(params);
74
         colorOverflowButton(params);
75
-        setTranslucent(params);
75
+        setBackground(params);
76
     }
76
     }
77
 
77
 
78
     private void colorOverflowButton(StyleParams params) {
78
     private void colorOverflowButton(StyleParams params) {
82
         }
82
         }
83
     }
83
     }
84
 
84
 
85
-    private void setTranslucent(StyleParams params) {
85
+    protected void setBackground(StyleParams params) {
86
+        setTranslucent(params);
87
+    }
88
+
89
+    protected void setTranslucent(StyleParams params) {
86
         if (params.topBarTranslucent) {
90
         if (params.topBarTranslucent) {
87
             setBackground(new TranslucentTitleBarBackground());
91
             setBackground(new TranslucentTitleBarBackground());
88
         }
92
         }

+ 37
- 0
android/app/src/main/java/com/reactnativenavigation/views/TranslucentAndSolidTitleBarBackground.java View File

1
+package com.reactnativenavigation.views;
2
+
3
+import android.graphics.drawable.ColorDrawable;
4
+import android.graphics.drawable.Drawable;
5
+import android.graphics.drawable.TransitionDrawable;
6
+
7
+import com.reactnativenavigation.params.StyleParams;
8
+
9
+public class TranslucentAndSolidTitleBarBackground extends TransitionDrawable {
10
+    private static final int DURATION = 200;
11
+    private enum DrawableType {Translucent, Solid}
12
+
13
+    private DrawableType displayedDrawable = DrawableType.Translucent;
14
+
15
+    public TranslucentAndSolidTitleBarBackground(StyleParams.Color color) {
16
+        super(new Drawable[] {
17
+                new TranslucentTitleBarBackground(),
18
+                new ColorDrawable(color.getColor())
19
+        });
20
+    }
21
+
22
+    public void showTranslucentBackground() {
23
+        if (displayedDrawable == DrawableType.Translucent) {
24
+            return;
25
+        }
26
+        displayedDrawable = DrawableType.Translucent;
27
+        reverseTransition(DURATION);
28
+    }
29
+
30
+    public void showSolidBackground() {
31
+        if (displayedDrawable == DrawableType.Solid) {
32
+            return;
33
+        }
34
+        displayedDrawable = DrawableType.Solid;
35
+        startTransition(DURATION);
36
+    }
37
+}

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

1
 package com.reactnativenavigation.views.collapsingToolbar;
1
 package com.reactnativenavigation.views.collapsingToolbar;
2
 
2
 
3
 import android.content.Context;
3
 import android.content.Context;
4
+import android.support.annotation.Nullable;
4
 import android.view.MotionEvent;
5
 import android.view.MotionEvent;
5
 import android.view.View;
6
 import android.view.View;
6
 
7
 
8
 import com.reactnativenavigation.params.StyleParams;
9
 import com.reactnativenavigation.params.StyleParams;
9
 import com.reactnativenavigation.utils.ViewUtils;
10
 import com.reactnativenavigation.utils.ViewUtils;
10
 import com.reactnativenavigation.views.TitleBar;
11
 import com.reactnativenavigation.views.TitleBar;
12
+import com.reactnativenavigation.views.TranslucentAndSolidTitleBarBackground;
11
 
13
 
12
 public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
14
 public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
13
     private CollapsingTextView title;
15
     private CollapsingTextView title;
14
     private int collapsedHeight;
16
     private int collapsedHeight;
15
     private final ScrollListener scrollListener;
17
     private final ScrollListener scrollListener;
16
     private final CollapsingTopBarParams params;
18
     private final CollapsingTopBarParams params;
19
+    private @Nullable TranslucentAndSolidTitleBarBackground titleBarBackground;
17
 
20
 
18
     public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener, CollapsingTopBarParams params) {
21
     public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener, CollapsingTopBarParams params) {
19
         super(context);
22
         super(context);
39
         }
42
         }
40
     }
43
     }
41
 
44
 
45
+    @Override
46
+    public void hideTitle() {
47
+        super.hideTitle();
48
+        if (titleBarBackground != null) {
49
+            titleBarBackground.showTranslucentBackground();
50
+        }
51
+    }
52
+
53
+    @Override
54
+    public void showTitle() {
55
+        super.showTitle();
56
+        if (titleBarBackground != null) {
57
+            titleBarBackground.showSolidBackground();
58
+        }
59
+    }
60
+
42
     private void addCollapsingTitle() {
61
     private void addCollapsingTitle() {
43
         if (params.hasBackgroundImage()) {
62
         if (params.hasBackgroundImage()) {
44
             title = new CollapsingTextView(getContext(), collapsedHeight);
63
             title = new CollapsingTextView(getContext(), collapsedHeight);
71
         }
90
         }
72
     }
91
     }
73
 
92
 
93
+    @Override
94
+    protected void setBackground(StyleParams params) {
95
+        if (hasTranslucentAndSolidBackground(params)) {
96
+            titleBarBackground = new TranslucentAndSolidTitleBarBackground(params.collapsingTopBarParams.scrimColor);
97
+            setBackground(titleBarBackground);
98
+        } else {
99
+            setTranslucent(params);
100
+        }
101
+    }
102
+
103
+    private boolean hasTranslucentAndSolidBackground(StyleParams params) {
104
+        return params.topBarTranslucent && params.collapsingTopBarParams.scrimColor.hasColor();
105
+    }
106
+
74
     public void collapse(CollapseAmount amount) {
107
     public void collapse(CollapseAmount amount) {
75
         if (amount.hasExactAmount()) {
108
         if (amount.hasExactAmount()) {
76
             collapse(amount.get());
109
             collapse(amount.get());