Xamarin.Forms UINavigationBar in PageRenderer - xamarin

I have a page renderer for camera and I want to put bottom menu on this renderer page in native not Xamarin.Forms page. How can I achieve this?

Adjust the Frame of View and NavigationBar in PageRenderer.
Create Custom Renderer for Page named CustomPageRender.
[assembly: ExportRenderer(typeof(Page), typeof(CustomPageRender))]
namespace FormsApp2.iOS
{
class CustomPageRender :PageRenderer
{
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
if (this.NavigationController != null)
{
CGRect rect = View.Frame;
rect.Y = -44;
View.Frame = rect;
CGRect NavRect = NavigationController.NavigationBar.Frame;
NavRect.Y = UIScreen.MainScreen.Bounds.Height - 44;
NavigationController.NavigationBar.Frame = NavRect;
}
}
}
}

Related

Is there an property like android:actionBarSize in iOS?

I'm developing in Xamarin and I don't know how change the height of navigation bar.
For android is easier because you've got a clear property "ActionBarSize"
I've tried a lot of things. Create a comun NavigationPage with HeightRequest property does not work
Thanks a lot
In iOS we could set a custom TitlView by using custom renderer .
using Foundation;
using UIKit;
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms;
using xxx.iOS;
using CoreGraphics;
using xxx;
using ObjCRuntime;
[assembly: ExportRenderer(typeof(ContentPage), typeof(MyPageRenderer))]
namespace xxx.iOS
{
public class MyPageRenderer: PageRenderer
{
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
var page = Element as ContentPage;
NavigationController.NavigationBar.Hidden = true;
double height = IsiphoneX();
UIView backView = new UIView()
{
BackgroundColor = UIColor.White,
Frame = new CGRect(0,20,UIScreen.MainScreen.Bounds.Width, height),
};
UIButton backBtn = new UIButton() {
Frame = new CGRect(20, height-44, 40, 44),
Font = UIFont.SystemFontOfSize(18),
} ;
backBtn.SetTitle("Back", UIControlState.Normal);
backBtn.SetTitleColor(UIColor.Blue, UIControlState.Normal);
backBtn.AddTarget(this,new Selector("GoBack"),UIControlEvent.TouchUpInside);
UILabel titleLabel = new UILabel() {
Frame=new CGRect(UIScreen.MainScreen.Bounds.Width/2-75, 0,150, height),
Font = UIFont.SystemFontOfSize(20),
Text = page.Title,
TextColor = UIColor.Black,
Lines = 0,
};
UILabel line = new UILabel() {
Frame = new CGRect(0, height, UIScreen.MainScreen.Bounds.Width, 0.5),
BackgroundColor = UIColor.Black,
};
backView.AddSubview(backBtn);
backView.AddSubview(titleLabel);
backView.AddSubview(line);
View.AddSubview(backView);
}
double IsiphoneX()
{
double height = 44; //set height as you want here !!!
if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
{
if (UIApplication.SharedApplication.Delegate.GetWindow().SafeAreaInsets.Bottom > 0.0)
{
height = 64; //set height as you want here !!!
}
}
return height;
}
[Export("GoBack")]
void GoBack()
{
NavigationController.PopViewController(true);
}
public override void ViewWillDisappear(bool animated)
{
base.ViewWillDisappear(animated);
NavigationController.NavigationBar.Hidden = false;
}
}
}

How to convert Xamarin Forms view to a Native view iOS/Android with the same size?

