@nativescript-community/ui-material-core-tabs 7.0.7 → 7.0.10

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.10](https://github.com/nativescript-community/ui-material-components/compare/v7.0.9...v7.0.10) (2022-05-12)
+
+**Note:** Version bump only for package @nativescript-community/ui-material-core-tabs
+
+
+
+
+
+## [7.0.9](https://github.com/nativescript-community/ui-material-components/compare/v7.0.8...v7.0.9) (2022-05-12)
+
+**Note:** Version bump only for package @nativescript-community/ui-material-core-tabs
+
+
+
+
+
+## [7.0.8](https://github.com/nativescript-community/ui-material-components/compare/v7.0.7...v7.0.8) (2022-05-10)
+
+
+### Bug Fixes
+
+* **tabs:** correctly calculate sizing and animation positions ([20a977d](https://github.com/nativescript-community/ui-material-components/commit/20a977dcc436dff54878034ea3305c20afa6898a))
+
+
+
+
+
 ## [7.0.7](https://github.com/nativescript-community/ui-material-components/compare/v7.0.6...v7.0.7) (2022-05-09)
 
 **Note:** Version bump only for package @nativescript-community/ui-material-core-tabs

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-material-core-tabs",
-    "version": "7.0.7",
+    "version": "7.0.10",
     "description": "Material Core Tabs component",
     "main": "./index",
     "sideEffects": false,
@@ -39,7 +39,7 @@
     "repository": "https://github.com/nativescript-community/ui-material-components",
     "readmeFilename": "README.md",
     "dependencies": {
-        "@nativescript-community/ui-material-core": "^7.0.7"
+        "@nativescript-community/ui-material-core": "^7.0.10"
     },
-    "gitHead": "8b5c9966736ff0ce880c1aaa4557a108cf08290d"
+    "gitHead": "ac0b95759c348a33d49c2dfc183d7bdc2dec29e1"
 }

package/platforms/android/java/com/nativescript/material/core/TabStrip.java

@@ -43,7 +43,11 @@ class TabStrip extends LinearLayout {
 
     private final int mDefaultBottomBorderColor;
 
+    // selected tab position (final)
     private int mSelectedPosition;
+    // current tab position for when the view is animating (scrolling)
+    private int mSelectionTabPosition;
+    // scrolling offset in relation to the current tab position
     private float mSelectionOffset;
 
     private final SimpleTabColorizer mDefaultTabColorizer;
@@ -173,6 +177,7 @@ class TabStrip extends LinearLayout {
 
 
     void onTabsViewPagerPageChanged(int position, float positionOffset) {
+        mSelectionTabPosition = position;
         mSelectionOffset = positionOffset;
         invalidate();
     }
@@ -206,24 +211,30 @@ class TabStrip extends LinearLayout {
         final SimpleTabColorizer tabColorizer = mDefaultTabColorizer;
 
         // Thick colored underline below the current selection
-        if (childCount > 0 && mSelectedPosition < childCount) {
-            View selectedTitle = getChildAt(mSelectedPosition);
+        if (childCount > 0 && mSelectionTabPosition < childCount) {
+            View selectedTitle = getChildAt(mSelectionTabPosition);
             int left = selectedTitle.getLeft();
+            int width = selectedTitle.getWidth();
             int right = selectedTitle.getRight();
-            int color = tabColorizer.getIndicatorColor(mSelectedPosition);
-
-            if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {
-                int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1);
+            int color = tabColorizer.getIndicatorColor(mSelectionTabPosition);
+            int nextTab = mSelectionTabPosition + 1;
+
+            // we're always at mSelectionTabPosition + mSelectionOffset (ex: 1 + 0.5)
+            // if we mSelectionOffset > 0f then we need to mutate the position, width and color of the selection
+            // if we're on the last tab, nextTab will be getChildCount() + 1 so it won't enter as there's nothing to animate
+            if (mSelectionOffset > 0f && nextTab >= 0 && nextTab < getChildCount()) {
+                int nextColor = tabColorizer.getIndicatorColor(nextTab);
                 if (color != nextColor) {
                     color = blendColors(nextColor, color, mSelectionOffset);
                 }
 
                 // Draw the selection partway between the tabs
-                View nextTitle = getChildAt(mSelectedPosition + 1);
-                left = (int) (mSelectionOffset * nextTitle.getLeft() +
-                        (1.0f - mSelectionOffset) * left);
-                right = (int) (mSelectionOffset * nextTitle.getRight() +
-                        (1.0f - mSelectionOffset) * right);
+                View nextTitle = getChildAt(nextTab);
+                // left is the current tab left + it's width * mSelectionOffset ex: 0 + (100 * 0.5) = 50, halfway through the current cell
+                left = (int) (left + mSelectionOffset * width);
+                // right is the tab right + the next tab's width * mSelectionOffset ex: 100 + (200 * 0.5) = 200, halfway through the next cell
+                // this ensures that the width mutates smoothly as we move between cells
+                right = (int) (right + mSelectionOffset * nextTitle.getWidth());
             }
 
             mSelectedIndicatorPaint.setColor(color);

package/platforms/android/java/com/nativescript/material/core/TabsBar.java

@@ -116,6 +116,8 @@ public class TabsBar extends HorizontalScrollView {
 
     public void setDistributeEvenly(boolean distributeEvenly) {
         mDistributeEvenly = distributeEvenly;
+        mTabStrip.setMeasureWithLargestChildEnabled(distributeEvenly);
+        refreshTabStrip();
     }
 
     /**
@@ -300,10 +302,13 @@ public class TabsBar extends HorizontalScrollView {
             ll.setMinimumHeight((int) (SMALL_MIN_HEIGHT * density));
         }
 
+        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams();
         if (mDistributeEvenly) {
-            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams();
             lp.width = 0;
             lp.weight = 1;
+        } else {
+            lp.width = ViewGroup.LayoutParams.WRAP_CONTENT;
+            lp.weight = 0;
         }
     }
 
@@ -355,6 +360,21 @@ public class TabsBar extends HorizontalScrollView {
         }
     }
 
+    private void refreshTabStrip() {
+        final FragmentStateAdapter adapter = (FragmentStateAdapter)mViewPager.getAdapter();
+        for (int i = 0; i < adapter.getItemCount(); i++) {
+            TabItemSpec tabItem;
+            if (this.mTabItems != null && this.mTabItems.length > i) {
+                tabItem = this.mTabItems[i];
+            } else {
+                tabItem = new TabItemSpec();
+            }
+            if (i < mTabStrip.getChildCount()) {
+                this.updateItemAt(i, tabItem);
+            }
+        }
+    }
+
     public void setContentDescription(int i, String desc) {
         mContentDescriptions.put(i, desc);
     }