I'm very noob in Titanium Mobile.
When I create a new window the content of it goes through the iPhone Status bar (hour, signal and battery icons go on the content of my window).
Is there a fast way to check if the App is run by an iPhone and set the window to start under the status bar? (I mean in alloy way).
"#mainWindow": {
fullscreen: false,
statusBarStyle:Titanium.UI.iPhone.StatusBar.DEFAULT
}
I tried this but it did not work, but if I set in the previous code the property fullscreen to true the status bar disappears.
I suppose you want use this app at iOS 7 (title question).
"#mainWindow": {
fullscreen: false,
statusBarStyle: Ti.UI.iPhone.StatusBar.DEFAULT
width: Ti.Platform.DisplayCaps.getPlatformWidth(),
height: (Ti.Platform.DisplayCaps.getDpi() === 320 || Ti.Platform.DisplayCaps.getDpi() === 260) ? Ti.Platform.DisplayCaps.getPlatformHeight() - 40 : Ti.Platform.DisplayCaps.getPlatformHeight() - 20,
top: (Ti.Platform.DisplayCaps.getDpi() === 320 || Ti.Platform.DisplayCaps.getDpi() === 260) ? 40 : 20
}
The MainWindow Top or View where you add all UI Elements must have top 40 (retina) or 20.
This is the height of StatusBar on iOS. If you want use this app at iOS version below 7.0, top is 0.
Related
When my electron app starts after every restart not maximize while I set alwaysOnTop to be true and minimizable to be false.
I creating mainWindow like below:
var scl = 1;
mainWindow = new BrowserWindow(
{
screen: electron.screen.getAllDisplays()[2],
x:1920,
width: 1080*scl,
height: 1920*scl,
fullscreen:true,
minimizable:false,
resizable:false,
closable:false,
alwaysOnTop:true,
maximize:true
});
I also added it to shell:startup but when application starts up it remains minimize.
OS: Windows 10 Home 64
electron version:1.4.8
electron-builder: ^8.6.0
electron-prebuilt: ^1.4.8
Any Idea?
You should check your x value given during your BrowserWindow initialization. This value describes the offset from the upper left corner to the right, it is likely that your window is not minimized but instead pushed off the screen.
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.
-App uses Sencha touch 2.0 carousel
-Images in the carousel are displayed full screen (minus the navigation bar at the top of the screen)
-App is targetted for iPad2, iPad2 Retina display, Android xhdpi (tablets)
Goal: To display full screen images in the carousel in all target devices
Question: What should be the resolution of the image?
I have tried 1028x768 image in the carousel. Displays fine (full screen) on iPad2 retina but on Samsung galaxy Tab 10 I see vertical bars on the sides. I understand the resolution is lower than retina but I figured that it would automatically scale down to the resolution of the target device and display the image full screen but apparently it isnt doing so.
Has this been achieved, if so please share.
Appreciate it.
Thanks.
Got it!
The resolution of the image doesnt really matter! True.
What is important is making sure the image tag displays the complete image by automatically resizing the image.
Here is how:
-Define a DIV tag with a specfied height (window.innerHeight) and width (window.innerWidth).
-Place the img tag as a child element of the DIV tag with height=100% and width=100%
Irrespective of the resolution of the image, resolution of the device, screen size of the device the image will be always be automitcally resized and displayed in full size.
The complete code to make the carousel work is here:
Carousel code
{
xtype: 'panel'
layout: 'fit',
flex: Ext.os.is.Phone ? 5 : 6,
items: [
{
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
id: 'ImgId',
flex: Ext.os.is.Phone ? 5 : 6,
config: {
fullscreen: true
}
}
]
}
Carousel item code
Ext.each(images, function (picture) {
var img = picture.url;
var bigImg = picture.bigUrl;
itemsoverlay.push({
xtype: 'label',
html: '<div style="width:'
+ window.innerWidth
+ 'px;height:' + 'px;"><img src='
+ imgURL
+ ' style="width: 100%;height: 100%;" /></div>'
});
});
This code works for tablets and smartphones, iOS or Android.
HTH
I am just developing a Titanium App. I want to disable scrolling of a scrollView after some scrolling . In other words I want the scroll to stop at a certain position of my screen. Suppose I want the below scrollView to stop scrolling after it scroll a height of 200px. How can I do this?
var containerScroll = Ti.UI.createScrollView({
backgroundColor : 'transparent',
opacity : 0.0,
showVerticalScrollIndicator : true,
showHorizontalScrollIndicator : false,
});
Thanks
It appears this would be your answer, but it is iOS specific. Set the 'scrollingEnabled : false' property. I wasn't able to find an Android version for you.
var scrollableView = Ti.UI.createScrollableView({
views:[new generateVerifyView(),new generateUserView(),new generateAddrView()],
showPagingControl : false,
scrollingEnabled : false
});
http://developer.appcelerator.com/question/122741/disable-scrolling-in-a-scrollableview
YOu try about
scrollview.contentOffset="200";
this is working for me ...
In Sencha Touch 2, the TabPanel is really great when you've got 5 or less tabs. Any more than that, and it doesn't fit on a phone in portrait mode (see this fiddle).
What are my options? Is there any way to make the last button pop up a sub-TabBar? or can I put an arrow on the right end of the TabBar that makes the bar slide over for a new one? or can I make the TabBar scrollable?
You can make the tab bar scrollable using the following config:
tabBar: {
scrollable: {
direction: 'horizontal'
}
},
Here's the updated fiddle.