Can we zoom in and out using views in appecelerator titanium? - view

Is it possible to zoom in and zoom out in a view just like using a double tap or pinch functionality? If so can we still get the same coordinates or different coordinates after zooming in?
If I have a view of height 100 and width 100 and when I click on the end of the view it obviously returns y-position as 100.
Another question I have is after zoom using a pinch or doubletap, will it return the end y co-ordinate as 100 or will it return a different value since we zoomed-in?
If this is not possible, is there an an alternative?
Thank you.

You can add the view to a scrollView. When you've done this you can zoom in and out by pinching.
var scrollView = Titanium.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
top: 0,
bottom: 0,
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: true,
//Here you can determine the max and min zoom scale
maxZoomScale: 100,
minZoomScale: 0.1,
//With this property you can set the default zoom
zoomScale: 1
});
After you create this you can add your view to it
scrollView.add(view)
Hope this helps!
Tjeu

Related

how to handle different screen sizes in react native?

I am developing an application on react-native. I have made a UI which works fine on iPhone 6 but not working fine on iPhone 5 or lower versions.
How should I fix this ?
You need to think about proportion when building your UI.
1, Use percentage(%) for width and aspectRatio for height, or vice versa.
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%" of your width
}
2, Use flex for the jobs percentage can't do. For example, if you have arbitrary size of items in a list and you want them to share equal sizes. Assign each of them with flex: 1
3, Use rem from EStyleSheet instead of pixels. rem is a scale fator. For example, if your rem is 2 and your “11rem” will become “11*2” = “22”. If we make rem proportion to the screen sizes, your UI will scale with any screen sizes.
//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});
//how to use rem
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%"
padding: "8rem", //it'll scale depend on the screen sizes.
}
4, Use scrollView for contents that could potentially scale out of the boxes. For example, a TextView
5, Every time you think about using pixels, consider use rem in method 3.
For a detailed explanation, you can read the article here. 7 Tips to Develop React Native UIs For All Screen Sizes
Have you designed the app using fixed widths and heights? You should definitely use the capabilities of flexbox and try to avoid settings fixed sizes as much as possible. The flex property can be used to define how much space a <View /> should use releative to others, and the other properties on that page can be used to lay out elements in a flexible way that should give the desired results on a range of different screen sizes.
Sometimes, you may also need a <ScrollView />.
When you do need fixed sizes, you could use Dimensions.get('window').
You need to calculate sizes dynamically, relying on screen size.
import { Dimensions, StyleSheet } from 'react-native'
[...]
const { width, height } = Dimensions.get('window')
[...]
const styles = StyleSheet.create({
container: {
flex: 1.
flexDirection: 'column',
},
myView: {
width: width * 0.8, // 80% of screen's width
height: height * 0.2 // 20% of screen's height
}
})
If you are using TabbarIOS, remember that Dimensions.get('window') gives you the whole screen's height, this means that you'll have to take in account that the tabbar has fixed-height of 56.
So for example, when using TabbarIOS:
const WIDTH = Dimensions.get('window').width,
HEIGHT = Dimensions.get('window').height - 56
Then use WIDTH and HEIGHT as above.

reorganize layout on orientation change in titanium

I have a layout that has sum specifications when it is in portrait. But when I change the screen orientation the layout needs to reorganize to fit the entire screen. The problem is that the layout keeps he's dimensions. So if the layout starts portrait the I change to landscape the layout keeps the portrait configuration. How can I make my layout so it auto reorganizes on screen orientation changes?
How I create my views:
var deviceHeight = Ti.Platform.displayCaps.platformHeight,
deviceWidth = Ti.Platform.displayCaps.platformWidth,
platform = Ti.Platform.osname;
if (platform == 'android') {
deviceHeight = Math.round(Ti.Platform.displayCaps.platformHeight / Ti.Platform.displayCaps.logicalDensityFactor);
deviceWidth = Math.round(Ti.Platform.displayCaps.platformWidth / Ti.Platform.displayCaps.logicalDensityFactor);
}
var View = Ti.UI.createView({
height : deviceHeight,
width : deviceWidth,
backgroundColor : 'white',
layout : 'vertical'
});
Very important: Don't specify width in points/pixels, but in percentages. Or use relative width. For example, if you want a view that is full width, minus 10 left and 10 right, specify that:
Ti.UI.createView(){
left: 10,
right: 10
}
Treat Apps different as websites! Make everything relative. There are so many resolutions it is impossible to make a layout PER resolution. Make a single solution for mobile, and possible re-arrange some stuff for tablets.
If you really want to redraw manually, use this event and redefine all your views after again:
Ti.Gesture.addEventListener('orientationchange',function(e) {
});
For this to work, you need to keep a reference to all your views and adjust where you like.

