I have studied the following 2 questions, both asking exactly what I am asking:
https://developer.appcelerator.com/question/117432/keep-searchbar-at-the-top-of-the-tableview-when-scrolling
https://developer.appcelerator.com/question/10611/adding-table-view-beneath-searchbar
The problem is, there is no confirmed and correct answer given on either question. Solutions are suggested and follow-up comments always say "that didn't work". The one exception, where a comment says "that works perfectly", seems to be referring to an answer that doesn't use a search bar at all, and seems pointless.
So I'm just looking for a good approach to keeping the search bar visible even when scrolling down through the table rows. I have hundreds of rows in my table. The table loads fast, the rows scroll fine, and the search works perfectly. The only problem (same as in the other 2 posts) is that the moment you start scrolling down in the table, the search bar scrolls up out of site. I'm amazed that the default behavior is for the searchbar to disappear as soon as you scroll. It's hard to imagine anyone wanting that behavior ever.
Here is my code:
var searchbar = Ti.UI.createSearchBar({
showCancel: true,
top: 5
});
var movies = Ti.UI.createTableView({
data: movieData,
top: 30,
height: '75%',
search: searchbar,
hideSearchOnSelection: false
});
I've coded like this:
var searchBar = Ti.UI.createSearchBar({
showCancel : false,
borderRadius : 10,
borderColor : "#000",
hintText : 'Search..',
height : 45,
barColor : "#fff"
});
View.add(searchBar);
var tableView = Ti.UI.createTableView({
top : searchBar.top + searchBar.height + 30,
search : searchBar,
filterCaseInsensitive : true,
filterAttribute : 'nametoshow',
backgroundColor : 'transparent',
separatorStyle : Ti.UI.iPhone.TableViewSeparatorStyle.SINGLE_LINE,
separatorColor : 'transparent'
});
View.add(tableView);
Even if this doesnt help you try adding zindex to searchbar. Greater zindex components will make it lay on top lesser zindex components.
Related
I want to fade out the splash screen.
I think it's possible in native code android or iOS.
However for titanium which way is the appropriate ??
for now my source code is this
var topWin = Ti.UI.createWindow();// main application window.
var img = Ti.UI.createImageView({
image : '/img/Default.png',
top : 0,
left : 0,
width : '100%',
height : '100%'
});
var splash = Ti.UI.createWindow(); //splash window
splash.add(img);
splash.open();
var fadeOut = Ti.UI.createAnimation({
opacity : 0.2,
duration : 300
});
var fadeIn = Ti.UI.createAnimation({
opacity : 1,
duration : 1800
});
setTimeout(function(e) {
splash.close(fadeOut);
topWin.open(fadeIn);
}, 3000);
It works as I mean however I think this way might be a bit strange.
Since
I have to decide the each image according to different resolution devices(iphone/ipad/android ,,) by manual while splash screen is chosen automatically.
Is there a good way other than this??
Take a look at this:
http://www.tidev.io/2015/01/06/how-to-re-use-the-launch-image-in-the-app/
I haven't done this in a while, and I'm not sure if the changes to 5.2 SDK for iOS for Storyboard launch files breaks this method but here's where I'd start.
I would like to animate a view.
I want the view to slide from the bottom to the top of the screen.
I wrote this code, but the view doesn't show up.
myWin.add(myView);
myView.height = '0%';
var expand= Ti.UI.createAnimation({
height: '100%',
duration: 300
});
myView.animate(expandView);
Reference is this document
#whitebear. In your problem, you want make the view slide to top from the bottom, but you had taken a wrong way. The way you had taken is a Shape Change Animation, which want to change the height of the view to make it. However it's will never get the sliding action you want, if your code work, what you will see is the view will get more and more bigger until fill the window, not a sliding action.
What you want is a Position Change Animation for the view. Just change the top value of the view can make it. Example:
var view = Ti.UI.createView({
top: '-100%', //the view can't be see at the bottom
width: '100%',
height: '100%',
backgroundColor: 'red'
});
var ani = Ti.UI.createAnimation({
top: 0, //show the view from the bottom to top
duration: 3000
});
view.animate(ani);
Just have a try, I hope this can help you. If you really want to change the height of the view to get the effect, maybe you can define a method to set the view height with the time. Good luck!
You should call animate method of view passing it reference of animation object you created.
myView.animate(expand);
For you requirement try this
var win = Ti.UI.createWindow({ backgroundColor : '#fff'});
var myView = Ti.UI.createView({backgroundColor : 'red'});
win.add(myView);
myView.height = '0%';
myView.bottom = '0'; // basically the view has been added at bottom of window
var expand= Ti.UI.createAnimation({
height: '100%',
duration: 1300
});
myView.animate(expand);// and you are only increasing the view's height in animate
I'm trying to position my views and have them resize automatically.
For this example, I have 3 views, a red, a blue and a green one, and they're all laid out in a window with a VERTICAL layout, and they all have a width of "100%":
var mainView = Ti.UI.createView({
backgroundColor : "white",
width : "100%",
height : "100%",
layout : "vertical"
});
var redView = Ti.UI.createView({
backgroundColor : "red",
width : "100%",
height : "40%",
});
mainView.add(redView);
var blueView = Ti.UI.createView({
backgroundColor : "blue",
width : "100%",
height : "30%",
});
mainView.add(blueView);
var greenView = Ti.UI.createView({
backgroundColor : "green",
width : "100%",
height : "30%"
});
mainView.add(greenView);
It looks good. Now I want to add controls to the red view, and I want a couple of things to happen:
I'll place a control in the red view, and it will have a MARGIN of 10 points/pixels in each direction.
When I resize the inner control, the RED view will automatically resize itself to accommodate the inner control, but will keep the 10 points margin from each direction.
The BLUE and the GREEN views will automatically reduce their sizes to take the rest of the screen.
Example:
var blackView = Ti.UI.createView({
backgroundColor : "black",
top : 10,
bottom : 10,
left : 10,
right : 10
});
...
...
blackView.height = blackView.height + 50;
When I increase blackView's height by 50, the following things should happen:
1) The height of redView should be increased by 50.
2) The height of blueView and greenView should be reduced by 25, and they should be automatically placed.
Any ideas how to achieve this automatic behavior?
There are couple of ways to do that.
Simple Method:
when you increase the size of inner view you have to increase the size of outer view and all other relative views should be decreased accordingly.
Recommended:
Use event listeners for it.
e.g
1. Fire a custom event when you change the size e.g
Ti.App.fireEvent("myViewSizeChanged",{newSize:"50",control:redview});
Listen this event call your computational method for resizing your each view.
e.g
Ti.App.addEventListener("myViewSizeChanged",function(e){
// here you can get the value of e
//e.newSize
//e.redView
});
both params will tell you the new size of which control... and you can adjust the rest of the view sizes accordingly
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.
I'm trying to smoothly toggle the border-width of a span between 0 and 5.
This is the code I have tried, developing in firefox
function anim()
{
this.sw=!this.sw;
if(this.sw)
{
//lower
$('.cell_action').animate(
{
'border-width':'0px',
'margin':0
},
600
);
}
else
{
//raise
$('.cell_action').animate(
{
'border-width':'5px',
'margin':-5
},
600
);
}
}
When I try to go to 5px, it seems to work, but when I run the function again to animate back to 0, the border is set immediately to 0 and only the margin animates.
Seems to be a bug...
I'm having the same problem, but noticed the following:
FireFox (3): No animation back to 0
Chrome: No animation back to 0
Safari(winXP): No animation back to 0
Opera (10): No problems. Animates nicely
IE (8): No problems. Animates nicely
Going to investigate further...
-- EDIT --
Found the answer on bugs.jquey.com: ticket 7085
The borderWidth property is a shorthand property and returns a string that is a series of numbers separated by spaces. The .animate() method is only documented to animate properties that are numeric, such as borderLeftWidth.
I fixed my problem by animating to 0px like this:
$this.animate({
borderLeftWidth: "0px",
borderTopWidth: "0px",
borderRightWidth: "0px",
borderBottomWidth: "0px"
}, 200);