I'm used to using Titanium.Platform.displayCaps.platformWidth all over my app to get the width of the window.
But with SplitView on the iPad Titanium.Platform.displayCaps.platformWidth still returns the total screen size of the iPad (as it probably should).
How can I determine the actual available screen width for the app while using SplitView?
I don't mean SplitWindow BTW. This is in regards to SplitView where you can line up two different apps next to each other on the iPad
Thank you!
you can get the width your uiElement using postLayout event
var uiWidth;
myElement.addEventListener('postlayout', postlayout);
function postlayout(e){
uiWidth = e.source.rect.height;
myElement.removeEventListener('postlayout', postlayout);
}
An easy way to determine how wide a certain view is, is to use toImage() on the UI element, and then get the size.
So... when you do
console.log($.myWindow.toImage().rect.width);
You should get the width of the window. Which should be the width allocated to your app.
Related
below i attached an app help guide screen. I am understanding how to build this screen.
If any body have idea please share here
View with semi transparent background color (backgroundColor:"rgba(0,0,0,0.5)";) and some images on top of it.
So, using images is bad. You'll need images for translations and if you do this as one image you'll need to ensure all devices are covered so your arrows point to the right element.
Minimise images == smaller app.
First thing you'll need to do is a create a blocker view -- so that's a view that will fill the screen and have a black background with opacity.
You can't apply that to the window as everything in it will be semi-transparent so:
Create a transparent Window that fills the screen.
Add to that window a view that fills the window and has opacity say 0.5 and black background
Add to the Window (not the view you just created) the other elements and button -- ideally, these should be individual graphics of the arrows, sized in such a way that you can position them based on the host element (the item they are pointing to / referring to). Use real text so you can handle translations / reduce file size.
So you'll need a way to associate each tip with a control they are anchored too, and that will ensure that regardless of the screen size, the tip will appear in the correct place.
First of all, always give a try before putting questions anywhere because it makes you learn things on your own for long time.
The easiest step for you to do this is to ask your designer to create a complete image just like that & you just have to show it on top.
If you have to show that image in different translations, then you can ask your designer to provide you required translations images.
Application requires more than one window (Lets call A,B,C). Each window has more than one view (table views, image views as well as web view). Lets say window A has three views (x, y,z) and window B has three views (d,e,f). Application needs to display images of different size on orientation change.
I have achieved the same using gesture event listener and looping through windows for views and replacing the view with new images. The problem I have is when we navigate from one window to other and the orientation changes, the loading of view after looping goes for a toss. Is there a better way to achieve the same ?
Is there a method in titanium like following code to replace a view ?
var self=Ti.UI.currentWindow
var newView=Ti.UI.createImageView({image:'abc.png'})
self.replace(self.children[1],newView )
Unfortunately there is now replace method.
You need to remove the whole view and add it again but this can cause a wrong layout if you have more than one view on a same level. The implementation then depends on the layout which was set (vertical, horizontal, composite etc).
For example in vertical layout removing an item and simply add a new one would remove your specified item but appends the new one at the end since you can't specify in which order it should be added.
If you have a composite layout you can specify absolute positions but adding a new view causes a higher zIndex for this view so that it will hide views that were previously added at the same/similar position.
Why not simply change the image link ?
var self = Ti.UI.currentWindow;
self.children[1].image = 'bcd.png';
Well you could always lock the orientation of your window. But this isnt exactly good practice (especially for iOS).
Generally orientation changes are handled pretty well if you define the width and height of your views to be percentages or Ti.UI.FILL, if you have a composite layout. Check that you are not giving the views absolute coordinates as this could cause layout problems. If you have a vertical or horizontal layout you usually don't have to worry about orientation change, unless you did not nest your views in a main container correctly.
Prasad,
If this is about just ensuring that the images look good on different orientations,you can make use of the different folders provided by Titanium in the android/images folder.You can just make different images for each of the orientations and device sizes.For IOS you can change just the images on orientation change as you are already doing.
https://wiki.appcelerator.org/display/guides/Using+density-specific+resources+on+Android
If you are concernced about the layout there are couple of things you can do:
1.Give all the height or width values in percentages.This way all elements will be re sized once the orientation changes automatically.
2.On each window open check if the orientation is vertical or horizontal by default and accordingly set the image attribute of the imageView.
Ti.UI.orientation
This property will give you the orientation of the window by default.Values of this property could be this
Ti.UI.PORTRAIT
Ti.UI.UPSIDE_PORTRAIT
Ti.UI.LANDSCAPE_LEFT
Ti.UI.LANDSCAPE_RIGHT
Use "if else" and accordingly set the images.
I have a window. That window has a header (variable size) and should have a scrollable body that sits directly under the header. How can I set the height of the body so that it actually scrolls? If I set height: 'auto', the body extends beyond the bottom of the viewport to fit all of its content. If I set its top and bottom properties, nothing shows up at all.
I can't imagine that I'm the only one who's come across this, but I haven't found a single definitive answer for how to create properly sized, scrollable view within a window. Heights seem tricky since the value is so different in portrait and landscape modes on a single device, much less across devices.
Can someone provide tips on how to manage this scenario? I'm hoping I can extrapolate it to handle other view height scenarios.
Thanks.
It depends on what you are trying to achieve. If you're trying to create a ScrollView that just has the ability to scroll when empty, you should add a empty View into the ScrollView, which has the "top" property.
For example:
var win = Ti.UI.createWindow();
var scrollView = Ti.UI.createScrollView();
var emptyView = Ti.UI.createView({top: 460});
scrollView.add(emptyView)
win.add(scrollView);
Note that the "top" property has 460 set, which is 40 bigger than the iPhone screen res of "420". This will case the scrollView to scroll. If you're looking for a specific size based on the window's navBar controlTitle, you will have to run an equation based on what you think the size will be, applying that size to the view's "top" property accordingly.
I'm building a grid using UIViewTable and adding 4 items for each cel.
However, when I rotate to portrait, I need to reduce the number of items from 4 to 3. And therefore I recompute the rowsArray and I display again the table.
Is this the correct way to proceed ?
thanks
I advice you to use AQGridView
https://github.com/AlanQuatermain/AQGridView
It's an open source grid implementation that is simple and that have many samples.
otherwise, if you add items like described, you will have to redraw all cells content every time the orientation change
I'm working on Map application that needs to work like original MapView on iOS.
I need to rotate mapview according to compass heading value. I tried MTLocation example also I also tried this answer But my results is not good.
Please see the screen shot.
When I rotate mapview according to heading value Map is rotating but as you can see on screen tiles is missing.
How can I solve this display problem ?
Regards
- Fatih
Hy,
I'm the author of MTLocation. Thanks for using it by the way!
For this to work you have to make sure, that your MKMapView is a subview of your ViewController's view (and not the view itself). Then you have to increase the frame of your mapView with a simple Pytaghoras - calculation: the width and height must be at least as big as the diagonal: sqrt(visibleWidth[320]^2 + visibleHeight[480-88]^2) = 506.
So that means
mapView = [[MKMapView alloc] initWithFrame:CGRectMake(-100,-100,520,520)];
Hope that helped, please consider upvoting if it fixed your problem.
You can consider using a bigger frame for the MKMapView object. It should probably be a square with each side equal to the length of the device's diagonal. The problem with this approach is that there are regions of this object that the user won't see but we process information like views for annotations related to that region anyway. Other properties like visibleMapRect would be least helpful.
Another alternative would be to be zoom in by scaling the MKMapView object on rotation. But this might make the map blurry (untested). You could zoom out on the region displayed in the map but it could lead to frequent refreshes. You can look at a middle ground where you don't zoom out until the map is rotated over a certain angle. You can also look at using two views where one of the views is off screen and updated so that it can replace the view after a certain amount of rotation so that it feels seamless.
I am working towards making my own maps application in iPhone. I want my maps to rotate as the user turns. I tried setUserTrackingMode available in iOS 5, but due to some reason it doesn't work. So I decided to take help of MTLocation framework here.
Till now I have done the following.
created a new project and copied all .m and .h files in that.
Import MapKit.h and MTLocation.h.
In Viewcontroller.h, defined property for mapView (should I define a property for locateMeItem).
In ViewDidLoad, paste the code given at the end of the page here.
I get a few errors:
Can't see the locateMe button when created programatically.
Undefined property headingEnabled.
myCustomSelector has no effect.
self.toolbar- toolbar is not a instance of ViewController.
I have tried a code at gist[dot]github[dot]com/1373050 too, but I get similar errors.
Can anybody explain a detailed procedure of this.