titanium-sdk icon indicating copy to clipboard operation
titanium-sdk copied to clipboard

feat(android): add tabMode to TabGroup

Open m1ga opened this issue 5 years ago • 12 comments

https://jira-archive.titaniumsdk.com/TIMOB/TIMOB-26990

Switch between fixed and srollable tabMode:

var win = Ti.UI.createWindow({

});
var btn1 = Ti.UI.createButton({
	title: "fixed",
	top: 5
});
var btn2 = Ti.UI.createButton({
	title: "scrollable",
	top: 60
});
win.add([btn1, btn2]);
btn1.addEventListener("click", function() {
	openTabGroup(Ti.UI.Android.TAB_MODE_FIXED);
})
btn2.addEventListener("click", function() {
	openTabGroup(Ti.UI.Android.TAB_MODE_SCROLLABLE);
})
win.open();

function openTabGroup(tabModeValue) {

	var tabs = [];

	for (var i = 0; i < 10; ++i) {
		var w = Ti.UI.createWindow({});
		var t = Ti.UI.createTab({
			window: w,
			title: 'win'
		});
		tabs.push(t);
	}

	tabGroup = Ti.UI.createTabGroup({
		tabs: tabs,
		tabMode: tabModeValue
	});
	tabGroup.open();
}

https://user-images.githubusercontent.com/4334997/160287343-79483db5-d6ea-42de-929f-c8a2b30282c1.mp4

m1ga avatar Apr 19 '19 11:04 m1ga

Fails
:no_entry_sign:

:microscope: There are library changes, but no changes to the unit tests. That's OK as long as you're refactoring existing code, but will require an admin to merge this PR. Please see README.md#unit-tests for docs on unit testing.

Warnings
:warning:

Commit f6785f54bd13f5effa9b768bc5c8bbd1dd860aeb has a message "remove files" giving 2 errors:

  • subject may not be empty
  • type may not be empty
:warning:

Commit 18a5ce207805577597c99f0ebe4e2097ce48f6cd has a message "update" giving 2 errors:

  • subject may not be empty
  • type may not be empty
:warning:

Commit 953c28f7512c9d11d60b5049850780f3154399c2 has a message "fixed fixed mode" giving 2 errors:

  • subject may not be empty
  • type may not be empty
:warning:

Commit ef3148807a7d7d0d0095de913b167d59c71868b1 has a message "type" giving 2 errors:

  • subject may not be empty
  • type may not be empty
:warning:

Commit 0280d33c21724a5d62b8ad8f44d5ea3b57d9e908 has a message "default values" giving 2 errors:

  • subject may not be empty
  • type may not be empty
:warning:

Commit 1779571fe2d3b2caf2c705449cdd76650fbdf3ab has a message "version number" giving 2 errors:

  • subject may not be empty
  • type may not be empty
:warning:

Commit 07d1897231af607d6169fdeeb632144f0c589d0e has a message "doc" giving 2 errors:

  • subject may not be empty
  • type may not be empty
:warning:

Commit d47109a8c340f93e6a921f17caa681f6455efb8a has a message "Android: add tabMode" giving 2 errors:

  • type must be lower-case
  • type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test]
:warning: Tests have failed, see below for more information.
:warning: This PR has milestone set to 10.0.0, but the version defined in package.json is 10.2.0 Please either: - Update the milestone on the PR - Update the version in package.json - Hold the PR to be merged later after a release and version bump on this branch
Messages
:book:

:rotating_light: This PR has one or more commits with warnings/errors for commit messages not matching our configuration. You may want to squash merge this PR and edit the message to match our conventions, or ask the original developer to modify their history.

:book: :x: 3 tests have failed There are 3 tests failing and 1161 skipped out of 21274 total tests.
:book: :tada: Another contribution from our awesome community member, m1ga! Thanks again for helping us make Titanium SDK better. :thumbsup:
:book:

:floppy_disk: Here's the generated SDK zipfile.

Tests:

