Xamarin.forms: [機能強化] Android:TabbedPage:下部のタブバー

作成日 2018年01月26日  ·  89コメント  ·  ソース: xamarin/Xamarin.Forms

理論的根拠

最新のAndroidマテリアルデザインガイドラインでは、下部のナビゲーションバーについて説明しています。
https://material.io/guidelines/components/bottom-navigation.html#

実装

BottomNavigationViewを使用してAndroidでレンダリングするTabbedPageのスイッチを公開します。

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フォームにマージされるのを本当に楽しみにしています。 ETAか何かがありますか。 Androidの下部にタブ付きページを表示するための実行可能な解決策は見つかりませんでした。

@mikescandyこれに関する更新はありますか?

最後に、私はこれに長い間遠い言葉を探しています!
どうもありがとう!

この拡張機能はいつ公開されますか?

+1
ナイトリービルドで入手できますか? cc @PureWeen @davidortinau

そしてそれはどのように機能しますか? フォームアプリのXAMLでも(TabbedPageのプロパティとして)設定できますか?

@netonjmこれは単なる小道具「UseBottomNavigation」 https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderercsだと思い

しかし、詳細(アイコンと色)はよくわかりません。

それは私です :-)

おっとっと

@ niels9001ここでアイコンなどを設定するためのすべてのオプションを見ることができます

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

したがって、XAMLで「UseBottomNavigation」を設定すると、AndroidとiOSの下部にタブバーが表示されます(TabbedPageの場合と同様)。

素晴らしい:D! この拡張機能は、最新のプレリリースNuGetパッケージの一部になっていますか? そうでない場合は、これに関するETAはありますか?

@ niels9001@PureWeenバージョン2にアップグレードするxamarinフォーム3.1.0.506097インストールしました。現在は機能しているようですが、まだ利用できないと思っているのは正しいですか?

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いいえ、

未処理の例外:
System.TypeLoadException:トークン0100008e(typeref、クラス/アセンブリXamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement、Xamarin.Forms.Core、Version = 2.0.0.0、Culture = neutral、PublicKeyToken = nullから)でタイプを解決できませんでした

びっくりしました。 素晴らしい。 @PureWeenありがとうございます。

@PureWeenバッジの実装を支援できるかどうか

@ niels9001そのエラーは通常、何かがライブラリと同期していないことを意味します。 すべてのobj / binフォルダーを削除して、同じバージョンのXamフォームがどこにでもインストールされていることを確認できますか?

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

@PureWeenありがとう、それは

バー全体の背景色を設定するにはどうすればよいですか? または、ドロップシャドウを有効にしますか?

下部のTabbedPageの子ページ(タブ)がNavigationPageの場合、その子ページ(Tab)とそのコンテンツ(ScrollViewを使用したContentPage)は、タブバーの下にレンダリングされます。 (3.1-pre3)

よくやった!
しかし、なぜ5人の子供が最大なのですか? さらに追加しようとするとクラッシュします。

ああなるほど。 ありがとうございました!
それは悲しいです :/

ええ、私はそれでユーザーを助けるための最良の方法を行ったり来たりしました。 GetMaxCountがあるように見える場合は、これを呼び出すことができます。これは、現在、下部のタブに5を返し、上部のタブに最大整数を返します。 より有用なエラーメッセージを伝播できるかどうかを確認します:-)

@bdgza

報告ありがとうございます。 この問題を作成しました
https://github.com/xamarin/Xamarin.Forms/issues/2993

@PureWeen BarBackgroundColorは、Androidの下部に配置されたときに、バーの背景色を変更するように機能しないようですか?

@ niels9001たまたまその複製はありますか?

私はテストしました、そして私にとってそれは働きます

image

ねえ、ページを切り替えるときにそのアニメーションを無効にすることは可能ですか? 私はアイコンアニメーションを意味するのではなく、その遷移アニメーションを意味します

編集:また、これの最新の変更が必要な場合は、ナイトリービルドまたはプレリリースを使用する必要がありますか? pre4は現在のnighltyビルドよりも新しいように見えるため

@ dstarec3.2の新しいナイトリーがmygetにアップしました

現在はありませんが、あなたが求めているのはこれです
https://github.com/xamarin/Xamarin.Forms/issues/2948
右?

@PureWeen
はい、そうです

@PureWeen
これでシフトモードを無効にするにはどうすればよいですか?

ここからJamesのコードを取得しました: https

Android用のカスタムレンダラーを追加しましたが、下部のナビゲーションビューのIDがわからないため、このように呼び出すことはできません。

var bottomNavigation = FindViewById(Resource.Id.bottom_navigation);
bottomNavigation.SetShiftMode(false、false);

編集:
これまで私がそれを行うことができた唯一の方法は、ViewGroupのビューを再帰的にループしてBottomNavigationViewを見つけることです。

シフトモードを削除するための解決策はありますか?

