Xamarin.forms: [Улучшение] Android: TabbedPage: нижняя панель вкладок

Созданный на 26 янв. 2018  ·  89Комментарии  ·  Источник: xamarin/Xamarin.Forms

Обоснование

В последних рекомендациях по дизайну материалов для Android говорится о нижней панели навигации.
https://material.io/guidelines/components/bottom-navigation.html#

Реализация

Выставьте переключатель на TabbedPage, который заставляет его отображать на Android с помощью BottomNavigationView.

public static class TabbedPage
{
    public static readonly BindableProperty UseBottomNavigation;

    public static bool GetUseBottomNavigation(BindableObject element);
    public static void SetUseBottomNavigation(BindableObject element, bool value);

    public static bool UseBottomNavigation(
        this IPlatformElementConfiguration<Android, FormsElement> config
    );
    public static IPlatformElementConfiguration<Android, FormsElement> SetUseBottomNavigation(
        this IPlatformElementConfiguration<Android, FormsElement> config, 
        bool value
    );
}

ожидаемый результат

TabbedPage отображается с помощью BottomNavigationView.

Последствия для CSS

Никто.

Обратная совместимость

Никто.

Сложность: умеренная

Либо сопоставление естественное, поэтому его легко, иначе нам не следует вставлять его в TabbedView, и нам нужно пересмотреть дизайн.

F100 community-sprint Android enhancement ➕

Самый полезный комментарий

@maherzaidoune еще нет.
Я немного изучил первоначальную реализацию, но решил оставить это для следующей версии.

Просто для ясности, вы говорите об этом, верно?
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android

Все 89 Комментарий

Похожие # 1400

Привет, я только что открыл запрос на перенос по этой проблеме. У меня есть несколько вопросов о реализации, но это отправная точка.
Отображение было достаточно очевидным.

Я действительно с нетерпением жду слияния этого пул-реквеста с Xamarin Forms. Есть там расчетное время прибытия или что-то в этом роде. Я не нашел жизнеспособного решения для страницы с вкладками внизу на Android.

@mikescandy есть поводу ?

Наконец, я так долго искал это слово!
Большое спасибо!

Когда будет выпущено это улучшение?

+1
я могу получить его на ночной сборке? Копия @PureWeen @davidortinau

А как это работает? Можем ли мы установить его в XAML нашего приложения Forms (как свойство TabbedPage)?

@netonjm Я думаю, что это всего лишь опора "UseBottomNavigation" https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.Android/Appager.Platform.Android/AppageCompat/

но не совсем уверен в деталях (значки и цвета).

Это я :-)

ой

@ niels9001 вы можете увидеть все параметры для настройки значков и т. д. здесь

https://github.com/xamarin/Xamarin.Forms/blob/67d2be4cd224678a350f258b888c568ac8898a8f/Xamarin.Forms.Core/PlatformConfiguration/AndroidSpecific/TabbedPage.cs

Итак, установив UseBottomNavigation в XAML, он покажет панель вкладок внизу на Android и iOS (как это уже делается для TabbedPage), верно?

Потрясающе: D! Это улучшение уже входит в состав последнего предварительного пакета NuGet? А если нет, то какое время прибытия?

@ niels9001 и @PureWeen Я установил обновление xamarin forms 3.1.0.506097 для версии 2. Кажется, сейчас работает, но правильно ли я думаю, что это еще не доступно?

Есть ли шанс, что кто-нибудь может объяснить процесс, когда карты (в закрытом столбце и т.д.) объединяются в ночное время отсюда https://github.com/xamarin/Xamarin.Forms/projects/2#card -8921124?

Какое отношение имеет эта доска? https://github.com/xamarin/Xamarin.Forms/projects/6

Благодарность!

ok прошел через запросы на вытягивание и в итоге сделал это, чтобы заставить его работать на xamarin.forms

private Xamarin.Forms.TabbedPage __bottomBarPage;
        private INavigationService __navigationService;
        private Page __currentPage;

        public BottomTabBarPageBuilder(INavigationService navigationService)
        {
            __navigationService = navigationService;
            __bottomBarPage = new Xamarin.Forms.TabbedPage();
            __bottomBarPage.BarTextColor = (Color)App.Current.Resources["tile2"]; // Setting Color of selected Text and Icon
            __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
            // You can only define the color for the active icon if you set the Bottombar to fixed mode
            //__bottomBarPage.Navigation..FixedMode = true;
        }|

