iPad - Popup
I have a popup and wish it to be 75% of the height and width of the screen. My screen is a UISplitView.
How is this done with UIPopoverController.PresentFromRect ?
I have tried many combos of values, but the results are 'strange'.
Note: I do not wish to use the PresentFromButton.
I figured it out.
1) You need o set the size of the popup:
myUIPopupController.PopoverContentSize = new SizeF (1024f, 1024f);
2) Then set the popup based on a relative frame size:
myUIPopupController.PresentFromRect (relativeFrame, this.SplitViewController.View, UIPopoverArrowDirection.Right, true);
Related
I am trying to create a button in a Xamarin Forms cross-platform app (iOS and Android), where the button has both text and an image. The XAML is pretty straightforward:
<AbsoluteLayout ...>
<Labels and backgrounds and such>
<Button x:Name="HomeButton2" TranslationX="6" TranslationY="100"
BackgroundColor="#efeff4" TextColor="#4a4a4a"
WidthRequest="58" HeightRequest="76"
ContentLayout="Top,5"
Image="TaskBar_Assets_HomeButtonIcon.png" Text="Home"
Clicked="HomeButton_Clicked" />
</AbsoluteLayout>
but what I get on the iPad is a button where both the image and the text are strangely pushed over to the side:
(the source image "TaskBar_Assets_HomeButtonIcon.png" is 47 x 44 so it should fit fine in the overall button area)
The only way I can find to make this look better, is to make a custom control based on Button, and then I can see that several of the properties of the underlying UIButton seem wonky:
The Control.ImageView.Frame is all zeroes:
Control.ImageView = <UIImageView: 0x12df52940; frame = (0 0; 0 0);
clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO;
layer = <CALayer: 0x173623180>>
The Control.ImageEdgeInsets and .TitleEdgeInsets look odd (the right + left seem like they leave no space for the image or text):
Control.ImageEdgeInsets = {-8.9501953125, 20.33935546875, 8.9501953125, -20.33935546875}
Control.TitleEdgeInsets = {22, -23.5, -22, 23.5}
What I'm doing, is adjusting the Control.ImageEdgeInsets so that Control.ImageEdgeInsets.Left is equal to the half of the (button width minus the image width) and setting Control.ImageEdgeInsets.Right to zero (for no particular reason except that it works)
and then figuring out what to set Control.TitleEdgeInsets was done with trial & error, I ended up with values related to the width of the "Home" text (41 pixels):
Control.ImageEdgeInsets updated to {-8.9501953125, 5.5, 8.9501953125, 0}
Control.TitleEdgeInsets updated to {22, -50, -22, -9}
That results in a reasonable button look:
although it looks like I need to do more trial & error to get the text "Home" actually centered.
But why do I need to go through all this? Why doesn't the button just display text & image correctly in the first place?
And if I do have to go through all this, why are the values for Left & Right for ImageEdgeInsets and TitleEdgeInsets so different?
Most of the articles I have read about images on buttons suggest constructing your own using an Image and a Label in a grid using a gesture recognizer to handle the tap.
You could also try a button and an image in a grid.
Use Margin to adjust placement.
I try and stay clear of absolute layout.
Here's the ButtonRenderer source code from Xamarin.Froms.If you set the ContentLayout to Top, the below codes will be run:
void ComputeEdgeInsets(UIButton button, Button.ButtonContentLayout layout)
{
...
var horizontalImageOffset = labelWidth / 2;
var horizontalTitleOffset = imageWidth / 2;
...
button.ImageEdgeInsets = new UIEdgeInsets(-imageVertOffset, horizontalImageOffset, imageVertOffset, -horizontalImageOffset);
button.TitleEdgeInsets = new UIEdgeInsets(titleVertOffset, -horizontalTitleOffset, -titleVertOffset, horizontalTitleOffset);
}
As the codes show, the Left offset of image is horizontalImageOffset which is labelWidth / 2. The Left offset of title is horizontalTitleOffset which is imageWidth / 2.
So, when the text is wider, the left offset of image will be bigger. When the image is wider, the left offset of text will be bigger.
Edit:
In native iOS, the default layout is like the left image: Image is at left and Label is at right. In Xamarin for Top setting, Xamarin moves the Image up and right, moves the Label down and left to makes them like the right image. I paint this illustration, hope it clear.
I have three web view on one screen, and I need the screens to fit the size of each content. How can I solve it?
I already tried using:
let it = productGoal.stringByEvaluatingJavaScript(from: "Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );")
To get the screen size of the webview content, but it always brings me the current screen size.
This worked for me:
let it = Double(webView.stringByEvaluatingJavaScript(from: "document.documentElement.scrollHeight") ?? "0")
I want to create a list of events in my application and I think this would be a perfect look, but I have no idea how to do it. Can anybody help me?
Thanks!!
Check out the following method
1) in the interface builder drag a new UITableViewCell
2) Set the contentView and background of tableview to UIColor.clear / UIColor.clearColor();
2) dragIn a view and adjust the size as per requirement
(This will act as container View i.e the bigger balloon)
3) now select background colour to white and change opacity to 85 - 90 %
this will give you the desired color
4) Add Label o top and select the same background colour and the opacity as 50 % as main view and as there is a difference in opacity of 2 containers you will get the desired effect
5) Connect an outlet connection of the mainView and Label
6) set corner radius to view and and label
self.mainView.layer.cornerRadius = 10; // or anything as per requirement
AND
self.label.layer.cornerRadius = 10; // run it now to adjust the corner radius
I want to arrange 3 Images on iPhone & iPad using auto layout.
3 Images should rezise preserving aspect ratio, and width of all 3 images should be same.
Same space from left and right sides for all 3 images.
See Example figure (Figure shows landscape and portrait mode) on this link:
Portrait: http://i.imgur.com/9KVXATE.png
Landscape: http://i.imgur.com/tDjj9K6.png
It is possible programatically getting width and height of screen/view but I want to do it using auto-layouts
Programatically:
//Inside this method
//- (void) didRotateFromInterfaceOrientation:
(UIInterfaceOrientation)fromInterfaceOrientation
//Main_View is the view in which the 3 images are kept
//ImageView1, ImageView2, ImageView3 are 3 image views
ImageView1.frame = CGRectMake(Main_View.frame.origin.x + 3, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));
ImageView2.frame = CGRectMake(ImageView1.frame.size.width + 6, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));
ImageView3.frame = CGRectMake(ImageView2.frame.size.width + ImageView1.frame.size.width + 9, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));
Main_View changes its size(width,height). Then (ImageView1 width) is (Main_View width / 3), It Preserves aspect ratio too.
Programatically it works perfect
This is quite easy to do it with autolayout in interfacebuilder as well. But, there are few things which you might have to sacrifice when using autolayout in interface builder. You would want to arrange items the items in storyboard. The steps to do it are as follows:
Add three views to interface builder, like so,
Select all three pictures and add new constraint in interface builder with the button like this |---|, and select equal width and equal height.
Then, again select all three views and then from the menu select Editor -> Align -> Top Edges
Select the left most view and give it some offset to the left,
Select the right most view and give it some offset to the right,
Select one of the view and give some offset at the top and bottom.
Select second view control + drag it to first and select the horizontal separation and give some constant value and do the same for the second and third view.
Now, the constraints is complete. It could happen that when you select the multiple views at the same time and add some constraint, it might not have been added to one of the views. So might have to resolve this looking error and seeing the constraints for the view, if all those constraints we added is there.
You could keep the constraint that separate the view from the top margin or bottom margin and create outlet for it and then change to suit your need or you could set some parameter in storyboard itself.
Here is the screenshot from my ipad simulator for the horizontal orientation.
And here is for vertical orientation,
I hope I have answered your question. Do let me know if you have something with this.
(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{
// i assume here that you have three imageviews img1, img2, img3
float viewWidth = [UIScreen mainScreen].bounds.size.width;
float viewHeight = [UIScreen mainScreen].bounds.size.height;
if (toInterfaceOrientation == UIInterfaceOrientationPortrait){
// your portrait mode code here
}
else{
NSLog(#"bounds are (%f,%f)", viewHeight,viewWidth);
img1.width = viewHeight/3; //i used "viewHeight" because of landscape mode
img2.width = viewHeight/3;
img3.width = viewHeight/3;
// and then set centre of imageview according to your requirement
}
}
I'm trying to have a TabSet in a Window. I would like the window to fit the contents so I turned autoSize on like I have done with many other windows. The window have a minimum width and height that I want it to be. My problem is that the TabSet in the Window doesn't fill up the height completely.
Here is my setup:
public MyWindow()
{
setHeight(MIN_HEIGHT);
setWidth(MIN_WIDTH);
setAutoSize(true);
theTabSet = new TabSet();
theTabSet.setTabBarPosition(Side.TOP);
theTabSet.setWidth100();
theTabSet.setHeight100();
// I need to set this for it to at least display the contents
theTabSet.setPaneContainerOverflow(Overflow.VISIBL E);
theTabSet.setOverflow(Overflow.VISIBLE);
//This seems to solve my issue buy I think I shouldn't be doing this.
theTabSet.setMinHeight(WINDOW_HEIGHT);
Tab tab1 = new Tab("first");
tab1.setPane(getFirstTab());
Tab tab2 = new Tab("second");
tab2.setTab(getSecondTab());
addItem(theTabSet);
}
private Layout getFirstTab(){
if(theFirstTab == null){
theFirstTab = new VLayout();
theFirstTab.setWidth100();
theFirstTab().setHeight100();
}
return theFirstTab;
}
Please let me know if I am missing something. According to the Layout API:
Like other Canvas subclasses, Layout and Stack components may have %
width and height values. To create a dynamically-resizing layout that
occupies the entire page (or entire parent component), set width and
height to "100%
theTabSet.setMinHeight(WINDOW_HEIGHT);
Seems to be the way to go. The window is set to fit it contents and the layout is set to fill the canvas. The window knows a minimum height and width but initially the layout doesn't know that. So we need to set it manually.