Browse Source

Fadeout translucent drawable when collapsing (#788)

* Fadeout translucent drawable when collapsing

* Change default scrim color to none
* Fade out translucent when collapsingToolBarCollapsedColor is not defined
Guy Carmeli 7 years ago
parent
commit
475708e644

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

1
 package com.reactnativenavigation.params.parsers;
1
 package com.reactnativenavigation.params.parsers;
2
 
2
 
3
-import android.graphics.Color;
4
 import android.os.Bundle;
3
 import android.os.Bundle;
5
 
4
 
6
 import com.reactnativenavigation.params.CollapsingTopBarParams;
5
 import com.reactnativenavigation.params.CollapsingTopBarParams;
33
         result.imageUri = params.getString("collapsingToolBarImage", null);
32
         result.imageUri = params.getString("collapsingToolBarImage", null);
34
         result.reactViewId = params.getString("collapsingToolBarComponent", null);
33
         result.reactViewId = params.getString("collapsingToolBarComponent", null);
35
         result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
34
         result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
36
-        result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
35
+        result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color());
37
         result.showTitleWhenCollapsed = hasReactView;
36
         result.showTitleWhenCollapsed = hasReactView;
38
         result.collapseBehaviour = getCollapseBehaviour();
37
         result.collapseBehaviour = getCollapseBehaviour();
39
         return result;
38
         return result;

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

88
 
88
 
89
     protected void setTranslucent(StyleParams params) {
89
     protected void setTranslucent(StyleParams params) {
90
         if (params.topBarTranslucent) {
90
         if (params.topBarTranslucent) {
91
-            setBackground(new TranslucentTitleBarBackground());
91
+            setBackground(new TranslucentDrawable());
92
         }
92
         }
93
     }
93
     }
94
 
94
 

android/app/src/main/java/com/reactnativenavigation/views/TranslucentAndSolidTitleBarBackground.java → android/app/src/main/java/com/reactnativenavigation/views/TitleBarBackground.java View File

6
 
6
 
7
 import com.reactnativenavigation.params.StyleParams;
7
 import com.reactnativenavigation.params.StyleParams;
8
 
8
 
9
-public class TranslucentAndSolidTitleBarBackground extends TransitionDrawable {
9
+public class TitleBarBackground extends TransitionDrawable {
10
     private static final int DURATION = 200;
10
     private static final int DURATION = 200;
11
+
11
     private enum DrawableType {Translucent, Solid}
12
     private enum DrawableType {Translucent, Solid}
12
 
13
 
13
     private DrawableType displayedDrawable = DrawableType.Translucent;
14
     private DrawableType displayedDrawable = DrawableType.Translucent;
14
 
15
 
15
-    public TranslucentAndSolidTitleBarBackground(StyleParams.Color color) {
16
+    TitleBarBackground(Drawable... drawables) {
17
+        super(drawables);
18
+    }
19
+
20
+    public TitleBarBackground(StyleParams.Color color) {
16
         super(new Drawable[] {
21
         super(new Drawable[] {
17
-                new TranslucentTitleBarBackground(),
22
+                new TranslucentDrawable(),
18
                 new ColorDrawable(color.getColor())
23
                 new ColorDrawable(color.getColor())
19
         });
24
         });
20
     }
25
     }

+ 36
- 0
android/app/src/main/java/com/reactnativenavigation/views/TranslucentDrawable.java View File

1
+package com.reactnativenavigation.views;
2
+
3
+import android.graphics.Color;
4
+import android.graphics.LinearGradient;
5
+import android.graphics.Shader;
6
+import android.graphics.drawable.PaintDrawable;
7
+import android.graphics.drawable.ShapeDrawable;
8
+import android.graphics.drawable.shapes.RectShape;
9
+
10
+class TranslucentDrawable extends PaintDrawable {
11
+
12
+    TranslucentDrawable() {
13
+        setShape(new RectShape());
14
+        createShader();
15
+    }
16
+
17
+    private void createShader() {
18
+        ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
19
+            @Override
20
+            public Shader resize(int width, int height) {
21
+                double angleInRadians = Math.toRadians(90);
22
+
23
+                int x1 = (int) (Math.cos(angleInRadians) * width);
24
+                int y1 = (int) (Math.sin(angleInRadians) * height);
25
+                int[] colors = new int[]{Color.argb(90, 0, 0, 0), Color.argb(15, 0, 0, 0), Color.TRANSPARENT};
26
+                float[] positions = {0, 0.78f, 1};
27
+                LinearGradient lg = new LinearGradient(0, 0, x1, y1,
28
+                        colors,
29
+                        positions,
30
+                        Shader.TileMode.REPEAT);
31
+                return lg;
32
+            }
33
+        };
34
+        setShaderFactory(sf);
35
+    }
36
+}

+ 5
- 30
android/app/src/main/java/com/reactnativenavigation/views/TranslucentTitleBarBackground.java View File

1
 package com.reactnativenavigation.views;
1
 package com.reactnativenavigation.views;
2
 
2
 
3
 import android.graphics.Color;
3
 import android.graphics.Color;
4
-import android.graphics.LinearGradient;
5
-import android.graphics.Shader;
6
-import android.graphics.drawable.PaintDrawable;
7
-import android.graphics.drawable.ShapeDrawable;
8
-import android.graphics.drawable.shapes.RectShape;
4
+import android.graphics.drawable.ColorDrawable;
9
 
5
 
10
-class TranslucentTitleBarBackground extends PaintDrawable {
11
-
12
-    TranslucentTitleBarBackground() {
13
-        setShape(new RectShape());
14
-        createShader();
15
-    }
16
-
17
-    private void createShader() {
18
-        ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
19
-            @Override
20
-            public Shader resize(int width, int height) {
21
-                double angleInRadians = Math.toRadians(90);
22
-
23
-                int x1 = (int) (Math.cos(angleInRadians) * width);
24
-                int y1 = (int) (Math.sin(angleInRadians) * height);
25
-                int[] colors = new int[]{Color.argb(90, 0, 0, 0), Color.argb(15, 0, 0, 0), Color.TRANSPARENT};
26
-                float[] positions = {0, 0.78f, 1};
27
-                LinearGradient lg = new LinearGradient(0, 0, x1, y1,
28
-                        colors,
29
-                        positions,
30
-                        Shader.TileMode.REPEAT);
31
-                return lg;
32
-            }
33
-        };
34
-        setShaderFactory(sf);
6
+public class TranslucentTitleBarBackground extends TitleBarBackground {
7
+    public TranslucentTitleBarBackground() {
8
+        super(new TranslucentDrawable(), new ColorDrawable(Color.TRANSPARENT));
9
+        setCrossFadeEnabled(true);
35
     }
10
     }
36
 }
11
 }

