Xamarin.forms: [Peningkatan] Android: TabbedPage: Bilah Tab Bawah

Terkait #1400

Hai, saya baru saja membuka permintaan tarik tentang masalah ini. Saya memiliki beberapa pertanyaan tentang implementasinya, tetapi ini adalah titik awal.
Pemetaan itu cukup jelas.

Saya sangat menantikan permintaan tarik ini digabungkan ke dalam Formulir Xamarin. Apakah ada ETA atau apa. Saya belum menemukan solusi yang layak untuk memiliki halaman tab di bagian bawah di Android.

@mikescandy ada pembaruan tentang ini?

Akhirnya, saya mencari farword untuk ini begitu lama!
Terima kasih banyak!

Kapan peningkatan ini akan diluncurkan?

+1
bisakah saya mendapatkannya di nightly build? cc @PureWeen @davidortinau

Dan bagaimana cara kerjanya? Bisakah kita mengaturnya di XAML dari aplikasi Formulir kita juga (sebagai properti TabbedPage)?

@netonjm Saya pikir itu hanya prop "UseBottomNavigation" https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.Android/AppCompat/TabbedPage

tetapi tidak begitu yakin dengan detailnya (ikon dan warna).

Ini aku :-)

ups

@niels9001 Anda dapat melihat semua opsi untuk menyiapkan ikon dll di sini

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

Jadi dengan mengatur "UseBottomNavigation" di XAML itu akan menampilkan tabbar di bagian bawah di Android dan iOS (seperti yang sudah dilakukan untuk TabbedPage), bukan?

Luar biasa :D! Apakah peningkatan ini sudah menjadi bagian dari paket NuGet pra-rilis terbaru? Dan jika tidak, ada ETA tentang ini?

@niels9001 dan @PureWeen Saya telah menginstal formulir xamarin 3.1.0.506097 memutakhirkan untuk versi 2. Tampaknya berfungsi sekarang tetapi apakah saya benar dalam berpikir ini belum tersedia di sana?

Adakah kemungkinan siapa pun yang dapat menjelaskan proses kapan kartu (pada kolom tertutup yang selesai, dll) digabungkan ke dalam malam dari sini https://github.com/xamarin/Xamarin.Forms/projects/2#card -8921124?

Juga bagaimana papan ini berhubungan? https://github.com/xamarin/Xamarin.Forms/projects/6

Terima kasih!

ok melalui permintaan tarik dan akhirnya melakukan ini untuk membuatnya berfungsi di 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;
        }|

lupakan kode saya tetapi bagian utamanya adalah __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); apakah ini cara yang benar?

Ya itu cara yang benar. Ini adalah hal khusus platform jadi hanya perlu mengaturnya sebelum kontrol diberikan.

hei, apakah ini mendukung mode tetap?! saya tidak dapat menemukan cara untuk mengaturnya

@maherzaidoune belum.
Saya telah melihat sedikit untuk implementasi awal tetapi memutuskan untuk membiarkannya untuk versi berikutnya.

Hanya untuk memperjelas bahwa Anda sedang membicarakan ini, kan?
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android

Saya agak bingung. Di mana kita harus mengatur ToolBarPlacement?

`namespace Test.Mobile.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
TestPage kelas parsial publik: Xamarin.Forms.TabbedPage
{

    public Test()
    {
        InitializeComponent();

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

    }`

Seperti ini?

@PureWeen Bagaimana cara kerja On<Android>().SetElevation(); ? Saya mencoba mengaturnya dengan beberapa nilai float tetapi saya tidak melihat efek apa pun. Saya ingin memberikan bayangan untuk membedakan antara konten halaman dan bilah bawah.

@niels9001 ya

Apakah itu bekerja untuk Anda baik-baik saja?

@PureWeen Tidak, saya mendapatkan kesalahan ini di MainPage.xaml.g.cs (yang merupakan tampilan MasterDetail, dan TabbedPage ada di bagian Detailnya)

Pengecualian yang Tidak Tertangani:
System.TypeLoadException: Tidak dapat menyelesaikan jenis dengan token 0100008e (dari typeref, class/assembly Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null) terjadi

