I am having some serious issues with the flip animation and am not able to point it out, I have two image view on one view i have two buttons while the other just has an image.
My issue is when i flip from image view to the second image view with the buttons, the button zoom to the center of the screen and then move down to their original place.
From past 3 days i am not able to locate any kind of help online hence finally i decided to post a question here, please help me out given below is the code for those buttons and my animations.
The buttons are actually an image view
var cardView = Titanium.UI.createImageView({
image : imageBackground,
opacity:1,
zIndex: 10
});
var cardBackView = Titanium.UI.createImageView({
image :cardImage,
opacity: 0.1,
zIndex: 20
});
// am then adding few image in cardView and assigning images to them as above
var doneImageView = Titanium.UI.createImageView({
image: './images/Done.png',
bottom: screenHeight*0.001,//1,
right: screenWidth * 0.0156,//10,
width: screenWidth * 0.223,//143,
height:screenHeight*0.0469, //45,
zIndex: 105
});
var revokeImageView = Titanium.UI.createImageView({
image: './images/Revoke.png',
bottom: screenHeight*0.001,//1,
right: screenWidth * 0.0156,//10,
width: screenWidth * 0.223,//143,
height:screenHeight*0.0469, //45,
zIndex: 105
});
// creating a container view to hold the cardView and cardBackView
var testView = Titanium.UI.createView();
// assigning click event to both the images
cardBackView.addEventListener("click", function(e) {
testView.animate({
view:cardView, // doneImageView zooms on this animation
transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT,
duration:2500
});
});
cardView.addEventListener("click",function(e){
testView.animate({
view:cardBackView,
transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT,
duration:2500
});
});
// once done i have a container view where i am adding these images
// adding buttons image to the card view
cardView.add( doneImageView );
cardView.add( revokeImageView );
// adding the card view and card back view to the container view
testView.add(cardBackView);
testView.add(cardView);
// adding the container view to the main window
cardWindow.add(testWindow);
Please let me know what i am doing wrong here.
Thanks
Related
I have some basic styles like:
"#foo": {
backgroundColor: '#ff0000', // red
}
"#foo[if=Alloy.Globals.isSmallHeight]": {
backgroundColor: '#0000ff', // blue
}
in alloy.js I have the following:
function pxToDp(px){
return px / (Titanium.Platform.displayCaps.dpi / 160);
}
var screenWidth;
var screenHeight;
if (Ti.Platform.name == "android") {
screenWidth = pxToDp(Ti.Platform.displayCaps.platformWidth);
screenHeight = pxToDp(Ti.Platform.displayCaps.platformHeight);
} else {
screenWidth = Ti.Platform.displayCaps.platformWidth;
screenHidth = Ti.Platform.displayCaps.platformHeight;
}
Alloy.Globals.isSmallHeight= screenHeight <= 545;
This basically means the background colour of #foo is blue if the screen height is less than or equal to 545dp, and red otherwise.
This usually works fine. However, there are times when the height of the screen can change during run-time. For example:
Screen Orientation Change
Multi window (on Android)
Adjusting the splitter position while in multi window mode (Android)
The issue with this is that the styles are not re-applied to take into account the new screen width and screen height.
For example, let's say there is a screen of size 600dp x 300dp in the portrait position. #foo will correctly have a background colour of red.
However, if the orientation changes, the screen size is now: 300dp x 600dp, but the #foo does not re-check the height a background colour, and thus is still red instead of blue.
A similar issue occurs when going into split screen.
Therefore my question is, how can I reapply styles when the screen dimensions changes?
Have a look at the dynamic styles section in the documentation
http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styling
http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styles
it will give you a basic idea on how to create style at runtime and apply them. You could do this inside the orientation change event
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
This is an experiment with KineticJS and its goal is to simply keep an objected centered in the screen, as the window gets resized.
It works fine except that it doesn't center the object (a circle) at the initial resize event handler call. As I start resizing - and keep doing it - the circle gets centered. But initially the circle starts at the top left corner of the screen (0,0).
$(document).ready( function(){
$(window).resize(onResize);
var stage = new Kinetic.Stage({
container: 'container',
width: $(container).width(),
height: $(container).height()
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ radius: 70, fill: 'red' });
layer.add(circle);
stage.add(layer);
function onResize(){
$(container).css('height', window.innerHeight - 20);
stage.setWidth($(container).width());
stage.setHeight($(container).height());
updatePosition();
}
function updatePosition(){
circle.setPosition(stage.getWidth() / 2, stage.getHeight() / 2);
}
// initial call
onResize();
});
Any clue on why that happens? Thanks
http://jsfiddle.net/ME2cX/2
Yeah, you are missing a call to draw the stage after the onResize function is called.
Your order of events is to add things to the stage, then place the circle in the center, but the stage (or layer) needs to be drawn again to account for the new position of the circle.
In the jsfiddle, I placed 3 draw functions, I recommend you choose one of the
layer.draw()
functions rather than the
stage.draw();
I want to add an button in right side of tableview row, I have seen rightImage property in UI.TableViewRow. Is it possible to override the image view or can we add button under rightImage
rowObject.rightImage.add(mybutton);
In your TableViewRow, create a globalView with horizontal layout
var globalView = Ti.UI.createView({
width: "100%",
layout: "horizontal",
...
});
Then create 2 other views, the leftView (width equals to 80% for example) and the rightView which contains a button (set the width to 20%), then add the leftView and the rightView to your globalView.
globalView .add(leftView);
globalView.add(rightView);
Make sure that you set correctly the height for your components.
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