CODEWITHSUNDEEP
iosxamarin.forms
user13397492
user13397492

Reputation: 169

Xamarin.Forms: TabbedPage icons are good on Android but way too big on iOS

I have in my tabbed list three content pages, all of them have a menu at the bottom which you can click and it also has an icon in there. Whil on android, the icons look just fine in size on iOS they look like this:

[![enter image description here][1]][1]

This is the xaml code:

    <ContentPage Title="Abgelehnt" 
                 BackgroundColor="#e1e1e1"
                 x:Name="tab1_tabbedlist_history" 
                 IconImageSource="icon_cross" >

  [1]: https://i.sstatic.net/oTTST.png

As you can see, I am not even adding any sizes to them. Why are they SO DAMN HUGE? 

This is the tabbed Page:

    <?xml version="1.0" encoding="utf-8" ?>
    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
                mc:Ignorable="d"        
                             BackgroundColor="#ffffff"
                 x:Class="App4.Screens.ScrollViews.Screen_TabbedLists">
      <!--Pages can be added as references or inline-->

<ContentPage...>

</TabbedPage>

There are no custrom renderers to it...

Upvotes: 2

Views: 2070

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

As @Jason said, the best way is to follow the guidelines of icon size in iOS . However , if you do want to use the image with bigger size , you could re-set the size in iOS platform by using CustomRenderer .

in iOS Project


using UIKit;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using xxx;
using xxx.iOS;
using CoreGraphics;

[assembly:ExportRenderer(typeof(TabbedPage),typeof(MyTabbedPageRenderer))]
namespace xxx.iOS
{
    public class MyTabbedPageRenderer :TabbedRenderer
    {

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            foreach (var item in TabBar.Items)
            {
                item.Image = ScalingImageToSize(item.Image, new CGSize(30, 30)); // set the size here as you want 
            }
        }



        public UIImage ScalingImageToSize(UIImage sourceImage, CGSize newSize)
        {

            if (UIScreen.MainScreen.Scale == 2.0) //@2x iPhone 6 7 8 
            {
                UIGraphics.BeginImageContextWithOptions(newSize, false, 2.0f);
            }


            else if (UIScreen.MainScreen.Scale == 3.0) //@3x iPhone 6p 7p 8p...
            {
                UIGraphics.BeginImageContextWithOptions(newSize, false, 3.0f);
            }

            else
            {
                UIGraphics.BeginImageContext(newSize);
            }

            sourceImage.Draw(new CGRect(0, 0, newSize.Width, newSize.Height));

            UIImage newImage = UIGraphics.GetImageFromCurrentImageContext();

            UIGraphics.EndImageContext();

            return newImage;

        }

    }
}

Upvotes: 3

Related Questions