+ 13
- 15
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;
5
 import android.view.MotionEvent;
4
 import android.view.MotionEvent;
6
 import android.view.View;
5
 import android.view.View;
7
 
6
 
9
 import com.reactnativenavigation.params.StyleParams;
8
 import com.reactnativenavigation.params.StyleParams;
10
 import com.reactnativenavigation.utils.ViewUtils;
9
 import com.reactnativenavigation.utils.ViewUtils;
11
 import com.reactnativenavigation.views.TitleBar;
10
 import com.reactnativenavigation.views.TitleBar;
12
-import com.reactnativenavigation.views.TranslucentAndSolidTitleBarBackground;
11
+import com.reactnativenavigation.views.TitleBarBackground;
12
+import com.reactnativenavigation.views.TranslucentTitleBarBackground;
13
 
13
 
14
 public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
14
 public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
15
     private CollapsingTextView title;
15
     private CollapsingTextView title;
16
     private int collapsedHeight;
16
     private int collapsedHeight;
17
     private final ScrollListener scrollListener;
17
     private final ScrollListener scrollListener;
18
     private final CollapsingTopBarParams params;
18
     private final CollapsingTopBarParams params;
19
-    private @Nullable TranslucentAndSolidTitleBarBackground titleBarBackground;
19
+    private TitleBarBackground titleBarBackground;
20
 
20
 
21
     public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener, CollapsingTopBarParams params) {
21
     public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener, CollapsingTopBarParams params) {
22
         super(context);
22
         super(context);
45
     @Override
45
     @Override
46
     public void hideTitle() {
46
     public void hideTitle() {
47
         super.hideTitle();
47
         super.hideTitle();
48
-        if (titleBarBackground != null) {
49
-            titleBarBackground.showTranslucentBackground();
50
-        }
48
+        titleBarBackground.showTranslucentBackground();
51
     }
49
     }
52
 
50
 
53
     @Override
51
     @Override
54
     public void showTitle() {
52
     public void showTitle() {
55
         super.showTitle();
53
         super.showTitle();
56
-        if (titleBarBackground != null) {
57
-            titleBarBackground.showSolidBackground();
58
-        }
54
+        titleBarBackground.showSolidBackground();
59
     }
55
     }
60
 
56
 
61
     private void addCollapsingTitle() {
57
     private void addCollapsingTitle() {
92
 
88
 
93
     @Override
89
     @Override
94
     protected void setBackground(StyleParams params) {
90
     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
-        }
91
+        titleBarBackground = createBackground(params);
92
+        setBackground(titleBarBackground);
93
+    }
94
+
95
+    private TitleBarBackground createBackground(StyleParams params) {
96
+        return hasTranslucentAndSolidBackground(params) ?
97
+            new TitleBarBackground(params.collapsingTopBarParams.scrimColor) :
98
+            new TranslucentTitleBarBackground();
101
     }
99
     }
102
 
100
 
103
     private boolean hasTranslucentAndSolidBackground(StyleParams params) {
101
     private boolean hasTranslucentAndSolidBackground(StyleParams params) {