Xamarin.Forms.TabbedPageのiOS版でタブを上側に変更するサンプル
teratailで回答したやつ。
Xamarin - Xamarin.FormsのTabbedページのUIをiOSとAndroidで揃えたい(62739)|teratail
スクショ
stackoverflowの回答を参考にしています。
ios - Positioning UITabBar at the top - Stack Overflow
Xamarin.iOS側のプロジェクトに Xamarin.Forms.Platform.iOS.TabbedRenderer
の派生クラスを作ります。
TabbedRendererはUITabBarControllerから派生しているので、ViewWillLayoutSubviews()
をoverrideして処理を追加します。
using System; using UIKit; using Xamarin.Forms; [assembly: ExportRenderer(typeof(TabbedPage), typeof(TopTabbarSample.iOS.TopTabbedRenderer))] namespace TopTabbarSample.iOS { /// <summary> /// iOSのTabbedPageのタブバーを上側に表示するためのRenderer /// </summary> public class TopTabbedRenderer : Xamarin.Forms.Platform.iOS.TabbedRenderer { // stackoverflowの回答を元にタブバーの位置を上に変更 http://stackoverflow.com/questions/29579992/positioning-uitabbar-at-the-top public override void ViewWillLayoutSubviews() { base.ViewWillLayoutSubviews(); TabBar.InvalidateIntrinsicContentSize(); var orientation = UIApplication.SharedApplication.StatusBarOrientation; nfloat tabSize = 44.0f; if(orientation == UIInterfaceOrientation.LandscapeLeft || orientation == UIInterfaceOrientation.LandscapeRight) { tabSize = 32.0f; } var tabFrame = TabBar.Frame; tabFrame.Height = tabSize; tabFrame.Y = View.Frame.Y; TabBar.Frame = tabFrame; // 強制的にぼかしを再描画する小技らしい TabBar.Translucent = false; TabBar.Translucent = true; } } }
動作確認用ページ
<?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:local="clr-namespace:TopTabbarSample" x:Class="TopTabbarSample.TopTabbarSamplePage"> <TabbedPage.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>First</x:String> <x:String>Second</x:String> <x:String>Third</x:String> </x:Array> </TabbedPage.ItemsSource> </TabbedPage>
GitHubにも置いておきます。