Titanium ScrollableView height is bigger on iOS - ios

I currently have a scrollable view to scroll through some images.
On Android it's fine, but on iOS the height seems to be a bit bigger as I have some text under the scrollable view and its being pushed down a bit on iOS, while on Android the text is right under where it should be
index.js:
var win = $.index;
if(Alloy.Globals.osname == "android"){
win.backgroundColor = "#000";
}
//If iOS
else{
win.backgroundColor = "#FFF";
}
win.orientationModes = [
Ti.UI.PORTRAIT,
Ti.UI.UPSIDE_PORTRAIT
];
function textColor(){
if(Alloy.Globals.osname == "android"){
return "#FFF";
}
else{
return "#000";
}
}
var button = Titanium.UI.createButton({
title: 'Test Button',
bottom: 30,
width: "75%",
height: "auto",
visible: false
});
var page_view = Titanium.UI.createView({
top: 10,
width: Ti.UI.SIZE,
height: "85%",
layout: "vertical",
visible: false
});
var page_descr = Titanium.UI.createLabel({
text: "This is a description",
width: "75%",
font: { fontSize: 36 },
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});
var page_image1 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_1.jpg",
});
var page_image2 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_2.jpg",
});
var page_image3 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_3.jpg",
});
var page_image4 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_4.jpg",
});
//Change the images to the iOS images
if(Alloy.Globals.osname != "android"){
page_image1.image = "/images/screens_ios/ios_1.jpg";
page_image2.image = "/images/screens_ios/ios_2.jpg";
page_image3.image = "/images/screens_ios/ios_3.jpg";
page_image4.image = "/images/screens_ios/ios_4.jpg";
}
var image_scroller = Titanium.UI.createScrollableView({
width: "100%",
height: "auto",
showPagingControl: false,
backgroundColor: "white",
views: [page_image1, page_image2, page_image3, page_image4],
});
image_scroller.addEventListener('scrollend',function(e)
{
label_step.text = steps(image_scroller.currentPage+1);
});
//Create a view to hold the scrollable view
var view_holder = Ti.UI.createScrollView({
width: "75%",
height: "60%",
top: 5,
});
view_holder.add(image_scroller);
var label_step = Titanium.UI.createLabel({
text: "Test text",
top: 5,
width: "70%",
font: {fontSize: 21 },
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});
var label_slide = Titanium.UI.createLabel({
text: "(Swipe to view next step)",
font: {fontSize: 19 },
top: 5,
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
width: "70%",
});
page_view.add(page_descr);
page_view.add(label_step);
page_view.add(view_holder);
page_view.add(label_slide);
//Fix fonts
if(Alloy.Globals.osname != "android"){
page_descr.width = "80%";
page_descr.top = 30;
page_descr.font = {fontSize: 19};
label_step.width = "90%";
label_step.font = {fontSize: 15};
label_slide.top = 2;
label_slide.font = {fontSize: 14};
image_scroller.top = -120;
}
else{
page_descr.width = "80%";
page_descr.top = 30;
page_descr.font = {fontSize: 15};
label_step.width = "90%";
label_step.font = {fontSize: 11};
label_slide.top = 5;
label_slide.font = {fontSize: 12};
image_scroller.top = -120;
}
win.add(page_view);
button.addEventListener('click',function(e)
{
alert("I clicked the button!");
});
win.add(button);
win.open();
The android image sizes are all: 768x735px while the iOS images are 475x475px.
Here's a screenshot of what's happening on iOS, it's pushing the text "(Swipe to view next step)" down when it should be directly below the image of the iOS home screen:
http://i.imgur.com/GfDpeDb.jpg

try after commenting the top of label_slide like,
var label_slide = Titanium.UI.createLabel({
text : "(Swipe to view next step)",
font : {
fontSize : 19
},
//top : 5,
color : textColor(),
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
width : "70%",
});
And tell me either it works or not.

