There is a view with many tabs in my App. I'd like to set focus on the last one. I can set active tab this.setActiveItem(10), but I'm not able to scroll (programmatically) tabbar to the last item. Content of the 10th tab is shown but 10th item on tabbar is hidden, so user could be confused.
Thanks a lot in advance.
A really good question and many people may find this useful.
So first, instance of tabBar is needed so we can get activeTab of tabPanel. Then we can easily get the offset of tab item. Here, tab item means not the container that holds tab's contents but the tab indicator which can either is placed at top or bottom. So we just need offset of active tab item from tabBar not the container.
this.getMyTabPanel().setActiveItem(6);
var tabBar = this.getMyTabPanel().getTabBar();
var activeTab = tabBar.getActiveTab();
var x= activeTab.element.getX();
var y = activeTab.element.getY();
Next part is, to get instance of tabBar scroller. Once we get this we can pragmatically scroll it do desired position we get in above step.
var scroller = this.getMyTabPanel().getTabBar().getScrollable().getScroller();
scroller.scrollTo(x,y);
Working demo is here
update
You can also enable animation while pragmatically scrolling with -
scroller.scrollTo(x, y, true);
Related
I suppose this is an old one. I have a sliding panel (JASidePanel) with a menu and I want to hide or slide the status bar while showing the menu. So, I have two options:
Hide the status bar and keep the height of my navigation bar.
Or slide the status bar with the panel.
I see these two options are possible. The first one via swizzling of the sizeToFit of the UINavigationBar (link). The second one via a snapshot of the screen before animating the panel.
But I see Reeder, that takes the second option and brings it to another level: the panel is not really a screenshot, is the actual view of the panel so the status bar is slide but continues being updated, also the panel does!
So, I have a couple of questions: how is the Reeder solution possible? And the second one, is it secure to perform method swizzling? Could it be rejected by Apple?
Thank you.
Finally I implemented the first solution as shown in this link.
I am trying to put a toolbar directly beneath a navigation bar but I need the toolbar to not hide the content from the view directly beneath it. My quick solution was to set the navigation controller's native toolbar to visible, which works and properly resizes the view beneath it so that it doesn't let anything hide behind it, BUT the default toolbar shows at the bottom of the screen.
I need it to be at the top, just under the nav bar. I figure the easy solution would be to change the frame of the default toolbar (which I don't know how to do) OR to position a new instance of the toolbar onto the view (which works but it hides the content beneath it) but have it resize the views below.
Please see the following image that I found to see what I'm trying to do. (note how the tableview's first row starts UNDER the tab bar)
Thanks!!!
You are confusing two things. The NavigationController toolbar property IS the bottom bar, any toolbar that you add to a view has nothing to do with the nav controller but is a property of that view.
If you have your own toolbar at the top of a view you need to move the rest of the view content down or set that toolbar to translucent if thats what your looking for.
Again the nav controller toolbar is always the bottom bar, the toolbar you drop in IB is just a toolbar for that view that you can put anywhere.
I don't believe you can change the frame of the default toolbar. You will need to create your own instance of a toolbar, position it at the bottom of the navigation bar and resize your tableView to fit below.
We can't see how you have your views set up but if you are starting with a view that is subclassed as UITableViewController you will have trouble doing that. What you want is to start with a UIViewController as your master controller, add a tableview and toolbar as subviews. Then position and size them as appropriate.
If you are hiding and showing the toolbar you will create a method to move it up under the navigation controller and again resize the tableview.
I have a simple view hierarchy example.
Obviously the main view space is the primary space the user will interact with. At the bottom I have tabs that can pop up to indicate to the user where he/she is in the progression of the app. Normally, these tabs only take up the space indicated by the "Custom Tabs" rectangle at the bottom, but they can expand all the way up to fill the "Empty Space" box.
In order for the tabs to still be clickable, I had to make the tab view's frame the full rectangle containing both the "Custom Tabs" space and "Empty Space" space. What this results in is that "Empty Space" not being interactive to the user when the tabs aren't popped up, because the input is basically being consumed by that UIView, and not forwarded through the rest of the hierarchy.
I suppose the root of this problem is that both "Main View Space" and the "Empty Space + Custom Tabs" are both subviews of the main window.
Is there a way I can tell the system to forward the user input to the sibling views if the user didn't actively tap on an interactive element? For example, doing something with the touchesBegan, touchesEnded etc. methods that would indicate to the OS that this view did not use the input.
EDIT
Here's another version of the view, demonstrating the tate of one tab being open:
EDIT2
After some simple testing, it would seem that the default behavior is that the top most view gets the input first. This applies even if you have a clear UIView on top of a UITextField. The clear UIView will consume the input, preventing the UITextField from being editable
EDIT3
The way the tabs are supposed to work is the user can tap on a tab (sized as in the first picture), and then it will expand to display a thumbnail view associated with that tab (as in the second picture). The user can then optionally tap the tab once more to close it, and return the size to the original picture. In order for the tab to be clickable when it is open, I have to have the containing view be basically large enough to contain all 4 tabs as if they were open. This results in a lot of empty space in the containing view. This empty space results in essentially dead input space on the screen. If there were a button in the main view space that is covered by the empty space, the user would not be able to click on it. I would like to be able to avoid that behavior, and have that button covered by the empty space still be clickable.
Rather than trying to "forward" touches, I would modify your layout so that the tab view is only as big as the tabs, and change it's .frame to be the larger rectangle in code only when you need it. For example, when a tab is clicked:
CGRect tabFrame = tabView.bounds;
tabFrame.origin.y = top_of_emptySpace;
tabFrame.size.height = height_of_emptySpace + height_of_tabView;
tabView.frame = tabFrame;
then you can add the content you need. when you need it to go away, remove the content then do :
CGRect tabFrame = tabView.bounds;
tabFrame.origin.y = top_of_tabView;
tabFrame.size.height = height_of_tabView;
tabView.frame = tabFrame;
There might be some tweaking required to make the content show up as you like, but this way, when the tabs are minimized, you won't have to do anything extra to make the main view respond to touches correctly.
Ok, this is the way I would do it:
The RootViewController has two views, its main view which takes the whole screen, the one that is added to the window. And the tab view.
Then I would add another view controller (a UINavigationController ideally) to the RootViewController and I would have its view added as a subview of the RootViewController's view.
Any change performed, such as pushing new view controller or anything, would be done to the child view controller.
That way, your tab view would always be showing. To open a tab, you could create a new view that would show on top of the tab bar using an animation or something similar.
I have a table that I want to have horizontally scrolling rows. When I tried adding a scrollable view to a row, it crashed the app. Is there a particular way to do this? Basically, I'm adding items to each row dynamically and if it overflows I want the older items to scroll off the left, but still be retrievable.
dont add a scroll view just use a regular view and update the width as items are added and scroll the view yourself.
you will have to figure out how scroll the view to the left and right by tracking touch start and touch end.
you might want to find an alternate UI approach though
Why don't use layout property... i mean vertical or horizontal.
var HZview = Ti.UI.createView({
height:'auto',
layout:'horizontal'
)};
VzView.add(TableViewRows);
Now add your rows to this horizontal view and finally your TableView to Vertical View.
var HZview = Ti.UI.createView({
height:'auto',
layout:'vertical'
)};
VzView.add(TableView);
Project need to show 7 tab bars in the application. So as per TabBar controller I am able to show the 4 tabs at a time along with "More" button which after clicking shows remaining tabs.
Also I need to show Navigation Tab for each View.
I am able to achieve this till now. But we need to make the Tab Bar in scrolling manner so that user can scroll the remaining tabs and after clicking particular tab that view is loaded along with Navigation Controller.
So can any body tell me how to achieve Scrolling TabBar along with Navigation bar in each view.
Any sample code will be more great full......
Thanks in advance.
You already mentioned the "more"-button... This should be the way to manage too many tabs, in order not to break the common iPhone l&f and keep users on track.