Xamarin.Forms - Animating 2 Things at the Same Time (Push Animation)

I have a Xamarin forms page that contains an absolute layout that wraps everything. Inside that, I have content that fills the whole space and has left padding of 80, and then I have a left nav sidebar that is 80 wide and sits on top of the main content:
I want a sort of modified "push" animation, which means doing two things:
Increase the width of left nav by 100 (to 180)
TranslateX the main content by 100
(Note that using TranslateTo() would be super easy, but the left nav needs to increase in width, not shift to the right, and there's no WidthTo() method).
I can do #1 by itself just fine.
I can do #2 by itself just fine.
But I can't get them to both animate. If I run the left nav animation first (via .Commit()), only the main content animates. If I run the main content animation first, neither animates. Strange! What is going on here?
Here's the basic code I'm using:
var leftNavAnimation = new Animation(
callback: x => leftNav.WidthRequest = x,
start: 80,
end: 180,
easing: Easing.Linear
);
var mainContentAnimation = new Animation(
callback: x => mainContent.TranslationX = x,
start: 0,
end: 100,
easing: Easing.Linear
);
leftNavAnimation.Commit(this, "leftNavAnimationName", length: animationLength);
pageContentAnimation.Commit(this, "mainContentAnimationName", length: animationLength);
I figured out that the first parameter of .Commit() needs to refer to the element you're animating. So changing from:
mainContentAnimation.Commit(this, "mainContentAnimationName", length: animationLength);
To:
mainContentAnimation.Commit(mainContent, "mainContentAnimationName", length: animationLength);
Fixed it.

JqGrid: make the width of rows auto shrink and grow depending on the width of browser viewport?

I am hoping that a JqGrid occupies all the width it is given, and it auto shrinks and grows depending on the width of browser viewport. I am hoping to see the horizontal scroll bar as late as possible when the browser viewport shrinks.
I am playing with autowidth and shrinkToFit and combinations of them, but no success.
Am I doing it in wrong place?
Thanks and regards.
I do this on my apps with jQGrid. Here are some of my grid settings:
autowidth: true,
height: '100%',
shrinkToFit: false,
Below the creation of my grid, I use the window.resize function of jQuery:
$(window).resize(function () {
$gridName.jqGrid('setGridHeight', $(window).height() - 160);
$gridName.jqGrid('setGridWidth', $(window).width() - 210);
});
I subtract - 210 from the window's width to account for a left content area that is 210px wide.
I subtract - 160 from the window's height to account for a header content area that is 160px high.

FabricJS Canvas, Scrolling parent container moves child hit area

I am using FabricJS to create an application. I am finding that scrolling a parent div/container offsets the selectable area of an object to the right in direct relation to amount scrolled.
So, if I have a canvas that is 1200x600 and a container div that is 600x600 and I add a rect to that canvas at 400, 120; when I scroll 200px, I can't click on the rect to select it. Rather, I have to move my mouse to 600, 120 (empty space) to get the cross bar and select the rect.
Not sure if this is known, or has a work around - but I would appreciate any help possible.
You'll have to modify FabricJs code to make it work.
The problem is in the getPointer function, if you search for it in all.js you'll notice the comment "this method needs fixing" from kangax.
A workaround can be substituting this function with
function getPointer(event) {
// TODO (kangax): this method needs fixing
return { x: pointerX(event) + document.getElementById("container").scrollLeft, y: pointerY(event) + document.getElementById("container").scrollTop };
}
where "container" is the wrapper div of you canvas. It's not nice, since you have to put the exact id, but it works.
Hope this helps.

Resources