The best and easiest way to do this is to use DP values instead of percentages. If you haven't set it up or modified your tiapp.xml yet your iOS devices use DP and Android uses pixels. This is why you are seeing a difference in the layout.
Dp : Density-independent pixels. A measurement which is translated natively to a corresponding pixel measure using a scale factor based on a platform-specific "default" density, and the device's physical density.
In your tiapp.xml change the default unit to dp.
<property name="ti.ui.defaultunit" type="string">dp</property>
If you then recompile the app, clean and build it will be set up to use DP values. Try using these instead of percentages.
Details on this can be seen here -
http://docs.appcelerator.com/titanium/3.0/#!/guide/Layouts,_Positioning,_and_the_View_Hierarchy

Related

Appcelerator tableviewsection top margin on iOS

I have an ios app developed with titanium appcelerator. In the app I have some tablevies where I add some rows and some sections to create that sticky effect. But for some reason the sections have a top margin. Is there a way to remove that margin? The margin was not defined by me.
This is my TableView:
var mainView = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: "100%",
backgroundSelectedColor: 'transparent',
backgroundSelectedColor: 'transparent',
selectedColor: 'transparent',
bottom: 0,
});
And the I add some TableViewSections to it:
tableData.push(Ti.UI.createTableViewSection({
headerView: require("addStickyHeader").addStickyHeader(letra.toUpperCase()),
}));
The addStickyHeader function:
exports.addStickyHeader = function(text) {
var viewHeader = Ti.UI.createView({
height : Ti.App.screenSize[0] * 0.08,
width : "100%",
backgroundColor : require("colors").fundo(),
top : -100
});
viewHeader.add(Ti.UI.createLabel({
text : text.toUpperCase(),
color : require("colors").branco(),
width : "84.6%",
font : {
fontSize : Ti.App.screenSize[0] * 0.019,
fontFamily : require("fonts").semiBold()
},
}));
return viewHeader;
};
That white parte should not be there.

Custom SVGElement labels loose positioning on zoom