не обращайте внимания на мой код, но основная его часть - __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); , это правильный путь?

Да, это правильный путь. Это специфичная для платформы вещь, поэтому просто нужно установить ее до того, как элемент управления будет отрисован.

эй, это поддерживает фиксированный режим ?! я не могу найти способ установить это

@maherzaidoune еще нет.
Я немного изучил первоначальную реализацию, но решил оставить это для следующей версии.

Просто для ясности, вы говорите об этом, верно?
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android

Я немного озадачен. Где мы должны установить ToolBarPlacement?

`пространство имен Test.Mobile.Views
{
[XamlCompilation (XamlCompilationOptions.Compile)]
общедоступный частичный класс TestPage: Xamarin.Forms.TabbedPage
{

    public Test()
    {
        InitializeComponent();

        On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

    }`

Нравится?

@PureWeen Как работает On<Android>().SetElevation(); ? Я попытался установить его с некоторым значением с плавающей запятой, но не вижу никакого эффекта. Я хотел отбросить тень, чтобы различать содержимое страницы и нижнюю панель.

@ niels9001 да

Это работает для вас?

@PureWeen Нет, я получаю эту ошибку в MainPage.xaml.g.cs (который является представлением MasterDetail, а TabbedPage находится в его части "Подробности")

Необработанное исключение:
System.TypeLoadException: не удалось разрешить тип с токеном 0100008e (из typeref, класс / сборка Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version = 2.0.0.0, Culture = нейтральный, PublicKeyToken = null)

Я удивлен. Блестяще. @PureWeen Большое спасибо за это.

@PureWeen Пожалуйста, дайте мне знать, могу ли я помочь с реализацией значка.

@ niels9001 эта ошибка обычно означает, что что-то не синхронизируется с библиотеками. Можете ли вы удалить все свои папки obj / bin и убедиться, что у вас везде установлена ​​одна и та же версия Xam Forms?

https://forums.xamarin.com/discussion/83410/could-not-resolve-type-with-token-01000012

@PureWeen Спасибо, это сработало :)!

Как установить цвет фона всей панели? Или включить дроп-тень?

Если дочерняя страница (вкладка) нижней TabbedPage является NavigationPage, тогда она и ее содержимое (ContentPage с ScrollView) отображается под панелью вкладок. (3.1-pre3)

Хорошая работа!
Но почему 5 детей - это максимум? Вылетает, когда я пытаюсь добавить еще.

5 установлено как максимальное количество элементов в Android.
см. https://android.googlesource.com/platform/frameworks/support.git/+/master/design/src/android/support/design/internal/BottomNavigationMenu.java

О, я вижу. Спасибо!
Печально :/

Да, я пытался найти лучший способ помочь пользователю в этом. Если вы посмотрите, есть GetMaxCount, который вы можете вызвать прямо сейчас, просто возвращает 5 для нижних вкладок и максимальное int для верхних вкладок. Я посмотрю, смогу ли я распространить более полезное сообщение об ошибке :-)

@bdgza

Спасибо за сообщение. Я создал проблему для этого
https://github.com/xamarin/Xamarin.Forms/issues/2993

@PureWeen BarBackgroundColor, похоже, не работает, чтобы изменить цвет фона панели при размещении внизу на Android?

@ niels9001 у вас

Я тестировал и у меня работает

image

эй, можно ли отключить эту анимацию при переключении страниц? Я имею в виду не анимацию значков, а анимацию перехода

edit: также я хотел бы спросить, если мне нужны последние изменения этого, следует ли мне использовать ночные сборки или предварительную версию? потому что кажется, что pre4 новее, чем текущая ночная сборка

@dstarec на еженедельная версия для 3.2

В настоящее время нет, но вы просите об этом
https://github.com/xamarin/Xamarin.Forms/issues/2948
Правильно?

@PureWeen
да вроде так

@PureWeen
Как мне отключить режим Shift на этом?

Я вытащил код Джеймса отсюда: https://montemagno.com/remove-shifting-bottomnavigationview-android/