@LynoDesu @ amrkamal1993は、今後のリリースで対処します
https://github.com/xamarin/Xamarin.Forms/issues/3083

@ amrkamal1993カスタムレンダラーを使用して回避しました。 後で家に帰ったらコードを投稿します

@ amrkamal1993 @maherzaidoune
ここで要点を参照してください:
https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

@LynoDesuシフトモードの無効化を実装するにはどうすればよいですか? コードを使用しましたが、何も変更されていません

どのように実装しましたか? 私のコードでは、TabbedPageの代わりにカスタムコントロールBottomNavTabPageを使用する必要があります。

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

下部のタブにバッジテキストを追加するにはどうすればよいですか?

@LynoDesuthxそれはついに動作します!! ^ _ ^

@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
これはあなたを助けるかもしれません:)

@ amrkamal1993 :ありがとうございますが、私はこのプラグインを試してみました。 ボトムバーを使用すると、バッジテキストが追加されません。

@nhdanhタブは、新しい機能で動作するはずの上部のタブと同じです。下部のタブの配置

オンに設定したときの@ amrkamal1993().SetToolbarPlacement(ToolbarPlacement.Bottom)。 バッジテキストはレンダリングされません。 この設定の下部を削除します。 バッジのテキストが表示されます

バッジテキストについて他に何かありますか?

@LynoDesu素晴らしい! あなたの解決策は私の一日を作るのに役立ちました! ありがとう!

Xamarin.Formsを最新バージョンに更新しようとしましたが、TabbedPageクラスでToolbarPlacementを設定しようとすると、次のエラーが発生します。

未処理の例外:

System.TypeLoadException:トークン01000029でタイプを解決できませんでした(typeref、クラス/アセンブリXamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement、Xamarin.Forms.Core、Version = 2.0.0.0、Culture = neutral、PublicKeyToken = nullから)ocurrió

何が間違っているのかわかりません。このエラーは、nugetパッケージのバージョンに関連していると思います。 それを解決するにはどうすればよいですか?

@aalbendinは、何かが古くなっているか、正しいライブラリを構築していない場合に発生します。 すべてのbin / objフォルダーを削除してからプロジェクトを再構築することをお勧めします。これで、修正されるはずです。

さらに上のユーザーが同じ問題を抱えていて、それで解決しました

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

これは安定した3.1.0.583944バージョンで利用できますか? オンを追加しました

TabbedNavigationBarを非表示にしようとしている人は他にいますか? VisibiltyStates.GoneBottomNavigationViewに設定すると、Androidで問題が発生します。ビューが完全に閉じられません。

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

@ 15mgm15その問題は半関連しています
https://github.com/xamarin/Xamarin.Forms/issues/3055

コンテンツを表示するViewPagerは、コンテンツが背後に隠れないように、下部のナビゲーションバーの高さを考慮しています。 そのコンテンツが再び取り上げられるためには、ビューページャーを再レイアウトする必要がありますが、その可視性と変化を監視するものは今のところありません。

あなたのユースケースは何ですか? 代わりに、モーダルページをスタックにプッシュして、下部のナビゲーションバーを非表示にするのではなく、画面全体をオーバーレイするようにすることはできますか?

@PureWeen返信ありがとうございます! 残念ながら、モーダルページを使用するとクライアントの設計が損なわれるため、解決策を見つける必要があります。

@ 15mgm15トップナビゲーションバーを使用する場合、同じことをしますか? それとも、これは下部のナビゲーションバーでのみ発生しますか?

@PureWeen実はそれが良い点ですので、チェックしてお知らせします。

予想通り、通常のTAVバーのすべての作品を使用して@PureWeen TabLayoutTabbedPageRenderer隠されたり、我々は喜んとして示しましたさ。 しかし、レイアウトパラメータで高さを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を使用する場合、問題は発生しないはずです。

ラベルを設定せず、アイコンのみを設定した場合、アイコンは垂直方向に中央揃えになりません。 ラベルがないように見えます。

これは予想される動作ですか? アイコンが中央にあるといいでしょう(AndroidのOutlookアプリのように)。

私は何かが足りないと思います。 Xamarin Formsをリリース3.1.0.583944に更新しましたが、行On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); 2つのエラーが発生します

「ToolbarPlacement」という名前は現在のコンテキストには存在しません

エラーCS1061: 'IPlatformElementConfiguration'には、' SetToolbarPlacement 'の定義が含まれておらず、タイプ' IPlatformElementConfiguration 'の最初の引数を受け入れる拡張メソッド' SetToolbarPlacement 'が含まれていません。'が見つかりました

助言がありますか?

@bverp

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific

OnTabReselectedイベントをバッジ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'のプロパティ、バインド可能なプロパティ、イベントが見つからないか、値とプロパティのタイプが一致していません。

プログラムでそれを行う同様の問題-それは単にその更新を認識しません。

