Samet Sığırcı
Samet Sığırcı

Reputation: 97

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.

Upvotes: 0

Views: 286

Answers (2)

Samet Sığırcı
Samet Sığırcı

Reputation: 97

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.

Upvotes: 0

Lucas Zhang
Lucas Zhang

Reputation: 18861

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);
        }

    }

}

Upvotes: 1

Related Questions