Добавлен пользовательский рендерер для Android, но я не могу его так называть, потому что я не знаю идентификатор нижнего представления навигации:

var bottomNavigation = FindViewById(Resource.Id.bottom_navigation);
bottomNavigation.SetShiftMode (ложь, ложь);

РЕДАКТИРОВАТЬ:
Единственный способ сделать это до сих пор - это рекурсивно перебирать представления в ViewGroup, чтобы найти BottomNavigationView.

Любое решение для удаления режима переключения передач?

@LynoDesu @ amrkamal1993 обратится к следующему выпуску
https://github.com/xamarin/Xamarin.Forms/issues/3083

@ amrkamal1993 Я обошел это с помощью специального средства визуализации. Я отправлю свой код позже, когда буду дома

@ amrkamal1993 @maherzaidoune
Суть здесь:
https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

@LynoDesu Как я могу отключить режим переключения передач? Я использовал ваш код, но ничего не изменилось

Как вы это реализовали? В моем коде вам нужно использовать настраиваемый элемент управления BottomNavTabPage вместо TabbedPage:

<?xml version="1.0" encoding="utf-8" ?> <controls:BottomNavTabPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:MyProject.App.Views;assembly=MyProjects.App" xmlns:controls="clr-namespace:MyProject.App.Controls;assembly=MyProjects.App" x:Class="MyProject.App.Views.MainTabPage" Title=""> <views:NewsFeed></views:NewsFeed> <views:Rewards></views:Rewards> <views:Nominations></views:Nominations> <views:Notifications></views:Notifications> </controls:BottomNavTabPage>

disabledshiftmode

Как я могу добавить текст значка в нижнюю вкладку?

@LynoDesu спасибо, наконец-то работает !! ^ _ ^

@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
это может вам помочь :)

@ amrkamal1993 : спасибо, но я пробую этот плагин. Когда я использую нижнюю панель, он не добавляет текст значка.

Вкладка @nhdanh по-прежнему такая же, как и верхняя, она должна работать с новой функцией .. размещение нижней вкладки

@ amrkamal1993, когда я () .SetToolbarPlacement (ToolbarPlacement.Bottom). Он не отображает текст значка. Убираю эту настройку снизу. Будет отображаться текст значка

что-нибудь еще о тексте значка?

@LynoDesu Замечательно ! Ваше решение просто помогло мне сделать день! Спасибо!

Я попытался обновить Xamarin.Forms до последней версии и получаю эту ошибку, когда пытаюсь установить ToolbarPlacement в своем классе TabbedPage:

Необработанное исключение:

System.TypeLoadException: не удалось разрешить тип с помощью токена 01000029 (из typeref, класс / сборка Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version = 2.0.0.0, Culture = нейтральный, PublicKeyToken = null) ocurrió

Я не знаю, что делаю не так, я думаю, что эта ошибка связана с версиями пакетов nuget. Что я могу сделать, чтобы решить эту проблему?

@aalbendin, что произойдет, если что-то устарело или просто не строит правильные библиотеки. Я бы рекомендовал удалить все ваши папки bin / obj, а затем перестроить проект, и это должно исправить.

У другого пользователя была такая же проблема, и это решило ее для него.

https://github.com/xamarin/Xamarin.Forms/issues/1675#issuecomment -395211876

это доступно в стабильной версии 3.1.0.583944? Я добавил

Кто-нибудь еще пытается скрыть TabbedNavigationBar? У меня возникла проблема на Android, если я установил VisibiltyStates.Gone на BottomNavigationView представление не было полностью отклонено:

screen shot 2018-07-05 at 2 14 26 pm

@ 15mgm15 эта проблема частично связана с
https://github.com/xamarin/Xamarin.Forms/issues/3055

ViewPager, отображающий содержимое, учитывает высоту нижней панели навигации, чтобы содержимое не скрывалось за ней. Для того, чтобы этот контент был снова использован, он должен изменить макет окна просмотра, но сейчас нет ничего, что следило бы за этой видимостью и изменением

Какой у вас вариант использования? Могли бы вы вместо этого поместить модальную страницу в стек, чтобы она просто перекрывала весь экран, а не пыталась скрыть нижнюю панель навигации?