私はWindowsVSを使用しており、テストに8.1 Androidを使用しており、.netプロジェクトではなく共有プロジェクトを使用しています。 誰かが私が欠けているものを教えてくれるなら、それは私をとても幸せにするでしょう。

@pureween?

@taramasalataは、すべてのプロジェクトが最新バージョンの3.1.0を使用していることを確認します。 何かが一致していません。

ここで私のサンプルプロジェクトを確認することもできます: https

また、共有プロジェクトの下部のタブをエラーなしで実行できることも確認しました。 計画:
App25.zip

@davidortinau助けてくれてありがとう。 私はこれのバリエーションを8つの異なるソリューションで試しました。 すべてのプロジェクトを3.1.0に更新し、すべてをトリプルチェックしました。 それぞれの「更新」タブを繰り返しチェックしましたが、すべて最新です。 他に何をしようか考えられません。 午前中にサンプルプロジェクトを試して、折り返しご連絡します。 多分私はVSを再インストールしてみるべきです。

app25は次のエラーでビルドされません:「ToolbarPlacement」のプロパティ、バインド可能なプロパティ、イベントが見つからないか、値とプロパティのタイプが一致していません。

WindowsまたはMacを使用していますか?

VSの完全な再インストールを試みるつもりです。他に何を試すべきか本当に考えられません。

いいえ。 App25を実行して、新規インストールすることに喜びはありません。 これはとてもイライラします。
エラー:位置6:13。 'ToolbarPlacement'のプロパティ、バインド可能なプロパティ、イベントが見つからないか、値とプロパティのタイプが一致していません。

Xamarin.Formsのほかに、これに必要なパッケージはありますか?

うーん、ビルドツールチェーンの何かが正しくありません@taramasalata
メッセージを表示するには、ビルド出力を冗長に設定しますか? Android SDKをチェックして、最新のビルドツールがあることを確認しますか? 4.7.1 SDKをインストールして、それが解決するかどうかを確認しますか? キャッシュされたXamarin.formsnugetsをすべて削除します
c:users.nu​​get

ILSpyやdotpeekのようなものを使用して、デバッグディレクトリ内のdllを調べ、バージョンを確認するか、そこにそれらの値が見つかるかどうかを確認しますか?

XAMLの代わりにコードベースのアプローチを試してみませんか?

@pureweenありがとうございます。 コードベースとxamlの両方を試しました。 また、VSを再インストールして、「プレビュー」バージョンも試しました。 ただし、アンインストール/再インストールで.nugetファイルが削除されなかった可能性があります。 私は今あなたのすべての提案を試してみます。

Androidのすべてを再インストールすると、これが機能するようになります。 どうもありがとう!

クイックQこれはAndroid8.1以降でのみ実行されると考えるのは正しいですか?

こんにちは@taramasalata。 同様の問題が発生し、次の手順を使用して修正されました。

  • アプリの「bin」フォルダーと「obj」フォルダーをすべて削除する
  • 「クリーンソリューション」をクリックします
  • VisualStudioを再起動します
  • 「ソリューションの再構築」をクリックします。

@taramasalata YAY !!!! API15以上のデバイスで実行する必要があります

これを構築する際に、API 15、19、23、27に対してテストしました

19と15で色合いの色を機能させるのは本当に楽しかったです

@taramasalataはい、 using Xamarin.Forms.PlatformConfiguration.AndroidSpecificを追加し、VSを再起動してソリューションをクリーンアップした後、動作しました。

トップで使用する場合、6人の子供と一緒に動作します。 が一番下にあるときは、5つだけです。
「Java.Lang.IllegalArgumentException:」というメッセージが表示されてアプリがクラッシュします。「」

@marcelinhovtyeaそれはAndroidの制限です。

AndroidのBottomNavBarは5つのアイテムしかサポートしておらず、これを回避する方法はありません。

@PureWeenああ...私は知りませんでした。 ありがとう...私は拡張するためにいくつかのレンダリングを書こうとします

@marcelinhovtつまり、AndroidのBottomNavigationBarはネイティブで5つ以上のアイテムをサポートしていないということです。 それは私たちの設計によって課せられた制限ではありません

下部のタブバーに高さを設定する方法はありますか?

タブが5つしかない場合でも、Androidの制限に新しい問題がありますアプリがクラッシュします

@ amrkamal1993再現と新しい問題を作成できれば、問題に対処できれば幸いです。

@PureWeenありがとうPureWeen、例外はツールバーにタイトルアイコンを追加すると発生します、私は下部のタブとツールバーを持っています、それは処理されない問題です

@ amrkamal1993下部のタブにあるすべてのテストコードは、アイコンを使用しています。

クラッシュを再現できるかどうかを確認するためにテストできる再現またはコードを投稿できますか?

このページは役に立ちましたか?
0 / 5 - 0 評価