I am using the example here, but I am struggeling to fill in the right size parameter here so that it represents the same size as the forms view.
https://michaelridland.com/xamarin/creating-native-view-xamarin-forms-viewpage/
public static UIView ConvertFormsToNative(Xamarin.Forms.View view, CGRect size)
{
var renderer = RendererFactory.GetRenderer(view);
renderer.NativeView.Frame = size;
renderer.NativeView.AutoresizingMask = UIViewAutoresizing.All;
renderer.NativeView.ContentMode = UIViewContentMode.ScaleToFill;
renderer.Element.Layout(size.ToRectangle());
var nativeView = renderer.NativeView;
nativeView.SetNeedsLayout();
return nativeView;
}
And for Android:
public static ViewGroup ConvertFormsToNative(Xamarin.Forms.View view, Rectangle size)
{
var vRenderer = RendererFactory.GetRenderer (view);
var viewGroup = vRenderer.ViewGroup;
vRenderer.Tracker.UpdateLayout ();
var layoutParams = new ViewGroup.LayoutParams ((int)size.Width, (int)size.Height);
viewGroup.LayoutParameters = layoutParams;
view.Layout (size);
viewGroup.Layout (0, 0, (int)view.WidthRequest, (int)view.HeightRequest);
return viewGroup;
}
}
What values from my Xamarin Forms should be put in, so that it will represent the CGRect required to have the same on the Native View.
var rect = new CGRect();
rect.X = (nfloat)view.X;
rect.Y = (nfloat)view.Y;
rect.Width = (nfloat)view.Width;
rect.Height = (nfloat)view.Height;
Solved it, where "view" is the Xamarin Forms view.

How to set a background color and text color to an entry cell in xamarin.forms iOS?

I am new to Xamarin forms. Seems like there is no property to set the background color or text color for EntryCell in Table view. Is there a way to customize that when the theme of the iOS is in darkMode?
DarkMode changes the text color to white which is the same color for background. So the text is invisible now
To set a background color and text color to an EntryCell in xamarin.forms iOS, you can use custom renderer:
[assembly: ExportRenderer(typeof(MyEntryCell), typeof(myEntryCelliOSCellRenderer))]
namespace App99.iOS
{
public class myEntryCelliOSCellRenderer : EntryCellRenderer
{
public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
{
var nativeCell = (EntryCell)item;
var cell = base.GetCell(nativeCell, reusableCell, tv);
((UITextField)cell.Subviews[0].Subviews[0]).TextColor = UIColor.Orange;
((UITextField)cell.Subviews[0].Subviews[0]).BackgroundColor = UIColor.Green;
return cell;
}
}
}
And use it in Xamarin.forms project:
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
TableView tableView = new TableView
{
Intent = TableIntent.Form,
Root = new TableRoot
{
new TableSection
{
new MyEntryCell
{
Label = "EntryCell:",
Placeholder = "Type Text Here",
}
}
}
};
this.Content = new StackLayout
{
Children =
{
tableView
}
};
}
}
public class MyEntryCell : EntryCell {
}

Need to set line height of navigation title for custom font in IOS