ClassnameNameTimeError
android.emulator.5.0.Titanium.UI.View"after all" hook for "rgba fallback" (5.0.2)20.383
Error: Timeout of 10000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js)
android.emulator.5.0.Titanium.UI.View"after each" hook for "getOrCreateView() should always return a View" (5.0.2)10.324
Error: Timeout of 10000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js)
android.emulator.main.Titanium.Geolocation.methods#forwardGeocoder() works via callback argument (12)5.04
Error: expected false to be true
at Assertion.fail (/node_modules/should/cjs/should.js:275:13)
      at Assertion.value (/node_modules/should/cjs/should.js:356:9)
      at Geolocation.<anonymous> (/ti.geolocation.test.js:585:32)

Generated by :no_entry_sign: dangerJS against be0d5dae5fabd3f8d3f9a8594afcce00b75382c0

build avatar Apr 19 '19 11:04 build

cc @ypbnv

sgtcoolguy avatar Jul 30 '19 18:07 sgtcoolguy

changed the text and the version number

m1ga avatar Jul 31 '19 15:07 m1ga

@m1ga Thanks! Can you update the version number in the other two places I have commented on?

ypbnv avatar Aug 01 '19 13:08 ypbnv

missed them, sorry! Updated too

m1ga avatar Aug 01 '19 19:08 m1ga

@m1ga, @ypbnv,

Our TabGroup in Titanium 7.x.x scrolled horizontally by default, but our new top tab style in 8.0.0 no longer scrolls without this tab mode. Which means we did not maintain the old behavior. (I didn't notice this until now, so, it got past me too.)

So, do you think we need a new "tabMode" property at all? I'm thinking we should make the top tabs scrollable by default and drop this new property if we can.

Perhaps a better question is would anyone want to use the "static" tab mode setting where it shows ellipsis if there isn't enough room for all tabs (this kind of looks bad).

Side Note: iOS shows a "More" button if there is not enough room to show all tabs. iOS never truncates tab titles with ellipsis, unlike Android's "static" tab mode.

jquick-axway avatar Aug 02 '19 01:08 jquick-axway

@jquick-axway I can change the default value but it would be nice to have this option e.g. if you tabs are only some pixel too big it will be scrollable and with fixed you set it to be static.

m1ga avatar Aug 02 '19 05:08 m1ga

I've changed the default value to scrollable again (inside the XML that caused it to be fixed: https://github.com/appcelerator/titanium_mobile/blame/1a2343d1500a47ea5adabe8a52fcc077dd4b5169/android/modules/design/res/values-land/values-land.xml)

m1ga avatar Aug 03 '19 10:08 m1ga

@jquick-axway , @m1ga To me it feels OK to have the default value match the old behavior ( I have no clue why I did not pay attention to that doing the refactoring ) and have a new property exposed. I understand it does not make much sense parity-wise, but for edge cases like the one pointed out by Michael it would be useful.

And that rises a question - having a different default tabMode from the refactoring until now - which functionality would it make more sense to keep backward compatible?

ypbnv avatar Aug 05 '19 15:08 ypbnv

The only thing that bugs me is that this new "tabMode" property only applies to Android and only its top tab style. It seems like a waste to me, which is why I was thinking about simplifying it. Hmm...

jquick-axway avatar Aug 05 '19 17:08 jquick-axway

@m1ga, @ypbnv, does setting tab mode to "fixed" make the tabs fully span the width of the screen when in landscape mode? Or in portrait mode on a tablet? (I haven't tested this for myself yet.)

I ask because one thing that has changed as of Titanium 8.0.0 when we switched to the Java TabLayout class is that the top tabs do not fully fill the width of the screen in portrait mode on a tablet... versus the old tab group behavior did. I don't think it's a big deal, but there have been a couple app devs who have complained about it.

What I've seen on stackoverflow below suggests that this will do the trick... https://stackoverflow.com/questions/30843775/tab-not-taking-full-width-on-tablet-device-using-android-support-design-widget

jquick-axway avatar Aug 20 '19 17:08 jquick-axway

There is a difference between opening the Window in landscape mode vs turning it while open: http://migaweb.de/20190822_192849.mp4

If you open it in portrait fixed mode and turn it it will take the whole space. If you open it in landscape fixed mode it will be centered. Scrolling mode is always aligned to the left side

Edit: fixed the fixed mode behavior! It will be full width the whole time now

m1ga avatar Aug 22 '19 17:08 m1ga

closing in favor of https://github.com/tidev/titanium-sdk/pull/13877

m1ga avatar Jun 28 '23 19:06 m1ga