@PureWeen Спасибо за ответ! к сожалению, использование модальных страниц нарушает дизайн клиента, поэтому мне придется найти решение.

@ 15mgm15, если вы используете верхнюю панель навигации, делает ли она то же самое? Или это происходит только с нижней панелью навигации?

@PureWeen На самом деле это хороший момент, позволь мне проверить и сообщить тебе.

@PureWeen Используя обычную панель tav, все работает, как ожидалось, TabLayout из TabbedPageRenderer скрывается или отображается так, как мы хотели. Но я попытался установить высоту 0 в параметрах макета, и это действительно сработало!

BottomNavigationView _bottomBar;
...
if (_extendedTabbedPage.BottomTabBarHidden) { _layoutParams.Height = 0; _bottomBar.LayoutParameters = _layoutParams; } else { _layoutParams.Height = _bottomBarHeight; _bottomBar.LayoutParameters = _layoutParams; }

Привет, приятно слышать !! Как только https://github.com/xamarin/Xamarin.Forms/issues/3055 будет исправлен, я надеюсь, что это немного сгладит некоторые грубые части

@cassionandi , у вас все еще есть проблемы? Если вы установите расположение панели навигации в конструкторе или используете XAML, у вас не должно возникнуть никаких проблем.

Если вы не установите метку, а только значок, значки не будут выровнены по центру по вертикали. Выглядит странно, как будто не хватает ярлыка.

Это ожидаемое поведение? Было бы неплохо, если бы значки были по центру (как приложение Outlook на Android).

Думаю, я что-то упускаю. Я обновил Xamarin Forms до версии 3.1.0.583944, но получаю две ошибки в строке On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

Имя ToolbarPlacement 'не существует в текущем контексте

а также

Ошибка CS1061: 'IPlatformElementConfiguration'не содержит определения для' SetToolbarPlacement 'и метода расширения' SetToolbarPlacement ', принимающего первый аргумент типа' IPlatformElementConfiguration'можно было найти

какие-либо предложения?

@bverp

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific

?

Если кто-то хочет переопределить событие добавить значки на вкладки или скрыть BottomNavigationView, вот пример:

https://gist.github.com/15mgm15/76914bf623e33676252864ac1898e7f9

@bverp Закройте VS, удалите папку obj и bin и перезапустите проект. Это должно сработать, по крайней мере, для меня.

@ niels9001, который у меня не сработал. @bverp у тебя
https://github.com/15mgm15/XamarinFormsBottomTabbedPage

Немного болтаю - у кого-нибудь есть время помочь?
Я попробовал несколько вещей, чтобы получить нижние вкладки в Android, включая оба варианта в этой ссылке. Что бы я ни делал, мое решение не распознает обновление.
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
У меня есть формы версии 3.1.0.637273 (и я также пробовал последние 5 выпусков / предварительных выпусков).
Я очистил, построил, перестроил, удалил каталоги bin / obj - мне кажется, что я вообще не вижу это обновление, что бы я ни делал.

Например, это мой текущий XAML

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ProjName"
             x:Class="ProjName.MainPage"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="Black"
            android:TabbedPage.BarSelectedItemColor="Red">
    <local:LoginPage Title="Favorites" Icon="ic_favorites.png" />
    <local:LoginPage Title="Friends" Icon="ic_friends.png" />
    <local:LoginPage Title="Nearby" Icon="ic_nearby.png" />
    <local:LoginPage Title="Recents" Icon="ic_recents.png" />
    <local:RegistrationPage Title="Restaurants" Icon="ic_restaurants.png" />
</TabbedPage>

и результат

Для ToolbarPlacement не найдено свойство, привязываемое свойство или событие, или тип несоответствия между значением и свойством.

Аналогичная проблема выполняется программно - он просто не распознает это обновление.

Я использую Windows VS, использую 8.1 Android для тестирования, и это общий, а не проект .net. Если бы кто-нибудь мог сказать мне, чего мне не хватает, я был бы очень счастлив.

@pureween?

@taramasalata подтверждает, что все ваши проекты используют самую последнюю версию 3.1.0. Что-то не совпадает.

Вы также можете проверить мой образец проекта здесь: https://github.com/davidortinau/TheLittleThingsPlayground

