Есть ли способ добавить левое и правое поле в область вкладки «Оболочка» с помощью форм Xamarin? - PullRequest
2 голосов
/ 17 апреля 2020

Моя страница имеет поле слева и справа при просмотре на планшетном ПК в альбомном режиме:

enter image description here

Есть ли способ, которым я Можно также добавить левое и правое поле в область вкладок?

Ответы [ 2 ]

6 голосов
/ 26 апреля 2020

Здесь лучшим подходом будет использование Padding вместо Margin. Вы поймете, почему через некоторое время.

Итак, чтобы начать с реализации - вам нужно использовать возможности пользовательских средств визуализации .

. В этом конкретном случае c нам потребуется наследовать от ShellRenderer. Кроме того, есть некоторые различия для Android и для iOS - для Android вам потребуется переопределить CreateBottomNavViewAppearanceTracker и для iOS - CreateTabBarAppearanceTracker

Предполагая, что вы выполнили рекомендации и назвали вашу оболочку AppShell , тогда 2 класса будут выглядеть следующим образом.

Android:

using Android.Content;
using TestShellTabBarMargin;
using TestShellTabBarMargin.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(AppShell), typeof(AppShellRenderer))]
namespace TestShellTabBarMargin.Droid
{
    public class AppShellRenderer : ShellRenderer
    {
        public AppShellRenderer(Context context)
            : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new MarginedTabBarAppearance();
        }
    }
}

iOS:

using TestShellTabBarMargin;
using TestShellTabBarMargin.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(AppShell), typeof(AppShellRenderer))]
namespace TestShellTabBarMargin.iOS
{
    public class AppShellRenderer : ShellRenderer
    {
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new MarginedTabBarAppearance();
        }
    }
}

Далее вам нужно будет создать классы внешнего вида и реализовать интерфейсы, которые мы только что переопределили для Android и iOS ( IShellBottomNavViewAppearanceTracker и IShellTabBarAppearanceTracker соответственно).

После реализации интерфейсов важным методом является SetAppearance. ResetAppearance также будет работать, но он вызывается во многих других случаях, и нам нужно изменить его только один раз.

Вот как это выглядит по умолчанию на Android: Default landscape

Правильная реализация состоит в том, чтобы установить левые и правые отступы нижнего навигационного представления следующим образом:

using Android.Support.Design.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

namespace TestShellTabBarMargin.Droid
{
    public class MarginedTabBarAppearance : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
        {
            bottomView.SetPadding(400, 0, 400, 0);
        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {
        }
    }
}

Конечный результат: Margin landscape

Если мы хотим установить поля вместо отступов, то мы можем изменить layoutParams вида следующим образом:

public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
{
    if (bottomView.LayoutParameters is LinearLayout.LayoutParams layoutParams)
    {
        layoutParams.SetMargins(400, 0, 400, 0);
        bottomView.LayoutParameters = layoutParams;
    }
}

Однако здесь это будет выглядеть так: enter image description here Вы можете go и попытаться установить цвет фона родительского представления, но конечный результат будет таким же, и с набором отступов вам не нужно будет пытаться исправить то, что не нарушено.

Для iOS базовый поток такой же. Важный метод - снова SetAppearance, и внутри него мы можем изменить наш UITabBar.

К сожалению, я еще не нашел правильную конфигурацию, но я обновлю свой ответ, когда я это сделаю. Настройка полей / смещений вида / кадра должна сработать, но я подозреваю, что ребята из Xamarin сбрасывают значения после того, как метод был выполнен. Я должен немного повозиться и проб и ошибок здесь произойти.

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

namespace TestShellTabBarMargin.iOS
{
    public class MarginedTabBarAppearance : IShellTabBarAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(UITabBarController controller)
        {
        }

        public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            // Modify tab bar settings
        }

        public void UpdateLayout(UITabBarController controller)
        {
        }
    }
}

Редактировать: Установка ширины и позиционирования элементов в по центру также должна работать и на самом деле работает, но только на iPhone (на Портрет). Как я уже сказал, я подозреваю, что ребята из Xamarin делают некоторые обновления после наших изменений.

Это должно работать, но это не так:

public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
{
    var tabBar = controller.TabBar;
    tabBar.ItemWidth = 50;
    tabBar.ItemPositioning = UITabBarItemPositioning.Centered;
}

NB: Имейте в виду, что вам нужно будет правильно обрабатывать изменения ориентации и, возможно, особенности устройства (планшет или телефон). В соответствии с возвращаемыми значениями вы можете только затем обновить нужные смещения.

4 голосов
/ 17 апреля 2020

Вы должны использовать TabbedPageRenderer на платформе iOS / Android, чтобы изменить шаблон TabBar. Например, Android это может быть TabLayout для Android платформы и TabBar для iOS

Если вы подразумевали страницу вкладки оболочки, первое, что вы должны сделать, - это реализовать свой собственный ShellRenderer на платформе. После этого вам нужно переопределить метод CreateTabBarAppearanceTracker, где вы сможете создавать и возвращать свой собственный ShellTabBarAppearanceTracker (или ShellTabLayoutAppearenceTracker для Android). После этого вы реализуете свой ShellTabBarAppearanceTracker, используя IShellTabBarAppearanceTracker (для iOS). Вы можете сделать это следующим образом: - Создание ShellTabBar / LayoutAppearanceTracker

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...