I am new to appcelerator titanium and have a question
how can I create a modal window that blurs its parent, or have a semi transparent background?, I managed to create a modal window but the parent went black.
thanks in advance
This is the current way to accomplish this in Titanium as of 3.1.3 on iOS.
First, make a new window.
var myModal = Ti.UI.createWindow({
title : 'My Modal',
backgroundColor : 'transparent'
});
Then create a wrapper view, a background view, and a container view:
var wrapperView = Ti.UI.createView(); // Full screen
var backgroundView = Ti.UI.createView({ // Also full screen
backgroundColor : '#000',
opacity : 0.5
});
var containerView = Ti.UI.createView({ // Set height appropriately
height : 300,
backgroundColor : '#FFF'
});
var someLabel = Ti.UI.createLabel({
title : 'Here is your modal',
top : 40
});
var closeButton = Ti.UI.createButton({
title : 'Close',
bottom : 40
});
closeButton.addEventListener('click', function () {
myModal.close();
});
Now build your UI stack. The order is important to avoid having to set z-index.
containerView.add(someLabel);
containerView.add(closeButton);
wrapperView.add(backgroundView);
wrapperView.add(containerView);
myModal.add(wrapperView);
Now you can open your modal, but to NOT set modal : true
myModal.open({
animate : true
});
Its very simple.Just create the window, and when you're opening it,specify the 'modal' property as true!
var ModalWindow = Ti.UI.createWindow({});
ModalWindow.open({modal:true});
In Titanium Appcelerator (tried in 1.6.2) a modal window is always a full screen window. The parent might seem black because this modal window's background is black.
Try specifying a semi-transparent image as the background of this modal window, you are creating and you might get the effect you want from it.
You could try using the opacity on the window you have that is overlaying the other.
Ti.UI.currentWindow.opacity = 0.4;
If you are on iPhone, probably you cannot make it. on iPhone, if a modal dialog appears, the other window on the render stack will be cleared. That is, only ONE modal dialog in the render stack. That's the reason you got black if other areas of the parent are not covered by your modal window. iPad implemented modal dialog using "sheet" style, so you can make the are areas semi transparent.
I like the solution presented by AlienWebguy, although I think there's a minor bug. When you create your label, I think you meant to set the text property and not the title property:
var someLabel = Ti.UI.createLabel({
text: 'Here is your modal',
/* etc., etc. */
});
When I used title, it (the label) was not appearing in the window.
Another modification I might make is to set the layout property for the container view, e.g.,
var containerView = Ti.UI.createView({
height: 100, /* or whatever is appropriate */
backgroundColor : '#FFF',
layout: 'vertical'
});
In doing this, you can "stack" up the GUI elements in that view and not worry (too much) about setting layout coordinates... At least that's what I do in creating a customized alert box using the techniques outlined here.
i was also looking for such window with semi transparent background for ios 8.4. I tried the way "AlienWebguy" in Alloy XMl but the issue was whole window getting opacity 0.5 and background stacked window content are clearly visible than foreground view content. i have did some changes to the "AlienWebguy" to get the required result:
<Alloy>
<Window backgroundColor="transparent" modal="false">
<View layout="vertical" width="Ti.UI.FILL" height="Ti.UI.FILL" backgroundColor="#000" opacity="0.5">
// View will fill whole window with transparent shade of black color.
</View>
<View class="container" zIndex="100" height="400" width="Ti.UI.FILL" backgroundColor="#fff">
// You can add any content here, which will be look like Modal window.
//View automatically vertically centered on screen.
</View>
</Window>
</Alloy>
Hope this will save the time of developer doing in Alloy. Thanks for "AlienWebguy" for the concept.
why not just give it transparent background?
<Window backgroundColor="#80000000">
<View class="container">
// Your views
</View>
</Window>
Related
When using RadListView with loadOnDemandMode="auto", how do I change the background color of the activity indicator in iOS?
In Android platform it seems to be the same as the background color, but in iOS it's white
collectionView.visibleCells returns ExtendedLoadOnDemandCell as its first element which contains the activityindicator used in loadOnDemand mode.
Below is the code to set the activity indicator's color and backgroundColor to transparent
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.color = UIColor.clearColor;
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.backgroundColor = UIColor.clearColor;
Set this on the tkListLoadOnDemandTemplate's loaded event. You might also have to wrap it in a setTimeout incase it fires too early.
<GridLayout *tkListLoadOnDemandTemplate (loaded)="onLoadOnDemandLoaded($event)"></GridLayout>
onLoadOnDemandLoaded(args) {
setTimeout(() => {
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.color = UIColor.clearColor;
this.listview.nativeView.collectionView.visibleCells[0].activityIndicator.backgroundColor = UIColor.clearColor;
});
}
What I have
I want to achieve something like this:
This is the reference link that I have used to create radio button existing control: https://github.com/kirtisagar/XamarinFormsRadioButtonXAML
.Xaml Page:
<radio:BindableRadioGroup
Spacing="10"
x:Name="DeviceConditionRadio"
ItemsSource="{Binding DeviceConditionList}"/>
.CS page:
here I have added Item source of radio:
DeviceConditionList is a List<string>()
DeviceConditionList.Add("This device works well");
DeviceConditionList.Add("This device is not working properly");
How to get this kind of design?
Any help regarding this appreciated.!
Thanks.
from the shared link, the default style is Title right and Image left.And the project is based on Custom renderer to do that. You can find the renderer here.
so you can modify this style by renderer.In the shared project not custom RadioButton
in Android and Button in IOS.Then you need custom in each of them.
Android :you can modify xml to exchange the title and image of RadioButton like this:
<RadioButton
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="#null"//set null
android:checked="true"
android:drawableRight="#android:drawable/btn_radio"//reset the image
android:paddingLeft="10dp"
android:text="RadioButton" />
android:button="#null":This statement hides the original system's RadioButton icon.
android:drawableRight="#android:drawable/btn_radio":Add a btn_radio icon that comes with the system to the right of the original icon. I think the RadioButton is packaged on the btn_radio icon.
IOS:Just extend Uibutton to custom button,and modify like this:
CGFloat imageWidth = jumpBtn.imageView.bounds.size.width;
CGFloat labelWidth = jumpBtn.titleLabel.bounds.size.width;
jumpBtn.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, -labelWidth);
jumpBtn.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth);
The titleEdgeInsets property and the imageEdgeInsets property are only used to adjust the image and label position properties when the button is drawn, and do not affect the size of the button itself.
If the image is to the right and the label is to the left, the left side of the image is shifted to the right of the labelWidth from the left side of the button, and the right side of the image is moved to the right by the labelWidth from the left side of the label.
I'm filling a grid with views.
This takes some time.
During the filling, the background stays black.
When views are added, the black background goes aways accordingly.
However, I would like the grid's backgroundcolor to be White instead of Black.
No matter what I do, I just don't seem to be able to set the backgroundcolor.
I've set the NavigationPage's backgroundcolor to Color.White, and I've set the Grid's backgroundcolor to Color.White.
What else could I do to make the backgroundcolor white?
I'm not sure if the mistake is really on my side.
Here you can see what's happening:
First the grid's background is black. When views are added, the black background is overdrawn by the views.
On the right side you can see that 5 views have already loaded.
The 6nd view has not yet loaded, so the background is still black.
[![enter image description here][1]][1]
Edit:
In the NavigationPage / ContentPage I have this:
public MainPage()
{
this.BackgroundColor = Color.White;
In this MainPage, I have a Grid ("_BigGridAsLayout") in which a custom bottom navbar is placed. This "_BigGridAsLayout" occupies the entire page:
_BigGridAsLayout = new Grid()
{
BackgroundColor = Color.White,
}
(...)
_BigGridAsLayout.Children.Add(_CellGrid,0,0);
_BigGridAsLayout.Children.Add(_NavBar,0,1);
this.Content = _BigGridAsLayout;
Then I add "clsGridCell" views to the "_CellGrid".
"clsGridCell" looks like this:
public clsGridCell(eImageAlignment uImageAlignment)
{
this.BackgroundColor = Color.White;
BackgroundColor = Color.White;
Add the background color of the view (added in the grid ) to whatever color you want .
I'm writing a Forms app. How to position a view right at the bottom of the screen and when some entry is focused and the keyboard is visible, the view to be right above the keyboard? On android, it is possible to set Window.SetSoftInputMode(SoftInput.AdjustResize) and that will make the Content resize every time the keyboard is appearing/disappearing. However, I need the status bar to be transparent and SoftInput.AdjustResize doesn't work with WindowManagerFlags.TranslucentStatus. My question is, how do I position a view right above the keyboard without setting SoftInput.AdjustResize?
Take this example:
public Page1()
{
InitializeComponent();
var al = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var button = new BoxView {Color = Color.Red, VerticalOptions = LayoutOptions.EndAndExpand};
var entry = new Entry {HorizontalOptions = LayoutOptions.Fill};
al.Children.Add(entry);
al.Children.Add(button);
Content = al;
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
}
If you run this code, when you'll press the input, nothing will change, the "button" will remain on the bottom of the screen not visible because of the overlaying keyboard.
If we add Window.SetSoftInputMode(SoftInput.AdjustResize) in MainActivity's onCreate it works fine, the box is moved above the keyboard on entry's focus.
Also, if we change Content = al; to Content = new ScrollView {Content = al};, it works fine.
However, if we add Window.AddFlags(WindowManagerFlags.TranslucentStatus); in MainActivity's onCreate, none of those methods work anymore.
Thanks in advance.
I'm writing a Forms app. How to position a view right at the bottom of
the screen and when some entry is focused and the keyboard is visible,
the view to be right above the keyboard?
If you are using Xamarin Forms, then wrapping your UI elements in a ScrollView should do the trick. Something like this if you are using XAML:
<ScrollView>
<ScrollView.Content>
// Your Original XAML content here
</ScrollView.Content>
<ScrollView
EDIT:
Looking at the example you just added, I THINK I know what is happening. So, the ScrollView Trick only works for elements that require keyboard input. I.e if you instead had an entry element at the bottom of the screen, and wrapped everything in a ScrollView like I suggested, then the keyboard should push the entry element up for you. However in your case you have a boxview at the bottom of the screen, which the keyboard simply runs over.
What you have for Content.SizedChanged is a good idea, however I don't think the size of the view actually changes when the keyboard pops up (at least, Content.SizeChanged isn't called when the keyboard pops up), so that part of your code is really only called on loading of the page from the MCVE you provided.
HOWEVER, I was able to move the 'button' up when the keyboard appears by doing this:
Replace
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
With
entry.Focused += (sender, e) =>
{
button.TranslationY -= 120;
};
You may have a heck of a time getting that magic translation number for all the different devices and orientations though. When I tested it on the iPhone 6 simulator I had to push way above 120 before I could see it above the keyboard.
Hope that helps!
i hope you can help me.
I want that the Background image fit to the screen when the orientation changes.
At the Moment i looks like this:
http://i.stack.imgur.com/254IM.png
When i click on the Picture a new window will open with the big picture as background. As you see below that only works well when i turn the ipad left or right. At the portrait mode the picture doesn´t fit very well to the screen.
ttp://i.imgur.com/hqP8y.png
http://i.stack.imgur.com/RGMWm.png
Here is the Code for the opening window when i click a picture:
var button2 = Titanium.UI.createButton({
backgroundImage:'./images/4sm.png',
height:hoehe,
width:breite,
top:oben,
left:links
});
scrollView.add(button2);
button2.addEventListener('click', function()
{
var w2 = Titanium.UI.createWindow({
backgroundImage:'./images/4.png'
});
w2.addEventListener('click', function()
{
w2.close();
});
w2.open();
});
How can i change the backgroundimage properties when the ipad is in landscape or portrait mode?
Thank you so much!
I would take a look at this guide here on orientation change handlers.