I have view which has a button on it,
What I want to do is make the view transprent and not button.
At first I set opacity in both setting,
but myButton opacity is inherited by myView opacity setting.
var myView= Titanium.UI.createView({
backgroundColor : 'black',
// backgroundColor : rgba(0,0,0,0.5), // try1
// backgroundColor : "#000000CC", // try2
opacity:0.8,
zIndex:5
});
var myButton = Titanium.UI.createButton({
backgroundImage : '/img/close.png',
opacity: 1,
});
myView.add(myButton);
Then I googled around and found this article.
And try to use of 'rgba' way, but in vain.
Is there any good workaround??
My titanium version is
Titanium Command-Line Interface, CLI version 5.0.5, Titanium SDK version 5.1.1.GA
If you add an opacity to a parent, their childrens will have the opacity too. The trick is to add a second view before the button with the opacity like this :
var myView= Titanium.UI.createView({
backgroundColor : 'transparent'
});
myView.add(Ti.UI.createView({
width : '100%',
height : '100%'
backgroundColor : 'black',
opacity:0.8,
touchEnabled : false
});
var myButton = Titanium.UI.createButton({
backgroundImage : '/img/close.png'
});
myView.add(myButton);
Related
I am working on a Titanium app and I am facing a problem on iPad after upgrading the Titanium SDK to 6.0.0 and later.
I am using overlay for the Camera, but when I change the orientation the overlay also rotates but it is not filling the entire screen, looks like the overlay keeps the width and the height before the rotating.
var overlay = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
});
var buttonHolder = Ti.UI.createView({
width : Ti.UI.FILL,
height : 70,
backgroundColor : 'black',
opacity : 0.5,
bottom : 0
});
var bCancel = Ti.UI.createButton({
width : 70,
height : Ti.UI.FILL,
color : 'white',
title : "Cancel",
textAlign : 'left',
backgroundColor : undefined,
left : 0
});
var bTakePicture = Ti.UI.createImageView({
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
image : 'image.png',
});
var bDone = Ti.UI.createButton({
width : 70,
height : Ti.UI.FILL,
color : 'white',
title : "Done",
textAlign : 'left',
right : 0,
backgroundColor : undefined
});
buttonHolder.add(bCancel);
buttonHolder.add(bTakePicture);
buttonHolder.add(bDone);
overlay.add(buttonHolder);
Titanium.Media.showCamera({
overlay : overlay,
showControls : false,
success : function(event) {
},
cancel : function() {
},
error : function(error) {
},
allowImageEditing : false,
saveToPhotoGallery : false
});
I tried to change the width and the height when orientation is changed but without success.
This is working fine on 5.5.1 SDK.
Can someone please help me, am I doing something wrong, is there some change in the 6.0.0 SDK related to this one...
Thanks.
I am attaching screenshots showing the problem, the yellow color is the overlay.
Landscape
Portrait
I have a question about scrollview for appcelerator titanium, I want to scroll labels inside scrollview:
scrollpage.xml
<View id="content" layout="vertical" top="100dp" width="100%">
<ScrollView contentWidth="Ti.UI.SIZE" contentHeight="Ti.UI.SIZE" top="10dp" id="svc" height="48dp" backgroundColor="#ff0000" >
</ScrollView>
</View>
</Window>
scrollpage.js
for ( i = 0; i < 19; i++) {
var scrollLabel = Ti.UI.createLabel({
width : Ti.UI.SIZE,
height : '40dp',
font : { fontSize : 14 },
color:'#000',
text : 'Portfolio'+i,
id:'label_'+i,
});
$.svc.add(scrollLabel);
}
The result
I tried ScrollableView but I want many items showing directly on screen.
My aim is to achieve this :
Please explain what did I do wrong! Thank you!
That's because by default the layout of a ScrollView is composite. So, if you want different layout, add layout="horizontal" on your ScrollableView to place your child element :
<ScrollView contentWidth="Ti.UI.SIZE" contentHeight="Ti.UI.SIZE" top="10dp" id="svc" height="48dp" backgroundColor="#ff0000" layout="horizontal"></ScrollView>
More information here about layout : http://docs.appcelerator.com/platform/latest/#!/guide/Layouts,_Positioning,_and_the_View_Hierarchy-section-29004895_Layouts,Positioning,andtheViewHierarchy-Layoutmodes
I have created a custom component, that text box has a pen icon on left(because leftbutton wont support in HTML5/WEB). Here is my code snippet
var bg = Ti.UI.createView({
height : app.platform.isAndroid ? 35 : 31,
top : 50,
width:"94%",
backgroundColor : "white",
layout:"horizontal"
});
var leftBtnWeb = Ti.UI.createButton({
backgroundImage : app.dir + "img/icons/pen.png",
width : 25,
top : 8,
height : 16,
touchEnabled : false,
});
bg.add(leftBtnWeb);
input = Ti.UI.createTextField({
// top : 5,
width:'88%',
// left : 2,
// right : 20,
height : 25,
font : {
fontSize : "16dp"
},
autocorrect : false,
returnKeyType : Ti.UI.RETURNKEY_DONE,
clearButtonMode : Ti.UI.INPUT_BUTTONMODE_ALWAYS,
hintText:"test",
backgroundColor:'transparent',
zIndex : 10,
borderColor : "transparent",
backgroundSelectedColor : "transparent",
backgroundFocusedColor : "transparent",
backgroundImage : "transparent",
focusedColor : "transparent",
borderStyle : Ti.UI.INPUT_BORDERSTYLE_NONE
});
bg.add(input);`
when I get focus on textfield, I got blue border, can any one let me know how to remove that border when focused.
Thanks in Advance,
Swathi.
My first idea would be to attach a custom focus event listener to your textfield and set the color of your border again.
input.addEventListener('focus', function() {
borderStyle : Ti.UI.INPUT_BORDERSTYLE_NONE
this.hasFocus = true;
});
Another thing you could try is setting your backgroundColor to transparent like this:
backgroundColor : 'transparent'
I have created a radio button from the following link, https://github.com/yozef/TiRadioButtonGroup. I am able to see the radio buttons but the respective radio button labels are not showing. How can we display the radio button labels.
My code:
View:
<Alloy>
<Window class="container">
<View id="radiopicker" ></View>
</Window>
</Alloy>
Style:
".container": {
backgroundColor:"red",
layout: 'vertical'
}
"#radiopicker":
{
width: '90%',
top: '25dp'
}
Controller:
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
Screenshot:
The label option one, two and three are not displaying. Please help me out of this issue. I need to display the labels too.
I've gone ahead and updated my Module which will give you the result you want... You can fetch it here:
https://github.com/yozef/TiRadioButtonGroup
I think you should put some label near to the radioButtons by yourself. Have a look at my modified code. It is not tested but should do the trick. Maybe you have to play around with the width/height/left etc attributes a bit.
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
//Create a view to hold your labels
var labelsView = Ti.UI.createView({
height:150,
left: "30" //Or whereever you want to place it
layout:'vertical'
});
//Create the labels
var label1 = Ti.UI.createLabel({
text: "One",
height: "34",
width: Titanium.UI.SIZE
});
var label2 = Ti.UI.createLabel({
text: "Two",
height: "34",
width: Titanium.UI.SIZE
});
var label3 = Ti.UI.createLabel({
text: "Three",
height: "34",
width: Titanium.UI.SIZE
});
//Attach the labels to your view and your view to your radioPicker view
labelsView.add(label1);
labelsView.add(label2);
labelsView.add(label3);
$.radiopicker.add(labelsView);
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
I have gone through your code and found that your window background color is set to 'white' or '#ffffff' and in tiRadioButton.js module label color is also set to 'white' or '#ffffff'. Hence you are not able to see the lable.
You can change either the window backgroundColor or label color.
For change windowBackground color :
at abc.tss file
".container": {
backgroundColor:"red", // any color you want
layout: 'vertical'
}
For change Label color :
at tiRadioButton.js file
var radioItemLabel = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: arg.radioItemsValue[i],
font: {}, // Can add your own font styles
color:'#FFFFFF', //Label color
top:isVertical?null:5, // 5 padding between RadioBtn & Label
left:!isVertical?null:5, // 5 padding between RadioBtn & Label
id:i,
});
//**In color field you can change the label color **
I have a win1 and it has a button to close it.
Also I have a button to create a view1.
view1 has a button to hide it.
When I click the hide button on the view1, the button on the win1 which supposed to create the view1 when clicked, becomes disabled. Why is it? It is only a problem in Android. Please help. Thank you.
var win1 = Titanium.UI.currentWindow;
var closeButton = Titanium.UI.createButton({
image:'images/icontest.png',
backgroundImage: 'none',
top:0,
right:0
});
closeButton.addEventListener('click',function()
{
win1.close({transition:Ti.UI.iPhone.AnimationStyle.CURL_DOWN});
});
win1.add(closeButton);
//Main view & button
var view1=Ti.UI.createView({
backgroundColor: '#fff',
borderColor: '#888',
borderWidth: 4,
height: 172,
width: 275,
top:50,
opacity: 0.75,
borderRadius: 8
});
var closeButton2 = Titanium.UI.createButton({
image:'images/icontest.png',
backgroundImage: 'none',
top:0,
right:0
});
closeButton2.addEventListener('click',function()
{
view1.hide();
});
view1.add(closeButton2);
var OpenButton = Titanium.UI.createButton({
image:'images/icontest.png',
backgroundImage: 'none',
top:100,
right:50
});
OpenButton.addEventListener('click',function()
{
win1.add(view1);
});
win1.add(OpenButton);
You are adding view1 every time OpenButton is clicked. Actually you want to show view1 when OpenButton is clicked. So what you should do is:
OpenButton.addEventListener('click',function()
{
view1.show();
});
and view1 should be added outside of OpenButton.addEventListener. Like this:
win1.add(OpenButton);
win1.add(view1);