I create some custom SVGElement labels in my chart.. but they loose positioning on zooming the chart.. See this fiddle https://jsfiddle.net/bz6vyedL/
chart:{zoomType: 'xy'},
Labels should not remain stuck when zooming in and behave appropriately
You need to reposition the label after every zoom, for example by using render event function:
chart: {
zoomType: 'xy',
events: {
render: function() {
var chart = this,
point = chart.series[0].points[8],
label = this.customLabel,
xPos,
labelWidth,
newLabelPos;
if (!label) {
this.customLabel = label = chart.renderer.label(
'Label',
null,
null,
'callout',
null,
null,
true, false, 'my-label'
)
.attr({
padding: 0,
zIndex: 10
})
.add();
}
label.attr({
x: point.plotX + chart.plotLeft,
y: point.plotY + chart.plotTop
});
xPos = label.x;
labelWidth = label.width;
newLabelPos = xPos - labelWidth;
label.attr('x', newLabelPos);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5v7xo2ky/
API Reference: https://api.highcharts.com/highcharts/chart.events.render

Strange event bubbling issue in Titanium Appcelerator alloy project

I am developing on iOS 9.2 SDK & Titannium SDK v5.1.2.GA.
In my iPad app; there is a product tab page, which has a "Discount" button. When you click it, a Popover with a TextField and Picker is shown like this:
The above is created on the fly. (not using a controller + view).
This works as intended. I wanted to extend this a little further by recording the given discount to a product in alloy.js in a global array variable called Alloy.Globals.ProductDiscounts = []; (so it can be used later).
The way I "capture" the new discount price is by listening to the "hide" event on the picker. Then update the global array.
For debugging purpose, I added a console log to make sure it's getting recorded correctly and then in the Appcelerator Studio console window, I started see this endless output like this:
I had to kill the simulator to stop this weird constant output of nulls.
This is my code so far, any idea why the console window is spazzing out? Also, why isn't my global array isn't getting set? or is it getting set, but I missed the actual console.log entry?
// Subscribe to line discount button click event
lineDiscountButton.addEventListener('click', function(e)
{
// Stop further events
e.cancelBubble = true;
// Create popover
var discountPopover = Titanium.UI.iPad.createPopover({
arrowDirection: Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT,
orignalPrice: e.source.orignalPrice,
priceButton: e.source.priceButton
});
var discountPopoverView = Titanium.UI.createView({
width: 250,
height: 210
});
// Create discount popover view wrapper
var discountPopoverViewWrapper = Titanium.UI.createView({
top: 10,
left: 10,
right: 10,
bottom: 10,
layout: 'vertical'
});
discountPopoverViewWrapper.add(Titanium.UI.createLabel({
top: 0,
left: 0,
color: '#5C5C5C',
font: {
fontSize: 12
},
text: 'Enter a new Price'
}));
discountPopoverViewWrapper.add(Titanium.UI.createView({
top: 0,
height: 1,
backgroundColor: '#0088CE',
width: '100%'
}));
var discountPrice = Titanium.UI.createTextField({
top: 0,
width: '100%',
height: Titanium.UI.SIZE,
hintText: discountPopover.orignalPrice,
value: discountPopover.orignalPrice,
backgroundColor: '#FFFFFF',
font: {
fontSize: 18,
fontWeight: 'bold'
},
color: '#5C5C5C'
});
discountPopoverViewWrapper.add(discountPrice);
discountPopoverViewWrapper.add(Titanium.UI.createLabel({
top: 10,
left: 0,
color: '#5C5C5C',
font: {
fontSize: 12
},
text: 'Or Select a Discount Percent'
}));
discountPopoverViewWrapper.add(Titanium.UI.createView({
top: 0,
height: 1,
backgroundColor: '#0088CE',
width: '100%'
}));
var discountPercentPicker = Titanium.UI.createPicker({
top: 0,
width: Titanium.UI.FILL,
height: 112
});
var discountPercentValues = [];
for (var i = 0; i <= 100; i++) {
discountPercentValues.push(Titanium.UI.createPickerRow({
title: i +'%'
}));
}
discountPercentPicker.add(discountPercentValues);
discountPercentPicker.addEventListener('change', function(e) {
if (parseInt(e.rowIndex) === 0) {
discountPrice.value = discountPopover.orignalPrice;
} else {
discountPrice.value = (discountPopover.orignalPrice - (discountPopover.orignalPrice * (parseInt(e.rowIndex) / 100))).toFixed(2);
}
});
discountPopoverViewWrapper.add(discountPercentPicker);
// Add discount popover view wrapper to view
discountPopoverView.add(discountPopoverViewWrapper);
// Set popover content view
discountPopover.contentView = discountPopoverView;
// Subscribe to popover hide event
discountPopover.addEventListener('hide', function(e) {
e.cancelBubble = true;
Alloy.Globals.ProductDiscounts[discountPopover.priceButton.sku] = parseFloat(discountPrice.value).toFixed(2);
Alloy.Globals.LiveBasketCollection.executeQuery("UPDATE live_basket SET Price = "+ discountPrice.value +" WHERE Sku = '"+ discountPopover.priceButton.sku +"'");
discountPopover.priceButton.price = Alloy.Globals.DeviceDefaults.CurrencySymbol + discountPrice.value;
discountPopover.priceButton.title = (discountPopover.priceButton.basketQuantity > 0 ? discountPopover.priceButton.basketQuantity +' x ' : '') + discountPopover.priceButton.price;
Titanium.App.fireEvent('redrawBasket');
discountPopover = discountPopoverView = discountPrice = discountPercentPicker = discountPercentValues = null;
console.log(Alloy.Globals.ProductDiscounts);
});
// Show popover
discountPopover.show({
view: lineDiscountButton,
animated: true
});
});
Just as a Question... Why are you cancelling bubbling.
without more of the code base I can only try and make a suggestion.
1) addeventlistener.
lineDiscountButton.addEventListener('click', setupData);
2) setupData
Function setupData(e) {
lineDiscountButton.removeEventListener('click', setupData);
Your code from the inline function.
}
Basically remove the event listener once activated, so add and remove as required.
I don't want to teach you to suck eggs, but to remove an event listener, you have to use exactly the same parameters as adding it. Thus inline function on event listeners are not ideal, although they work separating the code out into its own function is preferable.
Next Alloy globals.... Not good practice. I am guessing you want to have the data only for the duration of the running of the app, and not for future use.
If you need it for future use, you can store the data in properties.
Hope this helps
T.

How to crop the gallery images in appcelerator?

I am developing iOS application. In that I have a requirement to crop the images while uploading the images from gallery.can any one help me how to crop the images in appcelerator for ios platform.
Thanks in advance
You can use the internal blob.imageAsCrop() method:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.Blob-method-imageAsCropped
Properties are width, height, x, y (https://docs.appcelerator.com/platform/latest/#!/api/ImageAsCroppedDict)
It'll returns another blob which you can save or display again
Example:
var croppedImage = blob.imageAsCropped({x : 20, y : 20, width : 100, height : 100});
var imageView = Titanium.UI.createImageView({
image:croppedImage,
width: 100, height:100
});
Example 2:
Titanium.Media.openPhotoGallery({
success: function(event) {
var galleryImage = event.media;
var dict = {
x: 0,
y: 50,
width: 300,
height: 300
};
var croppedImage = galleryImage.imageAsCropped(dict);
var imageView = Ti.UI.createImageView({
image: croppedImage,
height: 'auto',
width: 'auto'
});
$.index.add(imageView);
},
cancel: function() {},
savedToPhotoGallery: true,
allowEditing: true,
mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO],
showControls: true
});

Labels in TableViewRow cut off (Titanium Studio)

I have a problem with getting labels within a TableView to display correctly, and I hope someone can help.
Here is a screenshot of the problem:
The labels with the (...) behind them are cut off.
This problem does not occur when I set a fixed height to my rows, but since the text is of varying lengths, that's not a good solution for me.
I've tried the answers in this question, but to no avail.
Here is my code to generate the table:
var aSection = Ti.UI.createTableViewSection({
rows: [],
headerView: header
});
for (var p = 0; p < answers.length; p++){
var currentAnswer = answers[p];
var arow = Ti.UI.createTableViewRow({
selectedBackgroundColor:'#f5f5f5',
answID: currentAnswer['aId'],
map: currentAnswer['aMap'],
isSelected: false,
height: 'auto',
rightImage: '/images/icons/radio-unselected.png'
});
var atext = Ti.UI.createLabel({
font:{fontSize:gui.defaultFontSize+2, fontFamily: gui.defaultFont},
color: '#333',
text: currentAnswer['aText'],
left:10, top: 10, bottom: 10, right: 10,
width:'auto',
height: 'auto',
borderWidth: 0,
borderColor: "#000",
});
arow.add(atext);
aSection.add(arow);
}
var sections = [];
sections[0] = aSection;
var answView = Ti.UI.createTableView({
backgroundColor:'white',
data: sections,
bottom: 1,
minRowHeight: 40,
});
I'm really at a loss with this. Any pointers are appreciated.
If your text is too long then it overlaps the right side button but still you want to show full text then you should either set left & right or set width to Ti.UI.SIZE so If you want to overlaps right button then you should use Ti.UI.SIZE or not then you can set left & right
so in short, set width to Ti.UI.SIZE or set left and right property.
Use Ti.UI.SIZE for both height and width instead of auto, auto has been deprecated a long time ago. Something like this would help you
var aSection = Ti.UI.createTableViewSection({
rows: [],
headerView: header
});
for (var p = 0; p < answers.length; p++){
var currentAnswer = answers[p];
var arow = Ti.UI.createTableViewRow({
selectedBackgroundColor:'#f5f5f5',
answID: currentAnswer['aId'],
map: currentAnswer['aMap'],
isSelected: false,
height:Ti.UI.SIZE,
rightImage: '/images/icons/radio-unselected.png'
});
var atext = Ti.UI.createLabel({
font:{fontSize:gui.defaultFontSize+2, fontFamily: gui.defaultFont},
color: '#333',
text: currentAnswer['aText'],
left:10, right: 10,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
borderWidth: 0,
borderColor: "#000",
});
arow.add(atext);
aSection.add(arow);
}
var sections = [];
sections[0] = aSection;
var answView = Ti.UI.createTableView({
backgroundColor:'white',
data: sections,
bottom: 1,
minRowHeight: 40,
});
Try using: minimumFontSize:'18sp'
Or some size that suits your display needs. This will shrink the font down to the minimum size to fit everything.

Resources