Aku kagum. Cemerlang. @PureWeen Terima kasih banyak untuk ini.

@PureWeen Tolong beri tahu saya jika saya dapat membantu dengan implementasi Lencana.

@niels9001 kesalahan itu biasanya berarti ada yang tidak sinkron dengan perpustakaan. Bisakah Anda menghapus semua folder obj/bin Anda dan memastikan Anda menginstal Xam Forms versi yang sama di mana-mana?

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

@PureWeen Terima kasih, itu berhasil :)!

Bagaimana kita mengatur warna latar belakang seluruh bar? Atau aktifkan dropshadow?

Jika halaman anak (tab) dari TabbedPage bawah adalah NavigationPage, maka halaman tersebut, dan isinya (ContentPage dengan ScrollView), dirender di bawah bilah tab. (3.1-pra3)

Kerja bagus!
Tapi kenapa maksimal 5 anak? Itu macet ketika saya mencoba menambahkan lebih banyak.

5 ditetapkan sebagai jumlah item maksimum di Android.
lihat https://android.googlesource.com/platform/frameworks/support.git/+/master/design/src/android/support/design/internal/BottomNavigationMenu.java

Oh begitu. Terima kasih!
Itu menyedihkan :/

Ya, saya bolak-balik dengan cara terbaik untuk membantu pengguna dengan itu. Jika Anda melihat ada GetMaxCount yang dapat Anda hubungi yang sekarang hanya mengembalikan 5 untuk tab bawah dan int maks untuk tab atas. Saya akan melihat apakah saya dapat menyebarkan pesan kesalahan yang lebih berguna :-)

@bdgza

Terima kasih telah melaporkan. Saya telah membuat masalah untuk ini
https://github.com/xamarin/Xamarin.Forms/issues/2993

@PureWeen BarBackgroundColor sepertinya tidak berfungsi untuk mengubah warna latar belakang bilah ketika ditempatkan di Bagian Bawah di Android?

@niels9001 apakah Anda memiliki reproduksi untuk itu secara kebetulan?

Saya menguji dan bagi saya itu berhasil

hei, apakah mungkin untuk menonaktifkan animasi itu saat berpindah halaman? Maksud saya bukan animasi ikon tetapi animasi transisi itu

sunting: saya juga ingin bertanya Jika saya ingin perubahan terbaru dari ini, haruskah saya menggunakan build malam atau prarilis? karena sepertinya pre4 lebih baru dari build nighlty saat ini

@dstarec malam baru untuk 3.2 sudah habis di myget

Saat ini tidak ada tetapi yang Anda minta adalah untuk ini
https://github.com/xamarin/Xamarin.Forms/issues/2948
Baik?

@PureWeen
ya, sepertinya begitu

@PureWeen
Bagaimana cara menonaktifkan Shift Mode pada ini?

Saya telah menarik kode James di sini dari sini: https://montemagno.com/remove-shifting-bottomnavigationview-android/

Menambahkan perender khusus untuk Android, tetapi saya tidak dapat menyebutnya seperti ini, karena saya tidak tahu Id tampilan navigasi bawah:

var bottomNavigation = FindViewById(Resource.Id.bottom_navigation);
bottomNavigation.SetShiftMode(salah, salah);

EDIT:
Satu-satunya cara saya dapat melakukannya sejauh ini adalah dengan mengulang secara rekursif melalui Tampilan di ViewGroup untuk menemukan BottomNavigationView.

Adakah solusi untuk menghapus mode shifting?

@LynoDesu @amrkamal1993 akan dibahas dalam rilis mendatang
https://github.com/xamarin/Xamarin.Forms/issues/3083

@ amrkamal1993 Saya telah menyiasatinya dengan menggunakan perender khusus. Saya akan memposting kode saya nanti ketika saya di rumah

@amrkamal1993 @maherzaidoune
Lihat intinya di sini:
https://Gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

@LynoDesu Bagaimana saya bisa menerapkan mode shift menonaktifkan? saya menggunakan kode Anda tetapi tidak ada yang berubah