Im just set custom font on all text area but fonts creating little longer than space on place. Upper side of text cutting. I fixed it on label items with set lineheight to 1.2. But i cant doin it on my navigation title and entry boxes.
This is my navigation custom renderer:
public override void ViewDidLoad()
{
base.ViewDidLoad();
UINavigationBar.Appearance.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
UINavigationBar.Appearance.ShadowImage = new UIImage();
UINavigationBar.Appearance.BackgroundColor = UIColor.Clear;
UINavigationBar.Appearance.TintColor = UIColor.White;
UINavigationBar.Appearance.BarTintColor = UIColor.Clear;
UINavigationBar.Appearance.Translucent = true;
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
{
Font = UIFont.FromName("CooperHewitt-Bold", 20),
TextColor = UIColor.White
});
}
I need to set line height on entry too.
You can create a custom Navigation Bar and set the style of it as you want.
in Customrenderer
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
NavigationController.NavigationBar.Hidden = true;
double height = IsiphoneX();
UIView backView = new UIView()
{
BackgroundColor = UIColor.White,
Frame = new CGRect(0,20,UIScreen.MainScreen.Bounds.Width, height),
};
UIButton backBtn = new UIButton() {
Frame = new CGRect(20, height-44, 40, 44),
Font = UIFont.SystemFontOfSize(18),
} ;
backBtn.SetTitle("Back", UIControlState.Normal);
backBtn.SetTitleColor(UIColor.Blue, UIControlState.Normal);
backBtn.AddTarget(this,new Selector("GoBack"),UIControlEvent.TouchUpInside);
UILabel titleLabel = new UILabel()
{
Frame=new CGRect(UIScreen.MainScreen.Bounds.Width/2-75, 0,150, height),
Font = UIFont.FromName("CooperHewitt-Bold", 20),
Text = "xxx",
TextColor = UIColor.Black,
Lines = 0,
};
UILabel line = new UILabel() {
Frame = new CGRect(0, height, UIScreen.MainScreen.Bounds.Width, 0.5),
BackgroundColor = UIColor.Black,
};
backView.AddSubview(backBtn);
backView.AddSubview(titleLabel);
backView.AddSubview(line);
View.AddSubview(backView);
}
double IsiphoneX()
{
double height = 44;
if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
{
if(UIApplication.SharedApplication.Delegate.GetWindow().SafeAreaInsets.Bottom > 0.0)
{
height = 64;
}
}
return height;
}
[Export("GoBack")]
void GoBack()
{
NavigationController.PopViewController(true);
}
public override void ViewWillDisappear(bool animated)
{
base.ViewWillDisappear(animated);
NavigationController.NavigationBar.Hidden = false;
}
You can set the property of title , backButton and navigationBar as you need (such as text , color ,BackgroundColor ,font e.g.)
For entry , you can also set height in CustomRenderer
using UIKit;
using xxx.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using CoreGraphics;
[assembly: ExportRenderer(typeof(Entry), typeof(MyEnterRenderer))]
namespace xxx.iOS
{
public class MyEnterRenderer:EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if(Control!=null)
{
SetNativeControl(new CustomTextField());
}
}
}
public class CustomTextField:UITextField
{
public CustomTextField()
{
Font = UIFont.SystemFontOfSize(20,2);
}
}
}
I just solved my issue with make a new view and set it as TitleView.
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
//....
x:Class="MyApp.Views.CustomNavTitle">
<StackLayout x:Name="stack" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Margin="0,0,25,0">
<Label Style="{StaticResource NavigationBarTitle}" Text="{Binding .}"/>
</StackLayout>
</ContentView>
And set it if it was IOS device on my content pages constructor.
if (Device.RuntimePlatform == Device.iOS)
NavigationPage.SetTitleView(this, new CustomNavTitle() { BindingContext = Title });
And I setted "LineHeight" (as 1.2) prop and set custom font family which i want to the label in NavigationBarTitle style.

How to fade in and out images in Xamarin iOS

I've created a launch animation in Xamarin for an iOS app but I can't seem to get the images to fade in and out gracefully. I think I need to use the .FadeTo() method but I'm unable to apply it to my code properly. I'm trying to get the first image to fade in then fade out while the second image fades in and so on. Any help is appreciated - I'm a newb!
Here's my code:
using System.Drawing;
using MonoTouch.UIKit;
namespace MapView {
public class ImageViewController : UIViewController {
UIImageView animatedlaunchImage;
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
Title = "Animated ImageView";
View.BackgroundColor = UIColor.White;
// an animating image
animatedlaunchImage = new UIImageView();
animatedlaunchImage.AnimationImages = new UIImage[] {
UIImage.FromBundle ("Splash01.png")
, UIImage.FromBundle ("Splash02.png")
, UIImage.FromBundle ("Splash03.png")
, UIImage.FromBundle ("Splash04.png")
, UIImage.FromBundle ("Splash05.png")
} ;
animatedlaunchImage.AnimationRepeatCount = 1;
animatedlaunchImage.AnimationDuration = 3;
animatedlaunchImage.Frame = new RectangleF(0, 0, 320, 568);
View.AddSubview(animatedlaunchImage);
animatedlaunchImage.StartAnimating ();
}
}
}
Include CoreAnimation and add these lines of code after you create the UIImageView,
CATransition customTransition = new CATransition();
customTransition.FadeInDuration = 1.0f;
customTransition.FadeOutDuration = 1.0f;
customTransition.TimingFunction = CAMediaTimingFunction.FromName(
CAMediaTimingFunction.EaseInEaseOut);
customTransition.Type = CATransition.TransitionFade;
animatedlaunchImage.Layer.AddAnimation(customTransition, null);
Translated from this objective-c question.

Resources