Я также подтвердил, что могу работать с нижними вкладками из общего проекта без ошибок. Проект:
App25.zip

@davidortinau Спасибо за помощь. Я пробовал варианты этого в 8 различных решениях. Я обновил все проекты до 3.1.0 и все трижды проверил. Я неоднократно проверял вкладку «Обновления» для каждого из них, все они актуальны. Не могу придумать, что еще попробовать. Я попробую ваши образцы проектов утром и вернусь к вам. Может, стоит попробовать переустановить VS.

Ваше приложение 25 не будет построено с ошибкой: для ToolbarPlacement не найдено свойство, связываемое свойство или событие, или тип между значением и свойством не соответствует.

Вы используете Windows или Mac?

Я собираюсь попробовать полную переустановку VS, теперь я действительно не могу думать, что еще попробовать

Неа. Никаких радостей с новой установкой, запущенным App25. Это так неприятно.
ошибка: Позиция 6:13. Для ToolbarPlacement не найдено свойство, привязываемое свойство или событие, или тип несоответствия между значением и свойством.

Есть ли какие-нибудь пакеты, которые мне нужны для этого, помимо Xamarin.Forms?

Хм, что-то в вашей цепочке инструментов сборки не совсем то @taramasalata
Может быть, установить вывод сборки на подробный, чтобы видеть какие-либо сообщения? Проверьте свой Android Sdk, убедитесь, что у вас есть новейшие инструменты для сборки? Установите 4.7.1 sdk, посмотрите, решит ли это? удалить все кэшированные файлы Xamarin.forms nugets
c: пользователи.nuget

Используйте что-то вроде ILSpy или dotpeek, чтобы просмотреть библиотеки DLL в вашем каталоге отладки и проверить версию или посмотреть, можете ли вы найти там эти значения?

Попробуйте использовать кодовую основу вместо XAML?

Спасибо @pureween. Я пробовал как код, так и xaml. Я также пробовал переустановить VS и пробовал также "предварительную" версию. Скорее всего, моя деинсталляция / переустановка не удаляла файлы .nuget. Сейчас попробую все ваши предложения.

После переустановки Android все работает. Большое спасибо всем!

Быстрый вопрос: правильно ли я полагаю, что это будет работать только на Android 8.1 и выше?

Привет @taramasalata. У меня была аналогичная проблема, и она была исправлена ​​с помощью следующих шагов:

  • Удаление всех папок "bin" и "obj" моего приложения
  • Щелкните «Чистое решение».
  • Перезапустите Visual Studio
  • Щелкните «Восстановить решение».

@taramasalata УРА !!!! Он должен работать на любом устройстве с API не ниже 15.

При создании этого я тестировал API 15, 19, 23, 27

Работать с оттенками 19 и 15 было действительно весело.

@taramasalata да, я заработал после добавления using Xamarin.Forms.PlatformConfiguration.AndroidSpecific и перезапуска VS и очистки решения.

При использовании сверху работает с 6 детьми. Когда находится внизу, всего 5.
Приложение вылетает с сообщением «Java.Lang.IllegalArgumentException:"

@marcelinhovt да, это ограничение Android.

BottomNavBar в Android поддерживает только 5 элементов, и у нас действительно нет возможности обойти это

@PureWeen о ... я не знала. Спасибо ... Попробую написать рендер для расширения

@marcelinhovt, я имею в виду, что изначально BottomNavigationBar в Android не поддерживает более 5 элементов. Это не ограничение, наложенное нашим дизайном

Есть ли способ установить высоту на нижней панели вкладок?

У меня новая проблема с ограничением Android, даже если у меня всего 5 вкладок, приложение вылетает

@ amrkamal1993, если вы можете создать репродукцию и новую проблему, мы надеемся решить эту проблему

@PureWeen, спасибо PureWeen, исключение происходит, когда я добавляю значок заголовка на панель инструментов, у меня есть нижняя вкладка и панель инструментов, это проблема, которая не обрабатывается

@ amrkamal1993 весь тестовый код, который у нас есть для нижней вкладки, использует значки.

Можете ли вы опубликовать репродукцию или код, который я могу протестировать, чтобы увидеть, смогу ли я воссоздать сбой?

Была ли эта страница полезной?
0 / 5 - 0 рейтинги