Bagaimana Anda telah menerapkannya? Dengan kode saya, Anda perlu menggunakan kontrol kustom BottomNavTabPage alih-alih 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>

Bagaimana cara menambahkan Teks Lencana di tab bawah?

@LynoDesu terima kasih akhirnya berhasil!! ^_^

@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
ini dapat membantu Anda :)

@amrkamal1993 : terima kasih, tapi saya mencoba plugin ini. Itu tidak menambahkan teks lencana ketika saya menggunakan bilah Bawah.

@nhdanh tab masih sama dengan yang atas itu harus bekerja dengan fitur baru .. penempatan tab bawah

@amrkamal1993 ketika saya ().SetToolbarPlacement(ToolbarPlacement.Bottom). Itu tidak membuat teks Lencana. Saya menghapus pengaturan ini di bawah. Ini akan menampilkan teks Lencana

apa lagi tentang teks lencana?

@LynoDesu Luar

Saya mencoba memperbarui Xamarin.Forms ke versi terbaru dan saya mendapatkan kesalahan ini ketika saya mencoba mengatur ToolbarPlacement di kelas TabbedPage saya:

Pengecualian yang Tidak Tertangani:

System.TypeLoadException: Tidak dapat menyelesaikan jenis dengan token 01000029 (dari typeref, class/assembly Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null) terjadi

Saya tidak tahu apa yang saya lakukan salah, saya pikir kesalahan ini terkait dengan versi paket nuget. Apa yang bisa saya lakukan untuk mengatasinya?

@aalbendin itu akan terjadi jika ada sesuatu yang ketinggalan zaman atau tidak membangun perpustakaan yang benar. Saya akan merekomendasikan menghapus semua folder bin/obj Anda dan kemudian membangun kembali proyek Anda dan itu akan memperbaikinya.

Seorang pengguna lebih jauh mengalami masalah yang sama dan itu menyelesaikannya untuk mereka

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

apakah ini tersedia di versi stabil 3.1.0.583944? Saya telah menambahkan On

Adakah orang lain yang mencoba menyembunyikan TabbedNavigationBar? Saya mengalami masalah di Android jika saya menyetel VisibiltyStates.Gone ke BottomNavigationView tampilan tidak sepenuhnya ditutup:

@15mgm15 masalah itu semi terkait dengan
https://github.com/xamarin/Xamarin.Forms/issues/3055

ViewPager yang menampilkan konten memperhitungkan ketinggian bilah navigasi bawah sehingga konten tidak tersembunyi di baliknya. Agar konten itu dapat diambil lagi, ia harus menata ulang viewpager tetapi saat ini tidak ada yang mengawasi visibilitas dan perubahan itu

Apa kasus penggunaan Anda? Bisakah Anda mendorong halaman Modal ke tumpukan sehingga hanya menutupi seluruh layar alih-alih mencoba menyembunyikan bilah navigasi bawah?

@PureWeen Terima kasih atas tanggapannya! sayangnya menggunakan halaman modal merusak desain klien, jadi saya harus mencari solusi.

@ 15mgm15 jika Anda menggunakan bilah navigasi atas apakah itu melakukan hal yang sama? Atau apakah ini hanya terjadi dengan bilah navigasi bawah?

@PureWeen Sebenarnya itu poin yang bagus, biarkan saya memeriksa dan memberi tahu Anda.

@PureWeen Menggunakan tav bar normal semuanya berfungsi seperti yang diharapkan, TabLayout dari TabbedPageRenderer disembunyikan atau ditampilkan sesuka hati. Tapi saya mencoba mengatur ketinggian ke 0 pada parameter tata letak dan itu benar-benar berhasil!

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

Hei itu bagus untuk didengar!! Setelah https://github.com/xamarin/Xamarin.Forms/issues/3055 diperbaiki, saya berharap itu akan sedikit menghaluskan beberapa bagian kasar

@cassionandi apakah Anda masih mengalami masalah? Jika Anda mengatur lokasi navbar di konstruktor Anda atau menggunakan XAML, Anda seharusnya tidak mengalami masalah

