From a5dfb1d7441214884aa5ec452ccd5582e131cf04 Mon Sep 17 00:00:00 2001 From: Guy Carmeli Date: Mon, 18 Dec 2017 17:42:53 +0200 Subject: [PATCH] Setup TopTabs with ViewPager Slightly changes topTabs node declaration and removed the container from it. --- .../parse/NavigationOptions.java | 2 + .../parse/TopTabOptions.java | 23 +++++++++++ .../toptabs/TopTabController.java | 4 ++ .../toptabs/TopTabsAdapter.java | 5 +++ .../reactnativenavigation/views/TopBar.java | 25 ++++++++---- .../views/TopTabsLayout.java | 1 + lib/src/commands/LayoutTreeParser.js | 2 +- lib/src/commands/SimpleLayouts.js | 12 ++---- playground/src/containers/WelcomeScreen.js | 39 ++++++++++++------- 9 files changed, 81 insertions(+), 32 deletions(-) create mode 100644 lib/android/app/src/main/java/com/reactnativenavigation/parse/TopTabOptions.java diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java b/lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java index 59c3c05d30c..3ad4c97f012 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java @@ -31,6 +31,7 @@ public static NavigationOptions parse(JSONObject json, @NonNull NavigationOption result.topBarOptions = TopBarOptions.parse(json.optJSONObject("topBar")); result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs")); + result.topTabOptions = TopTabOptions.parse(json.optJSONObject("topTab")); result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs")); return result.withDefaultOptions(defaultOptions); @@ -38,6 +39,7 @@ public static NavigationOptions parse(JSONObject json, @NonNull NavigationOption public TopBarOptions topBarOptions = new TopBarOptions(); public TopTabsOptions topTabsOptions = new TopTabsOptions(); + public TopTabOptions topTabOptions = new TopTabOptions(); public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions(); public void mergeWith(final NavigationOptions other) { diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/parse/TopTabOptions.java b/lib/android/app/src/main/java/com/reactnativenavigation/parse/TopTabOptions.java new file mode 100644 index 00000000000..1454080144f --- /dev/null +++ b/lib/android/app/src/main/java/com/reactnativenavigation/parse/TopTabOptions.java @@ -0,0 +1,23 @@ +package com.reactnativenavigation.parse; + +import org.json.JSONObject; + +public class TopTabOptions implements DEFAULT_VALUES { + public String title = NO_VALUE; + + public static TopTabOptions parse(JSONObject json) { + TopTabOptions result = new TopTabOptions(); + if (json == null) return result; + + result.title = json.optString("title", NO_VALUE); + return result; + } + + void mergeWith(TopTabOptions topTabsOptions) { + + } + + void mergeWithDefault(TopTabOptions topTabsOptions) { + + } +} diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabController.java index 8ec38f06284..a7f97db53ae 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabController.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabController.java @@ -69,4 +69,8 @@ public void destroy() { public void mergeNavigationOptions(NavigationOptions options) { this.options.mergeWith(options); } + + String getTabTitle() { + return options.topTabOptions.title; + } } diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsAdapter.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsAdapter.java index 8eaaca1b708..225e33d175b 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsAdapter.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsAdapter.java @@ -15,6 +15,11 @@ public class TopTabsAdapter extends PagerAdapter implements ViewPager.OnPageChan this.tabs = tabs; } + @Override + public CharSequence getPageTitle(int position) { + return tabs.get(position).getTabTitle(); + } + @Override public int getCount() { return tabs.size(); diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java b/lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java index 502c5d4e9e5..177f50d7940 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java @@ -10,18 +10,19 @@ import android.view.ViewGroup; import android.widget.TextView; +import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager; + public class TopBar extends AppBarLayout { private final Toolbar titleBar; - private final TopTabs topTabs; + private TopTabs topTabs; - public TopBar(final Context context) { - super(context); - titleBar = new Toolbar(context); - topTabs = new TopTabs(context); + public TopBar(final Context context) { + super(context); + titleBar = new Toolbar(context); addView(titleBar); - } + } - public void setTitle(String title) { + public void setTitle(String title) { titleBar.setTitle(title); } @@ -73,4 +74,14 @@ private TextView findTextView(ViewGroup root) { public Toolbar getTitleBar() { return titleBar; } + + public void setupTopTabsWithViewPager(TopTabsViewPager viewPager) { + initTopTabs(); + topTabs.setupWithViewPager(viewPager); + } + + private void initTopTabs() { + topTabs = new TopTabs(getContext()); + addView(topTabs); + } } diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsLayout.java b/lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsLayout.java index bc1147a226f..55ee7d60c4c 100644 --- a/lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsLayout.java +++ b/lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsLayout.java @@ -35,6 +35,7 @@ private void initViews() { setOrientation(VERTICAL); addView(topBar); addView(viewPager); + topBar.setupTopTabsWithViewPager(viewPager); } @Override diff --git a/lib/src/commands/LayoutTreeParser.js b/lib/src/commands/LayoutTreeParser.js index 8dcd13743af..ba3d7ad1353 100644 --- a/lib/src/commands/LayoutTreeParser.js +++ b/lib/src/commands/LayoutTreeParser.js @@ -39,7 +39,7 @@ class LayoutTreeParser { _createTopTabs(topTabs) { return { type: LayoutTypes.TopTabs, - children: _.map(topTabs, (t) => this._createTopTab(t.container)) + children: _.map(topTabs, (t) => this._createTopTab(t)) }; } diff --git a/lib/src/commands/SimpleLayouts.js b/lib/src/commands/SimpleLayouts.js index fd5c6cc7825..475d0dd978c 100644 --- a/lib/src/commands/SimpleLayouts.js +++ b/lib/src/commands/SimpleLayouts.js @@ -114,19 +114,13 @@ const tabBasedWithBothSideMenus = { const singleScreenWithTopTabs = { topTabs: [ { - container: { - name: 'navigation.playground.TextScreen' - } + name: 'navigation.playground.TextScreen' }, { - container: { - name: 'navigation.playground.TextScreen' - } + name: 'navigation.playground.TextScreen' }, { - container: { - name: 'navigation.playground.TextScreen' - } + name: 'navigation.playground.TextScreen' } ] }; diff --git a/playground/src/containers/WelcomeScreen.js b/playground/src/containers/WelcomeScreen.js index 3d69c97e9bb..b4727a0379a 100644 --- a/playground/src/containers/WelcomeScreen.js +++ b/playground/src/containers/WelcomeScreen.js @@ -151,29 +151,38 @@ class WelcomeScreen extends Component { Navigation.push(this.props.containerId, { topTabs: [ { - container: { - name: 'navigation.playground.TopTabOptionsScreen', - passProps: { - title: 'Tab 1', - text: 'This is top tab 1' + name: 'navigation.playground.TopTabOptionsScreen', + passProps: { + title: 'Tab 1', + text: 'This is top tab 1' + }, + navigationOptions: { + topTab: { + title: 'Tab 1' } } }, { - container: { - name: 'navigation.playground.TopTabScreen', - passProps: { - title: 'Tab 2', - text: 'This is top tab 2' + name: 'navigation.playground.TopTabScreen', + passProps: { + title: 'Tab 2', + text: 'This is top tab 2' + }, + navigationOptions: { + topTab: { + title: 'Tab 2' } } }, { - container: { - name: 'navigation.playground.TopTabScreen', - passProps: { - title: 'Tab 3', - text: 'This is top tab 3' + name: 'navigation.playground.TopTabScreen', + passProps: { + title: 'Tab 3', + text: 'This is top tab 3' + }, + navigationOptions: { + topTab: { + title: 'Tab 3' } } }