Jika Anda tidak menetapkan label, dan hanya ikonnya, ikon tidak disejajarkan secara vertikal di tengah. Kelihatannya aneh, seperti ada label yang hilang.

Apakah ini perilaku yang diharapkan? Alangkah baiknya jika ikon berada di tengah (seperti aplikasi Outlook di Android).

Saya pikir saya kehilangan sesuatu. Saya memperbarui Formulir Xamarin untuk merilis 3.1.0.583944 tetapi saya mendapatkan dua kesalahan pada baris On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

Nama ToolbarPlacement' tidak ada dalam konteks saat ini

dan

Kesalahan CS1061: 'IplatformElementConfiguration' tidak mengandung definisi untuk 'SetToolbarPlacement' dan tidak ada metode ekstensi 'SetToolbarPlacement' yang menerima argumen pertama dari tipe 'IPlatformElementConfiguration' bisa di temukan

ada saran?

@bverp

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific

?

Jika ada yang ingin mengganti acara menambahkan lencana ke tab atau ingin menyembunyikan BottomNavigationView berikut ini contohnya:

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

@bverp Tutup VS, hapus folder obj dan bin dan mulai ulang proyek. Itu seharusnya berhasil, setidaknya itu berhasil untuk saya.

@niels9001 itu tidak berhasil untuk saya. @bverp apakah Anda membuatnya berfungsi? Saya mencoba mengunduh dan membangun proyek ini, tetapi mendapatkan kesalahan: Nama ToolbarPlacement' tidak ada dalam konteks saat ini
https://github.com/15mgm15/XamarinFormsBottomTabbedPage

Saya melakukan sedikit kacang - apakah ada yang punya waktu untuk membantu?
Saya mencoba beberapa hal untuk mendapatkan tab terbawah di Android, termasuk kedua opsi di tautan ini. Apa pun yang saya lakukan, solusi saya tidak mengenali pembaruan.
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
Saya memiliki formulir versi 3.1.0.637273 (dan telah mencoba 5 rilis/prarilis terakhir juga).
Saya telah membersihkan, membangun, membangun kembali, menghapus direktori bin/obj - sepertinya saya tidak dapat melihat pembaruan ini sama sekali, apa pun yang saya lakukan.

Misalnya, ini adalah XAML saya saat ini

<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>

dan hasilnya adalah

Tidak ada properti, properti yang dapat diikat, atau peristiwa yang ditemukan untuk 'ToolbarPlacement', atau jenis ketidakcocokan antara nilai dan properti.

Masalah serupa melakukannya secara terprogram - itu tidak mengenali pembaruan itu.

Saya menggunakan Windows VS, menggunakan 8.1 Android untuk pengujian, dan ini adalah proyek bersama daripada .net. Jika ada yang bisa memberi tahu saya apa yang saya lewatkan, itu akan membuat saya sangat bahagia.

@pureween?

@taramasalata mengonfirmasi bahwa semua proyek Anda menggunakan versi 3.1.0 terbaru. Ada yang tidak cocok.

Anda juga dapat memeriksa proyek sampel saya di sini: https://github.com/davidortinau/TheLittleThingsPlayground

Saya juga mengonfirmasi bahwa saya dapat melakukan tab bawah dari proyek bersama tanpa kesalahan. Proyek:
Aplikasi25.zip

@davidortinau Terima kasih telah membantu. Saya telah mencoba variasi ini dalam 8 solusi berbeda. Saya telah memperbarui semua proyek ke 3.1.0 dan tiga kali memeriksa semuanya. Saya telah memeriksa tab "pembaruan" untuk masing-masing berulang kali semuanya mutakhir. Saya tidak bisa memikirkan apa lagi yang harus saya coba. Saya akan mencoba proyek sampel Anda di pagi hari dan menghubungi Anda kembali. Mungkin saya harus mencoba menginstal ulang VS.

App25 Anda tidak akan dibuat dengan kesalahan: Tidak ada properti, properti yang dapat diikat, atau peristiwa yang ditemukan untuk 'ToolbarPlacement', atau jenis yang tidak cocok antara nilai dan properti.

Apakah Anda menggunakan Windows atau Mac?

Saya akan mencoba instal ulang lengkap VS sekarang saya benar-benar tidak bisa memikirkan apa lagi yang harus dicoba

Tidak. Tidak ada kegembiraan dengan instalasi baru, menjalankan App25. Ini sangat membuat frustrasi.
kesalahan: Posisi 6:13. Tidak ada properti, properti yang dapat diikat, atau peristiwa yang ditemukan untuk 'ToolbarPlacement', atau jenis ketidakcocokan antara nilai dan properti.

Apakah ada paket yang saya butuhkan untuk ini selain Xamarin.Forms?

Hmm ada sesuatu di rantai alat build Anda yang tidak beres @taramasalata
Mungkin mengatur output build ke verbose untuk melihat pesan apa pun? Periksa Android SDK Anda, pastikan Anda memiliki alat build terbaru? Instal 4.7.1 sdk lihat apakah itu menyelesaikan? hapus semua nuget Xamarin.forms yang di-cache
c: pengguna.nuget

Gunakan sesuatu seperti ILSpy atau dotpeek untuk melihat dll di direktori debug Anda dan periksa versinya atau lihat apakah Anda dapat menemukan nilai-nilai itu di sana?

Coba pendekatan basis kode alih-alih XAML?

Terima kasih @pureween. Saya mencoba berbasis kode dan xaml. Saya juga mencoba menginstal ulang VS dan mencoba versi "pratinjau" juga. Sepertinya uninstall/instal ulang saya tidak menghapus file .nuget. Saya akan mencoba semua saran Anda sekarang.

Setelah menginstal ulang semua hal Android, ini sekarang berfungsi. Terima kasih banyak semua!

Q Cepat apakah saya benar dalam berpikir ini hanya akan berjalan di Android 8.1 ke atas?

Hai @taramasalata. Saya memiliki masalah serupa dan diperbaiki menggunakan langkah-langkah berikut:

• Menghapus semua folder "bin" dan "obj" dari aplikasi saya
• Klik "Solusi Bersih"
• Mulai ulang Visual Studio
• Klik pada "Bangun Kembali Solusi".

@taramasalata YA !!!! Itu harus berjalan di perangkat apa pun dengan setidaknya API 15

Dalam membangun ini saya menguji terhadap API 15, 19, 23, 27

Mendapatkan warna rona yang bekerja pada 19 dan 15 benar-benar menyenangkan

@taramasalata ya saya berhasil setelah menambahkan using Xamarin.Forms.PlatformConfiguration.AndroidSpecific dan memulai ulang VS dan membersihkan solusinya.

Saat digunakan di Atas, bekerja dengan 6 Anak. Ketika di Bawah, hanya 5.
Aplikasi mogok dengan pesan "Java.Lang.IllegalArgumentException:"

@marcelinhovt ya itu batasan android.

BottomNavBar di Android hanya mendukung 5 item dan sebenarnya tidak ada cara bagi kami untuk menyiasatinya

@PureWeen oh...aku tidak tahu. Terima kasih... Saya akan mencoba menulis beberapa render untuk diperpanjang

@marcelinhovt jadi yang saya maksud adalah bahwa secara native BottomNavigationBar di Android tidak mendukung lebih dari 5 item. Itu bukan batasan yang dipaksakan oleh desain kami

Adakah cara untuk mengatur ketinggian di bilah tab bawah?

Saya Memiliki masalah baru dalam batasan android meskipun saya hanya memiliki 5 tab aplikasi mogok

@amrkamal1993 jika Anda dapat membuat repro dan masalah baru, semoga kami dapat mengatasi masalah tersebut

@PureWeen terima kasih PureWeen , pengecualian terjadi ketika saya menambahkan ikon judul di bilah alat, saya memiliki tab dan bilah alat bawah, apakah itu masalah yang tidak ditangani

@amrkamal1993 semua kode uji yang kami miliki untuk tab bawah menggunakan ikon.

Bisakah Anda memposting repro atau kode yang dapat saya uji untuk melihat apakah saya dapat membuat ulang kerusakan?